@lincyaw/host 0.0.0-stage → 1.0.0-rc.0

package/src/locale.ts

@@ -0,0 +1,42 @@
+import { localeOf } from '@lincyaw/kernel/contracts'
+import type { Locale } from '@lincyaw/kernel/contracts'
+import type { ComputedRef } from 'vue'
+import { computed, getCurrentInstance, inject, shallowRef } from 'vue'
+import { HOST, installed } from './key.ts'
+
+export type Catalog<T> = Record<Locale, T>
+
+const htmlLang = shallowRef<string>()
+let observed = false
+
+function observeHtmlLang(): void {
+  if (observed || typeof document === 'undefined') return
+  observed = true
+  const root = document.documentElement
+  htmlLang.value = root.lang
+  if (typeof MutationObserver !== 'undefined') {
+    new MutationObserver(() => {
+      htmlLang.value = root.lang
+    }).observe(root, { attributes: true, attributeFilter: ['lang'] })
+  }
+}
+
+function resolveLocale(fallbackLang?: string): Locale {
+  observeHtmlLang()
+  const browser = typeof navigator === 'undefined' ? undefined : navigator.language
+  return localeOf(htmlLang.value || fallbackLang) ?? localeOf(browser) ?? 'en'
+}
+
+export function currentLocale(): Locale {
+  return resolveLocale(installed.adapter?.lang)
+}
+
+export function useLocale(): ComputedRef<Locale> {
+  const host = getCurrentInstance() ? inject(HOST, undefined) : undefined
+  return computed(() => resolveLocale(host?.lang))
+}
+
+export function useMessages<T>(catalog: Catalog<T>): ComputedRef<T> {
+  const locale = useLocale()
+  return computed(() => catalog[locale.value])
+}

package/src/messages.ts

@@ -0,0 +1,51 @@
+import type { PluginStatus } from '@lincyaw/kernel/contracts'
+import type { Catalog } from './locale.ts'
+
+export interface HostMessages {
+  panels: string
+  startReport: string
+  starting: string
+  noPlugins: string
+  status: Record<PluginStatus, string>
+  because: string
+  componentError(component: string, message: string): string
+  problems(count: number): string
+  approvals(count: number): string
+  approvalsTitle: string
+  allow: string
+  deny: string
+  from(who: string): string
+}
+
+export const HOST_MESSAGES: Catalog<HostMessages> = {
+  'zh-CN': {
+    panels: '课堂与工具',
+    startReport: '启动报告',
+    starting: '内核启动中……',
+    noPlugins: '没有注册插件。',
+    status: { started: '已启动', degraded: '已降级', disabled: '已禁用', failed: '启动失败' },
+    because: '：',
+    componentError: (component, message) => `${component} 出错：${message}`,
+    problems: count => `${count} 个问题`,
+    approvals: count => `待确认 ${count}`,
+    approvalsTitle: '待确认的操作',
+    allow: '允许',
+    deny: '拒绝',
+    from: who => `来自 ${who}`,
+  },
+  'en': {
+    panels: 'Panels',
+    startReport: 'Start report',
+    starting: 'Starting the kernel…',
+    noPlugins: 'No plugins registered.',
+    status: { started: 'started', degraded: 'degraded', disabled: 'disabled', failed: 'failed to start' },
+    because: ': ',
+    componentError: (component, message) => `${component} failed: ${message}`,
+    problems: count => `${count} ${count === 1 ? 'problem' : 'problems'}`,
+    approvals: count => `Approvals ${count}`,
+    approvalsTitle: 'Operations to approve',
+    allow: 'Allow',
+    deny: 'Deny',
+    from: who => `from ${who}`,
+  },
+}

package/src/operations.ts

