@dfosco/storyboard-react 4.0.0-beta.24 → 4.0.0-beta.26

package/src/vite/data-plugin.js

@@ -78,7 +78,9 @@ function parseDataFile(filePath) {
     // Derive group: canvases sharing a directory form a group
     const slashIdx = name.lastIndexOf('/')
     const group = canvasFolderName || (slashIdx > 0 ? name.substring(0, slashIdx) : null)
-    return { name, suffix: 'canvas', ext: 'jsonl', folder: canvasFolderName || folderName, inferredRoute, id: toCanvasId(filePath), group }
+    // Extract a relative path for toCanvasId (it expects src/canvas/... or src/prototypes/...)
+    const canvasIdInput = normalized.replace(/^.*?(src\/(?:canvas|prototypes)\/)/, '$1')
+    return { name, suffix: 'canvas', ext: 'jsonl', folder: canvasFolderName || folderName, inferredRoute, id: toCanvasId(canvasIdInput), group }
   }
 
   // Handle canvas .meta.json files
@@ -404,8 +406,10 @@ function buildIndex(root) {
     }
 
     // Track canvas groups (canvases sharing a folder prefix)
+    // Use canonical ID as key to match the canvas index
     if (parsed.suffix === 'canvas' && parsed.group) {
-      canvasGroups[parsed.name] = parsed.group
+      const groupKey = parsed.id || parsed.name
+      canvasGroups[groupKey] = parsed.group
     }
 
     // Track inferred routes for stories
@@ -781,12 +785,13 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes, canvasA
     'if (import.meta.hot) {',
     '  import.meta.hot.on("storyboard:canvas-file-changed", (data) => {',
     '    if (!data) return',
+    '    const id = data.canvasId || data.name',
     '    if (data.removed) {',
-    '      delete canvases[data.name]',
+    '      delete canvases[id]',
     '    } else if (data.metadata) {',
     '      // Merge into existing entry to preserve build-time fields (_jsxModule, _jsxImport, etc.)',
-    '      canvases[data.name] = canvases[data.name]',
-    '        ? Object.assign({}, canvases[data.name], data.metadata)',
+    '      canvases[id] = canvases[id]',
+    '        ? Object.assign({}, canvases[id], data.metadata)',
     '        : data.metadata',
     '    }',
     '    init({ flows, objects, records, prototypes, folders, canvases, stories })',
