refactor: Convert named stories exports value to ObjectExpression

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

@@ -11,23 +11,73 @@ describe(createNamedExportStory.name, () => {
     const stringified = print(
       createNamedExportStory({
         exportName: 'Default',
-        node: createVariableFromRuntimeStoriesCall({
-          storiesFunctionDeclaration: {
-            type: 'FunctionDeclaration',
-            id: {
-              type: 'Identifier',
-              name: 'Example_stories',
+        nodes: {
+          variable: createVariableFromRuntimeStoriesCall({
+            storiesFunctionDeclaration: {
+              type: 'FunctionDeclaration',
+              id: {
+                type: 'Identifier',
+                name: 'Example_stories',
+              },
+              body: {
+                type: 'BlockStatement',
+                body: [],
+              },
+              params: [],
             },
-            body: {
-              type: 'BlockStatement',
-              body: [],
+          }),
+        },
+      }) as unknown as ESTreeAST.Program
+    ).code;
+
+    expect(stringified).toMatchInlineSnapshot(
+      `"export const Default = { ...__stories["Default"], tags: [] };"`
+    );
+  });
+
+  it('allows passing Story-level tags', ({ expect }) => {
+    const stringified = print(
+      createNamedExportStory({
+        exportName: 'Default',
+        nodes: {
+          variable: createVariableFromRuntimeStoriesCall({
+            storiesFunctionDeclaration: {
+              type: 'FunctionDeclaration',
+              id: {
+                type: 'Identifier',
+                name: 'Example_stories',
+              },
+              body: {
+                type: 'BlockStatement',
+                body: [],
+              },
+              params: [],
             },
-            params: [],
+          }),
+          tags: {
+            type: 'ArrayExpression',
+            elements: [
+              {
+                type: 'Literal',
+                value: 'autodocs',
+              },
+              {
+                type: 'Literal',
+                value: '!test',
+              },
+            ],
           },
-        }),
+        },
       }) as unknown as ESTreeAST.Program
     ).code;
 
-    expect(stringified).toMatchInlineSnapshot(`"export const Default = __stories["Default"];"`);
+    expect(stringified).toMatchInlineSnapshot(
+      `
+      "export const Default = {
+      	...__stories["Default"],
+      	tags: ["autodocs", "!test"]
+      };"
+    `
+    );
   });
 });

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

@@ -5,17 +5,56 @@ import type { ESTreeAST } from '$lib/parser/ast.js';
 interface Params {
   exportName: string;
   filename?: string;
-  node: ReturnType<typeof createVariableFromRuntimeStoriesCall>;
+  nodes: {
+    variable: ReturnType<typeof createVariableFromRuntimeStoriesCall>;
+    tags?: ESTreeAST.ArrayExpression;
+  };
 }
 
 export function createNamedExportStory(params: Params): ESTreeAST.ExportNamedDeclaration {
-  const { exportName, node } = params;
-
   const exported = {
     type: 'Identifier',
-    name: exportName,
+    name: params.exportName,
   } as const;
 
+  const tags = params.nodes.tags ?? { type: 'ArrayExpression', elements: [] };
+  const declarations = [
+    {
+      type: 'VariableDeclarator',
+      id: exported,
+      init: {
+        type: 'ObjectExpression',
+        properties: [
+          {
+            type: 'SpreadElement',
+            argument: {
+              type: 'MemberExpression',
+              computed: true,
+              optional: false,
+              object: {
+                type: 'Identifier',
+                name: getNameFromVariable(params.nodes),
+              },
+              property: { type: 'Literal', value: params.exportName },
+            },
+          },
+          {
+            type: 'Property',
+            kind: 'init',
+            computed: false,
+            method: false,
+            shorthand: false,
+            key: {
+              type: 'Identifier',
+              name: 'tags',
+            },
+            value: tags,
+          },
+        ],
+      },
+    },
+  ] satisfies ESTreeAST.VariableDeclaration['declarations'];
+
   return {
     type: 'ExportNamedDeclaration',
     specifiers: [
@@ -28,26 +67,11 @@ export function createNamedExportStory(params: Params): ESTreeAST.ExportNamedDec
     declaration: {
       type: 'VariableDeclaration',
       kind: 'const',
-      declarations: [
-        {
-          type: 'VariableDeclarator',
-          id: exported,
-          init: {
-            type: 'MemberExpression',
-            computed: true,
-            optional: false,
-            object: {
-              type: 'Identifier',
-              name: getNameFromVariable(node),
-            },
-            property: { type: 'Literal', value: exportName },
-          },
-        },
-      ],
+      declarations,
     },
   };
 }
 
-function getNameFromVariable(node: Params['node']): string {
-  return (node.declarations[0].id as ESTreeAST.Identifier).name;
+function getNameFromVariable(nodes: Params['nodes']): string {
+  return (nodes.variable.declarations[0].id as ESTreeAST.Identifier).name;
 }

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

@@ -6,7 +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 { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.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';
 import type { SvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
@@ -33,11 +33,17 @@ export async function createAppendix(params: Params) {
     storiesFunctionDeclaration,
     filename,
   });
-  const storiesExports = storyIdentifiers.map(({ exportName }) =>
+  const storiesExports = storyIdentifiers.map(({ exportName }, idx) =>
     createNamedExportStory({
       exportName,
       filename,
-      node: variableFromRuntimeStoriesCall,
+      nodes: {
+        variable: variableFromRuntimeStoriesCall,
+        tags: getStoryTags({
+          storyComponents: params.nodes.svelte.storyComponents,
+          idx,
+        }),
+      },
     })
   );
 
@@ -62,3 +68,16 @@ function createExportDefaultMeta(): ESTreeAST.ExportDefaultDeclaration {
     declaration: createASTIdentifier('meta'),
   };
 }
+
+interface GetStoryTagsParams {
+  storyComponents: SvelteASTNodes['storyComponents'];
+  idx: number;
+}
+function getStoryTags(params: GetStoryTagsParams): ESTreeAST.ArrayExpression | undefined {
+  const storyComponent = params.storyComponents[params.idx];
+  const tags = storyComponent.component.attributes.find((a) => a.name === 'tags');
+
+  if (!tags) return;
+
+  return (tags.value as SvelteAST.ExpressionTag).expression as ESTreeAST.ArrayExpression;
+}

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

@@ -239,10 +239,10 @@ describe(transformStoriesCode.name, () => {
       	"WithoutTemplate"
       ];
 
-      export const Default = __stories["Default"];
-      export const Rounded = __stories["Rounded"];
-      export const Square = __stories["Square"];
-      export const WithoutTemplate = __stories["WithoutTemplate"];"
+      export const Default = { ...__stories["Default"], tags: [] };
+      export const Rounded = { ...__stories["Rounded"], tags: [] };
+      export const Square = { ...__stories["Square"], tags: [] };
+      export const WithoutTemplate = { ...__stories["WithoutTemplate"], tags: [] };"
     `
     );
   });