@@ -0,0 +1,76 @@
+import type { Operation, Unsubscribe } from '@lincyaw/kernel/contracts'
+import { ref } from 'vue'
+import type { Operations, ReplayHandler, StatusProvider, StatusRegistry } from './types.ts'
+
+export function createOperations(): Operations {
+  const listeners = new Set<(operation: Operation) => void>()
+  const handlers = new Map<string, ReplayHandler>()
+  const replaying = ref(false)
+  let unsettled = 0
+  return {
+    report(operation) {
+      if (replaying.value) return
+      for (const listener of [...listeners]) {
+        try {
+          listener(operation)
+        } catch (error) {
+          console.error('[presmium] an operations subscriber failed', error)
+        }
+      }
+    },
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
+    },
+    onReplay(type, handler): Unsubscribe {
+      handlers.set(type, handler)
+      return () => {
+        if (handlers.get(type) === handler) handlers.delete(type)
+      }
+    },
+    replay(operation, seeking = false) {
+      const handler = handlers.get(operation.type)
+      if (!handler) return false
+      unsettled++
+      replaying.value = true
+      try {
+        handler.apply(operation.data, seeking)
+      } catch (error) {
+        console.error(`[presmium] the replay of ${operation.type} failed`, error)
+      } finally {
+        setTimeout(() => {
+          if (--unsettled === 0) replaying.value = false
+        }, 0)
+      }
+      return true
+    },
+    clear() {
+      for (const [type, handler] of handlers) {
+        try {
+          handler.clear?.()
+        } catch (error) {
+          console.error(`[presmium] clearing ${type} failed`, error)
+        }
+      }
+    },
+    replaying,
+  }
+}
+
+export function createStatusRegistry(onChange?: () => void): StatusRegistry {
+  const providers = new Map<string, StatusProvider>()
+  return {
+    register(provider) {
+      providers.set(provider.id, provider)
+      onChange?.()
+      return () => {
+        if (providers.get(provider.id) !== provider) return
+        providers.delete(provider.id)
+        onChange?.()
+      }
+    },
+    list: () => [...providers.values()],
+  }
+}

package/src/panels.ts

@@ -0,0 +1,60 @@
+import type { PresenterPanel, PresenterPanels, Unsubscribe } from '@lincyaw/kernel'
+import { currentLocale } from './locale.ts'
+import { HOST_MESSAGES } from './messages.ts'
+import StartReportPanel from './StartReportPanel.vue'
+import type { Toolbar, ToolbarItem } from './types.ts'
+
+interface Item {
+  id: string
+  order?: number
+}
+
+interface Registry<T extends Item> {
+  register(item: T): Unsubscribe
+  list(): T[]
+  subscribe(listener: () => void): Unsubscribe
+}
+
+function createRegistry<T extends Item>(kind: string): Registry<T> {
+  const items = new Map<string, T>()
+  const listeners = new Set<() => void>()
+  const notify = () => listeners.forEach(listener => listener())
+  return {
+    register(item) {
+      if (items.has(item.id)) throw new Error(`${kind} ${item.id} is already registered`)
+      items.set(item.id, item)
+      notify()
+      return () => {
+        if (items.get(item.id) !== item) return
+        items.delete(item.id)
+        notify()
+      }
+    },
+    list() {
+      return [...items.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+    },
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
+    },
+  }
+}
+
+export function createPresenterPanels(): PresenterPanels {
+  const service = createRegistry<PresenterPanel>('presenter panel')
+  service.register({
+    id: 'presmium.core.start-report',
+    get title() {
+      return HOST_MESSAGES[currentLocale()].startReport
+    },
+    component: StartReportPanel,
+    order: -1,
+  })
+  return service
+}
+
+export function createToolbar(): Toolbar {
+  return createRegistry<ToolbarItem>('toolbar item')
+}

package/src/scope.ts

