Release: Patch 10.0.7

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 10.0.7
+
+- ESLint: Only apply csf-strict rules on stories files - [#31963](https://github.com/storybookjs/storybook/pull/31963), thanks @cylewaitforit!
+- Next.js: Update SWC loader to support new wasm detection - [#33003](https://github.com/storybookjs/storybook/pull/33003), thanks @yannbf!
+
 ## 10.0.6
 
 - CSF: Fix export interface declaration for NextPreview - [#32914](https://github.com/storybookjs/storybook/pull/32914), thanks @icopp!

code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts

@@ -29,7 +29,7 @@ DEALINGS IN THE SOFTWARE.
 import { isAbsolute, relative } from 'node:path';
 
 import type { NextConfig } from 'next';
-import { isWasm, transform } from 'next/dist/build/swc/index.js';
+import * as nextSwcUtils from 'next/dist/build/swc/index.js';
 import { getLoaderSWCOptions } from 'next/dist/build/swc/options.js';
 
 export interface SWCLoaderOptions {
@@ -136,7 +136,7 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp
 
   const swcSpan = parentTrace.traceChild('next-swc-transform');
   return swcSpan.traceAsyncFn(() =>
-    transform(source as any, programmaticOptions).then((output) => {
+    nextSwcUtils.transform(source as any, programmaticOptions).then((output) => {
       if (output.eliminatedPackages && this.eliminatedPackages) {
         for (const pkg of JSON.parse(output.eliminatedPackages)) {
           this.eliminatedPackages.add(pkg);
@@ -152,14 +152,25 @@ const EXCLUDED_PATHS = /[\\/](cache[\\/][^\\/]+\.zip[\\/]node_modules|__virtual_
 export function pitch(this: any) {
   const callback = this.async();
   (async () => {
+    let isWasm: boolean = false;
+
+    if (!!nextSwcUtils.isWasm) {
+      isWasm = await nextSwcUtils.isWasm();
+      // @ts-expect-error Relevant from Next.js >= 16.0.2-canary.12
+    } else if (!!nextSwcUtils.getBindingsSync) {
+      await nextSwcUtils.loadBindings();
+      // @ts-expect-error Relevant from Next.js >= 16.0.2-canary.12
+      isWasm = nextSwcUtils.getBindingsSync().isWasm;
+    }
+
     if (
       // TODO: Evaluate if this is correct after removing pnp compatibility code in SB11
       // TODO: investigate swc file reading in PnP mode?
       !process.versions.pnp &&
       !EXCLUDED_PATHS.test(this.resourcePath) &&
       this.loaders.length - 1 === this.loaderIndex &&
       isAbsolute(this.resourcePath) &&
-      !(await isWasm())
+      !isWasm
     ) {
       const loaderSpan = mockCurrentTraceSpan.traceChild('next-swc-loader');
       this.addDependency(this.resourcePath);

code/lib/eslint-plugin/scripts/update-lib-configs.ts

@@ -50,7 +50,10 @@ function formatCategory(category: TCategory) {
       // This file is bundled in an index.js file at the root
       // so the reference is relative to the src directory
       extends: './configs/${extendsCategoryId}',
-      rules: ${formatRules(category.rules)}
+      overrides: [{
+        files: [${STORIES_GLOBS.join(', ')}],
+        rules: ${formatRules(category.rules)}
+      },]
     }
   `;
 }

code/lib/eslint-plugin/scripts/update-lib-flat-configs.ts

@@ -64,6 +64,7 @@ function formatCategory(category: TCategory) {
       ...config,
       {
         name: 'storybook:${category.categoryId}:rules',
+        files: [${STORIES_GLOBS.join(', ')}],
         rules: ${formatRules(category.rules)}
       }
     ]

code/lib/eslint-plugin/src/configs/csf-strict.ts

@@ -7,10 +7,15 @@ export default {
   // This file is bundled in an index.js file at the root
   // so the reference is relative to the src directory
   extends: './configs/csf',
-  rules: {
-    'react-hooks/rules-of-hooks': 'off',
-    'import/no-anonymous-default-export': 'off',
-    'storybook/no-stories-of': 'error',
-    'storybook/no-title-property-in-meta': 'error',
-  } as const,
+  overrides: [
+    {
+      files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '**/*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
+      rules: {
+        'react-hooks/rules-of-hooks': 'off',
+        'import/no-anonymous-default-export': 'off',
+        'storybook/no-stories-of': 'error',
+        'storybook/no-title-property-in-meta': 'error',
+      } as const,
+    },
+  ],
 };

code/lib/eslint-plugin/src/configs/flat/csf-strict.ts

@@ -9,6 +9,7 @@ export default [
   ...config,
   {
     name: 'storybook:csf-strict:rules',
+    files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '**/*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
     rules: {
       'react-hooks/rules-of-hooks': 'off',
       'import/no-anonymous-default-export': 'off',

code/package.json

@@ -283,5 +283,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "10.0.7"
 }

docs/_snippets/component-story-with-custom-render-function.md

@@ -325,3 +325,31 @@ export const Example = meta.story({
   ),
 });
 ```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Layout from './Layout.svelte';
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="Example"
+>
+  {#snippet template(args)}
+   <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  {/snippet}
+</Story>
+```

docs/_snippets/svelte-framework-options-docgen.md

@@ -0,0 +1,27 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+// Replace your-framework with svelte-vite or sveltekit
+export default {
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      docgen: false, // Disable docgen for better performance
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+// Replace your-framework with svelte-vite or sveltekit
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/your-framework',
+    options: {
+      docgen: false, // Disable docgen for better performance
+    },
+  },
+};
+
+export default config;
+```

docs/_snippets/sveltekit-mock-features.md

@@ -0,0 +1,142 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="MyStory"
+  parameters={{
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('http://localhost/storybook'),
+          },
+        },
+        updated: {
+          current: true,
+        },
+      },
+    },
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const MyStory = {
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('http://localhost/storybook'),
+          },
+        },
+        updated: {
+          current: true,
+        },
+      },
+    },
+  },
+};
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="MyStory"
+  parameters={{
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('http://localhost/storybook'),
+          },
+        },
+        updated: {
+          current: true,
+        },
+      },
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MyStory: Story = {
+  parameters: {
+    sveltekit_experimental: {
+      state: {
+        page: {
+          data: {
+            test: 'passed',
+          },
+        },
+        navigating: {
+          to: {
+            route: { id: '/storybook' },
+            params: {},
+            url: new URL('http://localhost/storybook'),
+          },
+        },
+        updated: {
+          current: true,
+        },
+      },
+    },
+  },
+};
+```