Merge pull request #244 from storybookjs/post-transform-meta

refactor(transform)!: `meta` no longer destructurable from `defineMeta()` call

Author: JReinhold

ERRORS.md

@@ -218,30 +218,20 @@ You most likely forgot to destructure the return value.
 
 ### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0003`
 
-The addon automatically adds a `meta` identifier to the return value of `defineMeta()` during compilation.
-But for some reason, this couldn't be found in the compiled output.
-
-If you see this error, please open a [bug report](https://github.com/storybookjs/addon-svelte-csf/issues/new).
-
-While you create an issue, please provide original code of the stories file that caused this error.
-It will help us investigate the occurred issue better.
-
-### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0004`
-
 When analysing the object passed to `defineMeta({ ... })`, invalid properties were found. The following properties must be **static string literals**, but got something else:
 
 - `title`
 - `name`
 
 Dynamically generating these properties with functions or with template strings is not supported.
 
-### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0005`
+### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0004`
 
 When analysing the object passed to `defineMeta({ ... })`, invalid properties were found. The `tags` property must be a **static array of static string literals**, but got something else
 
 Dynamically generating the array or the entries with functions or with template strings is not supported.
 
-### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0006`
+### `SB_SVELTE_CSF_PARSER_ANALYSE_DEFINE_META_0005`
 
 When analysing the object passed to `defineMeta({ ... })`, invalid properties were found. The `tags` property must be a **static array of static string literals**, but got something else
 

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

@@ -12,10 +12,6 @@ describe(createNamedExportStory.name, () => {
       createNamedExportStory({
         exportName: 'Default',
         node: createVariableFromRuntimeStoriesCall({
-          metaIdentifier: {
-            type: 'Identifier',
-            name: 'meta',
-          },
           storiesFunctionDeclaration: {
             type: 'FunctionDeclaration',
             id: {

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

@@ -7,10 +7,6 @@ describe(createVariableFromRuntimeStoriesCall.name, () => {
   it('creates a variable correctly', ({ expect }) => {
     const stringified = print(
       createVariableFromRuntimeStoriesCall({
-        metaIdentifier: {
-          type: 'Identifier',
-          name: 'meta',
-        },
         storiesFunctionDeclaration: {
           type: 'FunctionDeclaration',
           id: {

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

@@ -1,16 +1,14 @@
-import type { getMetaIdentifier } from '$lib/parser/analyse/define-meta/meta-identifier.js';
-import type { ESTreeAST } from '$lib/parser/ast.js';
+import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
 
 interface Params {
   storiesFunctionDeclaration: ESTreeAST.FunctionDeclaration;
-  metaIdentifier: ReturnType<typeof getMetaIdentifier>;
   filename?: string;
 }
 
 export function createVariableFromRuntimeStoriesCall(
   params: Params
 ): ESTreeAST.VariableDeclaration {
-  const { storiesFunctionDeclaration, metaIdentifier } = params;
+  const { storiesFunctionDeclaration } = params;
 
   return {
     type: 'VariableDeclaration',
@@ -36,7 +34,7 @@ export function createVariableFromRuntimeStoriesCall(
               type: 'Identifier',
               name: storiesFunctionDeclaration.id.name,
             },
-            metaIdentifier,
+            createASTIdentifier('meta'),
           ],
         },
       },

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

@@ -1,16 +1,15 @@
 import { print } from 'esrap';
 import MagicString from 'magic-string';
 
-import { createExportDefaultMeta } from './appendix/create-export-default.js';
 import { createExportOrderVariable } from './appendix/create-export-order.js';
 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 { getMetaIdentifier } from '$lib/parser/analyse/define-meta/meta-identifier.js';
+import { createASTIdentifier, type ESTreeAST } 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';
 import type { SvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
-import { getStoriesIdentifiers } from '$lib/parser/analyse/story/attributes/identifiers.js';
 
 interface Params {
   code: MagicString;
@@ -24,19 +23,14 @@ interface Params {
 export async function createAppendix(params: Params) {
   const { code, nodes, filename } = params;
   const { compiled, svelte } = nodes;
-  const { defineMetaVariableDeclaration, storiesFunctionDeclaration } = compiled;
+  const { storiesFunctionDeclaration } = compiled;
 
   const storyIdentifiers = getStoriesIdentifiers({
     nodes: svelte,
     filename,
   });
-  const metaIdentifier = getMetaIdentifier({
-    node: defineMetaVariableDeclaration,
-    filename,
-  });
   const variableFromRuntimeStoriesCall = createVariableFromRuntimeStoriesCall({
     storiesFunctionDeclaration,
-    metaIdentifier,
     filename,
   });
   const storiesExports = storyIdentifiers.map(({ exportName }) =>
@@ -53,11 +47,18 @@ export async function createAppendix(params: Params) {
     body: [
       createRuntimeStoriesImport(),
       variableFromRuntimeStoriesCall,
-      createExportDefaultMeta({ metaIdentifier, filename }),
+      createExportDefaultMeta(),
       createExportOrderVariable({ storyIdentifiers, filename }),
       ...storiesExports,
     ],
   });
 
   code.append('\n' + appendix.code);
 }
+
+function createExportDefaultMeta(): ESTreeAST.ExportDefaultDeclaration {
+  return {
+    type: 'ExportDefaultDeclaration',
+    declaration: createASTIdentifier('meta'),
+  };
+}

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

@@ -7,7 +7,7 @@ import MagicString from 'magic-string';
 import { parseAst } from 'rollup/parseAst';
 import { describe, it } from 'vitest';
 
-import { transformDefineMeta } from '.';
+import { transformDefineMeta } from './index';
 
 import { getSvelteAST } from '$lib/parser/ast.js';
 import { extractSvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
@@ -51,24 +51,6 @@ describe(transformDefineMeta.name, () => {
       ast: parseAst(code.toString()),
     });
 
-    expect(print(defineMetaVariableDeclaration).code).toMatchInlineSnapshot(`
-			"const { Story, meta } = defineMeta({
-				title: 'Example',
-				component: Example,
-				tags: ['autodocs'],
-				args: {
-					onclick: action('onclick'),
-					onmouseenter: action('onmouseenter'),
-					onmouseleave: action('onmouseleave')
-				},
-				parameters: {
-					docs: {
-						description: {
-							component: "Description set explicitly in the comment above \`defineMeta\`.\\n\\nMultiline supported. And also Markdown syntax:\\n\\n* **Bold**,\\n* _Italic_,\\n* \`Code\`."
-						}
-					}
-				}
-			});"
-		`);
+    expect(print(defineMetaVariableDeclaration).code).toMatchInlineSnapshot(`"const { Story } = defineMeta(meta);"`);
   });
 });

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

@@ -1,9 +1,10 @@
 import { print } from 'esrap';
 import type MagicString from 'magic-string';
 
-import { destructureMetaFromDefineMeta } from './destructure-meta.js';
+import { replaceDefineMetaArgument } from './replace-argument';
 import { insertDefineMetaJSDocCommentAsDescription } from './insert-description.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';
 
@@ -23,18 +24,41 @@ interface Params {
 export function transformDefineMeta(params: Params): void {
   const { code, nodes, filename } = params;
 
-  destructureMetaFromDefineMeta({
-    nodes: nodes.compiled,
+  insertDefineMetaJSDocCommentAsDescription({
+    nodes,
     filename,
   });
-  insertDefineMetaJSDocCommentAsDescription({
+  const metaObjectExpression = replaceDefineMetaArgument({
     nodes,
     filename,
   });
+  const metaVariableDeclaration = createMetaVariableDeclaration({
+    init: metaObjectExpression,
+  });
 
   const { compiled } = nodes;
   const { defineMetaVariableDeclaration } = compiled;
   const { start, end } = defineMetaVariableDeclaration;
 
   code.update(start as number, end as number, print(defineMetaVariableDeclaration).code);
+  code.appendLeft(start as number, print(metaVariableDeclaration).code + '\n');
+}
+
+export function createMetaVariableDeclaration({
+  init,
+}: {
+  init: ESTreeAST.ObjectExpression;
+}): ESTreeAST.VariableDeclaration {
+  //
+  return {
+    type: 'VariableDeclaration',
+    kind: 'const',
+    declarations: [
+      {
+        type: 'VariableDeclarator',
+        id: createASTIdentifier('meta'),
+        init,
+      },
+    ],
+  };
 }

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

@@ -0,0 +1,43 @@
+import { createASTIdentifier, type ESTreeAST } from '../../../parser/ast';
+import type { CompiledASTNodes } from '../../../parser/extract/compiled/nodes';
+import type { SvelteASTNodes } from '../../../parser/extract/svelte/nodes';
+import { getDefineMetaFirstArgumentObjectExpression } from '../../../parser/extract/svelte/define-meta';
+import { NoDestructuredDefineMetaCallError } from '../../../utils/error/parser/analyse/define-meta';
+
+interface Params {
+  nodes: {
+    compiled: CompiledASTNodes;
+    svelte: SvelteASTNodes;
+  };
+  filename?: string;
+}
+
+/**
+ * Replaces `defineMeta({ ... })` with `defineMeta(meta)`,
+ * and also it returns {@link ESTreeASTAST.ObjectExpression} which was replaced with {@link ESTreeAST.Identifier}
+ */
+export function replaceDefineMetaArgument(params: Params): ESTreeAST.ObjectExpression {
+  const defineMetaFirstArgumentObjectExpression = getDefineMetaFirstArgumentObjectExpression({
+    nodes: params.nodes.compiled,
+    filename: params.filename,
+  });
+
+  const declaration = params.nodes.compiled.defineMetaVariableDeclaration.declarations[0];
+
+  if (
+    !declaration ||
+    declaration.init?.type !== 'CallExpression' ||
+    declaration?.init?.callee.type !== 'Identifier' ||
+    declaration?.init?.callee.name !== params.nodes.compiled.defineMetaImport.local.name
+  ) {
+    throw new NoDestructuredDefineMetaCallError({
+      defineMetaVariableDeclarator: declaration,
+      filename: params.filename,
+    });
+  }
+
+  declaration.init.arguments[0] = createASTIdentifier('meta');
+  params.nodes.compiled.defineMetaVariableDeclaration.declarations[0] = declaration;
+
+  return defineMetaFirstArgumentObjectExpression;
+}