@aurelia/storybook 1.0.1 → 1.0.2

package/dist/preview/render.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"render.mjs","sources":["../../node_modules/storybook/dist/core-events/index.js","../../src/preview/render.ts"],"sourcesContent":["// src/core-events/index.ts\nvar R = /* @__PURE__ */ ((E) => (E.CHANNEL_WS_DISCONNECT = \"channelWSDisconnect\", E.CHANNEL_CREATED = \"channelCreated\", E.CONFIG_ERROR = \"co\\\nnfigError\", E.STORY_INDEX_INVALIDATED = \"storyIndexInvalidated\", E.STORY_SPECIFIED = \"storySpecified\", E.SET_CONFIG = \"setConfig\", E.SET_STORIES =\n\"setStories\", E.SET_INDEX = \"setIndex\", E.SET_CURRENT_STORY = \"setCurrentStory\", E.CURRENT_STORY_WAS_SET = \"currentStoryWasSet\", E.FORCE_RE_RENDER =\n\"forceReRender\", E.FORCE_REMOUNT = \"forceRemount\", E.PRELOAD_ENTRIES = \"preloadStories\", E.STORY_PREPARED = \"storyPrepared\", E.DOCS_PREPARED =\n\"docsPrepared\", E.STORY_CHANGED = \"storyChanged\", E.STORY_UNCHANGED = \"storyUnchanged\", E.STORY_RENDERED = \"storyRendered\", E.STORY_FINISHED =\n\"storyFinished\", E.STORY_MISSING = \"storyMissing\", E.STORY_ERRORED = \"storyErrored\", E.STORY_THREW_EXCEPTION = \"storyThrewException\", E.STORY_RENDER_PHASE_CHANGED =\n\"storyRenderPhaseChanged\", E.STORY_HOT_UPDATED = \"storyHotUpdated\", E.PLAY_FUNCTION_THREW_EXCEPTION = \"playFunctionThrewException\", E.UNHANDLED_ERRORS_WHILE_PLAYING =\n\"unhandledErrorsWhilePlaying\", E.UPDATE_STORY_ARGS = \"updateStoryArgs\", E.STORY_ARGS_UPDATED = \"storyArgsUpdated\", E.RESET_STORY_ARGS = \"res\\\netStoryArgs\", E.SET_FILTER = \"setFilter\", E.SET_GLOBALS = \"setGlobals\", E.UPDATE_GLOBALS = \"updateGlobals\", E.GLOBALS_UPDATED = \"globalsUpda\\\nted\", E.REGISTER_SUBSCRIPTION = \"registerSubscription\", E.PREVIEW_KEYDOWN = \"previewKeydown\", E.PREVIEW_BUILDER_PROGRESS = \"preview_builder_\\\nprogress\", E.SELECT_STORY = \"selectStory\", E.STORIES_COLLAPSE_ALL = \"storiesCollapseAll\", E.STORIES_EXPAND_ALL = \"storiesExpandAll\", E.DOCS_RENDERED =\n\"docsRendered\", E.SHARED_STATE_CHANGED = \"sharedStateChanged\", E.SHARED_STATE_SET = \"sharedStateSet\", E.NAVIGATE_URL = \"navigateUrl\", E.UPDATE_QUERY_PARAMS =\n\"updateQueryParams\", E.REQUEST_WHATS_NEW_DATA = \"requestWhatsNewData\", E.RESULT_WHATS_NEW_DATA = \"resultWhatsNewData\", E.SET_WHATS_NEW_CACHE =\n\"setWhatsNewCache\", E.TOGGLE_WHATS_NEW_NOTIFICATIONS = \"toggleWhatsNewNotifications\", E.TELEMETRY_ERROR = \"telemetryError\", E.FILE_COMPONENT_SEARCH_REQUEST =\n\"fileComponentSearchRequest\", E.FILE_COMPONENT_SEARCH_RESPONSE = \"fileComponentSearchResponse\", E.SAVE_STORY_REQUEST = \"saveStoryRequest\", E.\nSAVE_STORY_RESPONSE = \"saveStoryResponse\", E.ARGTYPES_INFO_REQUEST = \"argtypesInfoRequest\", E.ARGTYPES_INFO_RESPONSE = \"argtypesInfoResponse\",\nE.CREATE_NEW_STORYFILE_REQUEST = \"createNewStoryfileRequest\", E.CREATE_NEW_STORYFILE_RESPONSE = \"createNewStoryfileResponse\", E))(R || {}), S = R,\n{\n  CHANNEL_WS_DISCONNECT: _,\n  CHANNEL_CREATED: T,\n  CONFIG_ERROR: O,\n  CREATE_NEW_STORYFILE_REQUEST: A,\n  CREATE_NEW_STORYFILE_RESPONSE: N,\n  CURRENT_STORY_WAS_SET: r,\n  DOCS_PREPARED: D,\n  DOCS_RENDERED: I,\n  FILE_COMPONENT_SEARCH_REQUEST: o,\n  FILE_COMPONENT_SEARCH_RESPONSE: C,\n  FORCE_RE_RENDER: P,\n  FORCE_REMOUNT: L,\n  GLOBALS_UPDATED: Y,\n  NAVIGATE_URL: a,\n  PLAY_FUNCTION_THREW_EXCEPTION: U,\n  UNHANDLED_ERRORS_WHILE_PLAYING: H,\n  PRELOAD_ENTRIES: G,\n  PREVIEW_BUILDER_PROGRESS: W,\n  PREVIEW_KEYDOWN: d,\n  REGISTER_SUBSCRIPTION: t,\n  RESET_STORY_ARGS: p,\n  SELECT_STORY: i,\n  SET_CONFIG: F,\n  SET_CURRENT_STORY: l,\n  SET_FILTER: y,\n  SET_GLOBALS: e,\n  SET_INDEX: c,\n  SET_STORIES: h,\n  SHARED_STATE_CHANGED: f,\n  SHARED_STATE_SET: g,\n  STORIES_COLLAPSE_ALL: u,\n  STORIES_EXPAND_ALL: s,\n  STORY_ARGS_UPDATED: x,\n  STORY_CHANGED: m,\n  STORY_ERRORED: M,\n  STORY_INDEX_INVALIDATED: Q,\n  STORY_MISSING: V,\n  STORY_PREPARED: w,\n  STORY_RENDER_PHASE_CHANGED: B,\n  STORY_RENDERED: X,\n  STORY_FINISHED: b,\n  STORY_SPECIFIED: q,\n  STORY_THREW_EXCEPTION: K,\n  STORY_UNCHANGED: j,\n  STORY_HOT_UPDATED: k,\n  UPDATE_GLOBALS: z,\n  UPDATE_QUERY_PARAMS: J,\n  UPDATE_STORY_ARGS: Z,\n  REQUEST_WHATS_NEW_DATA: $,\n  RESULT_WHATS_NEW_DATA: n,\n  SET_WHATS_NEW_CACHE: v,\n  TOGGLE_WHATS_NEW_NOTIFICATIONS: EE,\n  TELEMETRY_ERROR: RE,\n  SAVE_STORY_REQUEST: SE,\n  SAVE_STORY_RESPONSE: _E,\n  ARGTYPES_INFO_REQUEST: TE,\n  ARGTYPES_INFO_RESPONSE: OE\n} = R;\nexport {\n  TE as ARGTYPES_INFO_REQUEST,\n  OE as ARGTYPES_INFO_RESPONSE,\n  T as CHANNEL_CREATED,\n  _ as CHANNEL_WS_DISCONNECT,\n  O as CONFIG_ERROR,\n  A as CREATE_NEW_STORYFILE_REQUEST,\n  N as CREATE_NEW_STORYFILE_RESPONSE,\n  r as CURRENT_STORY_WAS_SET,\n  D as DOCS_PREPARED,\n  I as DOCS_RENDERED,\n  o as FILE_COMPONENT_SEARCH_REQUEST,\n  C as FILE_COMPONENT_SEARCH_RESPONSE,\n  L as FORCE_REMOUNT,\n  P as FORCE_RE_RENDER,\n  Y as GLOBALS_UPDATED,\n  a as NAVIGATE_URL,\n  U as PLAY_FUNCTION_THREW_EXCEPTION,\n  G as PRELOAD_ENTRIES,\n  W as PREVIEW_BUILDER_PROGRESS,\n  d as PREVIEW_KEYDOWN,\n  t as REGISTER_SUBSCRIPTION,\n  $ as REQUEST_WHATS_NEW_DATA,\n  p as RESET_STORY_ARGS,\n  n as RESULT_WHATS_NEW_DATA,\n  SE as SAVE_STORY_REQUEST,\n  _E as SAVE_STORY_RESPONSE,\n  i as SELECT_STORY,\n  F as SET_CONFIG,\n  l as SET_CURRENT_STORY,\n  y as SET_FILTER,\n  e as SET_GLOBALS,\n  c as SET_INDEX,\n  h as SET_STORIES,\n  v as SET_WHATS_NEW_CACHE,\n  f as SHARED_STATE_CHANGED,\n  g as SHARED_STATE_SET,\n  u as STORIES_COLLAPSE_ALL,\n  s as STORIES_EXPAND_ALL,\n  x as STORY_ARGS_UPDATED,\n  m as STORY_CHANGED,\n  M as STORY_ERRORED,\n  b as STORY_FINISHED,\n  k as STORY_HOT_UPDATED,\n  Q as STORY_INDEX_INVALIDATED,\n  V as STORY_MISSING,\n  w as STORY_PREPARED,\n  X as STORY_RENDERED,\n  B as STORY_RENDER_PHASE_CHANGED,\n  q as STORY_SPECIFIED,\n  K as STORY_THREW_EXCEPTION,\n  j as STORY_UNCHANGED,\n  RE as TELEMETRY_ERROR,\n  EE as TOGGLE_WHATS_NEW_NOTIFICATIONS,\n  H as UNHANDLED_ERRORS_WHILE_PLAYING,\n  z as UPDATE_GLOBALS,\n  J as UPDATE_QUERY_PARAMS,\n  Z as UPDATE_STORY_ARGS,\n  S as default\n};\n","import { STORY_CHANGED } from 'storybook/internal/core-events';\nimport type { RenderContext, ArgsStoryFn } from 'storybook/internal/types';\nimport type { AureliaRenderer } from './types';\nimport Aurelia, { Constructable, CustomElement } from 'aurelia';\n\ninterface AureliaStoryResult {\n  template: string;\n  components?: unknown[];\n  Component?: unknown;\n  container?: any;\n  items?: unknown[];\n  innerHtml?: string;\n  props?: Record<string, any>;\n}\n\n/**\n * Merges multiple sources into a single object.\n * Sources can be story parameters, args, or story.props.\n */\nfunction mergeStoryProps(\n  ...sources: Array<Record<string, any> | undefined>\n): Record<string, any> {\n  return Object.assign({}, ...sources);\n}\n\n// Track Aurelia apps for cleanup\nconst appMap = new Map<HTMLElement, Aurelia>();\n\nasync function teardown(element: HTMLElement) {\n  if (appMap.has(element)) {\n    const app = appMap.get(element);\n    if (app) {\n      await app.stop();\n      appMap.delete(element);\n    }\n  }\n}\n\nexport const render: ArgsStoryFn<AureliaRenderer> = (args, { id, component: Component }) => {\n  if (!Component) {\n    throw new Error(\n      `Unable to render story ${id} as the component annotation is missing from the default export`\n    );\n  }\n  return { Component, props: args, template: '' };\n};\n\nexport async function renderToCanvas(\n  {\n    storyFn,\n    title,\n    name,\n    showMain,\n    showError,\n    storyContext,\n    forceRemount,\n  }: RenderContext<AureliaRenderer>,\n  canvasElement: HTMLElement,\n  bootstrapAppFn?: typeof bootstrapAureliaApp\n) {\n  const appBootstrapFn = bootstrapAppFn || bootstrapAureliaApp;\n\n  const { parameters, component, args } = storyContext;\n  let app = appMap.get(canvasElement);\n\n  const story = storyFn() as AureliaStoryResult;\n\n  if (!story) {\n    showError({\n      title: `Expecting an Aurelia component from the story: \"${name}\" of \"${title}\".`,\n      description: `\n        Did you forget to return the Aurelia component from the story?\n        Use \"() => ({ template: '<custom-component></custom-component>' })\" when defining the story.\n      `,\n    });\n    return () => {};\n  }\n\n  showMain();\n\n  let mergedProps;\n  // Use full merge (including story.props) when bootstrapping a new app or force remounting.\n  if (!app || forceRemount) {\n    mergedProps = mergeStoryProps(parameters?.args, args, story.props);\n    if (app) {\n      await teardown(canvasElement);\n    }\n    app = appBootstrapFn(\n      story,\n      mergedProps,\n      canvasElement,\n      component as Constructable\n    ) as Aurelia;\n    await app.start();\n    appMap.set(canvasElement, app);\n  } else {\n    // Update the existing app viewModel only with parameters and args (exclude story.props).\n    mergedProps = mergeStoryProps(parameters?.args, args);\n    if (app.root?.controller?.viewModel) {\n      Object.assign(app.root.controller.viewModel, mergedProps);\n    }\n  }\n\n  // Set up story change listener for cleanup\n  const channel = storyContext.viewMode === 'story' ? storyContext.channel : null;\n  let onStoryChange: () => void;\n  if (channel) {\n    onStoryChange = () => {\n      // When the story changes, clean up the Aurelia app\n      teardown(canvasElement);\n    };\n    channel.on(STORY_CHANGED, onStoryChange);\n  }\n\n  // Return teardown function that also unsubscribes from STORY_CHANGED\n  return async () => {\n    if (channel && onStoryChange) {\n      channel.off(STORY_CHANGED, onStoryChange);\n    }\n    await teardown(canvasElement);\n  };\n}\n\nexport function bootstrapAureliaApp(\n  story: AureliaStoryResult,\n  args: Record<string, any>,\n  domElement: HTMLElement,\n  component?: Constructable\n) {\n  const aurelia = new Aurelia(story.container);\n\n  if (story.items?.length) {\n    aurelia.register(...story.items);\n  }\n\n  if (story.components?.length) {\n    aurelia.register(...story.components);\n  }\n\n  let { template } = story;\n\n  if (component) {\n    template = template ?? createComponentTemplate(component, story.innerHtml);\n    aurelia.register(component);\n  }\n\n  const App = CustomElement.define(\n    {\n      name: 'au-storybook',\n      template,\n      containerless: true,\n    },\n    class {}\n  );\n\n  const app = Object.assign(new App(), args);\n\n  return aurelia.app({\n    host: domElement,\n    component: app,\n  });\n}\n\nexport function createComponentTemplate(\n  component: Constructable,\n  innerHtml?: string\n): string {\n  const def = CustomElement.getDefinition(component);\n\n  return `<${def.name} ${Object.values(def.bindables)\n    .map((bindable) => `${bindable.attribute}.bind=\"${bindable.name}\"`)\n    .join(' ')}>${innerHtml ?? ''}</${def.name}>`;\n}"],"names":["STORY_CHANGED"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"render.mjs","sources":["../../src/preview/render.ts"],"sourcesContent":["import { STORY_CHANGED } from 'storybook/internal/core-events';\nimport type { RenderContext, ArgsStoryFn } from 'storybook/internal/types';\nimport type { AureliaRenderer } from './types';\nimport Aurelia, { Constructable, CustomElement } from 'aurelia';\n\ninterface AureliaStoryResult {\n  template: string;\n  components?: unknown[];\n  Component?: unknown;\n  container?: any;\n  items?: unknown[];\n  innerHtml?: string;\n  props?: Record<string, any>;\n}\n\n// Track Aurelia apps for cleanup\nconst appMap = new Map<HTMLElement, any>();\n\nasync function teardown(element: HTMLElement) {\n  if (appMap.has(element)) {\n    const app = appMap.get(element);\n    if (app) {\n      await app.stop();\n      appMap.delete(element);\n    }\n  }\n}\n\nexport const render: ArgsStoryFn<AureliaRenderer> = (args, context) => {\n  const { id, component: Component } = context;\n  \n  if (!Component) {\n    throw new Error(\n      `Unable to render story ${id} as the component annotation is missing from the default export`\n    );\n  }\n  return { Component, props: args, template: '' };\n};\n\nexport async function renderToCanvas(\n  {\n    storyFn,\n    title,\n    name,\n    showMain,\n    showError,\n    storyContext,\n    forceRemount,\n  }: RenderContext<AureliaRenderer>,\n  canvasElement: HTMLElement,\n  bootstrapAppFn?: typeof createAureliaApp\n) {\n  // Store reference to the original storybook root element\n  const rootElement = canvasElement;\n\n  // Ensure we have (or create) a single container inside the root where the Aurelia app actually renders\n  let hostElement: HTMLElement;\n  if (rootElement.id === 'storybook-root') {\n    hostElement = rootElement.querySelector('.aurelia-story-container') as HTMLElement;\n    if (!hostElement) {\n      hostElement = document.createElement('div');\n      hostElement.className = 'aurelia-story-container';\n      hostElement.style.height = '100%';\n      rootElement.appendChild(hostElement);\n    }\n  } else {\n    hostElement = rootElement;\n  }\n\n  // All app instances are now tracked by the *root* element, ensuring we only ever have one per story iframe\n  const appBootstrapFn = bootstrapAppFn ?? createAureliaApp;\n  const { parameters, component, args } = storyContext;\n  \n  let app = appMap.get(rootElement);\n  const story = storyFn() as AureliaStoryResult;\n  \n  // Temporary debug logging\n  console.log(`[DEBUG] Story: ${name}, forceRemount: ${forceRemount}, hasExistingApp: ${!!app}, canvasId: ${canvasElement.className}`);\n\n  if (!story) {\n    showError({\n      title: `Expecting an Aurelia component from the story: \"${name}\" of \"${title}\".`,\n      description: `\n        Did you forget to return the Aurelia component from the story?\n        Use \"() => ({ template: '<custom-component></custom-component>' })\" when defining the story.\n      `,\n    });\n    return () => {};\n  }\n\n  showMain();\n\n  if (!app || forceRemount) {\n    if (forceRemount && app) {\n      await teardown(rootElement);\n      app = undefined;\n    }\n    // Clear container before mounting new app\n    hostElement.innerHTML = '';\n\n    const mergedProps = { ...parameters?.args, ...args, ...story.props };\n\n    const aureliaApp = appBootstrapFn(\n      story,\n      mergedProps,\n      hostElement,\n      component as Constructable\n    );\n    await aureliaApp.start();\n    appMap.set(rootElement, aureliaApp);\n    app = aureliaApp;\n  } else {\n    // update existing app props\n    const mergedProps = { ...parameters?.args, ...args, ...story.props };\n    if (app?.root?.controller?.viewModel) {\n      Object.assign(app.root.controller.viewModel, mergedProps);\n    }\n  }\n\n  // Return cleanup fn\n  return async () => {\n    await teardown(rootElement);\n  };\n}\n\nexport function createAureliaApp(\n  story: AureliaStoryResult,\n  args: Record<string, any>,\n  domElement: HTMLElement,\n  component?: Constructable\n) {\n  const aurelia = new Aurelia(story.container);\n\n  if (story.items?.length) {\n    aurelia.register(...story.items);\n  }\n\n  if (story.components?.length) {\n    aurelia.register(...story.components);\n  }\n\n  let { template } = story;\n\n  if (component) {\n    template = template ?? createComponentTemplate(component, story.innerHtml);\n    aurelia.register(component);\n  }\n\n  const App = CustomElement.define(\n    {\n      name: 'sb-app',\n      template,\n      containerless: true,\n    },\n    class {}\n  );\n\n  const app = Object.assign(new App(), args);\n\n  return aurelia.app({\n    host: domElement,\n    component: app,\n  });\n}\n\nexport function createComponentTemplate(\n  component: Constructable,\n  innerHtml?: string\n): string {\n  const def = CustomElement.getDefinition(component);\n\n  return `<${def.name} ${Object.values(def.bindables)\n    .map((bindable) => `${bindable.attribute}.bind=\"${bindable.name}\"`)\n    .join(' ')}>${innerHtml ?? ''}</${def.name}>`;\n}"],"names":[],"mappings":"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"}

