@ape-egg/codecane 1.0.0 → 1.1.0

package/core/build.js

@@ -1,3 +1,4 @@
+import { existsSync } from 'node:fs'
 import { cp, mkdir, readFile, readdir, realpath, rm, writeFile } from 'node:fs/promises'
 import { dirname, join } from 'node:path'
 
@@ -12,8 +13,10 @@ const listed = async dir => (await readdir(dir, { recursive: true, withFileTypes
   .map(entry => join(entry.parentPath, entry.name).slice(dir.length + 1))
 
 export const written = async (out, files) => Promise.all(Object.entries(files).map(async ([path, body]) => {
-  await mkdir(dirname(join(out, path)), { recursive: true })
-  await writeFile(join(out, path), body)
+  const file = join(out, path)
+  if (existsSync(file) && (await readFile(file)).equals(Buffer.from(body))) return
+  await mkdir(dirname(file), { recursive: true })
+  await writeFile(file, body)
 }))
 
 const viewerFiles = async ({ dir }, ids) => {

package/core/cli.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env bun
-import { readFile } from 'node:fs/promises'
+import { watch } from 'node:fs'
+import { readFile, rm } from 'node:fs/promises'
 import { join, resolve } from 'node:path'
 import { parseArgs } from 'node:util'
 
@@ -17,6 +18,7 @@ codecane dev [project] [--port n]          serve the viewer and every stacked st
 codecane build [project] [--out dir]       stack every step into dist/, write its data and the viewer, and check that every step runs
 codecane build [project] --bare            the same without the viewer
 codecane stack <address> [project] --out dir  write one step on one timeline, <forks-step>@<fork-step>@<step>
+codecane stack <address> [project] --out dir --watch  the same, and write it again as steps/ changes, touching only the files that changed
 codecane agents                            print the codecane workflow for a project's AGENTS.md`
 
 const root = resolve(import.meta.dirname, '..')
@@ -25,7 +27,7 @@ const viewer = { dir: join(root, 'ui'), modules: Object.keys(dependencies) }
 
 const { positionals: [command, ...rest], values } = parseArgs({
   allowPositionals: true,
-  options: { port: { type: 'string' }, out: { type: 'string' }, bare: { type: 'boolean' }, project: { type: 'string' } },
+  options: { port: { type: 'string' }, out: { type: 'string' }, bare: { type: 'boolean' }, watch: { type: 'boolean' }, project: { type: 'string' } },
 })
 
 const stamped = async (project = '.') => {
@@ -75,10 +77,32 @@ const commands = {
     process.exitCode = Object.keys(failures).length ? 1 : 0
   },
   stack: async ([address, project = '.']) => {
-    const steps = await stamped(project)
-    const { id, through } = locate(steps, address)
-    await written(resolve(values.out), stack(steps, id, through).files)
-    console.info(`step ${address} stacked into ${resolve(values.out)}`)
+    const out = resolve(values.out)
+    const stackedFiles = async () => {
+      const steps = await stamped(project)
+      const { id, through } = locate(steps, address)
+      return stack(steps, id, through).files
+    }
+    let files = await stackedFiles()
+    await written(out, files)
+    console.info(`step ${address} stacked into ${out}`)
+    if (!values.watch) return
+    const restacked = async () => {
+      const next = await stackedFiles()
+      const changed = Object.keys(next).filter(path => !(path in files) || !Buffer.from(files[path]).equals(Buffer.from(next[path])))
+      const gone = Object.keys(files).filter(path => !(path in next))
+      await written(out, Object.fromEntries(changed.map(path => [path, next[path]])))
+      await Promise.all(gone.map(path => rm(join(out, path))))
+      files = next
+      if (changed.length || gone.length) console.info(`step ${address} stacked into ${out} again: ${[...changed, ...gone].join(', ')}`)
+    }
+    let settling
+    let queue = Promise.resolve()
+    watch(resolve(project), { recursive: true }, (_, path) => {
+      if (!/^(steps|parts)\//.test(path ?? '')) return
+      clearTimeout(settling)
+      settling = setTimeout(() => queue = queue.then(restacked).catch(error => console.error(error.message)), 300)
+    })
   },
   agents: async () => console.info(await readFile(join(root, 'workflow.md'), 'utf8')),
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/codecane",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Build a project up step by step: add-only step folders stacked into runnable steps, with a timeline viewer",
   "type": "module",
   "license": "ISC",
@@ -24,7 +24,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@ape-egg/codie": "^0.1.18",
+    "@ape-egg/codie": "^0.2.0",
     "@ape-egg/vibe": "^4.3.17"
   },
   "publishConfig": {

package/ui/codecane.css

@@ -16,7 +16,7 @@
 
 body {
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template: auto minmax(0, 1fr) / minmax(0, 1fr);
   height: 100dvh;
   margin: 0;
   overflow: hidden;
@@ -113,10 +113,18 @@ header ol {
   min-width: 0;
   margin: 0 1.5rem;
   padding: 0.75rem 0;
-  overflow-x: auto;
+  overflow: auto hidden;
   list-style: none;
 }
 
+header[stylecheat] ol::-webkit-scrollbar {
+  height: var(--unit);
+}
+
+header[stylecheat] ol::-webkit-scrollbar-thumb {
+  background-color: var(--dim);
+}
+
 header li {
   display: flex;
   align-self: center;
@@ -248,11 +256,28 @@ story-panel {
   border-right: 1px solid var(--line);
 }
 
+story-panel [stylecheat] {
+  background: none;
+}
+
+panel-tabs {
+  padding: 1.25rem 1.25rem 0;
+}
+
 article,
-file-list {
+file-list,
+footer {
   padding: 1.25rem;
 }
 
+footer {
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
+  border-top: 1px solid var(--line);
+  background: inherit;
+}
+
 article small {
   color: var(--dim);
 }
@@ -308,7 +333,6 @@ step-links {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
-  margin-top: 1.25rem;
   color: var(--dim);
 }
 
@@ -326,7 +350,6 @@ step-links a[kind="seam"] {
 
 file-list {
   flex: 1;
-  border-top: 1px solid var(--line);
 }
 
 file {
@@ -481,11 +504,8 @@ changes-list {
   border-left: 1px solid var(--line);
 }
 
-:is(file-list, changes-list) > h2 {
-  font-size: 0.875rem;
-}
-
 changes-list > h2 {
+  font-size: 0.875rem;
   padding: 1.25rem 1.25rem 0.75rem;
 }
 
@@ -516,7 +536,7 @@ change-header code {
   text-overflow: ellipsis;
 }
 
-change-diff codie {
+change-diff codie[dark] {
   font-size: 0.75rem;
   --codie-bg: transparent;
 }

package/ui/components/Story.html

@@ -1,6 +1,20 @@
 <story-panel ontransitionend="event.target === this && codecane.returned()">
+  <panel-tabs stylecheat dark>
+    <tabs primary>
+      <tab active="@[tab === 'about']" onclick="$.tab = 'about'">About</tab>
+      <tab active="@[tab === 'files']" onclick="$.tab = 'files'">Files</tab>
+    </tabs>
+  </panel-tabs>
+  <!-- if tab === 'about' -->
   <article>
-    <small>Step @[timeline.indexOf(page.id) + 1] of @[timeline.length]@[page.untested ? ' · Untested' : '']</small>
+    <step-status stylecheat dark>
+      <crow justify-between>
+        <small>Step @[timeline.indexOf(page.id) + 1] of @[timeline.length]</small>
+        <!-- if page.untested -->
+        <badge bg-slate text-slate>Untested</badge>
+        <!-- /if -->
+      </crow>
+    </step-status>
     <!-- if page.convergence && page.convergence.kind === 'seam' -->
     <story><h1>@[page.title]</h1></story>
     <!-- else -->
@@ -43,19 +57,9 @@
       <!-- /each -->
     </alternatives>
     <!-- /if -->
-    <step-links>
-      <!-- if previous -->
-      <a href="/@[previous.address]">← @[previous.title]</a>
-      <!-- /if -->
-      <!-- if next -->
-      <a href="/@[next.address]" next kind="@[next.kind]">@[next.title] →</a>
-      <!-- else -->
-      <span>Final build</span>
-      <!-- /if -->
-    </step-links>
   </article>
+  <!-- else -->
   <file-list stylecheat dark>
-    <h2>Files</h2>
     <!-- each [...new Set(page.files.map(file => file.folder))] as folder (page.id + folder) -->
     <!-- if folder -->
     <folder>@[folder]</folder>
@@ -82,4 +86,20 @@
     <!-- /each -->
     <!-- /if -->
   </file-list>
+  <!-- /if -->
+  <footer>
+    <!-- if page.ahead -->
+    <story>@[$.unsafe(page.ahead)]</story>
+    <!-- /if -->
+    <step-links>
+      <!-- if previous -->
+      <a href="/@[previous.address]" kind="@[previous.kind]">← @[previous.title]</a>
+      <!-- /if -->
+      <!-- if next -->
+      <a href="/@[next.address]" next kind="@[next.kind]">@[next.title] →</a>
+      <!-- else -->
+      <span>Final build</span>
+      <!-- /if -->
+    </step-links>
+  </footer>
 </story-panel>

package/ui/viewer.js

@@ -34,7 +34,8 @@ const rootFirst = (a, b) => a.path.includes('/') - b.path.includes('/')
 const opened = async stacked => {
   const address = new URL(steps()[idOf(stacked)].data[stacked], source)
   const step = await (loaded[stacked] ??= fetched(address))
-  return { ...step, files: step.files.map(file => ({ ...file, folder: folderOf(file.path) })).sort(rootFirst), base: new URL(step.folder, address).href, texts: Object.fromEntries(step.changes.map(change => [change.path, change.after])) }
+  const [story, ahead = ''] = step.story.split(/<hr\s*\/?>(?![\s\S]*<hr)/)
+  return { ...step, story, ahead, files: step.files.map(file => ({ ...file, folder: folderOf(file.path) })).sort(rootFirst), base: new URL(step.folder, address).href, texts: Object.fromEntries(step.changes.map(change => [change.path, change.after])) }
 }
 
 const running = page => page.files.some(file => file.path === 'index.html') ? `${page.base}index.html?revision=${digest(page.files.map(file => file.hash).join())}` : ''
@@ -144,7 +145,7 @@ const reports = {
 addEventListener('message', ({ source, data }) => source === document.querySelector('stage iframe')?.contentWindow && reports[data.codecane]?.(data))
 
 const first = placed(addressAt(location.pathname))
-window.$ = vibe({ name: index.name, version: index.version, editable: index.editable, kinds: { merge: 'Merge', seam: 'Seam' }, through: null, panel: 50, dragging: false, closing: false, fullscreen: false, returning: false, root: atRoot(location.pathname), ...shown(await opened(first.address), first.lane) })
+window.$ = vibe({ name: index.name, version: index.version, editable: index.editable, kinds: { merge: 'Merge', seam: 'Seam' }, tab: 'about', through: null, panel: 50, dragging: false, closing: false, fullscreen: false, returning: false, root: atRoot(location.pathname), ...shown(await opened(first.address), first.lane) })
 const titled = address => document.title = `${index.name} · ${steps()[idOf(address)].title}`
 titled(first.address)
 

package/workflow.md

@@ -78,4 +78,4 @@ A step's kind is the result of its last replay:
 - `codecane patch <id> [path…]`: turns a step's copies of earlier files into patches.
 - `codecane dev`: the viewer at `/`, every stacked step at `/steps/<id>/`, live from `steps/`. It watches `steps/`, turns copies into patches, rebases later patches and replays from each changed step forward, and the open viewer updates in place without reloading. Saving in the viewer writes to the step that last changed the file.
 - `codecane build`: writes `dist/` (every stacked step, its JSON data and the viewer) and checks that every step runs. `--bare` leaves out the viewer.
-- `codecane stack <address> --out <dir>`: writes one step on one timeline, such as `moving-the-center/05adc6a`; `codecane stack moving-the-center` writes it with the default forks.
+- `codecane stack <address> --out <dir>`: writes one step on one timeline, such as `moving-the-center/05adc6a`; `codecane stack moving-the-center` writes it with the default forks. `--watch` writes it again whenever `steps/` or `parts/` changes, touching only the files whose stacked text changed, so a watcher such as `bun --watch` on the stacked folder restarts only when the stacked code really changed.