@aurelia/storybook 0.1.0 → 1.0.0

package/apps/hello-world-webpack/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "examples",
+  "description": "An Aurelia 2 client application.",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "???"
+  },
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@aurelia/router": "latest",
+    "aurelia": "2.0.0-beta.14"
+  },
+  "devDependencies": {
+    "@aurelia/storybook": "file:../../",
+    "@aurelia/testing": "latest",
+    "@aurelia/webpack-loader": "latest",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^9.0.12",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/html-webpack5": "^8.6.14",
+    "@types/node": "^22.10.2",
+    "autoprefixer": "^10.4.20",
+    "css-loader": "^7.1.2",
+    "dotenv-webpack": "^8.1.0",
+    "eslint": "^9.17.0",
+    "globals": "^15.14.0",
+    "html-webpack-plugin": "^5.6.3",
+    "postcss": "^8.4.49",
+    "postcss-loader": "^8.1.1",
+    "storybook": "^9.0.12",
+    "style-loader": "^4.0.0",
+    "stylelint": "^16.12.0",
+    "stylelint-config-standard": "^36.0.1",
+    "ts-loader": "^9.5.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
+    "webpack": "^5.97.1",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.0"
+  },
+  "scripts": {
+    "lint:js": "eslint src",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "lint": "npm run lint:js && npm run lint:css",
+    "pretest": "npm run lint",
+    "start": "webpack-dev-server",
+    "build": "webpack",
+    "analyze": "webpack --env production --analyze",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}

package/apps/hello-world-webpack/src/main.ts

@@ -0,0 +1,6 @@
+import Aurelia from 'aurelia';
+import { MyApp } from './my-app';
+
+Aurelia
+  .app(MyApp)
+  .start();

package/apps/hello-world-webpack/src/my-app.css

@@ -0,0 +1,3 @@
+.message {
+  background-color: lightblue;
+}

package/apps/hello-world-webpack/src/my-app.html

@@ -0,0 +1 @@
+<div class="message">${message}</div>

package/apps/hello-world-webpack/src/my-app.stories.ts

@@ -0,0 +1,12 @@
+import { MyApp } from './my-app';
+
+export default {
+  title: 'My-App',
+  component: MyApp,
+};
+
+export const Default = () => ({
+  Component: MyApp,
+  template: '<my-app></my-app>',
+  props: {}
+}); 

package/apps/hello-world-webpack/src/my-app.ts

@@ -0,0 +1,3 @@
+export class MyApp {
+  public message = 'Hello World!';
+}

package/apps/hello-world-webpack/src/resource.d.ts

@@ -0,0 +1,13 @@
+declare module '*.html' {
+  import { IContainer, PartialBindableDefinition } from 'aurelia';
+  export const name: string;
+  export const template: string;
+  export default template;
+  export const dependencies: string[];
+  export const containerless: boolean | undefined;
+  export const bindables: Record<string, PartialBindableDefinition>;
+  export const shadowOptions: { mode: 'open' | 'closed' } | undefined;
+  export function register(container: IContainer): void;
+}
+
+declare module '*.css';

package/apps/hello-world-webpack/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "target": "ES2017",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "importHelpers": true,
+    "sourceMap": true
+  },
+  "include": [
+    "src"
+  ],
+  "files": [
+    "src/resource.d.ts"
+  ]
+}

