@lincyaw/viewer 1.0.0-rc.0 → 1.0.0-rc.2

package/src/section.ts

@@ -1,209 +0,0 @@
-import { isChapterTitle, narrationAt } from '@lincyaw/kernel'
-import type { IRBlock, IRSection } from '@lincyaw/kernel'
-import type { InjectionKey, PropType, Ref, VNodeChild } from 'vue'
-import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRef } from 'vue'
-import { BlockView } from './block.ts'
-import { SECTION_CONTEXT } from './context.ts'
-import { FINAL_STEP, sectionDiagnostics, stepAtLine } from './domain/index.ts'
-import type { Position } from './domain/index.ts'
-import { messages } from './i18n.ts'
-import { useViewer } from './viewer.ts'
-
-export type SectionLayout = 'document' | 'scrolly'
-
-export const STEP_LINE = 0.6
-
-const READ_LINE = 0.25
-
-interface Tracked {
-  el: HTMLElement
-  id(): string
-  layout(): SectionLayout
-  step: Ref<number>
-}
-
-export interface PageTracker {
-  add(section: Tracked): () => void
-  scrollTo(position: Position): boolean
-  hold(): () => void
-  dispose(): void
-}
-
-export const PAGE_TRACKER: InjectionKey<PageTracker> = Symbol('presmium.viewer.page')
-
-function markers(el: HTMLElement): HTMLElement[] {
-  return [...el.querySelectorAll<HTMLElement>('.pm-step')]
-}
-
-export function createPageTracker(report: (section: string, step?: number) => void, active: () => boolean): PageTracker {
-  const tracked = new Set<Tracked>()
-  let frame = 0
-  let restoredY: number | undefined
-  let pinned: Position | undefined
-  const resized = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(() => schedule())
-  const scrolled = () => restoredY !== undefined && Math.abs(window.scrollY - restoredY) >= 2
-
-  const update = () => {
-    frame = 0
-    const steps = window.innerHeight * STEP_LINE
-    const line = window.innerHeight * READ_LINE
-    let reading: { section: Tracked, top: number } | undefined
-    let first: { section: Tracked, top: number } | undefined
-    for (const section of tracked) {
-      if (section.layout() === 'scrolly') {
-        section.step.value = stepAtLine(markers(section.el).map(m => ({ step: Number(m.dataset.step), top: m.getBoundingClientRect().top })), steps)
-      }
-      const top = section.el.getBoundingClientRect().top
-      if (top <= line && (!reading || top > reading.top)) reading = { section, top }
-      if (!first || top < first.top) first = { section, top }
-    }
-    if (restoredY !== undefined && !scrolled()) {
-      if (pinned) place(pinned)
-      return
-    }
-    restoredY = undefined
-    pinned = undefined
-    if (!active()) return
-    const current = (reading ?? first)?.section
-    if (current) report(current.id(), current.layout() === 'scrolly' ? current.step.value : undefined)
-  }
-  const schedule = () => {
-    frame ||= requestAnimationFrame(update)
-  }
-  const place = (position: Position): boolean => {
-    const section = [...tracked].find(s => s.id() === position.section)
-    if (!section) return false
-    const marker = section.layout() === 'scrolly'
-      ? markers(section.el).filter(m => Number(m.dataset.step) <= position.step).at(-1)
-      : undefined
-    const top = marker
-      ? window.scrollY + marker.getBoundingClientRect().top - window.innerHeight * STEP_LINE + 1
-      : window.scrollY + section.el.getBoundingClientRect().top - Number.parseFloat(getComputedStyle(section.el).scrollMarginTop || '0')
-    if (Math.abs(window.scrollY - Math.max(top, 0)) >= 1) window.scrollTo({ top, behavior: 'instant' })
-    restoredY = window.scrollY
-    return true
-  }
-  const dispose = () => {
-    cancelAnimationFrame(frame)
-    frame = 0
-    resized?.disconnect()
-    window.removeEventListener('scroll', schedule)
-    window.removeEventListener('resize', schedule)
-  }
-
-  return {
-    add(section) {
-      if (tracked.size === 0) {
-        window.addEventListener('scroll', schedule, { passive: true })
-        window.addEventListener('resize', schedule)
-      }
-      tracked.add(section)
-      resized?.observe(section.el)
-      schedule()
-      return () => {
-        tracked.delete(section)
-        resized?.unobserve(section.el)
-        if (tracked.size === 0) dispose()
-      }
-    },
-    hold() {
-      const line = window.innerHeight * STEP_LINE
-      let reading: { section: Tracked, top: number } | undefined
-      for (const section of tracked) {
-        const top = section.el.getBoundingClientRect().top
-        if (top <= line && (!reading || top > reading.top)) reading = { section, top }
-      }
-      if (!reading) return () => {}
-      const { el } = reading.section
-      const above = (candidates: HTMLElement[]) => candidates.filter(c => c.getBoundingClientRect().top <= line).at(-1)
-      const anchor = reading.section.layout() === 'scrolly'
-        ? above(markers(el)) ?? el
-        : [...el.querySelectorAll<HTMLElement>('.pm-block')].find(b => b.getBoundingClientRect().top <= line && b.getBoundingClientRect().bottom > line) ?? el
-      const top = anchor.getBoundingClientRect().top
-      return () => {
-        const moved = anchor.isConnected ? anchor.getBoundingClientRect().top - top : 0
-        if (Math.abs(moved) < 1) return
-        window.scrollBy({ top: moved, behavior: 'instant' })
-        restoredY = window.scrollY
-        schedule()
-      }
-    },
-    scrollTo(position) {
-      if (!place(position)) return false
-      pinned = position
-      schedule()
-      return true
-    },
-    dispose,
-  }
-}
-
-function blockViews(blocks: IRBlock[], section: IRSection, step: number, expanded: boolean): VNodeChild[] {
-  return blocks.map(block => h(BlockView, { key: block.id, block, section, step, expanded }))
-}
-
-
-export const SectionView = defineComponent({
-  name: 'PmSectionView',
-  props: {
-    section: { type: Object as PropType<IRSection>, required: true },
-    layout: { type: String as PropType<SectionLayout>, default: 'document' },
-  },
-  setup(props) {
-    const viewer = useViewer()
-    const tracker = inject(PAGE_TRACKER, undefined)
-    const el = shallowRef<HTMLElement>()
-    const scrolled = ref(0)
-    const step = computed(() => (props.layout === 'scrolly' ? scrolled.value : FINAL_STEP))
-    provide(SECTION_CONTEXT, { section: toRef(props, 'section'), step, view: viewer.pageView })
-
-    let untrack: (() => void) | undefined
-    onMounted(() => {
-      if (!el.value || !tracker) return
-      untrack = tracker.add({ el: el.value, id: () => props.section.id, layout: () => props.layout, step: scrolled })
-    })
-    onBeforeUnmount(() => untrack?.())
-
-    const heading = computed(() => (isChapterTitle(viewer.doc.value, props.section) ? 'h1' : 'h2'))
-
-    return () => {
-      const { section, layout } = props
-      const t = messages().section
-      const current = step.value
-      const problems = viewer.options.diagnostics ? sectionDiagnostics(section, viewer.doc.value.diagnostics) : []
-      const body = layout === 'scrolly' && section.blocks.some(b => b.role === 'visual')
-        ? [
-            h('div', { class: 'pm-stage pm-board' }, blockViews(section.blocks.filter(b => b.role === 'visual'), section, current, false)),
-            h('div', { class: 'pm-track' }, Array.from({ length: section.steps + 1 }, (_, k) => {
-              const narration = narrationAt(section, k)
-              return h('div', { 'key': k, 'class': ['pm-step', { 'pm-step--current': k === current, 'pm-step--bare': narration.length === 0 }], 'data-step': k }, blockViews(narration, section, current, false))
-            })),
-          ]
-        : [h('div', { class: 'pm-section__body' }, blockViews(section.blocks, section, current, true))]
-      return h('section', {
-        'ref': el,
-        'class': ['pm-section', `pm-section--${layout}`, { 'pm-section--error': problems.some(p => p.severity === 'error') }],
-        'data-section': section.id,
-        'data-index': section.index,
-        'data-step': layout === 'scrolly' ? current : undefined,
-      }, [
-        h(heading.value, { id: section.id, class: 'pm-section__title', tabindex: -1 }, [
-          section.title,
-          viewer.options.sectionHeading?.(section, current) ?? null,
-          h('a', { 'class': 'header-anchor', 'href': `#${section.id}`, 'aria-label': t.anchor(section.title) }, '​'),
-        ]),
-        viewer.options.openSource
-          ? h('p', { class: 'pm-section__source' }, h('button', {
-              type: 'button',
-              title: t.sourceTitle(`${section.source.file}:${section.source.line}`),
-              onClick: () => viewer.options.openSource!(section.source),
-            }, t.openSource))
-          : null,
-        problems.length
-          ? h('ul', { class: 'pm-diagnostics', role: 'alert' }, problems.map((p, i) => h('li', { 'key': i, 'data-severity': p.severity }, `${p.severity}: ${p.message}`)))
-          : null,
-        ...body,
-      ])
-    }
-  },
-})

package/src/viewer.ts

@@ -1,116 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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
-    }
-  },
-})