@dfosco/storyboard-react 4.0.0-beta.0 → 4.0.0-beta.10

package/src/vite/data-plugin.js

@@ -155,11 +155,99 @@ function getLastModified(root, dirPath) {
   }
 }
 
+/**
+ * Batch-fetch git metadata (author + lastModified) for multiple files in a
+ * single subprocess, avoiding per-file git overhead during startup.
+ *
+ * Returns a Map<absPath, { gitAuthor: string|null, lastModified: string|null }>
+ */
+function batchGitMetadata(root, filePaths) {
+  const result = new Map()
+  if (filePaths.length === 0) return result
+
+  // Initialize all entries
+  for (const fp of filePaths) {
+    result.set(fp, { gitAuthor: null, lastModified: null })
+  }
+
+  try {
+    // Batch lastModified: one git log call with all paths
+    // git log -1 gives the most recent commit touching any of these paths,
+    // but we need per-path data. Use --name-only to correlate.
+    // For efficiency, use a single git log with --format and --name-only
+    // that outputs one record per commit touching these files.
+    const allDirs = [...new Set(filePaths.map(fp => path.dirname(fp)))]
+    const dirsArg = allDirs.map(d => `"${d}"`).join(' ')
+
+    // Get lastModified per directory in one call using git log --format
+    // We output "MARKER<sep>dir<sep>date" per commit, then take the latest per dir.
+    const logResult = execSync(
+      `git log --format="%aI" --name-only -- ${dirsArg}`,
+      { cwd: root, encoding: 'utf-8', timeout: 10000, maxBuffer: 1024 * 1024 },
+    ).trim()
+
+    if (logResult) {
+      // Parse: alternating date lines and filename lines separated by blank lines
+      const blocks = logResult.split('\n\n')
+      const dirDates = new Map() // dir → most recent date
+      for (const block of blocks) {
+        const lines = block.split('\n').filter(Boolean)
+        if (lines.length < 2) continue
+        const date = lines[0]
+        for (let li = 1; li < lines.length; li++) {
+          const fileLine = lines[li].trim()
+          if (!fileLine) continue
+          const dir = path.dirname(path.resolve(root, fileLine))
+          if (!dirDates.has(dir)) {
+            dirDates.set(dir, date)
+          }
+        }
+      }
+      for (const fp of filePaths) {
+        const dir = path.dirname(fp)
+        const entry = result.get(fp)
+        if (dirDates.has(dir) && entry) {
+          entry.lastModified = dirDates.get(dir)
+        }
+      }
+    }
+  } catch { /* git not available or failed — leave nulls */ }
+
+  // Batch gitAuthor: use git log for each file's creation author.
+  // Unfortunately --follow --diff-filter=A doesn't combine well with multiple
+  // paths, so batch them in a single shell invocation using a for loop.
+  try {
+    const relPaths = filePaths.map(fp => path.relative(root, fp))
+    // Build a shell script that outputs "PATH<tab>AUTHOR" per file
+    const cmds = relPaths.map(rp =>
+      `echo -n "${rp}\\t"; git log --follow --diff-filter=A --format="%aN" -- "${rp}" | tail -1`
+    ).join('; ')
+    const authorResult = execSync(cmds, {
+      cwd: root, encoding: 'utf-8', timeout: 10000, shell: true, maxBuffer: 1024 * 1024,
+    }).trim()
+
+    if (authorResult) {
+      for (const line of authorResult.split('\n')) {
+        const tabIdx = line.indexOf('\t')
+        if (tabIdx < 0) continue
+        const relPath = line.slice(0, tabIdx)
+        const author = line.slice(tabIdx + 1).trim()
+        if (!author) continue
+        const absPath2 = path.resolve(root, relPath)
+        const entry = result.get(absPath2)
+        if (entry) entry.gitAuthor = author
+      }
+    }
+  } catch { /* git not available */ }
+
+  return result
+}
+
 /**
  * Scan the repo for all data files, validate uniqueness, return the index.
  */
 function buildIndex(root) {
-  const ignore = ['node_modules/**', 'dist/**', '.git/**']
+  const ignore = ['node_modules/**', 'dist/**', '.git/**', '.worktrees/**', 'public/**']
   const files = globSync(GLOB_PATTERN, { cwd: root, ignore, absolute: false })
   const canvasFiles = globSync(CANVAS_GLOB_PATTERN, { cwd: root, ignore, absolute: false })
 
@@ -339,6 +427,13 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
   const resolvedFlowRoutes = {} // flow name → resolved route (for multi-flow logging)
   let i = 0
 
+  // Batch-fetch git metadata for all prototype + canvas files in 1-2 subprocesses
+  const gitPaths = [
+    ...Object.values(index.prototype || {}),
+    ...Object.values(index.canvas || {}),
+  ]
+  const gitMeta = batchGitMetadata(root, gitPaths)
+
   for (const suffix of INDEX_KEYS) {
     for (const [name, absPath] of Object.entries(index[suffix])) {
       const varName = `_d${i++}`
@@ -349,18 +444,17 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
 
       // Auto-fill gitAuthor for prototype metadata from git history
       if (suffix === 'prototype' && parsed && !parsed.gitAuthor) {
-        const gitAuthor = getGitAuthor(root, absPath)
-        if (gitAuthor) {
-          parsed = { ...parsed, gitAuthor }
+        const meta = gitMeta.get(absPath)
+        if (meta?.gitAuthor) {
+          parsed = { ...parsed, gitAuthor: meta.gitAuthor }
         }
       }
 
       // Auto-fill lastModified from git history for prototypes
       if (suffix === 'prototype' && parsed) {
-        const protoDir = path.dirname(absPath)
-        const lastModified = getLastModified(root, protoDir)
-        if (lastModified) {
-          parsed = { ...parsed, lastModified }
+        const meta = gitMeta.get(absPath)
+        if (meta?.lastModified) {
+          parsed = { ...parsed, lastModified: meta.lastModified }
         }
       }
 
@@ -399,9 +493,9 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
 
       // Auto-fill gitAuthor for canvas metadata from git history
       if (suffix === 'canvas' && parsed && !parsed.gitAuthor) {
-        const gitAuthor = getGitAuthor(root, absPath)
-        if (gitAuthor) {
-          parsed = { ...parsed, gitAuthor }
+        const meta = gitMeta.get(absPath)
+        if (meta?.gitAuthor) {
+          parsed = { ...parsed, gitAuthor: meta.gitAuthor }
         }
       }
 
@@ -561,6 +655,10 @@ export default function storyboardDataPlugin() {
     config() {
       return {
         optimizeDeps: {
+          // debug is CJS-only but micromark's development export does
+          // `import createDebug from 'debug'`. Vite must pre-bundle it
+          // so the ESM default import resolves correctly.
+          include: ['debug'],
           exclude: ['@dfosco/storyboard-react'],
         },
       }
@@ -581,6 +679,41 @@ export default function storyboardDataPlugin() {
     },
 
     configureServer(server) {
+      // ── Component isolate middleware ───────────────────────────────
+      // Serves a minimal HTML shell for iframe-isolated component widgets.
+      // The iframe loads componentIsolate.jsx which reads query params
+      // (module, export, theme) and renders a single canvas.jsx export.
+      const isolateEntryPath = new URL('../canvas/componentIsolate.jsx', import.meta.url).pathname
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url) return next()
+        let url = req.url
+        const baseNoTrail = (server.config.base || '/').replace(/\/$/, '')
+        if (baseNoTrail && url.startsWith(baseNoTrail)) {
+          url = url.slice(baseNoTrail.length) || '/'
+        }
+        if (!url.startsWith('/_storyboard/canvas/isolate')) return next()
+
+        const rawHtml = [
+          '<!DOCTYPE html>',
+          '<html><head>',
+          '<style>html,body{margin:0;padding:0;width:100%;height:100%}#root{width:100%;height:100%}</style>',
+          '</head><body>',
+          '<div id="root"></div>',
+          `<script type="module" src="/@fs${isolateEntryPath}"></script>`,
+          '</body></html>',
+        ].join('\n')
+
+        try {
+          const html = await server.transformIndexHtml(req.url, rawHtml)
+          res.writeHead(200, { 'Content-Type': 'text/html' })
+          res.end(html)
+        } catch (err) {
+          console.error('[storyboard] Component isolate HTML transform failed:', err)
+          res.writeHead(500, { 'Content-Type': 'text/plain' })
+          res.end('Component isolate failed')
+        }
+      })
+
       // Watch for data file changes in dev mode
       const watcher = server.watcher
       if (!buildResult) buildResult = buildIndex(root)

package/src/vite/data-plugin.test.js

@@ -53,6 +53,12 @@ describe('storyboardDataPlugin', () => {
     expect(config.optimizeDeps.exclude).toContain('@dfosco/storyboard-react')
   })
 
+  it('config() includes debug in optimizeDeps for ESM/CJS interop', () => {
+    const plugin = storyboardDataPlugin()
+    const config = plugin.config()
+    expect(config.optimizeDeps.include).toContain('debug')
+  })
+
   it("resolveId returns resolved ID for 'virtual:storyboard-data-index'", () => {
     const plugin = createPlugin()
     expect(plugin.resolveId('virtual:storyboard-data-index')).toBe(RESOLVED_ID)