package/dist/preview.js

@@ -2,7 +2,85 @@
 
 var Aurelia = require('aurelia');
 
-function bootstrapAureliaApp(story, args, domElement, component) {
+// Track Aurelia apps for cleanup
+const appMap = new Map();
+async function teardown(element) {
+    if (appMap.has(element)) {
+        const app = appMap.get(element);
+        if (app) {
+            await app.stop();
+            appMap.delete(element);
+        }
+    }
+}
+const render = (args, context) => {
+    const { id, component: Component } = context;
+    if (!Component) {
+        throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
+    }
+    return { Component, props: args, template: '' };
+};
+async function renderToCanvas({ storyFn, title, name, showMain, showError, storyContext, forceRemount, }, canvasElement, bootstrapAppFn) {
+    // Store reference to the original storybook root element
+    const rootElement = canvasElement;
+    // Ensure we have (or create) a single container inside the root where the Aurelia app actually renders
+    let hostElement;
+    if (rootElement.id === 'storybook-root') {
+        hostElement = rootElement.querySelector('.aurelia-story-container');
+        if (!hostElement) {
+            hostElement = document.createElement('div');
+            hostElement.className = 'aurelia-story-container';
+            hostElement.style.height = '100%';
+            rootElement.appendChild(hostElement);
+        }
+    }
+    else {
+        hostElement = rootElement;
+    }
+    // All app instances are now tracked by the *root* element, ensuring we only ever have one per story iframe
+    const appBootstrapFn = bootstrapAppFn ?? createAureliaApp;
+    const { parameters, component, args } = storyContext;
+    let app = appMap.get(rootElement);
+    const story = storyFn();
+    // Temporary debug logging
+    console.log(`[DEBUG] Story: ${name}, forceRemount: ${forceRemount}, hasExistingApp: ${!!app}, canvasId: ${canvasElement.className}`);
+    if (!story) {
+        showError({
+            title: `Expecting an Aurelia component from the story: "${name}" of "${title}".`,
+            description: `
+        Did you forget to return the Aurelia component from the story?
+        Use "() => ({ template: '<custom-component></custom-component>' })" when defining the story.
+      `,
+        });
+        return () => { };
+    }
+    showMain();
+    if (!app || forceRemount) {
+        if (forceRemount && app) {
+            await teardown(rootElement);
+            app = undefined;
+        }
+        // Clear container before mounting new app
+        hostElement.innerHTML = '';
+        const mergedProps = { ...parameters?.args, ...args, ...story.props };
+        const aureliaApp = appBootstrapFn(story, mergedProps, hostElement, component);
+        await aureliaApp.start();
+        appMap.set(rootElement, aureliaApp);
+        app = aureliaApp;
+    }
+    else {
+        // update existing app props
+        const mergedProps = { ...parameters?.args, ...args, ...story.props };
+        if (app?.root?.controller?.viewModel) {
+            Object.assign(app.root.controller.viewModel, mergedProps);
+        }
+    }
+    // Return cleanup fn
+    return async () => {
+        await teardown(rootElement);
+    };
+}
+function createAureliaApp(story, args, domElement, component) {
     const aurelia = new Aurelia(story.container);
     if (story.items?.length) {
         aurelia.register(...story.items);
@@ -16,7 +94,7 @@ function bootstrapAureliaApp(story, args, domElement, component) {
         aurelia.register(component);
     }
     const App = Aurelia.CustomElement.define({
-        name: 'au-storybook',
+        name: 'sb-app',
         template,
         containerless: true,
     }, class {
@@ -34,41 +112,6 @@ function createComponentTemplate(component, innerHtml) {
         .join(' ')}>${innerHtml ?? ''}</${def.name}>`;
 }
 
-// Track the current story's cleanup function
-let currentCleanup = null;
-const render = (args, context) => {
-    // Clean up previous story if exists
-    if (currentCleanup) {
-        currentCleanup();
-        currentCleanup = null;
-    }
-    // Create a container element
-    const container = document.createElement('div');
-    // Get the story function result
-    const story = context.storyFn();
-    // Bootstrap Aurelia app immediately
-    if (story && (story.Component || story.template)) {
-        const app = bootstrapAureliaApp(story, args, container, story.Component || context.component);
-        // Start the app asynchronously
-        const startPromise = app.start();
-        if (startPromise && typeof startPromise.catch === 'function') {
-            startPromise.catch((error) => {
-                console.error('Failed to start Aurelia app:', error);
-            });
-        }
-        // Set cleanup function
-        currentCleanup = () => {
-            const stopPromise = app.stop();
-            if (stopPromise && typeof stopPromise.catch === 'function') {
-                stopPromise.catch((error) => {
-                    console.error('Failed to stop Aurelia app:', error);
-                });
-            }
-        };
-    }
-    // Return the container element immediately
-    return container;
-};
-
 exports.render = render;
+exports.renderToCanvas = renderToCanvas;
 //# sourceMappingURL=preview.js.map

package/dist/preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview.js","sources":["../src/preview/render.ts","../src/preview.ts"],"sourcesContent":["import { STORY_CHANGED } from 'storybook/internal/core-events';\nimport type { RenderContext, ArgsStoryFn } from 'storybook/internal/types';\nimport type { AureliaRenderer } from './types';\nimport Aurelia, { Constructable, CustomElement } from 'aurelia';\n\ninterface AureliaStoryResult {\n  template: string;\n  components?: unknown[];\n  Component?: unknown;\n  container?: any;\n  items?: unknown[];\n  innerHtml?: string;\n  props?: Record<string, any>;\n}\n\n/**\n * Merges multiple sources into a single object.\n * Sources can be story parameters, args, or story.props.\n */\nfunction mergeStoryProps(\n  ...sources: Array<Record<string, any> | undefined>\n): Record<string, any> {\n  return Object.assign({}, ...sources);\n}\n\n// Track Aurelia apps for cleanup\nconst appMap = new Map<HTMLElement, Aurelia>();\n\nasync function teardown(element: HTMLElement) {\n  if (appMap.has(element)) {\n    const app = appMap.get(element);\n    if (app) {\n      await app.stop();\n      appMap.delete(element);\n    }\n  }\n}\n\nexport const render: ArgsStoryFn<AureliaRenderer> = (args, { id, component: Component }) => {\n  if (!Component) {\n    throw new Error(\n      `Unable to render story ${id} as the component annotation is missing from the default export`\n    );\n  }\n  return { Component, props: args, template: '' };\n};\n\nexport async function renderToCanvas(\n  {\n    storyFn,\n    title,\n    name,\n    showMain,\n    showError,\n    storyContext,\n    forceRemount,\n  }: RenderContext<AureliaRenderer>,\n  canvasElement: HTMLElement,\n  bootstrapAppFn?: typeof bootstrapAureliaApp\n) {\n  const appBootstrapFn = bootstrapAppFn || bootstrapAureliaApp;\n\n  const { parameters, component, args } = storyContext;\n  let app = appMap.get(canvasElement);\n\n  const story = storyFn() as AureliaStoryResult;\n\n  if (!story) {\n    showError({\n      title: `Expecting an Aurelia component from the story: \"${name}\" of \"${title}\".`,\n      description: `\n        Did you forget to return the Aurelia component from the story?\n        Use \"() => ({ template: '<custom-component></custom-component>' })\" when defining the story.\n      `,\n    });\n    return () => {};\n  }\n\n  showMain();\n\n  let mergedProps;\n  // Use full merge (including story.props) when bootstrapping a new app or force remounting.\n  if (!app || forceRemount) {\n    mergedProps = mergeStoryProps(parameters?.args, args, story.props);\n    if (app) {\n      await teardown(canvasElement);\n    }\n    app = appBootstrapFn(\n      story,\n      mergedProps,\n      canvasElement,\n      component as Constructable\n    ) as Aurelia;\n    await app.start();\n    appMap.set(canvasElement, app);\n  } else {\n    // Update the existing app viewModel only with parameters and args (exclude story.props).\n    mergedProps = mergeStoryProps(parameters?.args, args);\n    if (app.root?.controller?.viewModel) {\n      Object.assign(app.root.controller.viewModel, mergedProps);\n    }\n  }\n\n  // Set up story change listener for cleanup\n  const channel = storyContext.viewMode === 'story' ? storyContext.channel : null;\n  let onStoryChange: () => void;\n  if (channel) {\n    onStoryChange = () => {\n      // When the story changes, clean up the Aurelia app\n      teardown(canvasElement);\n    };\n    channel.on(STORY_CHANGED, onStoryChange);\n  }\n\n  // Return teardown function that also unsubscribes from STORY_CHANGED\n  return async () => {\n    if (channel && onStoryChange) {\n      channel.off(STORY_CHANGED, onStoryChange);\n    }\n    await teardown(canvasElement);\n  };\n}\n\nexport function bootstrapAureliaApp(\n  story: AureliaStoryResult,\n  args: Record<string, any>,\n  domElement: HTMLElement,\n  component?: Constructable\n) {\n  const aurelia = new Aurelia(story.container);\n\n  if (story.items?.length) {\n    aurelia.register(...story.items);\n  }\n\n  if (story.components?.length) {\n    aurelia.register(...story.components);\n  }\n\n  let { template } = story;\n\n  if (component) {\n    template = template ?? createComponentTemplate(component, story.innerHtml);\n    aurelia.register(component);\n  }\n\n  const App = CustomElement.define(\n    {\n      name: 'au-storybook',\n      template,\n      containerless: true,\n    },\n    class {}\n  );\n\n  const app = Object.assign(new App(), args);\n\n  return aurelia.app({\n    host: domElement,\n    component: app,\n  });\n}\n\nexport function createComponentTemplate(\n  component: Constructable,\n  innerHtml?: string\n): string {\n  const def = CustomElement.getDefinition(component);\n\n  return `<${def.name} ${Object.values(def.bindables)\n    .map((bindable) => `${bindable.attribute}.bind=\"${bindable.name}\"`)\n    .join(' ')}>${innerHtml ?? ''}</${def.name}>`;\n}","import { renderToCanvas, bootstrapAureliaApp } from './preview/render';\nimport Aurelia from 'aurelia';\n\n// Track the current story's cleanup function\nlet currentCleanup: (() => void) | null = null;\n\nexport const render = (args: any, context: any) => {\n  // Clean up previous story if exists\n  if (currentCleanup) {\n    currentCleanup();\n    currentCleanup = null;\n  }\n\n  // Create a container element\n  const container = document.createElement('div');\n  \n  // Get the story function result\n  const story = context.storyFn();\n  \n  // Bootstrap Aurelia app immediately\n  if (story && (story.Component || story.template)) {\n    const app = bootstrapAureliaApp(\n      story,\n      args,\n      container,\n      story.Component || context.component\n    ) as Aurelia;\n    \n    // Start the app asynchronously\n    const startPromise = app.start();\n    if (startPromise && typeof startPromise.catch === 'function') {\n      startPromise.catch((error: any) => {\n        console.error('Failed to start Aurelia app:', error);\n      });\n    }\n    \n    // Set cleanup function\n    currentCleanup = () => {\n      const stopPromise = app.stop();\n      if (stopPromise && typeof stopPromise.catch === 'function') {\n        stopPromise.catch((error: any) => {\n          console.error('Failed to stop Aurelia app:', error);\n        });\n      }\n    };\n  }\n  \n  // Return the container element immediately\n  return container;\n}; "],"names":["CustomElement"],"mappings":"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"}
+{"version":3,"file":"preview.js","sources":["../src/preview/render.ts"],"sourcesContent":["import { STORY_CHANGED } from 'storybook/internal/core-events';\nimport type { RenderContext, ArgsStoryFn } from 'storybook/internal/types';\nimport type { AureliaRenderer } from './types';\nimport Aurelia, { Constructable, CustomElement } from 'aurelia';\n\ninterface AureliaStoryResult {\n  template: string;\n  components?: unknown[];\n  Component?: unknown;\n  container?: any;\n  items?: unknown[];\n  innerHtml?: string;\n  props?: Record<string, any>;\n}\n\n// Track Aurelia apps for cleanup\nconst appMap = new Map<HTMLElement, any>();\n\nasync function teardown(element: HTMLElement) {\n  if (appMap.has(element)) {\n    const app = appMap.get(element);\n    if (app) {\n      await app.stop();\n      appMap.delete(element);\n    }\n  }\n}\n\nexport const render: ArgsStoryFn<AureliaRenderer> = (args, context) => {\n  const { id, component: Component } = context;\n  \n  if (!Component) {\n    throw new Error(\n      `Unable to render story ${id} as the component annotation is missing from the default export`\n    );\n  }\n  return { Component, props: args, template: '' };\n};\n\nexport async function renderToCanvas(\n  {\n    storyFn,\n    title,\n    name,\n    showMain,\n    showError,\n    storyContext,\n    forceRemount,\n  }: RenderContext<AureliaRenderer>,\n  canvasElement: HTMLElement,\n  bootstrapAppFn?: typeof createAureliaApp\n) {\n  // Store reference to the original storybook root element\n  const rootElement = canvasElement;\n\n  // Ensure we have (or create) a single container inside the root where the Aurelia app actually renders\n  let hostElement: HTMLElement;\n  if (rootElement.id === 'storybook-root') {\n    hostElement = rootElement.querySelector('.aurelia-story-container') as HTMLElement;\n    if (!hostElement) {\n      hostElement = document.createElement('div');\n      hostElement.className = 'aurelia-story-container';\n      hostElement.style.height = '100%';\n      rootElement.appendChild(hostElement);\n    }\n  } else {\n    hostElement = rootElement;\n  }\n\n  // All app instances are now tracked by the *root* element, ensuring we only ever have one per story iframe\n  const appBootstrapFn = bootstrapAppFn ?? createAureliaApp;\n  const { parameters, component, args } = storyContext;\n  \n  let app = appMap.get(rootElement);\n  const story = storyFn() as AureliaStoryResult;\n  \n  // Temporary debug logging\n  console.log(`[DEBUG] Story: ${name}, forceRemount: ${forceRemount}, hasExistingApp: ${!!app}, canvasId: ${canvasElement.className}`);\n\n  if (!story) {\n    showError({\n      title: `Expecting an Aurelia component from the story: \"${name}\" of \"${title}\".`,\n      description: `\n        Did you forget to return the Aurelia component from the story?\n        Use \"() => ({ template: '<custom-component></custom-component>' })\" when defining the story.\n      `,\n    });\n    return () => {};\n  }\n\n  showMain();\n\n  if (!app || forceRemount) {\n    if (forceRemount && app) {\n      await teardown(rootElement);\n      app = undefined;\n    }\n    // Clear container before mounting new app\n    hostElement.innerHTML = '';\n\n    const mergedProps = { ...parameters?.args, ...args, ...story.props };\n\n    const aureliaApp = appBootstrapFn(\n      story,\n      mergedProps,\n      hostElement,\n      component as Constructable\n    );\n    await aureliaApp.start();\n    appMap.set(rootElement, aureliaApp);\n    app = aureliaApp;\n  } else {\n    // update existing app props\n    const mergedProps = { ...parameters?.args, ...args, ...story.props };\n    if (app?.root?.controller?.viewModel) {\n      Object.assign(app.root.controller.viewModel, mergedProps);\n    }\n  }\n\n  // Return cleanup fn\n  return async () => {\n    await teardown(rootElement);\n  };\n}\n\nexport function createAureliaApp(\n  story: AureliaStoryResult,\n  args: Record<string, any>,\n  domElement: HTMLElement,\n  component?: Constructable\n) {\n  const aurelia = new Aurelia(story.container);\n\n  if (story.items?.length) {\n    aurelia.register(...story.items);\n  }\n\n  if (story.components?.length) {\n    aurelia.register(...story.components);\n  }\n\n  let { template } = story;\n\n  if (component) {\n    template = template ?? createComponentTemplate(component, story.innerHtml);\n    aurelia.register(component);\n  }\n\n  const App = CustomElement.define(\n    {\n      name: 'sb-app',\n      template,\n      containerless: true,\n    },\n    class {}\n  );\n\n  const app = Object.assign(new App(), args);\n\n  return aurelia.app({\n    host: domElement,\n    component: app,\n  });\n}\n\nexport function createComponentTemplate(\n  component: Constructable,\n  innerHtml?: string\n): string {\n  const def = CustomElement.getDefinition(component);\n\n  return `<${def.name} ${Object.values(def.bindables)\n    .map((bindable) => `${bindable.attribute}.bind=\"${bindable.name}\"`)\n    .join(' ')}>${innerHtml ?? ''}</${def.name}>`;\n}"],"names":["CustomElement"],"mappings":"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"}

package/dist/preview.mjs

@@ -1,6 +1,84 @@
 import Aurelia, { CustomElement } from 'aurelia';
 
-function bootstrapAureliaApp(story, args, domElement, component) {
+// Track Aurelia apps for cleanup
+const appMap = new Map();
+async function teardown(element) {
+    if (appMap.has(element)) {
+        const app = appMap.get(element);
+        if (app) {
+            await app.stop();
+            appMap.delete(element);
+        }
+    }
+}
+const render = (args, context) => {
+    const { id, component: Component } = context;
+    if (!Component) {
+        throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
+    }
+    return { Component, props: args, template: '' };
+};
+async function renderToCanvas({ storyFn, title, name, showMain, showError, storyContext, forceRemount, }, canvasElement, bootstrapAppFn) {
+    // Store reference to the original storybook root element
+    const rootElement = canvasElement;
+    // Ensure we have (or create) a single container inside the root where the Aurelia app actually renders
+    let hostElement;
+    if (rootElement.id === 'storybook-root') {
+        hostElement = rootElement.querySelector('.aurelia-story-container');
+        if (!hostElement) {
+            hostElement = document.createElement('div');
+            hostElement.className = 'aurelia-story-container';
+            hostElement.style.height = '100%';
+            rootElement.appendChild(hostElement);
+        }
+    }
+    else {
+        hostElement = rootElement;
+    }
+    // All app instances are now tracked by the *root* element, ensuring we only ever have one per story iframe
+    const appBootstrapFn = bootstrapAppFn ?? createAureliaApp;
+    const { parameters, component, args } = storyContext;
+    let app = appMap.get(rootElement);
+    const story = storyFn();
+    // Temporary debug logging
+    console.log(`[DEBUG] Story: ${name}, forceRemount: ${forceRemount}, hasExistingApp: ${!!app}, canvasId: ${canvasElement.className}`);
+    if (!story) {
+        showError({
+            title: `Expecting an Aurelia component from the story: "${name}" of "${title}".`,
+            description: `
+        Did you forget to return the Aurelia component from the story?
+        Use "() => ({ template: '<custom-component></custom-component>' })" when defining the story.
+      `,
+        });
+        return () => { };
+    }
+    showMain();
+    if (!app || forceRemount) {
+        if (forceRemount && app) {
+            await teardown(rootElement);
+            app = undefined;
+        }
+        // Clear container before mounting new app
+        hostElement.innerHTML = '';
+        const mergedProps = { ...parameters?.args, ...args, ...story.props };
+        const aureliaApp = appBootstrapFn(story, mergedProps, hostElement, component);
+        await aureliaApp.start();
+        appMap.set(rootElement, aureliaApp);
+        app = aureliaApp;
+    }
+    else {
+        // update existing app props
+        const mergedProps = { ...parameters?.args, ...args, ...story.props };
+        if (app?.root?.controller?.viewModel) {
+            Object.assign(app.root.controller.viewModel, mergedProps);
+        }
+    }
+    // Return cleanup fn
+    return async () => {
+        await teardown(rootElement);
+    };
+}
+function createAureliaApp(story, args, domElement, component) {
     const aurelia = new Aurelia(story.container);
     if (story.items?.length) {
         aurelia.register(...story.items);
@@ -14,7 +92,7 @@ function bootstrapAureliaApp(story, args, domElement, component) {
         aurelia.register(component);
     }
     const App = CustomElement.define({
-        name: 'au-storybook',
+        name: 'sb-app',
         template,
         containerless: true,
     }, class {
@@ -32,41 +110,5 @@ function createComponentTemplate(component, innerHtml) {
         .join(' ')}>${innerHtml ?? ''}</${def.name}>`;
 }
 
-// Track the current story's cleanup function
-let currentCleanup = null;
-const render = (args, context) => {
-    // Clean up previous story if exists
-    if (currentCleanup) {
-        currentCleanup();
-        currentCleanup = null;
-    }
-    // Create a container element
-    const container = document.createElement('div');
-    // Get the story function result
-    const story = context.storyFn();
-    // Bootstrap Aurelia app immediately
-    if (story && (story.Component || story.template)) {
-        const app = bootstrapAureliaApp(story, args, container, story.Component || context.component);
-        // Start the app asynchronously
-        const startPromise = app.start();
-        if (startPromise && typeof startPromise.catch === 'function') {
-            startPromise.catch((error) => {
-                console.error('Failed to start Aurelia app:', error);
-            });
-        }
-        // Set cleanup function
-        currentCleanup = () => {
-            const stopPromise = app.stop();
-            if (stopPromise && typeof stopPromise.catch === 'function') {
-                stopPromise.catch((error) => {
-                    console.error('Failed to stop Aurelia app:', error);
-                });
-            }
-        };
-    }
-    // Return the container element immediately
-    return container;
-};
-
-export { render };
+export { render, renderToCanvas };
 //# sourceMappingURL=preview.mjs.map

package/dist/preview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"preview.mjs","sources":["../src/preview/render.ts","../src/preview.ts"],"sourcesContent":["import { STORY_CHANGED } from 'storybook/internal/core-events';\nimport type { RenderContext, ArgsStoryFn } from 'storybook/internal/types';\nimport type { AureliaRenderer } from './types';\nimport Aurelia, { Constructable, CustomElement } from 'aurelia';\n\ninterface AureliaStoryResult {\n  template: string;\n  components?: unknown[];\n  Component?: unknown;\n  container?: any;\n  items?: unknown[];\n  innerHtml?: string;\n  props?: Record<string, any>;\n}\n\n/**\n * Merges multiple sources into a single object.\n * Sources can be story parameters, args, or story.props.\n */\nfunction mergeStoryProps(\n  ...sources: Array<Record<string, any> | undefined>\n): Record<string, any> {\n  return Object.assign({}, ...sources);\n}\n\n// Track Aurelia apps for cleanup\nconst appMap = new Map<HTMLElement, Aurelia>();\n\nasync function teardown(element: HTMLElement) {\n  if (appMap.has(element)) {\n    const app = appMap.get(element);\n    if (app) {\n      await app.stop();\n      appMap.delete(element);\n    }\n  }\n}\n\nexport const render: ArgsStoryFn<AureliaRenderer> = (args, { id, component: Component }) => {\n  if (!Component) {\n    throw new Error(\n      `Unable to render story ${id} as the component annotation is missing from the default export`\n    );\n  }\n  return { Component, props: args, template: '' };\n};\n\nexport async function renderToCanvas(\n  {\n    storyFn,\n    title,\n    name,\n    showMain,\n    showError,\n    storyContext,\n    forceRemount,\n  }: RenderContext<AureliaRenderer>,\n  canvasElement: HTMLElement,\n  bootstrapAppFn?: typeof bootstrapAureliaApp\n) {\n  const appBootstrapFn = bootstrapAppFn || bootstrapAureliaApp;\n\n  const { parameters, component, args } = storyContext;\n  let app = appMap.get(canvasElement);\n\n  const story = storyFn() as AureliaStoryResult;\n\n  if (!story) {\n    showError({\n      title: `Expecting an Aurelia component from the story: \"${name}\" of \"${title}\".`,\n      description: `\n        Did you forget to return the Aurelia component from the story?\n        Use \"() => ({ template: '<custom-component></custom-component>' })\" when defining the story.\n      `,\n    });\n    return () => {};\n  }\n\n  showMain();\n\n  let mergedProps;\n  // Use full merge (including story.props) when bootstrapping a new app or force remounting.\n  if (!app || forceRemount) {\n    mergedProps = mergeStoryProps(parameters?.args, args, story.props);\n    if (app) {\n      await teardown(canvasElement);\n    }\n    app = appBootstrapFn(\n      story,\n      mergedProps,\n      canvasElement,\n      component as Constructable\n    ) as Aurelia;\n    await app.start();\n    appMap.set(canvasElement, app);\n  } else {\n    // Update the existing app viewModel only with parameters and args (exclude story.props).\n    mergedProps = mergeStoryProps(parameters?.args, args);\n    if (app.root?.controller?.viewModel) {\n      Object.assign(app.root.controller.viewModel, mergedProps);\n    }\n  }\n\n  // Set up story change listener for cleanup\n  const channel = storyContext.viewMode === 'story' ? storyContext.channel : null;\n  let onStoryChange: () => void;\n  if (channel) {\n    onStoryChange = () => {\n      // When the story changes, clean up the Aurelia app\n      teardown(canvasElement);\n    };\n    channel.on(STORY_CHANGED, onStoryChange);\n  }\n\n  // Return teardown function that also unsubscribes from STORY_CHANGED\n  return async () => {\n    if (channel && onStoryChange) {\n      channel.off(STORY_CHANGED, onStoryChange);\n    }\n    await teardown(canvasElement);\n  };\n}\n\nexport function bootstrapAureliaApp(\n  story: AureliaStoryResult,\n  args: Record<string, any>,\n  domElement: HTMLElement,\n  component?: Constructable\n) {\n  const aurelia = new Aurelia(story.container);\n\n  if (story.items?.length) {\n    aurelia.register(...story.items);\n  }\n\n  if (story.components?.length) {\n    aurelia.register(...story.components);\n  }\n\n  let { template } = story;\n\n  if (component) {\n    template = template ?? createComponentTemplate(component, story.innerHtml);\n    aurelia.register(component);\n  }\n\n  const App = CustomElement.define(\n    {\n      name: 'au-storybook',\n      template,\n      containerless: true,\n    },\n    class {}\n  );\n\n  const app = Object.assign(new App(), args);\n\n  return aurelia.app({\n    host: domElement,\n    component: app,\n  });\n}\n\nexport function createComponentTemplate(\n  component: Constructable,\n  innerHtml?: string\n): string {\n  const def = CustomElement.getDefinition(component);\n\n  return `<${def.name} ${Object.values(def.bindables)\n    .map((bindable) => `${bindable.attribute}.bind=\"${bindable.name}\"`)\n    .join(' ')}>${innerHtml ?? ''}</${def.name}>`;\n}","import { renderToCanvas, bootstrapAureliaApp } from './preview/render';\nimport Aurelia from 'aurelia';\n\n// Track the current story's cleanup function\nlet currentCleanup: (() => void) | null = null;\n\nexport const render = (args: any, context: any) => {\n  // Clean up previous story if exists\n  if (currentCleanup) {\n    currentCleanup();\n    currentCleanup = null;\n  }\n\n  // Create a container element\n  const container = document.createElement('div');\n  \n  // Get the story function result\n  const story = context.storyFn();\n  \n  // Bootstrap Aurelia app immediately\n  if (story && (story.Component || story.template)) {\n    const app = bootstrapAureliaApp(\n      story,\n      args,\n      container,\n      story.Component || context.component\n    ) as Aurelia;\n    \n    // Start the app asynchronously\n    const startPromise = app.start();\n    if (startPromise && typeof startPromise.catch === 'function') {\n      startPromise.catch((error: any) => {\n        console.error('Failed to start Aurelia app:', error);\n      });\n    }\n    \n    // Set cleanup function\n    currentCleanup = () => {\n      const stopPromise = app.stop();\n      if (stopPromise && typeof stopPromise.catch === 'function') {\n        stopPromise.catch((error: any) => {\n          console.error('Failed to stop Aurelia app:', error);\n        });\n      }\n    };\n  }\n  \n  // Return the container element immediately\n  return container;\n}; "],"names":[],"mappings":"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"}
+{"version":3,"file":"preview.mjs","sources":["../src/preview/render.ts"],"sourcesContent":["import { STORY_CHANGED } from 'storybook/internal/core-events';\nimport type { RenderContext, ArgsStoryFn } from 'storybook/internal/types';\nimport type { AureliaRenderer } from './types';\nimport Aurelia, { Constructable, CustomElement } from 'aurelia';\n\ninterface AureliaStoryResult {\n  template: string;\n  components?: unknown[];\n  Component?: unknown;\n  container?: any;\n  items?: unknown[];\n  innerHtml?: string;\n  props?: Record<string, any>;\n}\n\n// Track Aurelia apps for cleanup\nconst appMap = new Map<HTMLElement, any>();\n\nasync function teardown(element: HTMLElement) {\n  if (appMap.has(element)) {\n    const app = appMap.get(element);\n    if (app) {\n      await app.stop();\n      appMap.delete(element);\n    }\n  }\n}\n\nexport const render: ArgsStoryFn<AureliaRenderer> = (args, context) => {\n  const { id, component: Component } = context;\n  \n  if (!Component) {\n    throw new Error(\n      `Unable to render story ${id} as the component annotation is missing from the default export`\n    );\n  }\n  return { Component, props: args, template: '' };\n};\n\nexport async function renderToCanvas(\n  {\n    storyFn,\n    title,\n    name,\n    showMain,\n    showError,\n    storyContext,\n    forceRemount,\n  }: RenderContext<AureliaRenderer>,\n  canvasElement: HTMLElement,\n  bootstrapAppFn?: typeof createAureliaApp\n) {\n  // Store reference to the original storybook root element\n  const rootElement = canvasElement;\n\n  // Ensure we have (or create) a single container inside the root where the Aurelia app actually renders\n  let hostElement: HTMLElement;\n  if (rootElement.id === 'storybook-root') {\n    hostElement = rootElement.querySelector('.aurelia-story-container') as HTMLElement;\n    if (!hostElement) {\n      hostElement = document.createElement('div');\n      hostElement.className = 'aurelia-story-container';\n      hostElement.style.height = '100%';\n      rootElement.appendChild(hostElement);\n    }\n  } else {\n    hostElement = rootElement;\n  }\n\n  // All app instances are now tracked by the *root* element, ensuring we only ever have one per story iframe\n  const appBootstrapFn = bootstrapAppFn ?? createAureliaApp;\n  const { parameters, component, args } = storyContext;\n  \n  let app = appMap.get(rootElement);\n  const story = storyFn() as AureliaStoryResult;\n  \n  // Temporary debug logging\n  console.log(`[DEBUG] Story: ${name}, forceRemount: ${forceRemount}, hasExistingApp: ${!!app}, canvasId: ${canvasElement.className}`);\n\n  if (!story) {\n    showError({\n      title: `Expecting an Aurelia component from the story: \"${name}\" of \"${title}\".`,\n      description: `\n        Did you forget to return the Aurelia component from the story?\n        Use \"() => ({ template: '<custom-component></custom-component>' })\" when defining the story.\n      `,\n    });\n    return () => {};\n  }\n\n  showMain();\n\n  if (!app || forceRemount) {\n    if (forceRemount && app) {\n      await teardown(rootElement);\n      app = undefined;\n    }\n    // Clear container before mounting new app\n    hostElement.innerHTML = '';\n\n    const mergedProps = { ...parameters?.args, ...args, ...story.props };\n\n    const aureliaApp = appBootstrapFn(\n      story,\n      mergedProps,\n      hostElement,\n      component as Constructable\n    );\n    await aureliaApp.start();\n    appMap.set(rootElement, aureliaApp);\n    app = aureliaApp;\n  } else {\n    // update existing app props\n    const mergedProps = { ...parameters?.args, ...args, ...story.props };\n    if (app?.root?.controller?.viewModel) {\n      Object.assign(app.root.controller.viewModel, mergedProps);\n    }\n  }\n\n  // Return cleanup fn\n  return async () => {\n    await teardown(rootElement);\n  };\n}\n\nexport function createAureliaApp(\n  story: AureliaStoryResult,\n  args: Record<string, any>,\n  domElement: HTMLElement,\n  component?: Constructable\n) {\n  const aurelia = new Aurelia(story.container);\n\n  if (story.items?.length) {\n    aurelia.register(...story.items);\n  }\n\n  if (story.components?.length) {\n    aurelia.register(...story.components);\n  }\n\n  let { template } = story;\n\n  if (component) {\n    template = template ?? createComponentTemplate(component, story.innerHtml);\n    aurelia.register(component);\n  }\n\n  const App = CustomElement.define(\n    {\n      name: 'sb-app',\n      template,\n      containerless: true,\n    },\n    class {}\n  );\n\n  const app = Object.assign(new App(), args);\n\n  return aurelia.app({\n    host: domElement,\n    component: app,\n  });\n}\n\nexport function createComponentTemplate(\n  component: Constructable,\n  innerHtml?: string\n): string {\n  const def = CustomElement.getDefinition(component);\n\n  return `<${def.name} ${Object.values(def.bindables)\n    .map((bindable) => `${bindable.attribute}.bind=\"${bindable.name}\"`)\n    .join(' ')}>${innerHtml ?? ''}</${def.name}>`;\n}"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurelia/storybook",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Storybook plugin to render Aurelia 2 components using Vite or Webpack",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/rollup.config.mjs

@@ -7,7 +7,12 @@ const external = [
   '@aurelia/runtime-html',
   '@aurelia/vite-plugin',
   '@storybook/builder-vite',
-  'aurelia'
+  'aurelia',
+  'react',
+  'react-dom',
+  'storybook/internal/core-events',
+  'storybook/internal/types',
+  'storybook/theming'
 ];
 
 // Get all TypeScript files from src directory

package/src/index.ts

@@ -1,4 +1,32 @@
+import type { StorybookConfig } from 'storybook/internal/types';
 import { renderToCanvas } from './preview/render';
 
 export { renderToCanvas };
 export const render = renderToCanvas;
+
+// Define the framework
+export const framework = {
+  name: '@aurelia/storybook',
+  options: {}
+};
+
+// Framework configuration for Storybook
+export const frameworkOptions = {
+  builder: {
+    name: '@storybook/builder-vite',
+    options: {}
+  }
+};
+
+// Export a complete framework configuration
+export const aureliaFramework = {
+  name: '@aurelia/storybook',
+  options: {},
+  builder: '@storybook/builder-vite'
+};
+
+// Provide external dependencies configuration
+export const externals = {
+  'react': 'React',
+  'react-dom': 'ReactDOM'
+};

package/src/preset.ts

@@ -7,7 +7,25 @@ import { getRules } from './webpack';
  * Optionally adjust the Vite configuration.
  */
 export async function viteFinal(config: any): Promise<any> {
-    // For now, return the config unchanged.
+    // Configure Vite to properly handle dependencies
+    config.define = config.define || {};
+    config.define['process.env.NODE_ENV'] = JSON.stringify(process.env.NODE_ENV || 'development');
+    
+    // Configure optimization deps
+    config.optimizeDeps = config.optimizeDeps || {};
+    config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
+    
+    // Only exclude Aurelia-specific dependencies that cause issues
+    const excludeList = [
+        '@aurelia/runtime-html'
+    ];
+    
+    excludeList.forEach(dep => {
+        if (!config.optimizeDeps.exclude.includes(dep)) {
+            config.optimizeDeps.exclude.push(dep);
+        }
+    });
+    
     return config;
 }