@@ -0,0 +1,29 @@
+import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+import { computed, defineComponent, inject, provide, ref, toValue } from 'vue'
+
+const STEP_SCOPE: InjectionKey<Readonly<Ref<number>>> = Symbol('presmium.stepScope')
+
+const NO_SCOPE = ref(0)
+
+export function provideStepScope(at: MaybeRefOrGetter<number>): void {
+  provide(STEP_SCOPE, computed(() => toValue(at)))
+}
+
+export interface StepScope {
+  readonly at: Readonly<Ref<number>>
+  step(k: number): number
+}
+
+export function useStepScope(): StepScope {
+  const at = inject(STEP_SCOPE, NO_SCOPE)
+  return { at, step: k => at.value + k }
+}
+
+export const PmStepScope = defineComponent({
+  name: 'PmStepScope',
+  props: { at: { type: Number, default: 0 } },
+  setup(props, { slots }) {
+    provideStepScope(() => props.at)
+    return () => slots.default?.()
+  },
+})

package/src/server.ts

@@ -0,0 +1,173 @@
+import { SESSION } from '@lincyaw/kernel/contracts'
+import type { ApprovalRequest, Member, ServiceToken, Unsubscribe } from '@lincyaw/kernel/contracts'
+import type { Ref } from 'vue'
+import { computed, shallowRef, watch } from 'vue'
+import { currentLocale } from './locale.ts'
+import type { Navigation, NavigationPosition, ServerClient, StatusRegistry, ViewRole } from './types.ts'
+
+export const SERVER_PATH = '/__presmium/presmium.server'
+
+const UNAVAILABLE: ServerClient = {
+  available: false,
+  member: computed(() => undefined),
+  fetch: () => Promise.reject(new Error('no Presmium server serves this page')),
+  events() {
+    throw new Error('no Presmium server serves this page')
+  },
+}
+
+const current = shallowRef<ServerClient>(UNAVAILABLE)
+const documents = new WeakMap<ServerClient, string>()
+
+const facade: ServerClient = {
+  get available() {
+    return current.value.available
+  },
+  get member() {
+    return current.value.member
+  },
+  fetch: (plugin, path, init) => current.value.fetch(plugin, path, init),
+  events: (plugin, path) => current.value.events(plugin, path),
+}
+
+export function useServer(): ServerClient {
+  return facade
+}
+
+export function provideServer(client: ServerClient | undefined): void {
+  current.value = client ?? UNAVAILABLE
+}
+
+function documentHeader(document: string): string {
+  return encodeURIComponent(document)
+}
+
+export function createServerClient(options: { document?: string } = {}): ServerClient {
+  const document = options.document ?? ''
+  const member = shallowRef<Member>()
+  const url = (plugin: string, path: string) => `/__presmium/${plugin}/${path.replace(/^\//, '')}`
+  const client: ServerClient = {
+    available: true,
+    member: computed(() => member.value),
+    fetch(plugin, path, init = {}) {
+      const headers = new Headers(init.headers)
+      headers.set('Presmium-Document', documentHeader(document))
+      if (!headers.has('Accept-Language')) headers.set('Accept-Language', currentLocale())
+      return fetch(url(plugin, path), { ...init, headers })
+    },
+    events(plugin, path) {
+      const target = url(plugin, path)
+      return new EventSource(`${target}${target.includes('?') ? '&' : '?'}document=${documentHeader(document)}`)
+    },
+  }
+  void fetch(`${SERVER_PATH}/hello`, { headers: { 'Presmium-Document': documentHeader(document) } })
+    .then(response => (response.ok ? response.json() : response.text().then(() => undefined)))
+    .then((hello: { member?: Member } | undefined) => {
+      member.value = hello?.member
+    })
+    .catch(() => undefined)
+  documents.set(client, document)
+  return client
+}
+
+export interface PendingApproval {
+  id: string
+  request: ApprovalRequest
+}
+
+export interface ApprovalState {
+  pending: Ref<PendingApproval[]>
+  answer(id: string, allow: boolean): Promise<void>
+}
+
+const pending = shallowRef<PendingApproval[]>([])
+let answering: (id: string, allow: boolean) => Promise<void> = async () => {}
+
+export const approvals: ApprovalState = {
+  pending,
+  answer: (id, allow) => answering(id, allow),
+}
+
+function roleOf(position: NavigationPosition): ViewRole {
+  if (position.view === 'presenter') return 'presenter'
+  if (position.view === 'present') return 'audience'
+  if (position.view !== undefined) return 'reader'
+  return typeof location !== 'undefined' && /\/presenter(?:\/|$)/.test(location.pathname) ? 'presenter' : 'audience'
+}
+
+export function connectControl(client: ServerClient, host: {
+  navigation: Navigation
+  status: StatusRegistry
+  service<T>(token: ServiceToken<T>): T | undefined
+}): Unsubscribe {
+  const { navigation, status } = host
+  const document = documents.get(client) ?? ''
+  const id = Math.random().toString(36).slice(2, 12)
+  const post = (body: Record<string, unknown>) => fetch(`${SERVER_PATH}/control`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', 'Presmium-Document': documentHeader(document) },
+    body: JSON.stringify({ window: id, ...body }),
+  }).then(async response => ({ ok: response.ok, status: response.status, text: await response.text() }))
+  answering = async (approval, allow) => {
+    const response = await post({ type: 'answer', id: approval, allow })
+    if (!response.ok) throw new Error(`the server did not take the answer (${response.status})`)
+    pending.value = pending.value.filter(p => p.id !== approval)
+  }
+  const source = new EventSource(`${SERVER_PATH}/control?window=${id}&document=${documentHeader(document)}`)
+  const on = <T>(event: string, handle: (data: T) => void) => source.addEventListener(event, (message) => {
+    try {
+      handle(JSON.parse((message as MessageEvent<string>).data) as T)
+    } catch (error) {
+      console.error(`[presmium] control channel: bad ${event} message`, error)
+    }
+  })
+  on<PendingApproval>('approval', (approval) => {
+    if (!pending.value.some(p => p.id === approval.id)) pending.value = [...pending.value, approval]
+  })
+  on<{ id: string }>('settled', (settled) => {
+    pending.value = pending.value.filter(p => p.id !== settled.id)
+  })
+  on<NavigationPosition>('go', position => navigation.go(position))
+  on<{ action: 'start' | 'end', name?: string }>('session', ({ action, name }) => {
+    const session = host.service(SESSION)
+    if (!session) return
+    void (action === 'start' ? session.create(name ?? '') : session.end()).catch((error: unknown) => {
+      console.error('[presmium] the classroom command failed', error)
+    })
+  })
+
+  let reported = ''
+  const report = () => {
+    const position = navigation.position.value
+    const summaries = Object.fromEntries(status.list().map((provider) => {
+      try {
+        return [provider.id, provider.read()]
+      } catch {
+        return [provider.id, null]
+      }
+    }))
+    const body = JSON.stringify({ position, role: roleOf(position), status: summaries })
+    if (body === reported) return
+    reported = body
+    void post({ type: 'report', ...JSON.parse(body) as Record<string, unknown> }).catch(() => undefined)
+  }
+  source.addEventListener('open', () => {
+    reported = ''
+    report()
+  })
+  let soon: ReturnType<typeof setTimeout> | undefined
+  const stopWatch = watch(() => navigation.position.value, () => {
+    soon ??= setTimeout(() => {
+      soon = undefined
+      report()
+    }, 200)
+  }, { deep: true })
+  const timer = setInterval(report, 1000)
+  return () => {
+    stopWatch()
+    clearTimeout(soon)
+    clearInterval(timer)
+    source.close()
+    pending.value = []
+  }
+}

