Merge pull request #310 from storybookjs/fix/export-stories-specifiers

fix: Prevent exported runtime stories from colliding with story names

Author: JReinhold

.storybook/main.ts

@@ -24,9 +24,9 @@ const config: StorybookConfig = {
         legacyTemplate: true,
       },
     },
-    '@storybook/addon-essentials',
     '@chromatic-com/storybook',
-    '@storybook/experimental-addon-test',
+    '@storybook/addon-docs',
+    '@storybook/addon-vitest',
   ],
 };
 

examples/Button.stories.svelte

@@ -1,9 +1,8 @@
 <script module lang="ts">
-  import { defineMeta, type StoryContext } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { fn } from 'storybook/test';
 
   import Button from './components/Button.svelte';
-  import type { ComponentProps } from 'svelte';
 
   const onclickFn = fn().mockName('onclick');
 

examples/README.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from '@storybook/blocks';
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
 import README from '../README.md?raw';
 
 <Meta title="README" />

examples/StoryImporter.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta, Canvas } from '@storybook/addon-docs/blocks';
 import * as ExportNameStories from './ExportName.stories.svelte';
 
 <Meta title="Examples/ExportName" name="MDX Docs" />

examples/Templating.stories.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { expect, within } from '@storybook/test';
+  import { expect, within } from 'storybook/test';
 
   /**
    * Demonstration on the **different ways of setting a template** for `<Story />` components within one stories file.

package.json

@@ -63,17 +63,15 @@
   },
   "devDependencies": {
     "@auto-it/released": "^11.1.6",
-    "@chromatic-com/storybook": "^4.0.0-0",
+    "@chromatic-com/storybook": "^4.0.0-next.6",
     "@eslint/compat": "^1.2.8",
     "@eslint/js": "^9.25.0",
-    "@storybook/addon-actions": "^9.0.0-0",
-    "@storybook/addon-essentials": "^9.0.0-0",
-    "@storybook/experimental-addon-test": "^9.0.0-0",
-    "@storybook/svelte": "^9.0.0-0",
-    "@storybook/svelte-vite": "^9.0.0-0",
-    "@storybook/test": "^9.0.0-0",
+    "@storybook/addon-vitest": "^9.0.0-rc.3",
+    "@storybook/addon-docs": "^9.0.0-rc.3",
+    "@storybook/svelte": "^9.0.0-rc.3",
+    "@storybook/svelte-vite": "^9.0.0-rc.3",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
     "@types/estree": "^1.0.6",
     "@types/node": "^20.14.9",
@@ -92,7 +90,7 @@
     "prettier-plugin-svelte": "^3.2.5",
     "rimraf": "^5.0.7",
     "rollup": "^4.25.0",
-    "storybook": "^9.0.0-0",
+    "storybook": "^9.0.0-rc.3",
     "svelte": "^5.28.2",
     "svelte-check": "^4.1.7",
     "tslib": "^2.6.3",
@@ -102,7 +100,6 @@
     "typescript-svelte-plugin": "^0.3.42",
     "vite": "^6.3.5",
     "vite-plugin-inspect": "^0.8.7",
-    "vite-plugin-virtual": "^0.3.0",
     "vitest": "^3.1.3"
   },
   "peerDependencies": {

pnpm-lock.yaml

@@ -1,13 +1,13 @@
 import { print } from 'esrap';
 import { describe, it } from 'vitest';
 
-import { createExportOrderVariable } from './create-export-order.js';
+import { createExportOrderVariableDeclaration } from './create-export-order.js';
 
-describe(createExportOrderVariable.name, () => {
+describe(createExportOrderVariableDeclaration.name, () => {
   it('correctly creates a variable with named exports order', ({ expect }) => {
     const stringified = print(
-      createExportOrderVariable({
-        storyIdentifiers: [
+      createExportOrderVariableDeclaration({
+        storiesIdentifiers: [
           { exportName: 'Default', name: 'Default' },
           { exportName: 'SomeComponent', name: 'Some Component' },
           { exportName: 'ThisNameIsWeird', name: 'This-Name-Is-Weird' },

src/compiler/post-transform/appendix/create-export-order.test.ts

@@ -1,42 +1,38 @@
 import type { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';
-import type { ESTreeAST } from '$lib/parser/ast.js';
+import {
+  type ESTreeAST,
+  createASTArrayExpression,
+  createASTExportSpecifier,
+} from '$lib/parser/ast.js';
 
-interface Params {
-  storyIdentifiers: ReturnType<typeof getStoriesIdentifiers>;
+interface ExportOrderVariableDeclarationParams {
+  storiesIdentifiers: ReturnType<typeof getStoriesIdentifiers>;
   filename?: string;
 }
 
-export function createExportOrderVariable(params: Params): ESTreeAST.ExportNamedDeclaration {
-  const { storyIdentifiers } = params;
+export function createExportOrderVariableDeclaration(
+  params: ExportOrderVariableDeclarationParams
+): ESTreeAST.ExportNamedDeclaration {
+  const { storiesIdentifiers: storyIdentifiers } = params;
 
-  const exported = {
-    type: 'Identifier',
-    name: '__namedExportsOrder',
-  } as const;
+  const specifier = createASTExportSpecifier({ local: '__namedExportsOrder' });
 
   return {
     type: 'ExportNamedDeclaration',
-    specifiers: [
-      {
-        type: 'ExportSpecifier',
-        local: exported,
-        exported,
-      },
-    ],
+    specifiers: [specifier],
     declaration: {
       type: 'VariableDeclaration',
       kind: 'const',
       declarations: [
         {
           type: 'VariableDeclarator',
-          id: exported,
-          init: {
-            type: 'ArrayExpression',
-            elements: storyIdentifiers.map(({ exportName }) => ({
+          id: specifier.local as ESTreeAST.Identifier,
+          init: createASTArrayExpression(
+            storyIdentifiers.map(({ exportName }) => ({
               type: 'Literal',
               value: exportName,
-            })),
-          },
+            }))
+          ),
         },
       ],
     },

src/compiler/post-transform/appendix/create-export-order.ts

@@ -0,0 +1,38 @@
+import { print } from 'esrap';
+import { describe, it } from 'vitest';
+
+import { createNamedExportStories } from './create-named-export-stories.js';
+
+describe(createNamedExportStories, () => {
+  it('works', ({ expect }) => {
+    const namedExportDeclaration = createNamedExportStories({
+      storiesIdentifiers: [
+        {
+          exportName: 'Default',
+          name: undefined,
+        },
+        {
+          exportName: 'Primary',
+          name: 'Primary',
+        },
+        {
+          exportName: 'Secondary',
+          name: 'Secondary',
+        },
+        {
+          exportName: 'Disabled',
+          name: 'Disabled',
+        },
+      ],
+    });
+
+    expect(print(namedExportDeclaration).code).toMatchInlineSnapshot(`
+      "export {
+      	$__Default as Default,
+      	$__Primary as Primary,
+      	$__Secondary as Secondary,
+      	$__Disabled as Disabled
+      };"
+    `);
+  });
+});

src/compiler/post-transform/appendix/create-named-export-stories.test.ts

@@ -0,0 +1,27 @@
+import { STORYBOOK_INTERNAL_PREFIX } from '$lib/constants.js';
+import type { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';
+import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
+
+interface NamedExportStoriesParams {
+  storiesIdentifiers: ReturnType<typeof getStoriesIdentifiers>;
+}
+
+export function createNamedExportStories(
+  params: NamedExportStoriesParams
+): ESTreeAST.ExportNamedDeclaration {
+  return {
+    type: 'ExportNamedDeclaration',
+    specifiers: params.storiesIdentifiers.map(createExportSpecifier),
+    declaration: null,
+  };
+}
+
+function createExportSpecifier(
+  storyIdentifier: ReturnType<typeof getStoriesIdentifiers>[number]
+): ESTreeAST.ExportSpecifier {
+  return {
+    type: 'ExportSpecifier',
+    local: createASTIdentifier(`${STORYBOOK_INTERNAL_PREFIX}${storyIdentifier.exportName}`),
+    exported: createASTIdentifier(storyIdentifier.exportName),
+  };
+}