@aurelia/storybook 1.0.1 → 1.0.2

package/README.md

@@ -101,7 +101,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 +134,14 @@ 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 { fn } from '@storybook/test';
 import { 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 +154,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 +175,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
+        }
+      }
     });
   },
 };