egaki 0.9.0 → 0.10.0

package/src/vite/vite-plugin.ts

@@ -20,6 +20,7 @@ import type { Plugin, PluginOption } from 'vite'
 import { spiceflowPlugin } from 'spiceflow/vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import pc from 'picocolors'
 import { mdxParse } from 'safe-mdx/parse'
 import { collectServerImportSources } from './server-mdx.ts'
 import { parseFrontmatter } from './mdx-parse.ts'
@@ -44,6 +45,25 @@ const RESOLVED_MODULES = '\0' + VIRTUAL_MODULES
 
 const PKG_NAME = 'egaki'
 
+// Packages that must resolve to a single physical copy (same pattern as
+// spiceflow:dedupe-singleton). Remotion Player + useVideoConfig share React
+// context; two copies → "No video config found". Motion patches need one
+// JSAnimation class. resolve.dedupe alone fails under pnpm when the package
+// is only a transitive dep of egaki (not hoisted to the consumer root).
+const dedupePackages = new Set([
+  'remotion',
+  '@remotion/player',
+  '@remotion/media',
+  '@remotion/web-renderer',
+  'motion',
+  'motion-dom',
+  'motion-utils',
+])
+
+// Fake importer anchored inside egaki's package so this.resolve() finds the
+// same remotion/motion copy egaki itself depends on.
+const dedupeImporter = path.join(__pkgRoot, '_dedupe_importer_.js')
+
 export interface VideoPluginOptions {
   /** Path to the default MDX entry file (relative to vite root or absolute).
    *  When omitted, auto-discovers: video.mdx > index.mdx > first .mdx found.
@@ -258,7 +278,7 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
             const fullPath = path.join(dir, entry.name)
             if (entry.isDirectory()) {
               walkDir(fullPath)
-            } else if (/\.(tsx?|jsx?|mdx?)$/.test(entry.name) && !/\.(test|spec|config)\./.test(entry.name)) {
+            } else if (/\.(tsx?|jsx?|mdx?)$/.test(entry.name) && !/\.(test|spec|config)\./.test(entry.name) && !/\.d\.ts$/.test(entry.name)) {
               // Entry MDX files are NOT skipped: they may be imported as
               // partials by other MDX files (e.g. `import Intro from './intro.mdx'`).
               // Self-import is a user error and harmless (safe-mdx handles it).
@@ -314,6 +334,52 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
       }
     },
 
+    // Print SDK usage instructions after Vite's startup banner.
+    // Agents read terminal output to learn how to interact with the
+    // running dev server via Playwriter + window.egakiSDK.
+    configureServer(server) {
+      server.httpServer?.on('listening', () => {
+        const log = server.config.logger
+        const p = (s: string) => log.info(s)
+        // Small delay so our block prints after Vite's "ready in" + URL lines
+        setTimeout(() => {
+          const title = `  ${pc.cyan(pc.bold('egaki SDK'))} ${pc.dim('—')} ${pc.white('programmatic control via')} ${pc.yellow('window.egakiSDK')}`
+          const sep = pc.dim('  ─'.padEnd(72, '─'))
+
+          p('')
+          p(title)
+          p(sep)
+          p('')
+          p(`  ${pc.green('●')} ${pc.bold('Get info')}        ${pc.dim('composition metadata, sections, fps')}`)
+          p(`    ${pc.cyan(`playwriter -s 1 -e 'console.log(await state.page.evaluate(() => window.egakiSDK.getInfo()))'`)}`)
+          p('')
+          p(`  ${pc.green('●')} ${pc.bold('Screenshot')}      ${pc.dim('capture a single frame as PNG')}`)
+          p(`    ${pc.cyan("playwriter -s 1 -e \"$(cat <<'JS'")}`)
+          p(`    ${pc.cyan('const dataUrl = await state.page.evaluate(() => window.egakiSDK.screenshot({ frame: 60 }))')}`)
+          p(`    ${pc.cyan('const buf = Buffer.from(await (await fetch(dataUrl)).arrayBuffer())')}`)
+          p(`    ${pc.cyan('require("node:fs").writeFileSync("/tmp/frame-60.png", buf)')}`)
+          p(`    ${pc.cyan('JS')}`)
+          p(`    ${pc.cyan(')"')}`)
+          p('')
+          p(`  ${pc.green('●')} ${pc.bold('Filmstrip')}       ${pc.dim('grid of frames across scenes')}`)
+          p(`    ${pc.cyan("playwriter -s 1 -e \"$(cat <<'JS'")}`)
+          p(`    ${pc.cyan('const dataUrl = await state.page.evaluate(() =>')}`)
+          p(`    ${pc.cyan('  window.egakiSDK.filmstrip({ scenes: [0, 1, 2], framesPerScene: 3 }))')}`)
+          p(`    ${pc.cyan('const buf = Buffer.from(await (await fetch(dataUrl)).arrayBuffer())')}`)
+          p(`    ${pc.cyan('require("node:fs").writeFileSync("/tmp/filmstrip.png", buf)')}`)
+          p(`    ${pc.cyan('JS')}`)
+          p(`    ${pc.cyan(')"')}`)
+          p('')
+          p(`  ${pc.green('●')} ${pc.bold('Export video')}     ${pc.dim('render MP4 via WebCodecs')}`)
+          p(`    ${pc.cyan(`playwriter -s 1 -e 'await state.page.evaluate(() => window.egakiSDK.export({ path: "output.mp4" }))'`)}`)
+          p('')
+          p(`  ${pc.green('●')} ${pc.bold('Seek')}            ${pc.dim('jump to a specific frame')}`)
+          p(`    ${pc.cyan(`playwriter -s 1 -e 'await state.page.evaluate(() => window.egakiSDK.seekTo(120))'`)}`)
+          p('')
+        }, 50)
+      })
+    },
+
     // HMR for file changes in the project.
     //
     // Entry MDX: the source string flows server → client through the RSC
@@ -440,16 +506,13 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
       arr.push(/^tweakpane/)
       config.resolve.noExternal = arr
 
-      // Deduplicate motion packages so egaki's motion-timing virtual module
-      // patches the same JSAnimation class that motion/react uses. Without
-      // this, Vite can resolve motion-dom to different instances and
-      // prototype patches won't affect the user's animations.
-      // Always applied (not gated by hasMotion) because configEnvironment
-      // runs before configResolved where hasMotion is set. Harmless when
-      // motion isn't installed — dedupe on missing packages is a no-op.
+      // Baseline hint for Vite's built-in resolver (same list as the
+      // resolveId singleton plugin below). Real enforcement is the
+      // egaki:dedupe-singleton plugin — resolve.dedupe alone is not enough
+      // under pnpm when remotion is only a transitive dep of egaki.
       config.resolve.dedupe = mergeUnique(
         config.resolve.dedupe as string[] | undefined,
-        ['motion', 'motion-dom', 'motion-utils'],
+        [...dedupePackages],
       )
 
       if (name === 'client') {
@@ -458,6 +521,14 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
           config.optimizeDeps.exclude,
           [PKG_NAME],
         )
+        // Prebundle safe-mdx as a single entry so its pure-CJS leaves
+        // (format via fault/micromark) stay internalized with CJS interop.
+        // Do NOT list format/fault as separate optimizeDeps entries — that
+        // splits them into named-only ESM chunks and the browser crashes with
+        // "does not provide an export named 'default'" (same bug Holocron hit
+        // when safe-mdx leaked to the client; see holocron vite CHANGELOG).
+        // Holocron's clean fix is keep safe-mdx server-only; egaki needs it on
+        // the client for MDX-in-browser, so correct prebundling is the fix.
         config.optimizeDeps.include = mergeUnique(
           config.optimizeDeps.include,
           [
@@ -465,6 +536,8 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
             `${PKG_NAME} > remotion`,
             `${PKG_NAME} > @remotion/player`,
             `${PKG_NAME} > safe-mdx`,
+            'safe-mdx',
+            'safe-mdx/parse',
           ],
         )
       }
@@ -479,9 +552,44 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
     },
   }
 
+  // Force remotion / motion to a single copy across all importers, even when
+  // egaki is a transitive or file:-linked dep under pnpm. Mirrors
+  // spiceflow:dedupe-singleton (spiceflow/src/vite.tsx).
+  //
+  // Vite's resolve.dedupe sets basedir=root then walks node_modules/, but
+  // pnpm only symlinks direct deps at the root. Transitive deps stay buried
+  // in .pnpm/, so dedupe silently falls back to importer-based resolution
+  // and Player vs useVideoConfig load different remotion instances.
+  const dedupeSingletonPlugin: Plugin = {
+    name: 'egaki:dedupe-singleton',
+    enforce: 'pre',
+    async resolveId(id, _importer, options) {
+      if (
+        id.startsWith('.') ||
+        id.startsWith('/') ||
+        id.startsWith('\0') ||
+        id.includes('?')
+      ) {
+        return null
+      }
+
+      const pkgName = id.startsWith('@')
+        ? id.split('/').slice(0, 2).join('/')
+        : (id.split('/')[0] ?? id)
+
+      if (!dedupePackages.has(pkgName)) return null
+
+      return this.resolve(id, dedupeImporter, {
+        ...options,
+        skipSelf: true,
+      })
+    },
+  }
+
   return [
     videoPlugin,
     rscPackagePlugin,
+    dedupeSingletonPlugin,
     tailwindcss(),
     spiceflowPlugin({ entry: VIRTUAL_APP }),
     react(),