@aurelia/storybook 2.1.0 → 2.3.0

package/__tests__/render.test.ts

@@ -1,187 +0,0 @@
-import { STORY_CHANGED } from 'storybook/internal/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 as any } as any)
-    ).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 as any } as any);
-    expect(result).toEqual({ Component: DummyComponent, props: args, template: '' });
-  });
-});
-
-describe('renderToCanvas', () => {
-  let canvas: HTMLElement;
-  let dummyChannel: { on: jest.Mock; off: jest.Mock };
-  const DummyComponent = class {};
-
-  beforeEach(() => {
-    canvas = document.createElement('div');
-    dummyChannel = { on: jest.fn(), off: jest.fn() } as any;
-  });
-
-  it('calls showError when the story function returns a falsy value', async () => {
-    const storyFn = jest.fn(() => null) as any;
-    const showError = jest.fn() as any;
-    const showMain = jest.fn() as any;
-    const context = {
-      storyFn,
-      title: 'Test Title',
-      name: 'Test Story',
-      showMain,
-      showError,
-      storyContext: {
-        parameters: {},
-        component: DummyComponent as any,
-        args: {},
-        viewMode: 'story',
-        channel: dummyChannel,
-      },
-      forceRemount: false,
-    } as any;
-
-    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: {} } },
-    } as any;
-    const story = { template: '<div></div>', props: { test: 'value' } } as any;
-    const storyFn = jest.fn(() => story) as any;
-    const showError = jest.fn() as any;
-    const showMain = jest.fn() as any;
-
-    // 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 as any,
-        args: { test: 'bar' },
-        viewMode: 'story',
-        channel: dummyChannel,
-      },
-      forceRemount: false,
-    } as any;
-
-    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: Record<string, any> = {};
-    const fakeAurelia = {
-      start: jest.fn().mockResolvedValue(undefined),
-      stop: jest.fn().mockResolvedValue(undefined),
-      root: { controller: { viewModel: fakeViewModel } },
-    } as any;
-
-    const story = { template: '<div></div>', props: { test: 'initial' } } as any;
-    const storyFn = jest.fn(() => story) as any;
-    const showError = jest.fn() as any;
-    const showMain = jest.fn() as any;
-
-    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 as any,
-        args: { test: 'bar' },
-        viewMode: 'story',
-        channel: dummyChannel,
-      },
-      forceRemount: false,
-    } as any;
-    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' } } as any;
-    storyFn.mockReturnValueOnce(newStory);
-    const newContext = {
-      ...context,
-      storyContext: {
-        ...context.storyContext,
-        parameters: { args: { param: 'baz' } },
-        args: { test: 'qux' },
-      },
-    } as any;
-    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 as any, '<span>inner</span>');
-    expect(template).toBe(
-      '<dummy-comp prop.bind="prop"><span>inner</span></dummy-comp>'
-    );
-  });
-});

package/__tests__/webpack.test.ts

@@ -1,21 +0,0 @@
-import { getRules } from '../src/webpack';
-
-describe('webpack', () => {
-  describe('getRules', () => {
-    it('should return the correct rules', () => {
-      const rules = getRules();
-      expect(rules).toEqual([
-        {
-          test: /\.ts$/i,
-          use: ['ts-loader', '@aurelia/webpack-loader'],
-          exclude: /node_modules/,
-        },
-        {
-          test: /\.html$/i,
-          use: '@aurelia/webpack-loader',
-          exclude: /node_modules/,
-        },
-      ]);
-    });
-  });
-}); 

package/apps/hello-world/.storybook/main.ts

@@ -1,49 +0,0 @@
-import type { StorybookConfig } from 'storybook/internal/types';
-import { mergeConfig, type InlineConfig } from 'vite';
-
-const config: StorybookConfig & { viteFinal?: (config: InlineConfig, options: { configType: string }) => InlineConfig | Promise<InlineConfig> } = {
-  stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  addons: [
-  ],
-  framework: {
-    name: '@aurelia/storybook',
-    options: {},
-  },
-  core: {
-    builder: '@storybook/builder-vite',
-  },
-  viteFinal: async (viteConfig) => {
-    // Initialize optimizeDeps and exclude array
-    if (!viteConfig.optimizeDeps) {
-      viteConfig.optimizeDeps = {};
-    }
-    if (!viteConfig.optimizeDeps.exclude) {
-      viteConfig.optimizeDeps.exclude = [];
-    }
-    
-    // Exclude Aurelia dependencies from pre-bundling, but allow React for Storybook
-    const excludeList = [
-      '@aurelia/runtime-html'
-    ];
-    
-    excludeList.forEach(dep => {
-      if (viteConfig.optimizeDeps?.exclude && !viteConfig.optimizeDeps.exclude.includes(dep)) {
-        viteConfig.optimizeDeps.exclude.push(dep);
-      }
-    });
-
-    return mergeConfig(viteConfig, {
-      define: {
-        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
-      },
-      // Allow React to be bundled for Storybook's theming system
-      resolve: {
-        alias: {
-          // Ensure React is properly resolved
-        }
-      }
-    });
-  },
-};
-
-export default config;

package/apps/hello-world/.storybook/preview.ts

@@ -1 +0,0 @@
-export { render, renderToCanvas } from '@aurelia/storybook';

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

@@ -1,5 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard"
-  ]
-}

package/apps/hello-world/README.md

@@ -1,28 +0,0 @@
-# Aurelia Storybook Hello World
-
-This project is bootstrapped by [aurelia/new](https://github.com/aurelia/new).
-
-## Start dev web server
-
-    npm start
-
-## Start Storybook
-
-    npm run storybook
-
-## Build the app in production mode
-
-    npm run build
-
-## Build Storybook
-
-    npm run build-storybook
-
-## Unit Tests
-
-    npm run test
-
-Run unit tests in watch mode.
-
-    npm run test:watch
-

package/apps/hello-world/eslint.config.mjs

@@ -1,25 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from 'typescript-eslint';
-import tsParser from "@typescript-eslint/parser";
-import globals from "globals";
-
-export default [
-  eslint.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    files: ["**/*.ts"],
-
-    languageOptions: {
-      globals: {
-        ...globals.builtin,
-        ...globals.nodeBuiltin,
-        ...globals.browser,
-        ...globals.node,
-      },
-
-      parser: tsParser,
-      ecmaVersion: 2019,
-      sourceType: "module",
-    },
-  }
-];

package/apps/hello-world/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <title>Aurelia</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script type="module" src="/src/main.ts"></script>
-  <base href="/">
-</head>
-
-<body>
-  <my-app></my-app>
-</body>
-
-</html>
-