@lincyaw/render-slides 1.0.0-rc.0 → 1.0.0-rc.2

package/README.md

@@ -1,24 +1,37 @@
 # @lincyaw/render-slides
 
-Presmium's slides renderer: writes the IR as a Slidev deck and builds it, with Presmium's default theme Book (书卷). Narration becomes speaker notes, and plugin components render through the slides host adapter.
+Presmium's slides renderer: the slides are the viewer's slides page, built and served as the web form is (`@lincyaw/web`). Each section is a slide on a canvas of a fixed size, drawn in the Book (书卷) layout and scaled as a whole to the screen; plugin components render in it as on the web page. It also gives the document's exports of the slides: PDF, pictures and PowerPoint.
 
-Part of [Presmium](https://github.com/Lincyaw/presmium), which turns lectures written in MyST Markdown into web pages, slides, Jupyter notebooks and narrated lectures.
+Part of [Presmium](https://github.com/Lincyaw/presmium), which compiles canonical lecture.json teaching documents into web pages, slides, Jupyter notebooks and narrated playback.
 
 ## Install
 
 ```sh
-pnpm add -D @lincyaw/cli @lincyaw/render-slides @lincyaw/slidev-addon-core
+pnpm add -D @lincyaw/cli @lincyaw/web @lincyaw/render-slides
 ```
 
-List `@lincyaw/slidev-addon-core` in the document's `plugins`: it is the host adapter of the slides.
+`presmium build` builds the slides into `dist/slides/` when it is installed (or `--to slides`); `presmium dev --to slides` serves the slides page (`?form=slides`).
+
+The exports print the slides page in Chromium, from `playwright-chromium`, an optional peer dependency. Install it in the document's project to export:
+
+```sh
+pnpm add -D playwright-chromium
+pnpm exec playwright install chromium
+```
 
 ## Configuration
 
-In the headmatter, `renderers.slides` takes Slidev's headmatter options (`theme`, `routerMode`, `exportFilename` and others), plus `base`, `port` and `addons`. Without `theme`, the slides use the default theme; `theme: default` is Slidev's own.
+In `lecture.json`, `metadata.renderers.slides`: `base` (the site path), `port` (the dev server), `aspectRatio` (`16/9` by default; `4:3` or a number) and `canvasWidth` (980 by default), which give the canvas the slides are drawn on.
+
+A section's `{hints}` gives its slide, under `slides`: `layout` (`default`, `cover`, `center` or `full`; the first section is `cover` unless it says otherwise), `class` (classes added to the slide) and `zoom` (a scale of its content).
+
+## Exports
+
+The exporters `pdf`, `png` (a picture of each slide, or of each step) and `pptx` (a picture of each slide, its narration as the speaker notes) run as the workspace service's jobs and from `presmium-export` (`@lincyaw/addon-publish`).
 
 ## Documentation
 
-- [Author guide](https://github.com/Lincyaw/presmium/blob/main/site/guide/lecture.en.md)
+- [Author guide](https://github.com/Lincyaw/presmium/blob/main/site/guide/locales/en/lecture.json)
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lincyaw/render-slides",
-  "version": "1.0.0-rc.0",
-  "description": "Presmium's slides renderer: writes the IR as a Slidev deck and builds it, with the default theme",
+  "version": "1.0.0-rc.2",
+  "description": "Presmium's slides renderer: the viewer's slides page, built as the web form is, and its exports as PDF, pictures and PowerPoint",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -12,7 +12,6 @@
   "bugs": "https://github.com/Lincyaw/presmium/issues",
   "keywords": [
     "presmium",
-    "slidev",
     "slides",
     "renderer"
   ],
@@ -28,34 +27,24 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "src",
-    "theme"
+    "src"
   ],
   "dependencies": {
-    "@slidev/cli": "53.0.0",
-    "@slidev/theme-default": "^0.25.0",
-    "dompurify": "3.4.17",
-    "jsdom": "29.1.1",
-    "mdast-util-from-markdown": "2.1.0",
-    "mdast-util-gfm": "^3.1.0",
-    "mdast-util-to-markdown": "^2.2.0",
-    "micromark-extension-gfm": "3.0.0",
-    "shiki": "^4.5.0",
-    "vue": "^3.5.42",
-    "yaml": "^2.9.1"
+    "pptxgenjs": "4.0.1"
   },
   "peerDependencies": {
-    "@lincyaw/host": "^1.0.0-rc.0",
-    "@lincyaw/viewer": "^1.0.0-rc.0",
-    "@lincyaw/kernel": "^1.0.0-rc.0"
+    "playwright-chromium": "^1.40.0",
+    "@lincyaw/kernel": "^1.0.0-rc.2",
+    "@lincyaw/web": "^1.0.0-rc.2"
+  },
+  "peerDependenciesMeta": {
+    "playwright-chromium": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "pdf-lib": "^1.17.1",
-    "pdfjs-dist": "5.7.284",
     "playwright-chromium": "1.64.1",
-    "@lincyaw/cli": "1.0.0-rc.0",
-    "@lincyaw/kernel": "1.0.0-rc.0",
-    "@lincyaw/host": "1.0.0-rc.0",
-    "@lincyaw/viewer": "1.0.0-rc.0"
+    "@lincyaw/kernel": "1.0.0-rc.2",
+    "@lincyaw/web": "1.0.0-rc.2"
   }
 }

package/src/node/presmium.ts

@@ -1,276 +1,94 @@
-import { spawn } from 'node:child_process'
-import type { ChildProcess } from 'node:child_process'
-import { existsSync, realpathSync } from 'node:fs'
-import { copyFile, mkdir, readdir, readFile, rm, symlink, writeFile } from 'node:fs/promises'
+import { mkdir, readFile, rm } from 'node:fs/promises'
 import { createRequire } from 'node:module'
-import { dirname, join, resolve, sep } from 'node:path'
-import { fileURLToPath, pathToFileURL } from 'node:url'
-import { errorMessage, irBlocks, isRecord, nodeMdast, previewFrameAncestors, PREVIEW_REVISION } from '@lincyaw/kernel'
-import type { IRDocument, LocalAsset, MdastNode, PresmiumNodePlugin, RenderContext } from '@lincyaw/kernel'
-import { copyPublished, FONT_LICENSE, fontLicense, optimizeDeps, TYPESCRIPT_IMPORT } from '@lincyaw/kernel/node'
-import { addonDirs, hasExtension, previewDocument, slidevMarkdown } from './slidev.ts'
-import type { SlidevDeck } from './slidev.ts'
-
-export const SLIDEV_DIR = '.presmium/slides'
+import { join } from 'node:path'
+import { blockText, sectionNarration } from '@lincyaw/kernel'
+import type { ExportContext, Exporter, IRDocument, PresmiumNodePlugin } from '@lincyaw/kernel'
+import { playwrightChromium } from '@lincyaw/kernel/node'
+import { printSlides, slidesRenderer } from '@lincyaw/web/slides'
+import type { PrintingChromium, PrintOptions } from '@lincyaw/web/slides'
+import PptxGenJS from 'pptxgenjs'
+
+const { version } = createRequire(import.meta.url)('../../package.json') as { version: string }
+
+// PowerPoint measures a slide in inches, at 96 pixels each.
+const PIXELS_PER_INCH = 96
+const PICTURES = '.pictures'
+
+/** Whether the document has the slides form: its configuration names it, or names no renderer. */
+function hasSlides(doc: IRDocument): boolean {
+  const named = Object.keys(doc.config.renderers)
+  return named.length === 0 || named.includes('slides')
+}
+
+/**
+ * What the one who asked chose (`presmium-export`'s flags): `steps`, a page for every step; `slides`, the slides by number
+ * from 1; `dark`; `timeout`, how long the page may take, in milliseconds.
+ */
+function printChoices(options: Record<string, unknown>): Pick<PrintOptions, 'steps' | 'slides' | 'dark' | 'timeout'> {
+  const slides = Array.isArray(options.slides) ? options.slides.filter((n): n is number => Number.isInteger(n) && n > 0) : undefined
+  return {
+    steps: options.steps === true,
+    ...slides ? { slides } : {},
+    ...options.dark === true ? { dark: true } : {},
+    ...typeof options.timeout === 'number' && options.timeout > 0 ? { timeout: options.timeout } : {},
+  }
+}
 
-const ADDON_CORE = '@lincyaw/slidev-addon-core'
-const PREVIEW_FILE = 'preview.json'
+/** Builds the slides and prints them. */
+async function printed(ctx: ExportContext, format: 'pdf' | 'png', output: string) {
+  ctx.progress('build')
+  const dir = await ctx.build('slides')
+  ctx.progress('print')
+  const chromium = await playwrightChromium<PrintingChromium>(ctx.deckDir, import.meta.url)
+  const result = await printSlides({ dir, chromium, format, output, signal: ctx.signal, ...printChoices(ctx.options) })
+  return { ...result, doc: JSON.parse(await readFile(join(dir, 'ir.json'), 'utf8')) as IRDocument }
+}
 
-const STYLE = fileURLToPath(new URL('../deck/style.css', import.meta.url))
-const PACKAGE_DIR = fileURLToPath(new URL('../..', import.meta.url))
-const require = createRequire(import.meta.url)
-const { version } = require('../../package.json') as { version: string }
+function slidesExporter(id: string, label: Record<string, string>, run: Exporter['run']): Exporter {
+  return { id, label, available: hasSlides, run }
+}
 
 const plugin: PresmiumNodePlugin = {
   id: 'presmium.slides',
   version,
   kernel: '^1.0.0',
-  renderer: {
-    id: 'slides',
-    site: true,
-    support: (node, extensions) => node.type === 'component' && !node.plugin && !hasExtension(node, extensions) ? 'degraded' : 'full',
-    async prepare(doc, ctx) {
-      await writeDeck(ctx.workDir, ctx, slidevMarkdown(doc, ctx, ctx.workDir), doc)
-    },
-    async build(doc, ctx) {
-      const dir = ctx.workDir
-      await writeDeck(dir, ctx, slidevMarkdown(doc, ctx, dir), doc)
-      await rm(ctx.outDir, { recursive: true, force: true })
-      await slidev(['build', 'slides.md', '--out', ctx.outDir, ...base(ctx)], dir).catch((error: unknown) => {
-        throw located(error, doc, ctx)
-      })
-      ctx.report({
-        checkId: 'presmium.slides',
-        severity: 'info',
-        message: ctx.base === '/'
-          ? `Slidev deck in ${SLIDEV_DIR}/slides.md; export it with \`slidev export ${SLIDEV_DIR}/slides.md\``
-          : `Slidev deck in ${SLIDEV_DIR}/slides.md, written for the base ${ctx.base}; \`slidev export\` serves it at the root, where the local files it links are not found: export with \`presmium-export\` (@lincyaw/slidev-addon-publish)`,
-      })
-      return { outDir: ctx.outDir, skipped: [] }
-    },
-    async dev(doc, ctx) {
-      const dir = ctx.workDir
-      await writeDeck(dir, ctx, slidevMarkdown(doc, ctx, dir), doc)
-      await writeRevision(dir, ctx, doc)
-      const port = Number(ctx.config.port)
-      const server = await slidevDev(dir, [...Number.isInteger(port) && port > 0 ? ['--port', String(port)] : [], ...base(ctx)])
-      return {
-        url: server.url,
-        async update(next) {
-          const deck = slidevMarkdown(next, ctx, dir)
-          await publish(dir, deck.assets)
-          const file = join(dir, 'slides.md')
-          if (await readFile(file, 'utf8').catch(() => '') !== deck.markdown) await writeFile(file, deck.markdown)
-          await writeRevision(dir, ctx, next)
-        },
-        close: server.close,
+  renderer: slidesRenderer,
+  exporters: [
+    slidesExporter('pdf', { 'zh-CN': '幻灯片 PDF', 'en': 'Slides as PDF' }, async (ctx) => {
+      await printed(ctx, 'pdf', join(ctx.outDir, 'slides.pdf'))
+      return { files: ['slides.pdf'] }
+    }),
+    slidesExporter('png', { 'zh-CN': '幻灯片图片', 'en': 'Slides as pictures' }, async (ctx) => {
+      const { pages } = await printed(ctx, 'png', ctx.outDir)
+      return { files: pages.map(page => page.file!) }
+    }),
+    // A picture of each slide, its narration as the speaker notes.
+    slidesExporter('pptx', { 'zh-CN': '幻灯片 PowerPoint', 'en': 'Slides as PowerPoint' }, async (ctx) => {
+      const pictures = join(ctx.outDir, PICTURES)
+      await mkdir(pictures, { recursive: true })
+      try {
+        const { shape, pages, doc } = await printed(ctx, 'png', pictures)
+        ctx.progress('pptx')
+        const pptx = new PptxGenJS()
+        const [w, h] = [shape.width / PIXELS_PER_INCH, shape.height / PIXELS_PER_INCH]
+        pptx.defineLayout({ name: 'PRESMIUM', width: w, height: h })
+        pptx.layout = 'PRESMIUM'
+        pptx.title = doc.meta.title
+        const sections = new Map(doc.sections.map(section => [section.id, section]))
+        for (const page of pages) {
+          const slide = pptx.addSlide()
+          slide.addImage({ path: join(pictures, page.file!), x: 0, y: 0, w, h })
+          const section = sections.get(page.section)
+          const notes = section ? sectionNarration(section).map(blockText).join('\n\n') : ''
+          if (notes) slide.addNotes(notes)
+        }
+        await pptx.writeFile({ fileName: join(ctx.outDir, 'slides.pptx') })
+        return { files: ['slides.pptx'] }
+      } finally {
+        await rm(pictures, { recursive: true, force: true })
       }
-    },
-  },
+    }),
+  ],
 }
 
 export default plugin
-
-const hasHtml = (node: MdastNode): boolean => node.type === 'html' || (node.children ?? []).some(hasHtml)
-
-function located(error: unknown, doc: IRDocument, ctx: RenderContext): unknown {
-  const output = error instanceof SlidevError ? error.output : errorMessage(error)
-  const at = /slides\.md__slidev_(\d+)\.md(?::\d+(?::\d+)?)?\s*\n(?:\w*Error: )?([^\n]+)/.exec(output)
-  const section = at && doc.sections[Number(at[1]) - 1]
-  if (!at || !section) return error
-  const reason = at[2]!.replace(/^\w*Error: /, '').trim()
-  const raw = [...irBlocks(section.blocks)].filter(block => block.role === 'visual' && nodeMdast(block.node).some(hasHtml))
-  const source = raw.length === 1 ? raw[0]!.source : section.source
-  ctx.report({
-    checkId: 'presmium.slides',
-    severity: 'error',
-    message: `slide ${at[1]} (${section.title || section.id}) does not build: ${reason}`,
-    source: { file: source.file, line: source.line },
-  })
-  return new Error(`slidev build failed at slide ${at[1]}: ${reason}`)
-}
-
-function base(ctx: RenderContext): string[] {
-  return ctx.base !== '/' ? ['--base', ctx.base] : []
-}
-
-async function writeDeck(dir: string, ctx: RenderContext, deck: SlidevDeck, doc: IRDocument): Promise<void> {
-  await mkdir(dir, { recursive: true })
-  await writeFile(join(dir, '.gitignore'), '*\n')
-  const packages = [PACKAGE_DIR, ...addonDirs(doc, ctx)]
-  const optimize = optimizeDeps(dir, packages)
-  await writeFile(join(dir, 'vite.config.ts'), viteConfig(ctx, await vitePluginEntries(ctx, doc.config.presmium), optimize, allowed(ctx, packages)))
-  await copyFile(STYLE, join(dir, 'style.css'))
-  await rm(join(dir, 'public'), { recursive: true, force: true })
-  await mkdir(join(dir, 'public'))
-  const shared = join(ctx.deckDir, 'public')
-  for (const entry of await readdir(shared).catch(() => [])) await symlink(join(shared, entry), join(dir, 'public', entry), 'junction')
-  await publish(dir, deck.assets)
-  const license = join(dir, 'public', FONT_LICENSE)
-  if (!existsSync(join(dir, 'public', FONT_LICENSE.split('/')[0]!))) {
-    await mkdir(dirname(license), { recursive: true })
-    await writeFile(license, fontLicense(import.meta.url))
-  }
-  await rm(join(dir, 'components'), { recursive: true, force: true })
-  if (existsSync(join(ctx.deckDir, 'components'))) await symlink(join(ctx.deckDir, 'components'), join(dir, 'components'), 'junction')
-  await writePreviewSetup(dir, ctx)
-  await writeFile(join(dir, 'slides.md'), deck.markdown)
-}
-
-async function writePreviewSetup(dir: string, ctx: RenderContext): Promise<void> {
-  await rm(join(dir, 'setup'), { recursive: true, force: true })
-  await rm(join(dir, PREVIEW_FILE), { force: true })
-  const core = ctx.pluginDirs[ADDON_CORE]
-  if (!ctx.preview || !core) return
-  const agent = join(core, 'src/client/preview.ts')
-  const options = { origins: ctx.preview.origins, document: previewDocument(ctx) }
-  await mkdir(join(dir, 'setup'))
-  await writeFile(join(dir, 'setup/root.ts'), `// Generated by @lincyaw/render-slides for a preview of the workspace service; do not edit.
-import { startSlidesPreview } from ${JSON.stringify(agent)}
-
-export default function () {
-  startSlidesPreview(${JSON.stringify(options)})
-}
-`)
-}
-
-async function writeRevision(dir: string, ctx: RenderContext, doc: IRDocument): Promise<void> {
-  if (!ctx.preview) return
-  const revision = doc.meta[PREVIEW_REVISION]
-  const json = `${JSON.stringify(typeof revision === 'string' ? { revision } : {})}\n`
-  const file = join(dir, PREVIEW_FILE)
-  if (await readFile(file, 'utf8').catch(() => '') !== json) await writeFile(file, json)
-}
-
-interface VitePluginsEntry {
-  file: string
-  config: Record<string, unknown>
-}
-
-async function nodeEntry(dir: string): Promise<string | undefined> {
-  const manifest: unknown = JSON.parse(await readFile(join(dir, 'package.json'), 'utf8').catch(() => '{}'))
-  const exports = isRecord(manifest) ? manifest.exports : undefined
-  const entry = isRecord(exports) ? exports['./presmium'] : undefined
-  return typeof entry === 'string' ? resolve(dir, entry) : undefined
-}
-
-async function vitePluginEntries(ctx: RenderContext, presmium: Record<string, unknown>): Promise<VitePluginsEntry[]> {
-  if (ctx.vitePlugins.length === 0) return []
-  const entries: VitePluginsEntry[] = []
-  for (const name of ctx.plugins) {
-    const dir = ctx.pluginDirs[name]
-    const file = dir && await nodeEntry(dir)
-    if (!file) continue
-    const plugin = (await import(pathToFileURL(file).href).catch(() => ({}))).default as PresmiumNodePlugin | undefined
-    if (typeof plugin?.vitePlugins !== 'function') continue
-    const config = presmium[plugin.id]
-    entries.push({ file, config: isRecord(config) ? config : {} })
-  }
-  return entries
-}
-
-function allowed(ctx: RenderContext, packages: string[]): string[] {
-  const installed = packages.flatMap((dir) => {
-    const parts = realpathSync(dir).split(sep)
-    const at = parts.indexOf('node_modules')
-    return at < 0 ? [] : [parts.slice(0, at + 1).join(sep)]
-  })
-  return [...new Set([ctx.deckDir, ...installed])]
-}
-
-function viteConfig(ctx: RenderContext, entries: VitePluginsEntry[], optimize: { include: string[], exclude: string[] }, allow: string[]): string {
-  const imports = entries.map(({ file }, i) => `import plugin${i} from ${JSON.stringify(file)}\n`).join('')
-  const deck = JSON.stringify({ deckDir: ctx.deckDir, workspaceRoot: ctx.workspaceRoot })
-  const plugins = entries.map(({ config }, i) => `    ...(plugin${i}.vitePlugins?.({ ...deck, config: ${JSON.stringify(config)} }) ?? []),\n`).join('')
-  const server = {
-    ...ctx.server ? { proxy: { '^/__presmium/': { target: ctx.server.url, ws: true } }, fs: { allow } } : {},
-    ...ctx.preview ? { headers: { 'Content-Security-Policy': previewFrameAncestors(ctx.preview.origins) } } : {},
-  }
-  const served = Object.keys(server).length > 0 ? `  server: ${JSON.stringify(server)},\n` : ''
-  const optimized = optimize.exclude.length > 0 ? `  optimizeDeps: ${JSON.stringify(optimize)},\n` : ''
-  const preview = ctx.preview ? `    presmiumPreview(),\n` : ''
-  return `${imports}${ctx.preview ? previewPlugin() : ''}\nconst deck = ${deck}\n\nexport default {\n  cacheDir: 'node_modules/.vite',\n  plugins: [\n${preview}${plugins}  ],\n${served}${optimized}}\n`
-}
-
-function previewPlugin(): string {
-  return `import { readFileSync } from 'node:fs'
-import { fileURLToPath } from 'node:url'
-
-function presmiumPreview() {
-  const file = fileURLToPath(new URL(${JSON.stringify(`./${PREVIEW_FILE}`)}, import.meta.url))
-  const read = () => {
-    try {
-      return JSON.parse(readFileSync(file, 'utf8'))
-    } catch {
-      return {}
-    }
-  }
-  return {
-    name: 'presmium:preview',
-    configureServer(server) {
-      server.ws.on('presmium:preview', (_data, client) => client.send('presmium:revision', read()))
-      server.watcher.add(file)
-      let timer
-      server.watcher.on('change', (changed) => {
-        if (changed !== file) return
-        clearTimeout(timer)
-        timer = setTimeout(() => server.ws.send('presmium:revision', read()), 150)
-      })
-    },
-  }
-}
-`
-}
-
-async function publish(dir: string, assets: Map<string, LocalAsset>): Promise<void> {
-  for (const found of assets.values()) copyPublished(found, join(dir, 'public'))
-}
-
-function slidevBin(): string {
-  const pkg = require.resolve('@slidev/cli/package.json')
-  return join(dirname(pkg), (require(pkg) as { bin: { slidev: string } }).bin.slidev)
-}
-
-class SlidevError extends Error {
-  readonly output: string
-  constructor(message: string, output: string) {
-    super(`${message}\n${output.slice(-4000)}`)
-    this.output = output
-  }
-}
-
-function slidev(args: string[], cwd: string): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const child = spawn(process.execPath, [...TYPESCRIPT_IMPORT, slidevBin(), ...args], { cwd, stdio: ['ignore', 'pipe', 'pipe'] })
-    let output = ''
-    child.stdout.on('data', (chunk: Buffer) => output += chunk)
-    child.stderr.on('data', (chunk: Buffer) => output += chunk)
-    child.on('error', reject)
-    child.on('close', code => code === 0 ? resolve() : reject(new SlidevError(`slidev ${args[0]} exited with code ${code}`, output)))
-  })
-}
-
-function slidevDev(dir: string, args: string[]): Promise<{ url: string, close(): Promise<void> }> {
-  const child: ChildProcess = spawn(process.execPath, [...TYPESCRIPT_IMPORT, slidevBin(), 'slides.md', ...args], { cwd: dir, stdio: ['ignore', 'pipe', 'pipe'] })
-  const exited = new Promise<void>(resolve => child.once('exit', () => resolve()))
-  const close = async () => {
-    if (child.exitCode === null) child.kill('SIGTERM')
-    await exited
-  }
-  return new Promise((resolve, reject) => {
-    let output: string | undefined = ''
-    child.stderr!.on('data', (chunk: Buffer) => {
-      if (output !== undefined) output += chunk
-    })
-    child.stdout!.on('data', (chunk: Buffer) => {
-      if (output === undefined) return
-      output += chunk
-      const url = /(http:\/\/localhost:\d+\/\S*)/.exec(output.replace(/\x1B\[[\d;]*m/g, ''))?.[1]
-      if (!url) return
-      output = undefined
-      resolve({ url, close })
-    })
-    child.once('error', reject)
-    child.once('exit', code => reject(new Error(`slidev exited with code ${code}\n${output?.slice(-4000) ?? ''}`)))
-  })
-}