@dfosco/storyboard-react 3.8.0 → 3.8.1

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.8.0",
+    "@dfosco/storyboard-core": "3.8.1",
     "@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
@@ -54,7 +65,8 @@ export function useCanvas(name) {
       return
     }
 
-    import(/* @vite-ignore */ canvas._jsxModule)
+    const moduleImportPath = resolveCanvasModuleImport(canvas._jsxModule)
+    import(/* @vite-ignore */ moduleImportPath)
       .then((mod) => {
         const exports = {}
         for (const [key, value] of Object.entries(mod)) {
@@ -65,7 +77,7 @@ 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: ${moduleImportPath}`, err)
         setJsxExports(null)
       })
   }, [canvas?._jsxModule])

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',
+    )
+  })
+})