package/apps/hello-world-webpack/webpack.config.js

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
+const Dotenv = require('dotenv-webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+
+
+const cssLoader = {
+  loader: 'css-loader'
+};
+
+const postcssLoader = {
+  loader: 'postcss-loader',
+  options: {
+    postcssOptions: {
+      plugins: ['autoprefixer']
+    }
+  }
+};
+
+module.exports = function(env, { analyze }) {
+  const production = env.production || process.env.NODE_ENV === 'production';
+  return {
+    target: 'web',
+    mode: production ? 'production' : 'development',
+    devtool: production ? undefined : 'eval-source-map',
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            // Terser fast minify mode
+            // https://github.com/terser-js/terser#terser-fast-minify-mode
+            // It's a good balance on size and speed to turn off compress.
+            // Also bypass some terser bug.
+            compress: false
+          },
+        }),
+      ],
+    },
+    entry: {
+      entry: './src/main.ts',
+    },
+    output: {
+      clean: true,
+      path: path.resolve(__dirname, 'dist'),
+      filename: production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
+    },
+    resolve: {
+      extensions: ['.ts', '.js'],
+      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+      alias: production ? {
+        // add your production aliases here
+      } : {
+        ...getAureliaDevAliases()
+        // add your development aliases here
+      }
+    },
+    devServer: {
+      historyApiFallback: true,
+      open: !process.env.CI,
+      port: 9000
+    },
+    module: {
+      rules: [
+        { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset' },
+        { test: /\.(woff|woff2|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,  type: 'asset' },
+        { test: /\.css$/i, use: [ 'style-loader', cssLoader, postcssLoader ] },
+        { test: /\.ts$/i, use: ['ts-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
+        {
+          test: /[/\\]src[/\\].+\.html$/i,
+          use: '@aurelia/webpack-loader',
+          exclude: /node_modules/
+        }
+      ]
+    },
+    plugins: [
+      new HtmlWebpackPlugin({ template: 'index.html', favicon: 'favicon.ico' }),
+      new Dotenv({
+        path: `./.env${production ? '' :  '.' + (process.env.NODE_ENV || 'development')}`,
+      }),
+      analyze && new BundleAnalyzerPlugin()
+    ].filter(p => p)
+  }
+}
+
+function getAureliaDevAliases() {
+  return [
+    'aurelia',
+    'fetch-client',
+    'kernel',
+    'metadata',
+    'platform',
+    'platform-browser',
+    'route-recognizer',
+    'router',
+    'router-lite',
+    'runtime',
+    'runtime-html',
+    'testing',
+    'state',
+    'ui-virtualization'
+  ].reduce((map, pkg) => {
+    const name = pkg === 'aurelia' ? pkg : `@aurelia/${pkg}`;
+    try {
+      const packageLocation = require.resolve(name);
+      map[name] = path.resolve(packageLocation, `../../esm/index.dev.mjs`);
+    } catch {/**/}
+    return map;
+  }, {});
+}

package/dist/index.js

@@ -1,3 +1,112 @@
-import { renderToCanvas } from './preview/render';
-export { renderToCanvas };
-export const render = renderToCanvas;
+'use strict';
+
+var coreEvents = require('@storybook/core-events');
+var Aurelia = require('aurelia');
+
+/**
+ * Merges multiple sources into a single object.
+ * Sources can be story parameters, args, or story.props.
+ */
+function mergeStoryProps(...sources) {
+    return Object.assign({}, ...sources);
+}
+// 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);
+        }
+    }
+}
+async function renderToCanvas({ storyFn, title, name, showMain, showError, storyContext, forceRemount, }, canvasElement, bootstrapAppFn) {
+    const appBootstrapFn = bootstrapAppFn || bootstrapAureliaApp;
+    const { parameters, component, args } = storyContext;
+    let app = appMap.get(canvasElement);
+    const story = storyFn();
+    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();
+    let mergedProps;
+    // Use full merge (including story.props) when bootstrapping a new app or force remounting.
+    if (!app || forceRemount) {
+        mergedProps = mergeStoryProps(parameters?.args, args, story.props);
+        if (app) {
+            await teardown(canvasElement);
+        }
+        app = appBootstrapFn(story, mergedProps, canvasElement, component);
+        await app.start();
+        appMap.set(canvasElement, app);
+    }
+    else {
+        // Update the existing app viewModel only with parameters and args (exclude story.props).
+        mergedProps = mergeStoryProps(parameters?.args, args);
+        if (app.root?.controller?.viewModel) {
+            Object.assign(app.root.controller.viewModel, mergedProps);
+        }
+    }
+    // Set up story change listener for cleanup
+    const channel = storyContext.viewMode === 'story' ? storyContext.channel : null;
+    let onStoryChange;
+    if (channel) {
+        onStoryChange = () => {
+            // When the story changes, clean up the Aurelia app
+            teardown(canvasElement);
+        };
+        channel.on(coreEvents.STORY_CHANGED, onStoryChange);
+    }
+    // Return teardown function that also unsubscribes from STORY_CHANGED
+    return async () => {
+        if (channel && onStoryChange) {
+            channel.off(coreEvents.STORY_CHANGED, onStoryChange);
+        }
+        await teardown(canvasElement);
+    };
+}
+function bootstrapAureliaApp(story, args, domElement, component) {
+    const aurelia = new Aurelia(story.container);
+    if (story.items?.length) {
+        aurelia.register(...story.items);
+    }
+    if (story.components?.length) {
+        aurelia.register(...story.components);
+    }
+    let { template } = story;
+    if (component) {
+        template = template ?? createComponentTemplate(component, story.innerHtml);
+        aurelia.register(component);
+    }
+    const App = Aurelia.CustomElement.define({
+        name: 'au-storybook',
+        template,
+        containerless: true,
+    }, class {
+    });
+    const app = Object.assign(new App(), args);
+    return aurelia.app({
+        host: domElement,
+        component: app,
+    });
+}
+function createComponentTemplate(component, innerHtml) {
+    const def = Aurelia.CustomElement.getDefinition(component);
+    return `<${def.name} ${Object.values(def.bindables)
+        .map((bindable) => `${bindable.attribute}.bind="${bindable.name}"`)
+        .join(' ')}>${innerHtml ?? ''}</${def.name}>`;
+}
+
+const render = renderToCanvas;
+
+exports.render = render;
+exports.renderToCanvas = renderToCanvas;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/preview/render.ts","../src/index.ts"],"sourcesContent":["import { STORY_CHANGED } from '@storybook/core-events';\nimport type { RenderContext, ArgsStoryFn } from '@storybook/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 } from './preview/render';\n\nexport { renderToCanvas };\nexport const render = renderToCanvas;\n"],"names":["STORY_CHANGED","CustomElement"],"mappings":"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"}

