@aurelia/storybook 0.1.0 → 1.0.0

package/src/preview.ts

@@ -0,0 +1,50 @@
+import { renderToCanvas, bootstrapAureliaApp } from './preview/render';
+import Aurelia from 'aurelia';
+
+// Track the current story's cleanup function
+let currentCleanup: (() => void) | null = null;
+
+export const render = (args: any, context: any) => {
+  // 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
+    ) as Aurelia;
+    
+    // Start the app asynchronously
+    const startPromise = app.start();
+    if (startPromise && typeof startPromise.catch === 'function') {
+      startPromise.catch((error: any) => {
+        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: any) => {
+          console.error('Failed to stop Aurelia app:', error);
+        });
+      }
+    };
+  }
+  
+  // Return the container element immediately
+  return container;
+}; 

package/src/webpack.ts

@@ -0,0 +1,21 @@
+// 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/,
+    },
+  ];
+}

package/tsconfig.build.json

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

package/tsconfig.json

@@ -4,6 +4,7 @@
       "module": "ESNext",
       "declaration": true,
       "outDir": "dist",
+      "rootDir": "src",
       "strict": true,
       "moduleResolution": "node",
       "esModuleInterop": true,

package/dist/__tests__/example.test.js

@@ -1,6 +0,0 @@
-"use strict";
-describe('sample test', () => {
-    it('adds numbers', () => {
-        expect(2 + 2).toBe(4);
-    });
-});

package/dist/__tests__/render.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/__tests__/render.test.js

