@aurelia/storybook 1.0.1 → 2.0.0

package/README.md

@@ -2,13 +2,13 @@
 
 > **Note:** Storybook support is currently in an early stage, and there may be bugs, issues, or unsupported features in this plugin. The intention is to make this plugin more production-ready when Aurelia 2 reaches stable release.
 
-This package provides an integration between Aurelia 2 and Storybook 9 using Vite or Webpack. It lets you write and render Aurelia 2 components as Storybook stories with full support for Storybook controls, actions, and interactive testing.
+This package provides an integration between Aurelia 2 and Storybook 10 using Vite or Webpack. It lets you write and render Aurelia 2 components as Storybook stories with full support for Storybook controls, actions, and interactive testing.
 
 ## Features
 
 - **Vite & Webpack Support**: Works with both Vite (via `@storybook/builder-vite`) and Webpack 5 (via `@storybook/builder-webpack5`).
 - **Aurelia Enhancement**: Renders Aurelia 2 components using Aurelia's `enhance()` API.
-- **Storybook 9 Compatibility**: Fully compatible with Storybook 9's new rendering API.
+- **Storybook 10 Compatibility**: Fully compatible with Storybook 10's rendering API and ESM-only architecture.
 - **Arg & Action Support**: Use story args and actions as you would with any Storybook story.
 
 ## Installation
@@ -25,12 +25,6 @@ Also, make sure to have the required dependencies installed in your project:
 npm install --save-dev storybook @storybook/builder-vite
 ```
 
-For testing functionality, you may also want to install:
-
-```bash
-npm install --save-dev @storybook/test @storybook/addon-actions
-```
-
 > **Tip:** Check your existing Aurelia 2 app for already installed versions. The peer dependencies are expected to be compatible with Aurelia 2 beta releases (see `package.json` for version details).
 
 ## Getting Started
@@ -89,7 +83,7 @@ To integrate Aurelia 2 with your Storybook instance, follow these steps:
         export { render, renderToCanvas } from '@aurelia/storybook';
         ```
 
-    > **Note:** Essential features like actions, controls, backgrounds, and viewport are now built into Storybook 9 core and don't need to be installed separately. However, if you need to use the `action()` function in your stories (for programmatic actions), you may still need to install `@storybook/addon-actions`. Additional addons like `@storybook/addon-links` can be installed and added to the `addons` array in your configuration.
+    > **Note:** Essential features like actions, controls, backgrounds, and viewport are now built into Storybook 10 core and don't need to be installed separately. However, if you need to use the `action()` function in your stories (for programmatic actions), you may still need to install `@storybook/addon-actions`. Additional addons like `@storybook/addon-links` can be installed and added to the `addons` array in your configuration.
 
     ### Using with Webpack
 
@@ -101,7 +95,6 @@ To integrate Aurelia 2 with your Storybook instance, follow these steps:
     const config: StorybookConfig = {
       stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
       addons: [
-        '@storybook/addon-webpack5-compiler-swc',
         '@storybook/addon-links'
       ],
       framework: {
@@ -135,14 +128,13 @@ Aurelia 2 stories are written similarly to standard Storybook stories, with a fe
 
 ```typescript
 import { HelloWorld } from '../hello-world';
-import { action } from '@storybook/addon-actions';
-import { userEvent, within } from '@storybook/test';
+import { fn, userEvent, within } from 'storybook/test';
 
 const meta = {
   title: 'Example/HelloWorld',
   component: HelloWorld,
-  render: (args) => ({
-    template: <hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>,
+  render: () => ({
+    template: `<hello-world message.bind="message" on-increment.bind="onIncrement"></hello-world>`,
   }),
   argTypes: {
     message: { control: 'text' },
@@ -155,16 +147,16 @@ export default meta;
 export const DefaultHelloWorld = {
   args: {
     message: "Hello from Storybook!",
-    onIncrement: action('increment')
+    onIncrement: fn()
   }
 };
 
 export const InteractiveHelloWorld = {
   args: {
     message: "Try clicking the button!",
-    onIncrement: action('increment')
+    onIncrement: fn()
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
     const button = canvas.getByRole('button');
     // Simulate three button clicks
@@ -176,13 +168,13 @@ export const InteractiveHelloWorld = {
 
 export const NoArgs = {
   render: () => ({
-    template: <hello-world></hello-world>
+    template: `<hello-world></hello-world>`
   })
 };
 
 export const WithCustomTemplate = {
-  render: (args) => ({
-    template: <hello-world message.bind="message">Click me!</hello-world>
+  render: () => ({
+    template: `<hello-world message.bind="message">Click me!</hello-world>`
   }),
   args: {
     message: "This is a custom message"

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

@@ -14,13 +14,35 @@ const config: StorybookConfig & { viteFinal?: (config: InlineConfig, options: {
     builder: '@storybook/builder-vite',
   },
   viteFinal: async (viteConfig) => {
-    viteConfig.optimizeDeps = viteConfig.optimizeDeps || {};
-    viteConfig.optimizeDeps.exclude = viteConfig.optimizeDeps.exclude || [];
-    if (!viteConfig.optimizeDeps.exclude.includes('@aurelia/runtime-html')) {
-      viteConfig.optimizeDeps.exclude.push('@aurelia/runtime-html');
+    // 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, {
-      // ...any additional Vite configuration
+      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
+        }
+      }
     });
   },
 };