package/src/session.ts

@@ -0,0 +1,34 @@
+import { SESSION } from '@lincyaw/kernel'
+import type { SessionService, SessionSnapshot } from '@lincyaw/kernel'
+import type { ComputedRef, Ref } from 'vue'
+import { computed, getCurrentScope, onScopeDispose, shallowRef, watchEffect } from 'vue'
+import { useService } from './host.ts'
+
+export function useSessionSnapshot(): { session: ComputedRef<SessionService | undefined>, snapshot: Readonly<Ref<SessionSnapshot | undefined>> } {
+  const session = useService(SESSION)
+  const snapshot = shallowRef<SessionSnapshot>()
+  watchEffect((onCleanup) => {
+    const current = session.value
+    snapshot.value = current?.snapshot()
+    if (current) onCleanup(current.subscribe(next => snapshot.value = next))
+  })
+  return { session, snapshot }
+}
+
+const groups = new Map<string, Ref<symbol[]>>()
+
+export function claimFirst(group: string): { owns: Readonly<Ref<boolean>>, release(): void } {
+  let owners = groups.get(group)
+  if (!owners) {
+    owners = shallowRef<symbol[]>([])
+    groups.set(group, owners)
+  }
+  const list = owners
+  const token = Symbol(group)
+  list.value = [...list.value, token]
+  const release = () => {
+    list.value = list.value.filter(t => t !== token)
+  }
+  if (getCurrentScope()) onScopeDispose(release)
+  return { owns: computed(() => list.value[0] === token), release }
+}