@@ -1,156 +0,0 @@
-import { STORY_CHANGED } from '@storybook/core-events';
-import { render, renderToCanvas, bootstrapAureliaApp, createComponentTemplate, } from '../src/preview/render';
-// Add this at the very top of the file, before any imports.
-jest.mock('aurelia', () => {
-    const actual = jest.requireActual('aurelia');
-    return {
-        ...actual,
-        CustomElement: {
-            ...actual.CustomElement,
-            getDefinition: jest.fn().mockReturnValue({
-                name: 'dummy-comp',
-                bindables: { prop: { attribute: 'prop', name: 'prop' } },
-            }),
-        },
-    };
-});
-describe('render', () => {
-    it('throws an error when no component is provided', () => {
-        expect(() => render({}, { id: 'story-1', component: undefined })).toThrowError('Unable to render story story-1 as the component annotation is missing from the default export');
-    });
-    it('returns the expected object when a component is provided', () => {
-        const DummyComponent = () => { };
-        const args = { foo: 'bar' };
-        const result = render(args, { id: 'story-1', component: DummyComponent });
-        expect(result).toEqual({ Component: DummyComponent, props: args, template: '' });
-    });
-});
-describe('renderToCanvas', () => {
-    let canvas;
-    let dummyChannel;
-    const DummyComponent = class {
-    };
-    beforeEach(() => {
-        canvas = document.createElement('div');
-        dummyChannel = { on: jest.fn(), off: jest.fn() };
-    });
-    it('calls showError when the story function returns a falsy value', async () => {
-        const storyFn = jest.fn(() => null);
-        const showError = jest.fn();
-        const showMain = jest.fn();
-        const context = {
-            storyFn,
-            title: 'Test Title',
-            name: 'Test Story',
-            showMain,
-            showError,
-            storyContext: {
-                parameters: {},
-                component: DummyComponent,
-                args: {},
-                viewMode: 'story',
-                channel: dummyChannel,
-            },
-            forceRemount: false,
-        };
-        const cleanup = await renderToCanvas(context, canvas);
-        expect(showError).toHaveBeenCalled();
-        expect(typeof cleanup).toBe('function');
-    });
-    it('bootstraps an Aurelia app when none exists or forceRemount is true', async () => {
-        const fakeAurelia = {
-            start: jest.fn().mockResolvedValue(undefined),
-            stop: jest.fn().mockResolvedValue(undefined),
-            root: { controller: { viewModel: {} } },
-        };
-        const story = { template: '<div></div>', props: { test: 'value' } };
-        const storyFn = jest.fn(() => story);
-        const showError = jest.fn();
-        const showMain = jest.fn();
-        // Spy on bootstrapAureliaApp to simulate app creation.
-        const bootstrapSpy = jest
-            .spyOn(require('../src/preview/render'), 'bootstrapAureliaApp')
-            .mockReturnValue(fakeAurelia);
-        const context = {
-            storyFn,
-            title: 'Test Title',
-            name: 'Test Story',
-            showMain,
-            showError,
-            storyContext: {
-                parameters: { args: { param: 'foo' } },
-                component: DummyComponent,
-                args: { test: 'bar' },
-                viewMode: 'story',
-                channel: dummyChannel,
-            },
-            forceRemount: false,
-        };
-        const cleanup = await renderToCanvas(context, canvas, bootstrapAureliaApp);
-        expect(showError).not.toHaveBeenCalled();
-        expect(showMain).toHaveBeenCalled();
-        expect(bootstrapSpy).toHaveBeenCalled();
-        // Simulate cleanup (which should remove the STORY_CHANGED listener)
-        await cleanup();
-        expect(dummyChannel.off).toHaveBeenCalledWith(STORY_CHANGED, expect.any(Function));
-        bootstrapSpy.mockRestore();
-    });
-    it('updates the existing app viewModel when re-rendering without forceRemount', async () => {
-        // Create a fake Aurelia app with a mutable viewModel.
-        const fakeViewModel = {};
-        const fakeAurelia = {
-            start: jest.fn().mockResolvedValue(undefined),
-            stop: jest.fn().mockResolvedValue(undefined),
-            root: { controller: { viewModel: fakeViewModel } },
-        };
-        const story = { template: '<div></div>', props: { test: 'initial' } };
-        const storyFn = jest.fn(() => story);
-        const showError = jest.fn();
-        const showMain = jest.fn();
-        const bootstrapSpy = jest
-            .spyOn(require('../src/preview/render'), 'bootstrapAureliaApp')
-            .mockReturnValue(fakeAurelia);
-        // First render: bootstrap the app.
-        const context = {
-            storyFn,
-            title: 'Title',
-            name: 'Name',
-            showMain,
-            showError,
-            storyContext: {
-                parameters: { args: { param: 'foo' } },
-                component: DummyComponent,
-                args: { test: 'bar' },
-                viewMode: 'story',
-                channel: dummyChannel,
-            },
-            forceRemount: false,
-        };
-        await renderToCanvas(context, canvas, bootstrapAureliaApp);
-        expect(bootstrapSpy).toHaveBeenCalledTimes(1);
-        // Second render with new args; should update viewModel instead of re-bootstrap.
-        const newStory = { template: '<div></div>', props: { test: 'updated' } };
-        storyFn.mockReturnValueOnce(newStory);
-        const newContext = {
-            ...context,
-            storyContext: {
-                ...context.storyContext,
-                parameters: { args: { param: 'baz' } },
-                args: { test: 'qux' },
-            },
-        };
-        await renderToCanvas(newContext, canvas, bootstrapAureliaApp);
-        expect(bootstrapSpy).toHaveBeenCalledTimes(1);
-        expect(fakeViewModel).toEqual({ param: 'baz', test: 'qux' });
-        bootstrapSpy.mockRestore();
-    });
-});
-describe('createComponentTemplate', () => {
-    it('generates the correct template string', () => {
-        const DummyComponent = class {
-        };
-        // The definition is already provided via module mocking.
-        const template = createComponentTemplate(DummyComponent, '<span>inner</span>');
-        expect(template).toBe('<dummy-comp prop.bind="prop"><span>inner</span></dummy-comp>');
-    });
-});

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-import { renderToCanvas } from './preview/render';
-export { renderToCanvas };
-export declare const render: typeof renderToCanvas;

package/dist/preset.d.ts

@@ -1,8 +0,0 @@
-/**
- * Optionally adjust the Vite configuration.
- */
-export declare function viteFinal(config: any): Promise<any>;
-declare const _default: {
-    viteFinal: typeof viteFinal;
-};
-export default _default;

package/dist/preview/render.d.ts

