fix: Allow user-defined local variable meta in stories (#309)

Resolves #306

Author: xeho91

CHANGELOG.md

@@ -110,9 +110,7 @@ This story renders:
   This is now forwarded to the component
 </MyComponent>
 -->
-<Story name="MyComponent children">
-  This is now forwarded to the component
-</Story>
+<Story name="MyComponent children">This is now forwarded to the component</Story>
 ```
 
 To get the same behavior as previously, a new `asChild` boolean prop has been introduced on the `Story` component. `asChild` is a common prop in UI libraries, where you want the `children` to _be_ the output, instead of just being children of the Component. By adding that you can get the old behavior back, when you need more control over what the story renders:

src/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.test.ts

@@ -23,7 +23,7 @@ describe(createVariableFromRuntimeStoriesCall.name, () => {
     ).code;
 
     expect(stringified).toMatchInlineSnapshot(
-      `"const __stories = createRuntimeStories(Example_stories, meta);"`
+      `"const __stories = createRuntimeStories(Example_stories, $__meta);"`
     );
   });
 });

src/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.ts

@@ -1,3 +1,4 @@
+import { STORYBOOK_META_IDENTIFIER } from '$lib/constants.js';
 import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
 
 interface Params {
@@ -34,7 +35,7 @@ export function createVariableFromRuntimeStoriesCall(
               type: 'Identifier',
               name: storiesFunctionDeclaration.id.name,
             },
-            createASTIdentifier('meta'),
+            createASTIdentifier(STORYBOOK_META_IDENTIFIER),
           ],
         },
       },

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

@@ -6,6 +6,7 @@ import { createRuntimeStoriesImport } from './appendix/create-import.js';
 import { createVariableFromRuntimeStoriesCall } from './appendix/create-variable-from-runtime-stories-call.js';
 import { createNamedExportStory } from './appendix/create-named-export-story.js';
 
+import { STORYBOOK_META_IDENTIFIER } from '$lib/constants.js';
 import { createASTIdentifier, type ESTreeAST, type SvelteAST } from '$lib/parser/ast.js';
 import { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';
 import type { CompiledASTNodes } from '$lib/parser/extract/compiled/nodes.js';
@@ -65,7 +66,7 @@ export async function createAppendix(params: Params) {
 function createExportDefaultMeta(): ESTreeAST.ExportDefaultDeclaration {
   return {
     type: 'ExportDefaultDeclaration',
-    declaration: createASTIdentifier('meta'),
+    declaration: createASTIdentifier(STORYBOOK_META_IDENTIFIER),
   };
 }
 

src/compiler/post-transform/define-meta/index.test.ts

@@ -54,7 +54,7 @@ describe(transformDefineMeta.name, () => {
     });
 
     expect(print(defineMetaVariableDeclaration).code).toMatchInlineSnapshot(
-      `"const { Story } = defineMeta(meta);"`
+      `"const { Story } = defineMeta($__meta);"`
     );
   });
 });
@@ -97,7 +97,7 @@ describe(createMetaVariableDeclaration.name, () => {
     const metaVariableDeclaration = createMetaVariableDeclaration({ init: metaObjectExpression });
 
     expect(print(metaVariableDeclaration).code).toMatchInlineSnapshot(`
-      "const meta = {
+      "const $__meta = {
       	title: 'Example',
       	component: Example,
       	tags: ['autodocs'],

src/compiler/post-transform/define-meta/index.ts

@@ -4,6 +4,7 @@ import type MagicString from 'magic-string';
 import { replaceDefineMetaArgument } from './replace-argument.js';
 import { insertDefineMetaParameters } from './insert-parameters.js';
 
+import { STORYBOOK_META_IDENTIFIER } from '$lib/constants.js';
 import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
 import type { CompiledASTNodes } from '$lib/parser/extract/compiled/nodes.js';
 import type { SvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
@@ -47,7 +48,7 @@ export function createMetaVariableDeclaration({
     declarations: [
       {
         type: 'VariableDeclarator',
-        id: createASTIdentifier('meta'),
+        id: createASTIdentifier(STORYBOOK_META_IDENTIFIER),
         init,
       },
     ],

src/compiler/post-transform/define-meta/replace-argument.ts

@@ -4,6 +4,8 @@ import type { SvelteASTNodes } from '../../../parser/extract/svelte/nodes.js';
 import { getDefineMetaFirstArgumentObjectExpression } from '../../../parser/extract/svelte/define-meta.js';
 import { NoDestructuredDefineMetaCallError } from '../../../utils/error/parser/analyse/define-meta.js';
 
+import { STORYBOOK_META_IDENTIFIER } from '$lib/constants.js';
+
 interface Params {
   nodes: {
     compiled: CompiledASTNodes;
@@ -36,7 +38,7 @@ export function replaceDefineMetaArgument(params: Params): ESTreeAST.ObjectExpre
     });
   }
 
-  declaration.init.arguments[0] = createASTIdentifier('meta');
+  declaration.init.arguments[0] = createASTIdentifier(STORYBOOK_META_IDENTIFIER);
   params.nodes.compiled.defineMetaVariableDeclaration.declarations[0] = declaration;
 
   return defineMetaFirstArgumentObjectExpression;

src/compiler/post-transform/index.test.ts

@@ -64,7 +64,7 @@ describe(transformStoriesCode.name, () => {
        * * _Italic_,
        * * \`Code\`.
        */
-      const meta = {
+      const $__meta = {
       	title: 'Example',
       	component: Example,
       	tags: ['autodocs'],
@@ -81,7 +81,7 @@ describe(transformStoriesCode.name, () => {
       		}
       	}
       };
-      const { Story } = defineMeta(meta);
+      const { Story } = defineMeta($__meta);
 
       var root_2 = $.add_locations($.template(\`<p> </p> <p> </p> <br>\`, 1), Example_stories[$.FILENAME], [[41, 2], [42, 2], [42, 44]]);
       var root = $.add_locations($.template(\`<!> <!> <!> <!> <!>\`, 1), Example_stories[$.FILENAME], []);
@@ -254,9 +254,9 @@ describe(transformStoriesCode.name, () => {
 
       import { createRuntimeStories } from "@storybook/addon-svelte-csf/internal/create-runtime-stories";
 
-      const __stories = createRuntimeStories(Example_stories, meta);
+      const __stories = createRuntimeStories(Example_stories, $__meta);
 
-      export default meta;
+      export default $__meta;
 
       export const __namedExportsOrder = [
       	"Default",

src/constants.ts

@@ -1,3 +1,4 @@
 export const SVELTE_CSF_TAG_PREFIX = 'svelte-csf';
 export const SVELTE_CSF_V4_TAG = `${SVELTE_CSF_TAG_PREFIX}-v4`;
 export const SVELTE_CSF_V5_TAG = `${SVELTE_CSF_TAG_PREFIX}-v5`;
+export const STORYBOOK_META_IDENTIFIER = '$__meta';

src/indexer/parser.ts

@@ -209,16 +209,8 @@ export async function parseForIndexer(
       if (legacyTemplate && !foundMeta && id.type === 'Identifier') {
         const { name } = id;
 
-        if (name === 'meta') {
+        if (name === 'meta' && init?.type === 'ObjectExpression') {
           foundMeta = true;
-
-          if (init?.type !== 'ObjectExpression') {
-            throw new GetDefineMetaFirstArgumentError({
-              filename,
-              defineMetaVariableDeclaration: node,
-            });
-          }
-
           visit(init, state);
         }
       }

tests/stories/LocalMeta.stories.svelte

@@ -0,0 +1,34 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, within } from '@storybook/test';
+
+  /**
+   * Testing if there's no compile error when there's a user defined `meta` identifier.
+   */
+  const { Story } = defineMeta({
+    parameters: {
+      controls: { disable: true },
+    },
+  });
+</script>
+
+<script>
+  let meta = $state({
+    framework: 'svelte',
+  });
+  let output = $derived(JSON.stringify(meta, undefined, 2));
+</script>
+
+<Story
+  name="LocalMeta"
+  play={async (context) => {
+    const { canvasElement } = context;
+    const canvas = within(canvasElement);
+    const pre = canvas.getByTestId('output');
+
+    expect(pre.textContent).toEqual(output);
+  }}
+>
+  <p>It works! 🎉</p>
+  <pre data-testid="output">{output}</pre>
+</Story>