@aurelia/storybook 2.2.1 → 2.3.0

package/src/index.ts

@@ -1,42 +0,0 @@
-import { renderToCanvas } from './preview/render';
-import { defineAureliaStory } from './preview/helpers';
-
-export { renderToCanvas };
-export const render = renderToCanvas;
-export { defineAureliaStory };
-export type {
-  AureliaRenderer,
-  AureliaStoryResult,
-  AureliaArgsStoryFn,
-  AureliaRenderContext,
-  AureliaStoryContext,
-  AureliaParameters,
-  AureliaStoryParameters
-} from './preview/types';
-
-// 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

@@ -1,79 +0,0 @@
-// src/preset.ts
-// Minimal preset for Storybook-Aurelia2
-
-import { getRules, getRsbuildRules } from './webpack';
-
-/**
- * Optionally adjust the Vite configuration.
- */
-export async function viteFinal(config: any): Promise<any> {
-    // 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;
-}
-
-async function loadMergeRsbuildConfig() {
-    try {
-        const { mergeRsbuildConfig } = await import('@rsbuild/core');
-        return mergeRsbuildConfig;
-    } catch (error: any) {
-        const message = error instanceof Error ? error.message : String(error);
-        throw new Error(
-            `@aurelia/storybook: rsbuild support requires @rsbuild/core to be installed. Original error: ${message}`
-        );
-    }
-}
-
-/**
- * Optionally adjust the Rsbuild configuration (Rspack-based).
- */
-export async function rsbuildFinal(config: any): Promise<any> {
-    const mergeRsbuildConfig = await loadMergeRsbuildConfig();
-
-    return mergeRsbuildConfig(config, {
-        tools: {
-            rspack: (rspackConfig: any) => {
-                const moduleConfig = rspackConfig.module ?? (rspackConfig.module = {});
-                const rules = moduleConfig.rules ?? (moduleConfig.rules = []);
-                rules.push(...getRsbuildRules());
-                return rspackConfig;
-            }
-        }
-    });
-}
-
-/**
- * A function to configure webpack.
- * @param config
- * @returns
- */
-export async function webpackFinal(config: any): Promise<any> {
-    const rules = config.module?.rules;
-    if (rules) {
-        rules.push(...getRules());
-    }
-
-    return config;
-}
-
-// Export a default for compatibility.
-export default { viteFinal, rsbuildFinal, webpackFinal };
-
-export const previewAnnotations = ['./preview.js'];

package/src/preview/helpers.ts

@@ -1,7 +0,0 @@
-import type { AureliaStoryResult } from './types';
-
-export function defineAureliaStory<TArgs = Record<string, unknown>>(
-  story: AureliaStoryResult<TArgs>
-): AureliaStoryResult<TArgs> {
-  return story;
-}

package/src/preview/render.ts

