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

package/src/client/markdown/tree-cache.ts

@@ -0,0 +1,77 @@
+import type { IRDocument, MdastNode } from '@lincyaw/kernel'
+import type { Root } from 'hast'
+import type { Viewer } from '../viewer-state.ts'
+import { footnoteSections } from '../../domain/index.ts'
+import { markdownToHast } from './handlers.ts'
+import type { MarkdownLinks } from './handlers.ts'
+
+interface CachedTree {
+  node: MdastNode
+  key: string
+  tree: Root
+  bytes: number
+}
+
+interface ViewerTrees {
+  /** What the trees' links were made from: the sections' addresses and titles and where the footnotes are. */
+  links: string
+  nodes: Map<MdastNode, Map<string, CachedTree>>
+  recent: Map<CachedTree, true>
+  bytes: number
+}
+
+// Enough for every Markdown block of a long document, so that an edit converts only the blocks it changed.
+const TREE_LIMIT = 4096
+const TREE_BYTES = 16 << 20
+const viewerTrees = new WeakMap<Viewer, ViewerTrees>()
+const signatures = new WeakMap<IRDocument, string>()
+
+/**
+ * What a Markdown node's links read from the whole document: each section's address and title (a reference's text and
+ * target) and the sections of the footnotes. Most edits leave it as it was, and the trees of the nodes they did not
+ * touch stay; a new title or a moved section changes it.
+ */
+function linkSignature(viewer: Viewer, doc: IRDocument): string {
+  let known = signatures.get(doc)
+  if (known === undefined) {
+    const sections = doc.sections.map(section => [section.id, section.title, viewer.options.sectionHref?.(section.id) ?? ''])
+    signatures.set(doc, known = JSON.stringify([sections, [...footnoteSections(doc)]]))
+  }
+  return known
+}
+
+/**
+ * The HAST tree of a Markdown node, kept per viewer (least recently used first out) so that remounts, and the nodes a
+ * change of the document left as they were (`applyUpdate` keeps their objects), reuse it.
+ */
+export function cachedTree(viewer: Viewer, doc: IRDocument, node: MdastNode, prefix: string, links: MarkdownLinks, locale: string): Root {
+  const key = JSON.stringify([prefix, locale])
+  const signature = linkSignature(viewer, doc)
+  let cache = viewerTrees.get(viewer)
+  if (cache?.links !== signature) viewerTrees.set(viewer, cache = { links: signature, nodes: new Map(), recent: new Map(), bytes: 0 })
+  const known = cache.nodes.get(node)?.get(key)
+  if (known) {
+    cache.recent.delete(known)
+    cache.recent.set(known, true)
+    return known.tree
+  }
+  const tree = markdownToHast(node, prefix, links)
+  // Only immutable HAST survives component unmounts; no VNodes or mounted resources are retained.
+  const bytes = JSON.stringify(tree).length * 2 // UTF-16 JSON size is a soft heap estimate.
+  if (bytes > TREE_BYTES) return tree
+  const entry: CachedTree = { node, key, tree, bytes }
+  const variants = cache.nodes.get(node) ?? new Map<string, CachedTree>()
+  variants.set(key, entry)
+  cache.nodes.set(node, variants)
+  cache.recent.set(entry, true)
+  cache.bytes += bytes
+  while (cache.recent.size > TREE_LIMIT || cache.bytes > TREE_BYTES) {
+    const first = cache.recent.keys().next().value!
+    cache.recent.delete(first)
+    cache.bytes -= first.bytes
+    const old = cache.nodes.get(first.node)!
+    old.delete(first.key)
+    if (old.size === 0) cache.nodes.delete(first.node)
+  }
+  return tree
+}

package/src/client/operations.ts

@@ -0,0 +1,9 @@
+import type { Operations } from '@lincyaw/host'
+import { findView } from './registry.ts'
+import type { Viewer } from './viewer-state.ts'
+export function syncViewerWithOperations(viewer: Viewer, operations: Operations): () => void {
+  const report = () => operations.report({ type: 'go', data: { ...viewer.position.getSnapshot(), view: viewer.view.getSnapshot() } })
+  const subscriptions = [viewer.position.subscribe(report), viewer.view.subscribe(report)]
+  const off = operations.onReplay('go', { apply(data) { const view = typeof data.view === 'string' ? findView(data.view) : undefined; if (view && !view.hidden) viewer.setView(view.id); if (typeof data.section !== 'string') return; const step = Number(data.step); viewer.show({ section: data.section, step: Number.isFinite(step) && step >= 0 ? step : 0 }) } })
+  return () => { subscriptions.forEach(stop => stop()); off() }
+}