package/dist/index.mjs

@@ -0,0 +1,109 @@
+import { STORY_CHANGED } from '@storybook/core-events';
+import Aurelia, { CustomElement } from 'aurelia';
+
+/**
+ * Merges multiple sources into a single object.
+ * Sources can be story parameters, args, or story.props.
+ */
+function mergeStoryProps(...sources) {
+    return Object.assign({}, ...sources);
+}
+// 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);
+        }
+    }
+}
+async function renderToCanvas({ storyFn, title, name, showMain, showError, storyContext, forceRemount, }, canvasElement, bootstrapAppFn) {
+    const appBootstrapFn = bootstrapAppFn || bootstrapAureliaApp;
+    const { parameters, component, args } = storyContext;
+    let app = appMap.get(canvasElement);
+    const story = storyFn();
+    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();
+    let mergedProps;
+    // Use full merge (including story.props) when bootstrapping a new app or force remounting.
+    if (!app || forceRemount) {
+        mergedProps = mergeStoryProps(parameters?.args, args, story.props);
+        if (app) {
+            await teardown(canvasElement);
+        }
+        app = appBootstrapFn(story, mergedProps, canvasElement, component);
+        await app.start();
+        appMap.set(canvasElement, app);
+    }
+    else {
+        // Update the existing app viewModel only with parameters and args (exclude story.props).
+        mergedProps = mergeStoryProps(parameters?.args, args);
+        if (app.root?.controller?.viewModel) {
+            Object.assign(app.root.controller.viewModel, mergedProps);
+        }
+    }
+    // Set up story change listener for cleanup
+    const channel = storyContext.viewMode === 'story' ? storyContext.channel : null;
+    let onStoryChange;
+    if (channel) {
+        onStoryChange = () => {
+            // When the story changes, clean up the Aurelia app
+            teardown(canvasElement);
+        };
+        channel.on(STORY_CHANGED, onStoryChange);
+    }
+    // Return teardown function that also unsubscribes from STORY_CHANGED
+    return async () => {
+        if (channel && onStoryChange) {
+            channel.off(STORY_CHANGED, onStoryChange);
+        }
+        await teardown(canvasElement);
+    };
+}
+function bootstrapAureliaApp(story, args, domElement, component) {
+    const aurelia = new Aurelia(story.container);
+    if (story.items?.length) {
+        aurelia.register(...story.items);
+    }
+    if (story.components?.length) {
+        aurelia.register(...story.components);
+    }
+    let { template } = story;
+    if (component) {
+        template = template ?? createComponentTemplate(component, story.innerHtml);
+        aurelia.register(component);
+    }
+    const App = CustomElement.define({
+        name: 'au-storybook',
+        template,
+        containerless: true,
+    }, class {
+    });
+    const app = Object.assign(new App(), args);
+    return aurelia.app({
+        host: domElement,
+        component: app,
+    });
+}
+function createComponentTemplate(component, innerHtml) {
+    const def = CustomElement.getDefinition(component);
+    return `<${def.name} ${Object.values(def.bindables)
+        .map((bindable) => `${bindable.attribute}.bind="${bindable.name}"`)
+        .join(' ')}>${innerHtml ?? ''}</${def.name}>`;
+}
+
+const render = renderToCanvas;
+
+export { render, renderToCanvas };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/preview/render.ts","../src/index.ts"],"sourcesContent":["import { STORY_CHANGED } from '@storybook/core-events';\nimport type { RenderContext, ArgsStoryFn } from '@storybook/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 } from './preview/render';\n\nexport { renderToCanvas };\nexport const render = renderToCanvas;\n"],"names":[],"mappings":"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"}