@@ -1,243 +0,0 @@
-import type { RenderContext, ArgsStoryFn } from './storybook-types';
-import type {
-  AureliaRenderer,
-  AureliaStoryResult,
-  AureliaParameters,
-  AureliaStoryContext,
-} from './types';
-import Aurelia, { Constructable, CustomElement } from 'aurelia';
-
-// Track Aurelia apps for cleanup
-const appMap = new Map<HTMLElement, any>();
-
-function mergeStoryProps(
-  parameters: { args?: Record<string, any> } | undefined,
-  storyArgs: Record<string, any> | undefined,
-  storyProps: Record<string, any> | undefined
-) {
-  return { ...parameters?.args, ...storyArgs, ...storyProps };
-}
-
-function getAureliaParameters(
-  storyContext?: AureliaStoryContext
-): AureliaParameters | undefined {
-  const parameters = storyContext?.parameters?.aurelia;
-  if (!parameters || typeof parameters !== 'object') {
-    return undefined;
-  }
-  return parameters as AureliaParameters;
-}
-
-function normalizeRegistrations(
-  parameters: AureliaParameters | undefined
-): unknown[] {
-  if (!parameters) {
-    return [];
-  }
-
-  const register = Array.isArray(parameters.register) ? parameters.register : [];
-  const components = Array.isArray(parameters.components) ? parameters.components : [];
-  const items = Array.isArray(parameters.items) ? parameters.items : [];
-
-  return [...register, ...components, ...items].filter(Boolean);
-}
-
-async function teardown(element: HTMLElement) {
-  if (appMap.has(element)) {
-    const app = appMap.get(element);
-    if (app) {
-      await app.stop();
-      appMap.delete(element);
-    }
-  }
-}
-
-export const render: ArgsStoryFn<AureliaRenderer> = (args, context) => {
-  const { id, component: Component } = context;
-  
-  if (!Component) {
-    const label = context.title && context.name ? `${context.title} / ${context.name}` : id;
-    throw new Error(
-      `Unable to render story ${label} as the component annotation is missing from the default export`
-    );
-  }
-  return { Component, props: args };
-};
-
-export async function renderToCanvas(
-  {
-    storyFn,
-    title,
-    name,
-    showMain,
-    showError,
-    storyContext,
-    forceRemount,
-  }: RenderContext<AureliaRenderer>,
-  canvasElement: HTMLElement,
-  bootstrapAppFn?: typeof createAureliaApp
-) {
-  // 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: HTMLElement;
-  if (rootElement.id === 'storybook-root') {
-    hostElement = rootElement.querySelector('.aurelia-story-container') as HTMLElement;
-    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() as AureliaStoryResult;
-  
-  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 = mergeStoryProps(parameters, args, story.props);
-
-    const aureliaApp = appBootstrapFn(
-      story,
-      mergedProps,
-      hostElement,
-      component as Constructable,
-      storyContext
-    );
-    await aureliaApp.start();
-    appMap.set(rootElement, aureliaApp);
-    app = aureliaApp;
-  } else {
-    // update existing app props
-    const mergedProps = mergeStoryProps(parameters, args, story.props);
-    if (app?.root?.controller?.viewModel) {
-      Object.assign(app.root.controller.viewModel, mergedProps);
-    }
-  }
-
-  // Return cleanup fn
-  return async () => {
-    await teardown(rootElement);
-  };
-}
-
-export function createAureliaApp(
-  story: AureliaStoryResult,
-  args: Record<string, any>,
-  domElement: HTMLElement,
-  component?: Constructable,
-  storyContext?: AureliaStoryContext
-) {
-  const aurelia = new Aurelia(story.container);
-  const { container } = aurelia;
-  const aureliaParameters = getAureliaParameters(storyContext);
-
-  const registerIfNeeded = (resource: unknown) => {
-    if (!resource) {
-      return;
-    }
-
-    if (CustomElement.isType(resource)) {
-      const definition = CustomElement.getDefinition(resource);
-      if (container.has(definition.key, false)) {
-        return;
-      }
-    }
-
-    aurelia.register(resource);
-  };
-
-  const registerAll = (resources?: unknown[]) => {
-    if (!resources?.length) {
-      return;
-    }
-
-    for (const resource of resources) {
-      registerIfNeeded(resource);
-    }
-  };
-
-  if (aureliaParameters?.configureContainer && storyContext) {
-    aureliaParameters.configureContainer(container, storyContext);
-  }
-
-  registerAll(normalizeRegistrations(aureliaParameters));
-  registerAll(story.items);
-
-  const storyComponents = (story.components ?? []).filter(Boolean);
-  const dedupedComponents = component
-    ? storyComponents.filter((entry) => entry !== component)
-    : storyComponents;
-
-  for (const entry of dedupedComponents) {
-    registerIfNeeded(entry);
-  }
-
-  let { template } = story;
-
-  if (component) {
-    template = template ?? createComponentTemplate(component, story.innerHtml);
-    registerIfNeeded(component);
-  }
-
-  const App = CustomElement.define(
-    {
-      name: 'sb-app',
-      template,
-      containerless: true,
-    },
-    class {}
-  );
-
-  const app = Object.assign(new App(), args);
-
-  if (aureliaParameters?.configure && storyContext) {
-    aureliaParameters.configure(aurelia, storyContext);
-  }
-
-  return aurelia.app({
-    host: domElement,
-    component: app,
-  });
-}
-
-export function createComponentTemplate(
-  component: Constructable,
-  innerHtml?: string
-): string {
-  const def = CustomElement.getDefinition(component);
-
-  const bindings = Object.values(def.bindables)
-    .map((bindable) => `${bindable.attribute}.bind="${bindable.name}"`)
-    .join(' ');
-  const bindingAttributes = bindings ? ` ${bindings}` : '';
-
-  return `<${def.name}${bindingAttributes}>${innerHtml ?? ''}</${def.name}>`;
-}

package/src/preview/storybook-types-runtime.ts

@@ -1,2 +0,0 @@
-// Runtime stub so the export map has a JS target for type-only entries.
-export const __AURELIA_STORYBOOK_STORYBOOK_TYPES__ = true;

package/src/preview/storybook-types.ts

@@ -1,34 +0,0 @@
-export interface Renderer {
-  component?: unknown;
-  storyResult?: unknown;
-  canvasElement?: HTMLElement;
-}
-
-export interface StoryContext<
-  TRenderer = Renderer,
-  TArgs = Record<string, unknown>
-> {
-  id?: string;
-  component?: unknown;
-  args: TArgs;
-  parameters?: { args?: Record<string, unknown> } & Record<string, unknown>;
-  [key: string]: unknown;
-}
-
-export type ArgsStoryFn<
-  TRenderer = Renderer,
-  TArgs = Record<string, unknown>
-> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => unknown;
-
-export interface RenderContext<
-  TRenderer = Renderer,
-  TArgs = Record<string, unknown>
-> {
-  storyFn: () => unknown;
-  title: string;
-  name: string;
-  showMain: () => void;
-  showError: (error: { title: string; description?: string }) => void;
-  storyContext: StoryContext<TRenderer, TArgs>;
-  forceRemount?: boolean;
-}