package/src/shared.ts

@@ -0,0 +1,85 @@
+import type { Ref } from 'vue'
+import { effectScope, ref, toRaw, watch } from 'vue'
+import type { SharedStateScope, SyncPublish, SyncTransport, SyncTransports } from './types.ts'
+import { joinWindows } from './windows.ts'
+
+interface Channel {
+  name: string
+  receive(patch: Record<string, unknown>): void
+  value(): unknown
+  publishers: Map<SyncTransport, SyncPublish>
+}
+
+export interface SharedStates {
+  sharedState<T>(key: string, initial: T, scope: SharedStateScope): Ref<T>
+  transports: SyncTransports
+}
+
+const plain = (value: unknown): unknown => value === undefined ? undefined : JSON.parse(JSON.stringify(toRaw(value)))
+
+export function createSharedStates(deck: string): SharedStates {
+  const states = new Map<string, Ref<unknown>>()
+  const channels = new Map<string, Channel>()
+  const transports = new Set<SyncTransport>()
+  const detached = effectScope(true)
+
+  const connect = (transport: SyncTransport, channel: Channel) => {
+    const publish = transport.connect(channel.name, channel.receive, { value: channel.value() }, false)
+    if (publish) channel.publishers.set(transport, publish)
+  }
+
+  function create(id: string, initial: unknown, scope: SharedStateScope): Ref<unknown> {
+    const state = ref(plain(initial))
+    if (scope === 'view') return state
+    const name = `presmium.shared:${deck}:${id}`
+    let from: 'window' | 'remote' | undefined
+    let changed = false
+    const apply = (value: unknown, source: 'window' | 'remote') => {
+      from = source
+      state.value = value
+      from = undefined
+    }
+    const windows = joinWindows(name, value => apply(value, 'window'), () => changed ? plain(state.value) : undefined)
+    const channel: Channel = {
+      name,
+      receive(patch) {
+        if ('value' in patch) apply(patch.value, 'remote')
+      },
+      value: () => plain(state.value),
+      publishers: new Map(),
+    }
+    watch(state, (value) => {
+      changed = true
+      const data = plain(value)
+      if (from === undefined) windows?.send(data)
+      channel.publishers.forEach(publish => publish({ value: data }, from !== undefined))
+    }, { deep: true, flush: 'sync' })
+    if (scope === 'remote') {
+      channels.set(id, channel)
+      transports.forEach(transport => connect(transport, channel))
+    }
+    return state
+  }
+
+  return {
+    sharedState<T>(key: string, initial: T, scope: SharedStateScope): Ref<T> {
+      const id = `${scope}:${key}`
+      let state = states.get(id)
+      if (!state) {
+        state = detached.run(() => create(id, initial, scope))!
+        states.set(id, state)
+      }
+      return state as Ref<T>
+    },
+    transports: {
+      add(transport) {
+        transports.add(transport)
+        channels.forEach(channel => connect(transport, channel))
+        return () => {
+          transports.delete(transport)
+          channels.forEach(channel => channel.publishers.delete(transport))
+        }
+      },
+    },
+  }
+}