package/src/client/registry.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from 'react'
+import { createStore } from '@lincyaw/host'
+import type { Viewer } from './viewer-state.ts'
+export interface ViewDefinition { id: string, label: string, kind: 'page' | 'overlay', component: ComponentType<any>, hidden?: boolean }
+export type NodeRenderer = ComponentType<any>
+export interface ViewerAction { id: string, keys: readonly string[], run(viewer: Viewer, event?: KeyboardEvent): boolean | void, views?: readonly string[] }
+export interface ViewerLayer { id: string, component: ComponentType<any>, views?: readonly string[], scope?: 'view' | 'viewport' | 'slide' | 'bar' }
+const views = new Map<string, ViewDefinition>(), nodeRenderers = new Map<string, NodeRenderer>(), components = new Map<string, ComponentType<any>>(), actions = new Map<string, ViewerAction>(), layerMap = new Map<string, ViewerLayer>()
+export const registryRevision = createStore(0)
+const changed = () => registryRevision.set(n => n + 1)
+export function registerView(value: ViewDefinition) { views.set(value.id, value); changed() }
+export function registerNodeRenderer(key: string, value: NodeRenderer) { nodeRenderers.set(key, value); changed() }
+export function registerComponent(key: string, value: ComponentType<any>) { components.set(key, value); changed() }
+export function registerAction(value: ViewerAction) { actions.set(value.id, value); changed() }
+export function registerLayer(value: ViewerLayer) { layerMap.set(value.id, value); changed() }
+export const findView = (id: string) => views.get(id)
+export const listViews = () => [...views.values()]
+export const findNodeRenderer = (id: string) => nodeRenderers.get(id)
+export const findComponent = (id: string) => components.get(id)
+export const listActions = (view: string) => [...actions.values()].filter(item => !item.views || item.views.includes(view))
+export const listLayers = (view: string) => [...layerMap.values()].filter(item => !item.views || item.views.includes(view))

package/src/client/section-context.ts

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react'
+import type { IRSection } from '@lincyaw/kernel'
+export interface SectionContext { section: IRSection, step: number, view: string }
+export const SECTION_CONTEXT = createContext<SectionContext | undefined>(undefined)
+export function useSectionContext() { return useContext(SECTION_CONTEXT) }

package/src/client/section.ts

