@dfosco/storyboard-react 3.8.0 → 3.8.2

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.8.0",
+    "@dfosco/storyboard-core": "3.8.2",
     "@dfosco/tiny-canvas": "^1.1.0",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",

package/src/canvas/useCanvas.js

@@ -14,6 +14,17 @@ async function fetchCanvasFromServer(name) {
   return null
 }
 
+function isAbsoluteUrl(value) {
+  return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(value)
+}
+
+export function resolveCanvasModuleImport(modulePath, baseUrl = import.meta.env?.BASE_URL || '/') {
+  if (!modulePath || isAbsoluteUrl(modulePath)) return modulePath
+  if (!modulePath.startsWith('/')) return modulePath
+  const base = String(baseUrl || '/').replace(/\/$/, '')
+  return `${base}${modulePath}` || modulePath
+}
+
 /**
  * Hook to load canvas data by name.
  * Uses build-time data for static config (routes, JSX path), but fetches
@@ -48,13 +59,20 @@ export function useCanvas(name) {
     })
   }, [name, buildTimeCanvas])
 
+  const jsxModule = canvas?._jsxModule
+  const jsxImport = canvas?._jsxImport
+
   useEffect(() => {
-    if (!canvas?._jsxModule) {
+    if (!jsxModule) {
       setJsxExports(null)
       return
     }
 
-    import(/* @vite-ignore */ canvas._jsxModule)
+    const loadPromise = jsxImport
+      ? jsxImport()
+      : import(/* @vite-ignore */ resolveCanvasModuleImport(jsxModule))
+
+    loadPromise
       .then((mod) => {
         const exports = {}
         for (const [key, value] of Object.entries(mod)) {
@@ -65,10 +83,10 @@ export function useCanvas(name) {
         setJsxExports(exports)
       })
       .catch((err) => {
-        console.error(`[storyboard] Failed to load canvas JSX module: ${canvas._jsxModule}`, err)
+        console.error(`[storyboard] Failed to load canvas JSX module: ${jsxModule}`, err)
         setJsxExports(null)
       })
-  }, [canvas?._jsxModule])
+  }, [jsxModule, jsxImport])
 
   // In dev, react to file mutations from the data plugin without reloading
   // the current page. This keeps canvas editing state and route stable.

package/src/canvas/useCanvas.test.js

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { resolveCanvasModuleImport } from './useCanvas.js'
+
+describe('resolveCanvasModuleImport', () => {
+  it('prefixes root-relative module paths with BASE_URL', () => {
+    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.canvas.jsx', '/feature-branch/')).toBe(
+      '/feature-branch/src/canvas/button-patterns.canvas.jsx',
+    )
+  })
+
+  it('keeps root-relative paths unchanged when BASE_URL is root', () => {
+    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.canvas.jsx', '/')).toBe(
+      '/src/canvas/button-patterns.canvas.jsx',
+    )
+  })
+
+  it('returns relative paths as-is', () => {
+    expect(resolveCanvasModuleImport('./local-module.js', '/feature-branch/')).toBe('./local-module.js')
+  })
+
+  it('returns absolute URLs as-is', () => {
+    expect(resolveCanvasModuleImport('https://cdn.example.com/module.js', '/feature-branch/')).toBe(
+      'https://cdn.example.com/module.js',
+    )
+  })
+})

package/src/hooks/useSceneData.js

@@ -73,7 +73,9 @@ export function useFlowData(path) {
     }
 
     if (sceneValue === undefined) {
-      console.warn(`[useFlowData] Path "${path}" not found in flow data.`)
+      if (data != null && Object.keys(data).length > 0) {
+        console.warn(`[useFlowData] Path "${path}" not found in flow data.`)
+      }
       return {}
     }
 

package/src/vite/data-plugin.js

@@ -444,7 +444,11 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
       }
       parsed = resolveTemplateVars(parsed, templateVars)
 
-      declarations.push(`const ${varName} = ${JSON.stringify(parsed)}`)
+      if (suffix === 'canvas' && parsed._jsxModule) {
+        declarations.push(`const ${varName} = Object.assign(${JSON.stringify(parsed)}, { _jsxImport: () => import(${JSON.stringify(parsed._jsxModule)}) })`)
+      } else {
+        declarations.push(`const ${varName} = ${JSON.stringify(parsed)}`)
+      }
       entries[suffix].push(`  ${JSON.stringify(name)}: ${varName}`)
     }
   }