@lincyaw/workbench 0.0.0-stage → 0.1.0

package/src/preview.ts

@@ -0,0 +1,59 @@
+import { isPreviewEnvelope, PREVIEW_PARAM, PREVIEW_PROTOCOL, previewEnvelope, readPreviewReport } from '@lincyaw/kernel'
+import type { PreviewCommand, PreviewReport } from '@lincyaw/kernel'
+
+export interface PreviewHandlers {
+  report(report: PreviewReport): void
+  mismatch?(version: number): void
+}
+
+export interface PreviewConnection {
+  readonly src: string
+  readonly nonce: string
+  readonly ready: boolean
+  send(command: PreviewCommand): void
+  dispose(): void
+}
+
+function nonce(): string {
+  return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}${Math.random().toString(36).slice(2)}`
+}
+
+export function connectPreview(frame: () => HTMLIFrameElement | null, address: string, handlers: PreviewHandlers): PreviewConnection {
+  const url = new URL(address)
+  const own = nonce()
+  url.searchParams.set(PREVIEW_PARAM, own)
+  const origin = url.origin
+  const latest = new Map<string, PreviewCommand>()
+  let ready = false
+  const post = (command: PreviewCommand) => frame()?.contentWindow?.postMessage(previewEnvelope(own, command), origin)
+  const listener = (event: MessageEvent) => {
+    const window_ = frame()?.contentWindow
+    if (!window_ || event.source !== window_ || event.origin !== origin) return
+    if (isPreviewEnvelope(event.data, own) && event.data.version !== PREVIEW_PROTOCOL) {
+      handlers.mismatch?.(event.data.version)
+      return
+    }
+    const report = readPreviewReport(event.data, own)
+    if (!report) return
+    if (report.type === 'ready') {
+      ready = true
+      for (const command of latest.values()) post(command)
+    }
+    handlers.report(report)
+  }
+  window.addEventListener('message', listener)
+  return {
+    src: url.href,
+    nonce: own,
+    get ready() {
+      return ready
+    },
+    send(command) {
+      latest.set(command.type, command)
+      if (ready) post(command)
+    },
+    dispose() {
+      window.removeEventListener('message', listener)
+    },
+  }
+}

package/src/react.tsx

@@ -0,0 +1,59 @@
+import { createContext, useContext, useEffect, useSyncExternalStore } from 'react'
+import type { ReactNode } from 'react'
+import { MESSAGES } from './messages.ts'
+import type { WorkbenchMessages } from './messages.ts'
+import type { Workbench, WorkbenchState } from './store.ts'
+import { PmButton, PmDialog, PmNotice } from './components.tsx'
+
+const WORKBENCH = createContext<Workbench | undefined>(undefined)
+
+export function WorkbenchProvider({ workbench, children, protectChanges = true }: { workbench: Workbench, children?: ReactNode, protectChanges?: boolean }) {
+  return <WORKBENCH.Provider value={workbench}>{children}{protectChanges && <UnsavedChanges />}</WORKBENCH.Provider>
+}
+
+function UnsavedChanges() {
+  const workbench = useWorkbenchStore()
+  const files = useWorkbench(state => state.leaving)
+  const saving = useWorkbench(state => state.leaveSaving)
+  const failed = useWorkbench(state => state.leaveFailed)
+  const t = useMessages()
+  useEffect(() => {
+    const beforeUnload = (event: BeforeUnloadEvent) => {
+      if (!workbench.state.open.some(file => file.dirty)) return
+      event.preventDefault()
+      event.returnValue = ''
+    }
+    window.addEventListener('beforeunload', beforeUnload)
+    const refreshFiles = () => { void workbench.checkDisk() }
+    window.addEventListener('focus', refreshFiles)
+    return () => {
+      window.removeEventListener('beforeunload', beforeUnload)
+      window.removeEventListener('focus', refreshFiles)
+    }
+  }, [workbench])
+  return <PmDialog open={Boolean(files)} label={t.saveChanges} closeLabel={t.close} onClose={() => void workbench.resolveLeave('cancel')}>
+    <p>{t.unsavedFiles}</p>
+    <ul>{files?.map(path => <li key={path}>{path}</li>)}</ul>
+    {failed && <PmNotice tone="danger">{t.saveBeforeLeavingFailed}</PmNotice>}
+    <div className="pmw-notice__actions">
+      <PmButton disabled={saving} onClick={() => void workbench.resolveLeave('cancel')}>{t.cancel}</PmButton>
+      <PmButton disabled={saving} onClick={() => void workbench.resolveLeave('discard')}>{t.discardChanges}</PmButton>
+      <PmButton disabled={saving} variant="primary" onClick={() => void workbench.resolveLeave('save')}>{t.save}</PmButton>
+    </div>
+  </PmDialog>
+}
+
+export function useWorkbenchStore(): Workbench {
+  const workbench = useContext(WORKBENCH)
+  if (!workbench) throw new Error('a workbench panel is drawn outside WorkbenchProvider')
+  return workbench
+}
+
+export function useWorkbench<T>(select: (state: WorkbenchState) => T): T {
+  const workbench = useWorkbenchStore()
+  return useSyncExternalStore(workbench.subscribe, () => select(workbench.getState()))
+}
+
+export function useMessages(): WorkbenchMessages {
+  return MESSAGES[useWorkbench(state => state.locale)]
+}

package/src/service.ts

@@ -0,0 +1,82 @@
+import type { FocusReport } from '@lincyaw/kernel'
+import type { DocumentOperation, DocumentsAnswer, ErrorAnswer, FilesAnswer, FocusAnswer, HistoryRevision, IrAnswer, IrEvent, OperationAnswer, PreviewAnswer, RevertAnswer, ReviewEnd, ReviewFollowed, ReviewView, SavedAnswer, SourceAnswer, UncommittedFile, WorkbenchAnswer } from './api.ts'
+
+export class ServiceError extends Error {
+  readonly status: number
+  readonly answer: ErrorAnswer
+  constructor(status: number, answer: ErrorAnswer) {
+    super(answer.error ?? answer.detail ?? answer.title ?? `HTTP ${status}`)
+    this.status = status
+    this.answer = answer
+  }
+}
+
+export interface WorkspaceClient {
+  documents(document?: string): Promise<DocumentsAnswer>
+  operate(operation: DocumentOperation): Promise<OperationAnswer>
+  files(document: string): Promise<FilesAnswer>
+  source(document: string, path: string): Promise<SourceAnswer>
+  save(document: string, path: string, content: string, base: string): Promise<SavedAnswer>
+  ir(document: string): Promise<IrAnswer>
+  preview(document: string): Promise<PreviewAnswer>
+  workbench(): Promise<WorkbenchAnswer>
+  focus(document: string, focus?: FocusReport[]): Promise<FocusAnswer>
+  events(document: string, revision: (event: IrEvent) => void, failed?: () => void): () => void
+  review(document: string, followed: (event: ReviewFollowed) => void): () => void
+  accept(document: string, body: { reject?: string[], message?: string }): Promise<{ ended: ReviewEnd }>
+  reject(document: string, paths?: string[]): Promise<ReviewFollowed>
+  restore(document: string, step: string): Promise<{ review: ReviewView }>
+  changes(document: string): Promise<{ files: UncommittedFile[] }>
+  commit(document: string, message: string, paths?: string[]): Promise<unknown>
+  discard(document: string, paths?: string[]): Promise<unknown>
+  revisions(document: string): Promise<{ revisions: HistoryRevision[] }>
+  revert(document: string, id: string): Promise<RevertAnswer>
+}
+
+export function workspaceClient(base = 'api/presmium/'): WorkspaceClient {
+  const url = (path: string, document?: string, query: Record<string, string> = {}) => {
+    const address = new URL(`${base}${path}`, globalThis.document.baseURI)
+    if (document !== undefined) address.searchParams.set('document', document)
+    for (const [name, value] of Object.entries(query)) address.searchParams.set(name, value)
+    return address.href
+  }
+  const call = async <T>(address: string, init?: RequestInit): Promise<T> => {
+    const response = await fetch(address, { credentials: 'same-origin', ...init })
+    const data = await response.json().catch(() => ({})) as T & ErrorAnswer
+    if (!response.ok) throw new ServiceError(response.status, data)
+    return data
+  }
+  const post = <T>(address: string, body: unknown) => call<T>(address, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+  const follow = <T>(address: string, name: string, on: (data: T) => void, failed?: () => void) => {
+    const source = new EventSource(address)
+    source.addEventListener(name, (event) => {
+      try {
+        on(JSON.parse((event as MessageEvent<string>).data) as T)
+      } catch {
+      }
+    })
+    if (failed) source.addEventListener('error', failed)
+    return () => source.close()
+  }
+  return {
+    documents: document => call(url('documents', document)),
+    operate: operation => post(url('documents'), operation),
+    files: document => call(url('files', document)),
+    source: (document, path) => call(url('source', document, { path })),
+    save: (document, path, content, base) => post(url('source', document), { path, content, base }),
+    ir: document => call(url('ir', document)),
+    preview: document => call(url('preview', document)),
+    workbench: () => call(url('workbench')),
+    focus: (document, focus) => focus === undefined ? call(url('focus', document)) : post(url('focus'), { document, focus }),
+    events: (document, revision, failed) => follow(url('ir/events', document), 'revision', revision, failed),
+    review: (document, followed) => follow(url('review', document), 'review', followed),
+    accept: (document, body) => post(url('review/accept', document), body),
+    reject: (document, paths) => post(url('review/reject', document), paths ? { paths } : {}),
+    restore: (document, step) => post(url('review/restore', document), { step }),
+    changes: document => call(url('changes', document)),
+    commit: (document, message, paths) => post(url('changes/commit', document), { message, ...paths ? { paths } : {} }),
+    discard: (document, paths) => post(url('changes/discard', document), paths ? { paths } : {}),
+    revisions: document => call(url('revisions', document, { limit: '50' })),
+    revert: (document, id) => post(url('revisions/revert', document), { id }),
+  }
+}