@aurelia/storybook 0.1.1 → 1.0.1

package/jest.config.js

@@ -5,5 +5,5 @@ module.exports = {
   transform: {
     "^.+\\.tsx?$": ["ts-jest"],
   },
-  testMatch: ["**/?(*.)+(spec|test).ts?(x)"]
+  testMatch: ["**/__tests__/**/*.test.ts?(x)"]
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aurelia/storybook",
-  "version": "0.1.1",
-  "description": "A Storybook plugin to render Aurelia 2 components using Vite",
+  "version": "1.0.1",
+  "description": "A Storybook plugin to render Aurelia 2 components using Vite or Webpack",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.mjs",
@@ -12,32 +12,31 @@
     "build": "rollup -c",
     "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly",
     "watch": "rollup -c -w",
-    "test": "jest"
+    "test": "NODE_OPTIONS=--no-deprecation jest"
   },
   "peerDependencies": {
-    "@aurelia/runtime-html": "^2.0.0-beta.23",
-    "@aurelia/vite-plugin": "^2.0.0-beta.23",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/builder-vite": "^8.5.3",
-    "@storybook/core-common": "^8.5.3",
-    "@storybook/core-events": "^8.5.3",
-    "aurelia": "^2.0.0-beta.23"
+    "@aurelia/runtime-html": "^2.0.0-beta.24",
+    "@aurelia/vite-plugin": "^2.0.0-beta.24",
+    "@storybook/builder-vite": "^9.0.0",
+    "@storybook/builder-webpack5": "^9.0.0",
+    "aurelia": "^2.0.0-beta.24",
+    "storybook": "^9.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/builder-vite": "^8.5.3",
-    "@storybook/core-common": "^8.5.3",
-    "@storybook/preview-api": "^8.5.3",
-    "@storybook/types": "^8.5.3",
-    "@types/jest": "^29.5.14",
-    "glob": "^11.0.1",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.34.2",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.7.3"
+    "@aurelia/webpack-loader": "^2.0.0-beta.24",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.3",
+    "@storybook/builder-vite": "^9.0.12",
+    "storybook": "^9.0.12",
+    "@types/jest": "^30.0.0",
+    "glob": "^11.0.3",
+    "jest": "^30.0.2",
+    "jest-environment-jsdom": "^30.0.2",
+    "rollup": "^4.44.0",
+    "ts-jest": "^29.4.0",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3"
   },
   "exports": {
     ".": {

package/rollup.config.mjs

@@ -6,10 +6,7 @@ import { glob } from 'glob';
 const external = [
   '@aurelia/runtime-html',
   '@aurelia/vite-plugin',
-  '@storybook/addons',
   '@storybook/builder-vite',
-  '@storybook/core-common',
-  '@storybook/core-events',
   'aurelia'
 ];
 

package/src/preset.ts

@@ -1,14 +1,31 @@
 // src/preset.ts
 // Minimal preset for Storybook-Aurelia2
 
+import { getRules } from './webpack';
+
 /**
  * Optionally adjust the Vite configuration.
  */
 export async function viteFinal(config: any): Promise<any> {
     // For now, return the config unchanged.
     return config;
-  }
-  
-  // Export a default for compatibility.
-  export default { viteFinal };
-  
+}
+
+/**
+ * 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, webpackFinal };
+
+export const previewAnnotations = [require.resolve('./preview')];

package/src/preview/render.ts

@@ -1,5 +1,5 @@
-import { STORY_CHANGED } from '@storybook/core-events';
-import type { RenderContext, ArgsStoryFn } from '@storybook/types';
+import { STORY_CHANGED } from 'storybook/internal/core-events';
+import type { RenderContext, ArgsStoryFn } from 'storybook/internal/types';
 import type { AureliaRenderer } from './types';
 import Aurelia, { Constructable, CustomElement } from 'aurelia';
 

package/src/preview/types.ts

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

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/__tests__/render.test.d.ts

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

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, 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/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;
-}