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

package/src/viewer.ts

@@ -0,0 +1,116 @@
+import { joinWindows } from '@lincyaw/host'
+import type { IRDocument, IRSection, SourcePos } from '@lincyaw/kernel'
+import type { App, InjectionKey, Ref, ShallowRef, VNodeChild } from 'vue'
+import { computed, inject, ref, shallowRef } from 'vue'
+import { applyUpdate, clampPosition, footnoteSections, keepPosition, nextPosition, prevPosition } from './domain/index.ts'
+import type { LiveUpdate, Position } from './domain/index.ts'
+import { getView } from './registry.ts'
+
+export interface ViewerOptions {
+  renderer?: string
+  sectionHref?(id: string): string
+  sectionHeading?(section: IRSection, step: number): VNodeChild
+  diagnostics?: boolean
+  navigate?(position: Position): void
+  openPresenter?(position: Position): void
+  openSource?(source: SourcePos): void
+}
+
+export interface Viewer {
+  readonly doc: Readonly<ShallowRef<IRDocument>>
+  readonly view: Readonly<Ref<string>>
+  readonly pageView: Readonly<Ref<string>>
+  readonly position: Readonly<ShallowRef<Position>>
+  readonly restoring: Ref<boolean>
+  readonly options: ViewerOptions & { renderer: string }
+  section(id: string): IRSection | undefined
+  footnoteHref(identifier: string): string
+  go(position: Position, remote?: boolean): void
+  show(position: Position): void
+  next(): boolean
+  prev(): boolean
+  setView(id: string): void
+  update(update: LiveUpdate): void
+  replace(doc: IRDocument): void
+}
+
+export const VIEWER: InjectionKey<Viewer> = Symbol('presmium.viewer')
+
+export function footnoteId(identifier: string): string {
+  return `fn-${identifier}`
+}
+
+const CHANNEL = 'presmium.viewer.position'
+
+export function createViewer(initial: IRDocument, options: ViewerOptions = {}): Viewer {
+  const doc = shallowRef(initial)
+  const view = ref('document')
+  const pageView = ref('document')
+  const position = shallowRef<Position>(clampPosition(initial, { section: initial.sections[0]?.id ?? '', step: 0 }))
+  const restoring = ref(false)
+  const presenting = () => getView(view.value)?.kind === 'overlay'
+  const footnotes = computed(() => footnoteSections(doc.value))
+  const windows = joinWindows(`${CHANNEL}:${initial.meta.title}`, (value) => {
+    if (presenting()) viewer.go(value as Position, true)
+  }, () => undefined)
+  const replace = (next: IRDocument) => {
+    const kept = keepPosition(doc.value, next, position.value)
+    doc.value = next
+    if (kept.section !== position.value.section || kept.step !== position.value.step) position.value = kept
+  }
+
+  const viewer: Viewer = {
+    doc,
+    view,
+    pageView,
+    position,
+    restoring,
+    options: { ...options, renderer: options.renderer ?? 'web' },
+    section: id => doc.value.sections.find(s => s.id === id),
+    footnoteHref(identifier) {
+      const anchor = `#${footnoteId(identifier)}`
+      const section = footnotes.value.get(identifier)
+      return section && options.sectionHref ? `${options.sectionHref(section).split('#')[0]}${anchor}` : anchor
+    },
+    go(target, remote = false) {
+      const next = clampPosition(doc.value, target)
+      if (next.section === position.value.section && next.step === position.value.step) return
+      position.value = next
+      if (!remote && presenting()) windows?.send(next)
+    },
+    show(target) {
+      viewer.go(target)
+      if (!presenting()) restoring.value = true
+    },
+    next() {
+      const next = nextPosition(doc.value, position.value)
+      if (next) viewer.go(next)
+      return Boolean(next)
+    },
+    prev() {
+      const prev = prevPosition(doc.value, position.value)
+      if (prev) viewer.go(prev)
+      return Boolean(prev)
+    },
+    setView(id) {
+      const target = getView(id)
+      if (!target || id === view.value) return
+      view.value = id
+      if (target.kind === 'page') pageView.value = id
+      restoring.value = true
+    },
+    update: update => replace(applyUpdate(doc.value, update)),
+    replace,
+  }
+  return viewer
+}
+
+export function provideViewer(app: App, viewer: Viewer): void {
+  app.provide(VIEWER, viewer)
+}
+
+export function useViewer(): Viewer {
+  const viewer = inject(VIEWER, undefined)
+  if (!viewer) throw new Error('[presmium] no viewer: call installViewer(app, viewer) first')
+  return viewer
+}