@@ -0,0 +1,30 @@
+import { memo, useEffect, useRef, useState } from 'react'
+import { useStore } from '@lincyaw/host'
+import { isChapterTitle, narrationAt } from '@lincyaw/kernel'
+import type { IRSection } from '@lincyaw/kernel'
+import { FINAL_STEP, sectionDiagnostics } from '../domain/index.ts'
+import { isLegacyNarration } from '../domain/document-content.ts'
+import { BlockView } from './block.ts'
+import { contentMarks } from './content-marks.ts'
+import { SECTION_CONTEXT } from './section-context.ts'
+import { viewerMessages } from './viewer-messages.ts'
+import { useViewer } from './viewer-state.ts'
+import { h } from './element.ts'
+export type SectionLayout = 'document' | 'scrolly'
+function SectionViewContent({ section, layout = 'document' }: { section: IRSection, layout?: SectionLayout }) {
+  const viewer = useViewer(); const doc = useStore(viewer.doc); const view = useStore(viewer.pageView); const [scrolled, setScrolled] = useState(0); const root = useRef<HTMLElement>(null)
+  useEffect(() => {
+    const observer = new IntersectionObserver(entries => { if (entries.some(entry => entry.isIntersecting) && viewer.view.getSnapshot() === viewer.pageView.getSnapshot() && !viewer.restoring.getSnapshot()) { const current = viewer.position.getSnapshot(); if (current.section !== section.id) viewer.go({ section: section.id, step: 0 }) } }, { rootMargin: '-10% 0px -70% 0px' })
+    if (root.current) observer.observe(root.current)
+    return () => observer.disconnect()
+  }, [section.id, viewer])
+  useEffect(() => { if (layout !== 'scrolly') return; const update = () => { const markers = [...root.current?.querySelectorAll<HTMLElement>('.pm-step') ?? []]; const step = Math.max(0, markers.filter(el => el.getBoundingClientRect().top < window.innerHeight * .6).length - 1); setScrolled(step); if (viewer.view.getSnapshot() === view) viewer.go({ section: section.id, step }) }; window.addEventListener('scroll', update, true); return () => window.removeEventListener('scroll', update, true) }, [layout, section.id, view])
+  const step = layout === 'scrolly' ? scrolled : FINAL_STEP
+  const title = isChapterTitle(doc, section) ? 'h1' : 'h2'; const t = viewerMessages().section
+  const blocks = section.blocks.filter(block => block.role === 'visual' || (block.only && !block.only.includes('lecture')) || isLegacyNarration(doc, block))
+  const findings = viewer.options.diagnostics ? sectionDiagnostics(section, doc.diagnostics) : []
+  const body = layout === 'scrolly' ? [h('div', { className: 'pm-stage pm-board' }, blocks.filter(b => b.role === 'visual').map(block => h(BlockView, { key: block.id, block, section, step }))), h('div', { className: 'pm-track' }, Array.from({ length: section.steps + 1 }, (_, k) => h('div', { key: k, className: `pm-step${k === step ? ' pm-step--current' : ''}`, 'data-step': k }, narrationAt(section, k).map(block => h(BlockView, { key: block.id, block, section, step }))))) ] : h('div', { className: 'pm-section__body' }, blocks.map(block => h(BlockView, { key: block.id, block, section, step, expanded: true })))
+  return h(SECTION_CONTEXT.Provider, { value: { section, step, view } }, h('section', { ref: root, className: `pm-section pm-section--${layout}`, 'data-section': section.id, 'data-index': section.index, 'data-step': layout === 'scrolly' ? step : undefined }, [h(title, { id: section.id, className: 'pm-section__title', tabIndex: -1, 'data-content-role': 'visual', 'data-content-label': viewerMessages().contentRoles.visual }, [contentMarks(section, 'visual', 0), section.title, viewer.options.sectionHeading?.(section, step), h('a', { className: 'header-anchor', href: `#${section.id}`, 'aria-label': t.anchor(section.title) }, '​')]), findings.length ? h('ul', { className: 'pm-diagnostics', role: 'alert' }, findings.map((finding, key) => h('li', { key, 'data-severity': finding.severity }, finding.message))) : null, body]))
+}
+
+export const SectionView = memo(SectionViewContent)

package/src/client/slidev-compat/click-directives.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+import { useStep } from '@lincyaw/host'
+import { clickVisible, resolveClicks } from '../../domain/index.ts'
+import type { ClickSpec } from '../../domain/index.ts'
+import { h } from '../element.ts'
+export const BLOCK_CLASS = 'pm-block'
+export function trackClicks(block: HTMLElement, step: number): () => void {
+  const items = [...block.querySelectorAll<HTMLElement>('[data-click-at]')]
+  const ranges = resolveClicks(items.map(el => ({ kind: el.dataset.clickKind === 'after' ? 'after' : 'click', at: Number(el.dataset.clickAt), hide: el.dataset.clickHide === 'true' })))
+  items.forEach((el, i) => el.dataset.pmClick = clickVisible(ranges[i]!, step) ? 'shown' : 'hidden')
+  return () => {}
+}
+export function VClick({ at = 1, hide = false, children }: { at?: unknown, hide?: boolean, children?: ReactNode }) { const step = useStep(); const range = resolveClicks([{ kind: 'click', at, hide }])[0]!; return h('span', { className: 'pm-v-click', 'data-pm-click': clickVisible(range, step) ? 'shown' : 'hidden' }, children) }
+export const VAfter = VClick
+export function VClicks({ every = 1, hide, children }: { every?: number, hide?: boolean, children?: ReactNode }) { const root = useRef<HTMLDivElement>(null); const step = useStep(); useEffect(() => { const items = [...root.current?.children ?? []] as HTMLElement[]; const ranges = resolveClicks(items.map((_, k): ClickSpec => ({ kind: k % every ? 'after' : 'click', hide }))); items.forEach((item, k) => item.dataset.pmClick = clickVisible(ranges[k]!, step) ? 'shown' : 'hidden') }, [step, every, hide]); return h('div', { ref: root, className: 'pm-v-clicks' }, children) }

package/src/client/slidev-compat/slide-globals.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react'
+/** Kept as an identity wrapper for component modules using the public loader API. */
+export function withSlideGlobals<T extends ComponentType<any>>(component: T): T { return component }