package/src/types.ts

@@ -0,0 +1,107 @@
+import type { Ref } from 'vue'
+import { defineService } from '@lincyaw/kernel/contracts'
+import type { Cursor, Member, Operation, PresentationMode, ServiceToken, StartReport, Unsubscribe } from '@lincyaw/kernel/contracts'
+import type { IconName } from '@lincyaw/design'
+
+export type ViewRole = 'audience' | 'presenter' | 'reader'
+
+export type SharedStateScope = 'view' | 'local' | 'remote'
+
+export interface HostAdapter {
+  readonly mode: PresentationMode
+  readonly lang?: string
+  useCursor(): Readonly<Ref<Cursor>>
+  useStep(): Readonly<Ref<number>>
+  useViewRole(): Readonly<Ref<ViewRole>>
+  useStaticRender(): Readonly<Ref<boolean>>
+  useSectionConfig(pluginId: string): Readonly<Ref<Record<string, unknown>>>
+  useSharedState<T>(key: string, initial: T, scope: SharedStateScope): Ref<T>
+  getService<T>(token: ServiceToken<T>): T | undefined
+  startReport(): StartReport | undefined
+  useDarkMode?(): Ref<boolean>
+}
+
+export type SyncPublish = (state: Readonly<Record<string, unknown>>, fromRemote: boolean) => void
+
+export interface SyncTransport {
+  connect(
+    channel: string,
+    receive: (patch: Record<string, unknown>) => void,
+    state: Readonly<Record<string, unknown>>,
+    persist: boolean,
+  ): SyncPublish | undefined
+}
+
+export interface SyncTransports {
+  add(transport: SyncTransport): Unsubscribe
+}
+
+export const SYNC_TRANSPORTS = defineService<SyncTransports>('presmium.syncTransports')
+
+export interface NavigationPosition extends Cursor {
+  view?: string
+  section?: string
+}
+
+export interface Navigation {
+  readonly position: Readonly<Ref<NavigationPosition>>
+  go(position: NavigationPosition): void
+}
+
+export const NAVIGATION = defineService<Navigation>('presmium.navigation')
+
+export type ToolbarSlot = 'tools' | 'settings' | 'status'
+
+export type ToolbarPlace = 'bar' | 'status'
+
+export interface ToolbarItem {
+  id: string
+  title: string
+  component: unknown
+  order?: number
+  slot?: ToolbarSlot
+  icon?: IconName
+}
+
+export interface Toolbar {
+  register(item: ToolbarItem): Unsubscribe
+  list(): ToolbarItem[]
+  subscribe(listener: () => void): Unsubscribe
+}
+
+export const TOOLBAR = defineService<Toolbar>('presmium.toolbar')
+
+export interface ServerClient {
+  readonly available: boolean
+  readonly member: Readonly<Ref<Member | undefined>>
+  fetch(plugin: string, path: string, init?: RequestInit): Promise<Response>
+  events(plugin: string, path: string): EventSource
+}
+
+export interface StatusProvider {
+  id: string
+  read(): unknown
+}
+
+export interface StatusRegistry {
+  register(provider: StatusProvider): Unsubscribe
+  list(): StatusProvider[]
+}
+
+export const STATUS = defineService<StatusRegistry>('presmium.status')
+
+export interface ReplayHandler {
+  apply(data: Record<string, unknown>, seeking: boolean): void
+  clear?(): void
+}
+
+export interface Operations {
+  report(operation: Operation): void
+  subscribe(listener: (operation: Operation) => void): Unsubscribe
+  onReplay(type: string, handler: ReplayHandler): Unsubscribe
+  replay(operation: Operation, seeking?: boolean): boolean
+  clear(): void
+  readonly replaying: Ref<boolean>
+}
+
+export const OPERATIONS = defineService<Operations>('presmium.operations')

package/src/vue-shim.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent
+  export default component
+}