package/src/views.ts

@@ -0,0 +1,101 @@
+import type { IRSection } from '@lincyaw/kernel'
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, provide, watch } from 'vue'
+import { decoded } from './markdown.ts'
+import { getView } from './registry.ts'
+import { createPageTracker, PAGE_TRACKER, SectionView } from './section.ts'
+import type { SectionLayout } from './section.ts'
+import { useViewer } from './viewer.ts'
+
+const sectionsProp = { sections: { type: Array as PropType<IRSection[]>, required: true } } as const
+
+export const DocumentView = defineComponent({
+  name: 'PmDocumentView',
+  props: sectionsProp,
+  setup(props) {
+    const viewer = useViewer()
+    const layout = (section: IRSection): SectionLayout => (section.hints[viewer.options.renderer]?.layout === 'scrolly' ? 'scrolly' : 'document')
+    return () => h('div', { class: 'pm-view pm-view--document' }, props.sections.map(section => h(SectionView, { key: section.id, section, layout: layout(section) })))
+  },
+})
+
+export const ScrollyView = defineComponent({
+  name: 'PmScrollyView',
+  props: sectionsProp,
+  setup(props) {
+    return () => h('div', { class: 'pm-view pm-view--scrolly' }, props.sections.map(section => h(SectionView, { key: section.id, section, layout: 'scrolly' })))
+  },
+})
+
+const frame = () => new Promise(resolve => requestAnimationFrame(resolve))
+
+export const ViewHost = defineComponent({
+  name: 'PmViewHost',
+  props: {
+    sections: { type: Array as PropType<string[]>, required: true },
+  },
+  setup(props) {
+    const viewer = useViewer()
+    const pageView = computed(() => getView(viewer.pageView.value) ?? getView('document'))
+    const isPage = () => getView(viewer.view.value)?.kind === 'page'
+    const tracker = createPageTracker((section, step) => {
+      const { position } = viewer
+      viewer.go({ section, step: step ?? (section === position.value.section ? position.value.step : 0) })
+    }, () => isPage() && !viewer.restoring.value)
+    provide(PAGE_TRACKER, tracker)
+    onBeforeUnmount(() => tracker.dispose())
+
+    const linked = () => {
+      const hash = decoded(location.hash.slice(1))
+      return props.sections.includes(hash) ? hash : undefined
+    }
+    const onHash = () => {
+      const section = linked()
+      if (section && isPage()) viewer.show({ section, step: 0 })
+    }
+    onMounted(() => {
+      window.addEventListener('hashchange', onHash)
+      if (viewer.restoring.value || props.sections.length === 0) return
+      const section = linked()
+      if (section) viewer.show({ section, step: 0 })
+      else if (!props.sections.includes(viewer.position.value.section)) viewer.go({ section: props.sections[0]!, step: 0 })
+    })
+    onBeforeUnmount(() => window.removeEventListener('hashchange', onHash))
+
+    watch(viewer.doc, async () => {
+      if (!isPage() || viewer.restoring.value) return
+      const restore = tracker.hold()
+      await nextTick()
+      restore()
+      await frame()
+      restore()
+    }, { flush: 'pre' })
+
+    watch([viewer.restoring, viewer.view], async () => {
+      if (!viewer.restoring.value || !isPage()) return
+      await nextTick()
+      await frame()
+      await frame()
+      const { position } = viewer
+      if (tracker.scrollTo(position.value)) viewer.restoring.value = false
+      else if (!props.sections.includes(position.value.section) && viewer.options.navigate) viewer.options.navigate(position.value)
+      else viewer.restoring.value = false
+    }, { immediate: true })
+
+    const sections = computed(() => props.sections.flatMap(id => viewer.section(id) ?? []))
+    return () => h('div', { 'class': 'pm-view-host', 'aria-busy': viewer.restoring.value ? 'true' : undefined }, [
+      pageView.value ? h(pageView.value.component, { sections: sections.value }) : null,
+    ])
+  },
+})
+
+export const OverlayHost = defineComponent({
+  name: 'PmOverlayHost',
+  setup() {
+    const viewer = useViewer()
+    return () => {
+      const view = getView(viewer.view.value)
+      return view?.kind === 'overlay' ? h(view.component, { key: view.id }) : null
+    }
+  },
+})