@@ -1,17 +0,0 @@
-import type { RenderContext, ArgsStoryFn } from '@storybook/types';
-import type { AureliaRenderer } from './types';
-import Aurelia, { Constructable } from 'aurelia';
-interface AureliaStoryResult {
-    template: string;
-    components?: unknown[];
-    Component?: unknown;
-    container?: any;
-    items?: unknown[];
-    innerHtml?: string;
-    props?: Record<string, any>;
-}
-export declare const render: ArgsStoryFn<AureliaRenderer>;
-export declare function renderToCanvas({ storyFn, title, name, showMain, showError, storyContext, forceRemount, }: RenderContext<AureliaRenderer>, canvasElement: HTMLElement): Promise<() => void>;
-export declare function bootstrapAureliaApp(story: AureliaStoryResult, args: Record<string, any>, domElement: HTMLElement, component?: Constructable): Omit<Aurelia, "enhance" | "register" | "app">;
-export declare function createComponentTemplate(component: Constructable, innerHtml?: string): string;
-export {};

package/dist/preview/render.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/preview/render.test.js

@@ -1,126 +0,0 @@
-import { render, renderToCanvas, createComponentTemplate } from './render';
-import { STORY_CHANGED } from '@storybook/core-events';
-import { CustomElement } from 'aurelia';
-// Dummy component for testing
-class DummyComponent {
-}
-// ----------------------
-// Tests for render()
-// ----------------------
-describe('render()', () => {
-    test('should return object with component, props, and empty template', () => {
-        const args = { foo: 'bar' };
-        const context = { id: 'story-1', component: DummyComponent };
-        const result = render(args, context);
-        expect(result).toEqual({ Component: DummyComponent, props: args, template: '' });
-    });
-    test('should throw error if component is missing', () => {
-        const args = {};
-        const context = { id: 'story-2', component: undefined };
-        expect(() => render(args, context)).toThrowError(/Unable to render story/);
-    });
-});
-// ----------------------
-// Tests for createComponentTemplate()
-// ----------------------
-describe('createComponentTemplate()', () => {
-    test('should return a proper template string', () => {
-        // Create a fake definition for the dummy component
-        const fakeDefinition = {
-            name: 'dummy-comp',
-            bindables: {
-                prop1: { attribute: 'data-prop', name: 'prop1' },
-                prop2: { attribute: 'data-attr', name: 'prop2' }
-            }
-        };
-        // Spy on CustomElement.getDefinition to return our fake definition
-        const getDefinitionSpy = jest
-            .spyOn(CustomElement, 'getDefinition')
-            .mockReturnValue(fakeDefinition);
-        const template = createComponentTemplate(DummyComponent, 'inner content');
-        expect(template).toBe('<dummy-comp data-prop.bind="prop1" data-attr.bind="prop2">inner content</dummy-comp>');
-        // Restore the original function
-        getDefinitionSpy.mockRestore();
-    });
-});
-// ----------------------
-// Tests for renderToCanvas()
-// ----------------------
-describe('renderToCanvas()', () => {
-    beforeEach(() => {
-        // If needed, clear/reset any globals here.
-    });
-    test('should call showError if the story is undefined', async () => {
-        const canvasElement = document.createElement('div');
-        const showError = jest.fn();
-        const showMain = jest.fn();
-        // storyFn returns undefined to simulate missing Aurelia story result
-        const storyFn = jest.fn(() => undefined);
-        const storyContext = {
-            parameters: { args: { a: 1 } },
-            args: { b: 2 },
-            component: DummyComponent,
-            viewMode: 'story',
-            channel: { on: jest.fn(), off: jest.fn() }
-        };
-        const context = {
-            storyFn,
-            title: 'Test Title',
-            name: 'Test Story',
-            showMain,
-            showError,
-            forceRemount: false,
-            storyContext
-        };
-        // Calling renderToCanvas should immediately call showError.
-        const teardownFn = await renderToCanvas(context, canvasElement);
-        expect(showError).toHaveBeenCalled();
-        // Teardown function exists even if error occurred.
-        await teardownFn();
-    });
-    test('should bootstrap Aurelia app and execute teardown properly', async () => {
-        const canvasElement = document.createElement('div');
-        const showError = jest.fn();
-        const showMain = jest.fn();
-        const fakeChannel = { on: jest.fn(), off: jest.fn() };
-        // A valid Aurelia story result
-        const storyResult = { template: '<div></div>', container: {} };
-        const storyFn = jest.fn(() => storyResult);
-        const storyContext = {
-            parameters: { args: { testProp: true } },
-            args: { testProp: false },
-            component: DummyComponent,
-            viewMode: 'story',
-            channel: fakeChannel
-        };
-        const context = {
-            storyFn,
-            title: 'Success Title',
-            name: 'Success Story',
-            showMain,
-            showError,
-            forceRemount: false,
-            storyContext
-        };
-        // Fake Aurelia instance with start and stop methods
-        const fakeAurelia = {
-            start: jest.fn().mockResolvedValue(undefined),
-            stop: jest.fn().mockResolvedValue(undefined),
-            root: { controller: { viewModel: {} } }
-        };
-        // Stub bootstrapAureliaApp to return our fake Aurelia instance.
-        const { bootstrapAureliaApp } = await import('./render');
-        const bootstrapSpy = jest
-            .spyOn(require('./render'), 'bootstrapAureliaApp')
-            .mockResolvedValue(fakeAurelia);
-        const teardown = await renderToCanvas(context, canvasElement);
-        expect(showMain).toHaveBeenCalled();
-        expect(fakeChannel.on).toHaveBeenCalledWith(STORY_CHANGED, expect.any(Function));
-        expect(fakeAurelia.start).toHaveBeenCalled();
-        // Call the teardown function and verify cleanup calls.
-        await teardown();
-        expect(fakeChannel.off).toHaveBeenCalledWith(STORY_CHANGED, expect.any(Function));
-        expect(fakeAurelia.stop).toHaveBeenCalled();
-        jest.restoreAllMocks();
-    });
-});

