chalk-talk 0.13.0 → 0.14.1

package/scripts/browser.mjs

@@ -2,7 +2,7 @@
 // reads back what the page wrote in <pre id="chalk-<mode>">. It talks to the browser over the DevTools protocol on a
 // pipe (--remote-debugging-pipe) and waits for that <pre> itself: --dump-dom hangs on some machines, the pipe does not.
 // The browsers are tried in order; one that does not start or does not answer in time gives way to the next.
-// Used by build.mjs and by the repository's tools. Node only, no dependency.
+// Part of the skills kit (chalk-talk/kit): copied into each skill by its tools/assets.mjs. Node only, no dependency.
 import { execFileSync, spawn } from 'node:child_process'
 import { existsSync, mkdtempSync, readdirSync, rmSync } from 'node:fs'
 import { createRequire } from 'node:module'
@@ -121,7 +121,7 @@ async function start(exe) {
 
 /** Opens `file` at `#mode` (with `query`) in a tab of its own and returns what the page wrote, parsed — { error } when
  * the page could not be opened or wrote nothing in `ms`. */
-async function open(b, file, mode, query, ms) {
+async function open(b, file, mode, query, ms, shot) {
   const until = Date.now() + ms
   let sessionId
   // Every call waits at most until the page's time is up: a page busy forever does not hold the build.
@@ -133,8 +133,24 @@ async function open(b, file, mode, query, ms) {
   const { targetId } = await ask('Target.createTarget', { url: 'about:blank' })
   try {
     ;({ sessionId } = await ask('Target.attachToTarget', { targetId, flatten: true }))
-    const nav = await ask('Page.navigate', { url: `${pathToFileURL(file).href}${query ? `?${query}` : ''}#${mode}` })
+    if (shot) await ask('Emulation.setDeviceMetricsOverride', { width: shot.width, height: shot.height, deviceScaleFactor: 1, mobile: false })
+    if (shot?.scheme) await ask('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-color-scheme', value: shot.scheme }] })
+    const nav = await ask('Page.navigate', { url: `${pathToFileURL(file).href}${query ? `?${query}` : ''}${mode ? `#${mode}` : ''}` })
     if (nav.errorText) return { error: `the page did not open (${nav.errorText})` }
+    // A picture of the page as it is once loaded, its fonts in and (when it says so) data-ready on the body.
+    if (shot) {
+      const ready = "document.readyState === 'complete' && document.fonts.status === 'loaded' && (document.body?.dataset.ready ?? '1') === '1'"
+      while (Date.now() < until) {
+        const r = await ask('Runtime.evaluate', { expression: ready, returnByValue: true })
+        if (r.result?.value === true) {
+          await pause(shot.settle ?? 400)
+          const { data } = await ask('Page.captureScreenshot', { format: 'png' })
+          return { png: `data:image/png;base64,${data}` }
+        }
+        await pause(50)
+      }
+      throw new BrowserFailed(`the page was not ready in ${Math.round(ms / 1000)} s`)
+    }
     while (Date.now() < until) {
       const r = await ask('Runtime.evaluate', { expression: `document.getElementById('chalk-${mode}')?.textContent ?? null`, returnByValue: true })
       const text = r.result?.value
@@ -149,7 +165,8 @@ async function open(b, file, mode, query, ms) {
   }
 }
 
-/** Runs `jobs` ({ file, mode, query }) in one browser and returns their results in order, with the browser used —
+/** Runs `jobs` ({ file, mode, query, shot }) in one browser — `shot: { width, height }` answers with { png } (a
+ * picture of the page once loaded) instead of what the page wrote — and returns their results in order, with the browser used —
  * `results` null when there is no browser at all. A browser that fails (does not start, stops, or a page gets no answer
  * in `timeout` seconds) gives way to the next one, which runs every job again; when none works, each result is
  * { error } naming what was tried. */
@@ -162,7 +179,7 @@ export async function runPages(jobs, { timeout = 20 } = {}) {
     try {
       b = await start(exe)
       const results = []
-      for (const { file, mode, query = '' } of jobs) results.push(await open(b, file, mode, query, timeout * 1000))
+      for (const { file, mode = '', query = '', shot } of jobs) results.push(await open(b, file, mode, query, timeout * 1000, shot))
       return { results, used: exe, tried }
     } catch (e) {
       tried.push(`${exe}: ${e instanceof BrowserFailed ? e.message : e.message.split('\n')[0]}`)

package/scripts/build.mjs

@@ -21,6 +21,7 @@ import { tmpdir } from 'node:os'
 import { basename, dirname, join, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { runPages } from './browser.mjs'
+import { fill, inline } from './page.mjs'
 import { ChalkTextError, chaptersFor, parseChalk, PROP_ALIASES, PROP_NAMES, validateScene } from './contract.mjs'
 import { syntaxForLine, syntaxForStep } from './syntax.mjs'
 
@@ -98,9 +99,7 @@ const slug = slugOf(scenes[0], sources[0])
 const work = asSvg ? mkdtempSync(join(tmpdir(), 'chalk-talk-svg-')) : undefined
 const out = work ? join(work, 'page.html') : resolve(outArg ?? join(dirname(resolve(sources[0])), `${slug}.html`))
 const content = course ? { course: option('--title') ?? scenes[0].title, lessons: scenes } : scenes[0]
-// JSON inside a <script> tag: "<" escaped so no text in a recipe can end the tag.
-const recipe = JSON.stringify(content).replace(/</g, '\\u003c')
-const page = readFileSync(join(here, '../assets/player.html'), 'utf8').replace('{{RECIPE}}', () => recipe)
+const page = fill(readFileSync(join(here, '../assets/player.html'), 'utf8'), { RECIPE: inline(content) })
 writeFileSync(out, page)
 
 scenes.forEach((scene, k) => {
@@ -109,12 +108,17 @@ scenes.forEach((scene, k) => {
   console.log(`✓ contract${who}${scene.steps.length} steps, ${chaptersFor(scene).length} chapters, ${values} values`)
 })
 
+// Onda C: a figure made with `define` is seen by nobody when the build passes at once (the review measures, it does
+// not see): with one, the snapshots are made anyway and the build asks for one look at the contact sheet.
+const defined = [...new Set(scenes.flatMap((s) => Object.keys(s.defs ?? {})))]
+const snapshots = snapAt >= 0 || (defined.length > 0 && !asSvg)
+
 // One browser for everything the page has to do: the review, the snapshots and the SVGs, lesson by lesson.
 const query = (k) => (course ? `lesson=${k + 1}` : '')
 const jobs = []
 scenes.forEach((_, k) => {
   if (!noReview) jobs.push({ what: 'review', k, file: out, mode: 'review', query: query(k) })
-  if (snapAt >= 0) jobs.push({ what: 'snapshots', k, file: out, mode: 'snapshots', query: query(k) })
+  if (snapshots) jobs.push({ what: 'snapshots', k, file: out, mode: 'snapshots', query: query(k) })
   if (asSvg) jobs.push({ what: 'svg', k, file: out, mode: 'svg', query: query(k) })
 })
 const ran = jobs.length ? await runPages(jobs, { timeout }) : { results: [] }
@@ -137,11 +141,16 @@ else {
   }
 }
 
-if (snapAt >= 0) {
+if (snapshots) {
   const folder = resolve(snapFolder ?? join(dirname(out), `${slug}.snapshots`))
   for (let k = 0; k < scenes.length; k++) {
     const r = result('snapshots', k)
     if (!r || r.error) {
+      // asked for: an error; made only for a defined figure: said, and the page is still delivered
+      if (snapAt < 0) {
+        console.log(`• figures   ${defined.length} defined (${defined.join(', ')}): no browser to draw them here — look at them in the lesson`)
+        break
+      }
       console.error(`✗ snapshots ${r ? r.error : 'no Chrome, Chromium or Edge here to draw them (set CHROME_PATH)'}`)
       code = 4
       break
@@ -154,6 +163,9 @@ if (snapAt >= 0) {
     const sheet = join(into, `${lesson}.contact-sheet.png`)
     png(`${lesson}.contact-sheet.png`, r.sheet)
     console.log(`→ ${sheet} (${r.chapters} ${r.chapters === 1 ? 'chapter' : 'chapters'} × ${r.settings} ${r.settings === 1 ? 'setting' : 'settings'})`)
+    if (defined.length && k === scenes.length - 1) {
+      console.log(`• figures   ${defined.length} defined (${defined.join(', ')}): open the contact sheet once and check ${defined.length === 1 ? 'it reads' : 'they read'} right`)
+    }
   }
 }
 

package/scripts/contract.mjs

@@ -1,4 +1,4 @@
-// GENERATED by tools/assets.mjs from the drawing engine v0.253.0. Do not edit.
+// GENERATED by tools/assets.mjs from the drawing engine v0.254.0. Do not edit.
 var WORDS = ["and", "or", "not"];
 
 var PROP_NAMES = [