@@ -911,7 +916,7 @@ export default function storyboardDataPlugin() {
       // Watch for data file changes in dev mode
       const watcher = server.watcher
       if (!buildResult) buildResult = buildIndex(root)
-      const knownCanvasNames = new Set(Object.keys(buildResult.index.canvas || {}))
+      const knownCanvasIds = new Set(Object.keys(buildResult.index.canvas || {}))
       const pendingCanvasUnlinks = new Map()
 
       const triggerFullReload = () => {
@@ -958,12 +963,12 @@ export default function storyboardDataPlugin() {
         // viewfinder can react in place.
         if (/\.canvas\.jsonl$/.test(normalized)) {
           const parsed = parseDataFile(filePath)
-          if (parsed?.suffix === 'canvas' && parsed?.name) {
+          if (parsed?.suffix === 'canvas' && parsed?.id) {
             const metadata = readCanvasMetadata(filePath, parsed)
             server.ws.send({
               type: 'custom',
               event: 'storyboard:canvas-file-changed',
-              data: { name: parsed.name, ...(metadata ? { metadata } : {}) },
+              data: { canvasId: parsed.id, name: parsed.id, ...(metadata ? { metadata } : {}) },
             })
           }
           softInvalidate()
@@ -1003,53 +1008,53 @@ export default function storyboardDataPlugin() {
         // Treat canvas add/unlink as runtime data updates and never full-reload
         // from watcher events. Canvas pages sync from disk via custom WS events.
         if (parsed?.suffix === 'canvas') {
-          const name = parsed.name
+          const canvasId = parsed.id || parsed.name
           if (eventType === 'unlink') {
             const timer = setTimeout(() => {
-              pendingCanvasUnlinks.delete(name)
-              knownCanvasNames.delete(name)
+              pendingCanvasUnlinks.delete(canvasId)
+              knownCanvasIds.delete(canvasId)
               server.ws.send({
                 type: 'custom',
                 event: 'storyboard:canvas-file-changed',
-                data: { name, removed: true },
+                data: { canvasId, name: canvasId, removed: true },
               })
               softInvalidate()
             }, 1500)
-            pendingCanvasUnlinks.set(name, timer)
+            pendingCanvasUnlinks.set(canvasId, timer)
             return
           }
 
           if (eventType === 'add') {
             const metadata = readCanvasMetadata(filePath, parsed)
-            const pending = pendingCanvasUnlinks.get(name)
+            const pending = pendingCanvasUnlinks.get(canvasId)
             if (pending) {
               // unlink+add pair = in-place save (atomic write), not a real remove
               clearTimeout(pending)
-              pendingCanvasUnlinks.delete(name)
+              pendingCanvasUnlinks.delete(canvasId)
               server.ws.send({
                 type: 'custom',
                 event: 'storyboard:canvas-file-changed',
-                data: { name, ...(metadata ? { metadata } : {}) },
+                data: { canvasId, name: canvasId, ...(metadata ? { metadata } : {}) },
               })
               softInvalidate()
               return
             }
 
-            if (knownCanvasNames.has(name)) {
+            if (knownCanvasIds.has(canvasId)) {
               server.ws.send({
                 type: 'custom',
                 event: 'storyboard:canvas-file-changed',
-                data: { name, ...(metadata ? { metadata } : {}) },
+                data: { canvasId, name: canvasId, ...(metadata ? { metadata } : {}) },
               })
               softInvalidate()
               return
             }
 
-            knownCanvasNames.add(name)
+            knownCanvasIds.add(canvasId)
             server.ws.send({
               type: 'custom',
               event: 'storyboard:canvas-file-changed',
-              data: { name, ...(metadata ? { metadata } : {}) },
+              data: { canvasId, name: canvasId, ...(metadata ? { metadata } : {}) },
             })
             softInvalidate()
             return

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

@@ -902,7 +902,7 @@ describe('canvas watcher behavior', () => {
 
     expect(customEvents.length).toBe(1)
     expect(customEvents[0].event).toBe('storyboard:canvas-file-changed')
-    expect(customEvents[0].data.name).toBe('test-canvas')
+    expect(customEvents[0].data.canvasId).toBe('test-canvas')
     expect(fullReloads.length).toBe(0)
 
     // Should have invalidated the virtual module
@@ -939,7 +939,7 @@ describe('canvas watcher behavior', () => {
     const fullReloads = server.wsSent.filter(m => m.type === 'full-reload')
 
     expect(customEvents.length).toBe(1)
-    expect(customEvents[0].data.name).toBe('new-canvas')
+    expect(customEvents[0].data.canvasId).toBe('new-canvas')
     expect(customEvents[0].data.metadata).toBeDefined()
     expect(fullReloads.length).toBe(0)
     expect(server.invalidatedModules).toContain(RESOLVED_ID)
@@ -963,7 +963,7 @@ describe('canvas watcher behavior', () => {
 
     const customEvents = server.wsSent.filter(m => m.type === 'custom')
     expect(customEvents.length).toBe(1)
-    expect(customEvents[0].data.name).toBe('doomed-canvas')
+    expect(customEvents[0].data.canvasId).toBe('doomed-canvas')
     expect(customEvents[0].data.removed).toBe(true)
     expect(server.invalidatedModules).toContain(RESOLVED_ID)
   })
@@ -985,7 +985,7 @@ describe('canvas watcher behavior', () => {
     // Should have sent one event immediately (the add cancelling the unlink)
     const customEvents = server.wsSent.filter(m => m.type === 'custom')
     expect(customEvents.length).toBe(1)
-    expect(customEvents[0].data.name).toBe('saved-canvas')
+    expect(customEvents[0].data.canvasId).toBe('saved-canvas')
     expect(customEvents[0].data.removed).toBeUndefined()
     expect(server.invalidatedModules).toContain(RESOLVED_ID)
 

package/src/canvas/widgets/useViewportEntry.js

@@ -1,93 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { getFlag } from '@dfosco/storyboard-core'
-
-function devLog(...args) {
-  try { if (getFlag('dev-logs')) console.log('[canvas:iframe-queue]', ...args) } catch { /* flag system not initialized */ }
-}
-
-/**
- * Sequential iframe loading queue.
- *
- * Embed widgets (prototype, story) that lack snapshots call `requestSlot()`
- * which returns a promise that resolves when it's their turn to load.
- * Only one iframe loads at a time — the next starts when the previous
- * calls the returned `release()` function (or on timeout).
- *
- * This prevents the "iframe stampede" when many embeds lack snapshots
- * and would otherwise all try to load simultaneously.
- */
-const SLOT_TIMEOUT = 15_000
-
-let _queue = []
-let _active = false
-
-function processQueue() {
-  if (_active || _queue.length === 0) return
-  _active = true
-  const { resolve, label } = _queue.shift()
-  devLog(`slot granted → ${label} (${_queue.length} queued)`)
-
-  let released = false
-  const release = () => {
-    if (released) return
-    released = true
-    _active = false
-    devLog(`slot released ← ${label}`)
-    processQueue()
-  }
-
-  // Safety timeout — if the iframe never signals load, release after 15s
-  setTimeout(release, SLOT_TIMEOUT)
-  resolve(release)
-}
-
-function requestSlot(label = '?') {
-  return new Promise((resolve) => {
-    _queue.push({ resolve, label })
-    devLog(`queued ${label} (position ${_queue.length})`)
-    processQueue()
-  })
-}
-
-/**
- * Hook for embed widgets that need sequential iframe loading.
- *
- * When the widget has a usable snapshot, this is a no-op (returns ready immediately).
- * When no snapshot exists, it queues the widget and returns `ready: true` when
- * it's this widget's turn.
- *
- * @param {boolean} hasUsableSnapshot - whether the widget has a working snapshot
- * @param {string} [label] - debug label for dev logs
- * @returns {{ ready: boolean, releaseSlot: Function }}
- */
-export function useIframeQueue(hasUsableSnapshot, label = '?') {
-  const [ready, setReady] = useState(hasUsableSnapshot)
-  const releaseRef = useRef(null)
-
-  useEffect(() => {
-    if (hasUsableSnapshot || ready) return
-
-    let cancelled = false
-    requestSlot(label).then((release) => {
-      if (cancelled) {
-        release()
-        return
-      }
-      releaseRef.current = release
-      setReady(true)
-    })
-
-    return () => {
-      cancelled = true
-      releaseRef.current?.()
-    }
-  }, [hasUsableSnapshot]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Release the slot when the component unmounts
-  const releaseSlot = useCallback(() => {
-    releaseRef.current?.()
-    releaseRef.current = null
-  }, [])
-
-  return { ready, releaseSlot }
-}