package/dist/preview/types.d.ts

@@ -1,5 +0,0 @@
-import type { Renderer } from '@storybook/types';
-export interface AureliaRenderer extends Renderer {
-    /** The DOM element in which the story is rendered */
-    canvasElement: HTMLElement;
-}

package/dist/src/index.d.ts

@@ -1,3 +0,0 @@
-import { renderToCanvas } from './preview/render';
-export { renderToCanvas };
-export declare const render: typeof renderToCanvas;

package/dist/src/index.js

@@ -1,3 +0,0 @@
-import { renderToCanvas } from './preview/render';
-export { renderToCanvas };
-export const render = renderToCanvas;

package/dist/src/preset.d.ts

@@ -1,8 +0,0 @@
-/**
- * Optionally adjust the Vite configuration.
- */
-export declare function viteFinal(config: any): Promise<any>;
-declare const _default: {
-    viteFinal: typeof viteFinal;
-};
-export default _default;

package/dist/src/preset.js

@@ -1,11 +0,0 @@
-// src/preset.ts
-// Minimal preset for Storybook-Aurelia2
-/**
- * Optionally adjust the Vite configuration.
- */
-export async function viteFinal(config) {
-    // For now, return the config unchanged.
-    return config;
-}
-// Export a default for compatibility.
-export default { viteFinal };

package/dist/src/preview/render.d.ts

@@ -1,17 +0,0 @@
-import type { RenderContext, ArgsStoryFn } from '@storybook/types';
-import type { AureliaRenderer } from './types';
-import Aurelia, { Constructable } from 'aurelia';
-interface AureliaStoryResult {
-    template: string;
-    components?: unknown[];
-    Component?: unknown;
-    container?: any;
-    items?: unknown[];
-    innerHtml?: string;
-    props?: Record<string, any>;
-}
-export declare const render: ArgsStoryFn<AureliaRenderer>;
-export declare function renderToCanvas({ storyFn, title, name, showMain, showError, storyContext, forceRemount, }: RenderContext<AureliaRenderer>, canvasElement: HTMLElement, bootstrapAppFn?: typeof bootstrapAureliaApp): Promise<() => void>;
-export declare function bootstrapAureliaApp(story: AureliaStoryResult, args: Record<string, any>, domElement: HTMLElement, component?: Constructable): Omit<Aurelia, "enhance" | "register" | "app">;
-export declare function createComponentTemplate(component: Constructable, innerHtml?: string): string;
-export {};

package/dist/src/preview/types.d.ts

@@ -1,5 +0,0 @@
-import type { Renderer } from '@storybook/types';
-export interface AureliaRenderer extends Renderer {
-    /** The DOM element in which the story is rendered */
-    canvasElement: HTMLElement;
-}

package/dist/src/preview/types.js

@@ -1 +0,0 @@
-export {};