package/src/preview/types-runtime.ts

@@ -1,2 +0,0 @@
-// Runtime stub so the export map has a JS target for type-only entries.
-export const __AURELIA_STORYBOOK_TYPES__ = true;

package/src/preview/types.ts

@@ -1,62 +0,0 @@
-import type { IContainer } from 'aurelia';
-import type Aurelia from 'aurelia';
-import type { Renderer, StoryContext, RenderContext, ArgsStoryFn } from './storybook-types';
-
-export interface AureliaRenderer extends Renderer {
-    /** The DOM element in which the story is rendered */
-    canvasElement: HTMLElement;
-  }
-
-export interface AureliaStoryResult<TArgs = Record<string, unknown>> {
-  template?: string;
-  components?: unknown[];
-  Component?: unknown;
-  container?: IContainer;
-  items?: unknown[];
-  innerHtml?: string;
-  props?: Partial<TArgs>;
-}
-
-export type AureliaStoryContext<TArgs = Record<string, unknown>> = StoryContext<
-  AureliaRenderer,
-  TArgs
->;
-export type AureliaRenderContext<TArgs = Record<string, unknown>> = RenderContext<
-  AureliaRenderer,
-  TArgs
->;
-export type AureliaArgsStoryFn<TArgs = Record<string, unknown>> = ArgsStoryFn<
-  AureliaRenderer,
-  TArgs
->;
-
-export interface AureliaParameters<TArgs = Record<string, unknown>> {
-  /**
-   * Global resources/plugins to register with Aurelia (merged across preview + story parameters).
-   */
-  register?: unknown[];
-  /**
-   * Alias for register: match the story result `components` contract.
-   */
-  components?: unknown[];
-  /**
-   * Alias for register: match the story result `items` contract.
-   */
-  items?: unknown[];
-  /**
-   * Configure the container before the Aurelia app starts.
-   */
-  configureContainer?: (
-    container: IContainer,
-    context: AureliaStoryContext<TArgs>
-  ) => void;
-  /**
-   * Configure the Aurelia instance before the app starts.
-   */
-  configure?: (aurelia: Aurelia, context: AureliaStoryContext<TArgs>) => void;
-}
-
-export interface AureliaStoryParameters<TArgs = Record<string, unknown>> {
-  aurelia?: AureliaParameters<TArgs>;
-}
-  

package/src/preview.ts

@@ -1,11 +0,0 @@
-export { renderToCanvas, render } from './preview/render';
-export { defineAureliaStory } from './preview/helpers';
-export type {
-  AureliaArgsStoryFn,
-  AureliaParameters,
-  AureliaRenderContext,
-  AureliaRenderer,
-  AureliaStoryParameters,
-  AureliaStoryContext,
-  AureliaStoryResult
-} from './preview/types';

package/src/webpack.ts

@@ -1,40 +0,0 @@
-// src/webpack.ts
-import type { RuleSetRule } from 'webpack';
-
-/**
- * A set of rules to be added to the webpack configuration.
- * @returns
- */
-export function getRules(): RuleSetRule[] {
-  return [
-    {
-      test: /\.ts$/i,
-      use: ['ts-loader', '@aurelia/webpack-loader'],
-      exclude: /node_modules/,
-    },
-    {
-      test: /\.html$/i,
-      use: '@aurelia/webpack-loader',
-      exclude: /node_modules/,
-    },
-  ];
-}
-
-/**
- * Rsbuild/Rspack rules (avoid ts-loader; Rsbuild handles TS transpilation).
- */
-export function getRsbuildRules(): RuleSetRule[] {
-  return [
-    {
-      test: /\.ts$/i,
-      enforce: 'pre',
-      use: ['@aurelia/webpack-loader'],
-      exclude: /node_modules/,
-    },
-    {
-      test: /\.html$/i,
-      use: '@aurelia/webpack-loader',
-      exclude: /node_modules/,
-    },
-  ];
-}

package/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src"],
-  "exclude": ["__tests__"]
-} 

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-    "compilerOptions": {
-      "target": "ES2020",
-      "module": "ESNext",
-      "declaration": true,
-      "outDir": "dist",
-      "rootDir": "src",
-      "strict": true,
-      "moduleResolution": "bundler",
-      "esModuleInterop": true,
-      "skipLibCheck": true
-    },
-    "include": ["src", "__tests__"]
-  }
-