package/dist/preset.js

@@ -1,11 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * A set of rules to be added to the webpack configuration.
+ * @returns
+ */
+function getRules() {
+    return [
+        {
+            test: /\.ts$/i,
+            use: ['ts-loader', '@aurelia/webpack-loader'],
+            exclude: /node_modules/,
+        },
+        {
+            test: /\.html$/i,
+            use: '@aurelia/webpack-loader',
+            exclude: /node_modules/,
+        },
+    ];
+}
+
 // src/preset.ts
 // Minimal preset for Storybook-Aurelia2
 /**
  * Optionally adjust the Vite configuration.
  */
-export async function viteFinal(config) {
+async function viteFinal(config) {
     // For now, return the config unchanged.
     return config;
 }
+/**
+ * A function to configure webpack.
+ * @param config
+ * @returns
+ */
+async function webpackFinal(config) {
+    const rules = config.module?.rules;
+    if (rules) {
+        rules.push(...getRules());
+    }
+    return config;
+}
 // Export a default for compatibility.
-export default { viteFinal };
+var preset = { viteFinal, webpackFinal };
+const previewAnnotations = [require.resolve('./preview')];
+
+exports.default = preset;
+exports.previewAnnotations = previewAnnotations;
+exports.viteFinal = viteFinal;
+exports.webpackFinal = webpackFinal;
+//# sourceMappingURL=preset.js.map

package/dist/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.js","sources":["../src/webpack.ts","../src/preset.ts"],"sourcesContent":["// src/webpack.ts\nimport type { RuleSetRule } from 'webpack';\n\n/**\n * A set of rules to be added to the webpack configuration.\n * @returns\n */\nexport function getRules(): RuleSetRule[] {\n  return [\n    {\n      test: /\\.ts$/i,\n      use: ['ts-loader', '@aurelia/webpack-loader'],\n      exclude: /node_modules/,\n    },\n    {\n      test: /\\.html$/i,\n      use: '@aurelia/webpack-loader',\n      exclude: /node_modules/,\n    },\n  ];\n}\n","// src/preset.ts\n// Minimal preset for Storybook-Aurelia2\n\nimport { getRules } from './webpack';\n\n/**\n * Optionally adjust the Vite configuration.\n */\nexport async function viteFinal(config: any): Promise<any> {\n    // For now, return the config unchanged.\n    return config;\n}\n\n/**\n * A function to configure webpack.\n * @param config\n * @returns\n */\nexport async function webpackFinal(config: any): Promise<any> {\n    const rules = config.module?.rules;\n    if (rules) {\n        rules.push(...getRules());\n    }\n\n    return config;\n}\n\n// Export a default for compatibility.\nexport default { viteFinal, webpackFinal };\n\nexport const previewAnnotations = [require.resolve('./preview')];\n"],"names":[],"mappings":";;;;AAGA;;;AAGG;SACa,QAAQ,GAAA;IACtB,OAAO;AACL,QAAA;AACE,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,GAAG,EAAE,CAAC,WAAW,EAAE,yBAAyB,CAAC;AAC7C,YAAA,OAAO,EAAE,cAAc;AACxB,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,GAAG,EAAE,yBAAyB;AAC9B,YAAA,OAAO,EAAE,cAAc;AACxB,SAAA;KACF;AACH;;ACpBA;AACA;AAIA;;AAEG;AACI,eAAe,SAAS,CAAC,MAAW,EAAA;;AAEvC,IAAA,OAAO,MAAM;AACjB;AAEA;;;;AAIG;AACI,eAAe,YAAY,CAAC,MAAW,EAAA;AAC1C,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK;IAClC,IAAI,KAAK,EAAE;AACP,QAAA,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC;;AAG7B,IAAA,OAAO,MAAM;AACjB;AAEA;AACA,aAAe,EAAE,SAAS,EAAE,YAAY,EAAE;AAEnC,MAAM,kBAAkB,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;;;;;;;"}

package/dist/preset.mjs

@@ -0,0 +1,46 @@
+/**
+ * A set of rules to be added to the webpack configuration.
+ * @returns
+ */
+function getRules() {
+    return [
+        {
+            test: /\.ts$/i,
+            use: ['ts-loader', '@aurelia/webpack-loader'],
+            exclude: /node_modules/,
+        },
+        {
+            test: /\.html$/i,
+            use: '@aurelia/webpack-loader',
+            exclude: /node_modules/,
+        },
+    ];
+}
+
+// src/preset.ts
+// Minimal preset for Storybook-Aurelia2
+/**
+ * Optionally adjust the Vite configuration.
+ */
+async function viteFinal(config) {
+    // For now, return the config unchanged.
+    return config;
+}
+/**
+ * A function to configure webpack.
+ * @param config
+ * @returns
+ */
+async function webpackFinal(config) {
+    const rules = config.module?.rules;
+    if (rules) {
+        rules.push(...getRules());
+    }
+    return config;
+}
+// Export a default for compatibility.
+var preset = { viteFinal, webpackFinal };
+const previewAnnotations = [require.resolve('./preview')];
+
+export { preset as default, previewAnnotations, viteFinal, webpackFinal };
+//# sourceMappingURL=preset.mjs.map

package/dist/preset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.mjs","sources":["../src/webpack.ts","../src/preset.ts"],"sourcesContent":["// src/webpack.ts\nimport type { RuleSetRule } from 'webpack';\n\n/**\n * A set of rules to be added to the webpack configuration.\n * @returns\n */\nexport function getRules(): RuleSetRule[] {\n  return [\n    {\n      test: /\\.ts$/i,\n      use: ['ts-loader', '@aurelia/webpack-loader'],\n      exclude: /node_modules/,\n    },\n    {\n      test: /\\.html$/i,\n      use: '@aurelia/webpack-loader',\n      exclude: /node_modules/,\n    },\n  ];\n}\n","// src/preset.ts\n// Minimal preset for Storybook-Aurelia2\n\nimport { getRules } from './webpack';\n\n/**\n * Optionally adjust the Vite configuration.\n */\nexport async function viteFinal(config: any): Promise<any> {\n    // For now, return the config unchanged.\n    return config;\n}\n\n/**\n * A function to configure webpack.\n * @param config\n * @returns\n */\nexport async function webpackFinal(config: any): Promise<any> {\n    const rules = config.module?.rules;\n    if (rules) {\n        rules.push(...getRules());\n    }\n\n    return config;\n}\n\n// Export a default for compatibility.\nexport default { viteFinal, webpackFinal };\n\nexport const previewAnnotations = [require.resolve('./preview')];\n"],"names":[],"mappings":"AAGA;;;AAGG;SACa,QAAQ,GAAA;IACtB,OAAO;AACL,QAAA;AACE,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,GAAG,EAAE,CAAC,WAAW,EAAE,yBAAyB,CAAC;AAC7C,YAAA,OAAO,EAAE,cAAc;AACxB,SAAA;AACD,QAAA;AACE,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,GAAG,EAAE,yBAAyB;AAC9B,YAAA,OAAO,EAAE,cAAc;AACxB,SAAA;KACF;AACH;;ACpBA;AACA;AAIA;;AAEG;AACI,eAAe,SAAS,CAAC,MAAW,EAAA;;AAEvC,IAAA,OAAO,MAAM;AACjB;AAEA;;;;AAIG;AACI,eAAe,YAAY,CAAC,MAAW,EAAA;AAC1C,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK;IAClC,IAAI,KAAK,EAAE;AACP,QAAA,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC;;AAG7B,IAAA,OAAO,MAAM;AACjB;AAEA;AACA,aAAe,EAAE,SAAS,EAAE,YAAY,EAAE;AAEnC,MAAM,kBAAkB,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;;;;"}