From cfc7beb82f63157e791470f73cfb1a5efd4e3c8b Mon Sep 17 00:00:00 2001
From: Mateusz Kadlubowski <xeho91@pm.me>
Date: Sat, 7 Sep 2024 14:37:02 +0800
Subject: [PATCH] handle id-less templates and stories

---
 .../codemods/legacy-story.test.ts             | 138 +++++++++++++-----
 .../pre-transform/codemods/legacy-story.ts    |  28 +++-
 .../codemods/template-to-snippet.test.ts      |  49 +++++--
 .../codemods/template-to-snippet.ts           |  12 +-
 src/compiler/pre-transform/index.test.ts      |  78 +++++++---
 src/compiler/pre-transform/index.ts           |  28 ++--
 6 files changed, 242 insertions(+), 91 deletions(-)

diff --git a/src/compiler/pre-transform/codemods/legacy-story.test.ts b/src/compiler/pre-transform/codemods/legacy-story.test.ts
index 002514c..4dc08e1 100644
--- a/src/compiler/pre-transform/codemods/legacy-story.test.ts
+++ b/src/compiler/pre-transform/codemods/legacy-story.test.ts
@@ -15,11 +15,16 @@ describe(transformLegacyStory.name, () => {
 
       <Story name="Default" autodocs />
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(
-      `"<Story name="Default" tags={["autodocs"]} />"`
-    );
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`"<Story name="Default" tags={["autodocs"]} />"`);
   });
 
   it("moving 'autodocs' prop doesn't break with existing 'tags' prop", async ({ expect }) => {
@@ -30,11 +35,16 @@ describe(transformLegacyStory.name, () => {
 
       <Story name="Default" autodocs tags={["!dev"]} />
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(
-      `"<Story name="Default" tags={["!dev", "autodocs"]} />"`
-    );
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`"<Story name="Default" tags={["!dev", "autodocs"]} />"`);
   });
 
   it("'source' prop when is a shorthand gets removed", async ({ expect }) => {
@@ -45,11 +55,16 @@ describe(transformLegacyStory.name, () => {
 
       <Story name="Default" source />
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(
-      `"<Story name="Default" />"`
-    );
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`"<Story name="Default" />"`);
   });
 
   it("'source' prop when is a text expression gets moved to 'parameters' prop", async ({
@@ -62,9 +77,16 @@ describe(transformLegacyStory.name, () => {
 
       <Story name="Default" source="'<Button primary />'" />
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(
       `
 			"<Story name="Default" parameters={{
 				docs: { source: { code: "'<Button primary />'" } }
@@ -85,9 +107,16 @@ describe(transformLegacyStory.name, () => {
         <LegacyStory>{'Hi'}</LegacyStory>
       </Story>
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(
       `
       "<Story name="With source as text" parameters={{
       	docs: {
@@ -117,9 +146,16 @@ describe(transformLegacyStory.name, () => {
         }}
       />
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(
       `
 			"<Story name="Default" parameters={{
 				controls: { disable: true },
@@ -140,11 +176,16 @@ describe(transformLegacyStory.name, () => {
 
       <Story name="Default" template="someTemplate" />
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(
-      `"<Story name="Default" children={someTemplate} />"`
-    );
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`"<Story name="Default" children={someTemplate} />"`);
   });
 
   it("when directive 'let:args' is used then it wraps Story fragment with 'children' snippet block", async ({
@@ -159,9 +200,16 @@ describe(transformLegacyStory.name, () => {
         <Button {...args} />
       </Story>
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(`
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`
 			"<Story name="Default">
 				{#snippet children(args)}
 					<Button {...args} />
@@ -182,9 +230,16 @@ describe(transformLegacyStory.name, () => {
         <p>{context.id}</p>
       </Story>
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(`
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`
 			"<Story name="Default">
 				{#snippet children(_args, context)}
 					<p>{context.id}</p>
@@ -206,9 +261,16 @@ describe(transformLegacyStory.name, () => {
         <p>{context.id}</p>
       </Story>
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
-
-    expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(`
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`
       "<Story name="Default">
       	{#snippet children(args, context)}
       		<h1>{args.title}</h1>
diff --git a/src/compiler/pre-transform/codemods/legacy-story.ts b/src/compiler/pre-transform/codemods/legacy-story.ts
index f62375d..8e09c1c 100644
--- a/src/compiler/pre-transform/codemods/legacy-story.ts
+++ b/src/compiler/pre-transform/codemods/legacy-story.ts
@@ -11,14 +11,17 @@ import {
 } from '#parser/ast';
 import { InvalidTemplateAttribute } from '#utils/error/codemod/index';
 
+import type { State } from '..';
+
 interface Params {
-  node: SvelteAST.Component;
+  component: SvelteAST.Component;
   filename?: string;
+  state: State;
 }
 
 export function transformLegacyStory(params: Params): SvelteAST.Component {
-  const { node, filename } = params;
-  let { attributes, fragment, ...rest } = node;
+  const { component, filename, state } = params;
+  let { attributes, fragment, ...rest } = component;
   let newAttributes: SvelteAST.Component['attributes'] = [];
   let autodocs: SvelteAST.Attribute | undefined;
   let source: SvelteAST.Attribute | undefined;
@@ -26,6 +29,7 @@ export function transformLegacyStory(params: Params): SvelteAST.Component {
   let tags: SvelteAST.Attribute | undefined;
   let letDirectiveArgs: SvelteAST.LetDirective | undefined;
   let letDirectiveContext: SvelteAST.LetDirective | undefined;
+  let hasTemplateAttribute = false;
 
   for (let attribute of attributes) {
     if (attribute.type === 'LetDirective' && attribute.name === 'args') {
@@ -60,11 +64,25 @@ export function transformLegacyStory(params: Params): SvelteAST.Component {
 
     if (attribute.type === 'Attribute' && attribute.name === 'template') {
       attribute = templateToChildren(attribute, filename);
+      hasTemplateAttribute = true;
     }
 
     newAttributes.push(attribute);
   }
 
+  // NOTE: is self-closing AND has no template attribute AND there are existing <Template> components in stories file
+  if (fragment.nodes.length === 0 && !hasTemplateAttribute && state.templateComponents.length > 0) {
+    newAttributes.push(
+      createASTAttribute(
+        'children',
+        createASTExpressionTag({
+          type: 'Identifier',
+          name: `sb_default_template_${state.templateComponents.length}`,
+        })
+      )
+    );
+  }
+
   if (autodocs) {
     transformAutodocs({
       autodocs,
@@ -233,12 +251,12 @@ function templateToChildren(
   };
 }
 
-interface TransformTemplateParams {
+interface TransformFragmentParams {
   letDirectiveArgs?: SvelteAST.LetDirective;
   letDirectiveContext?: SvelteAST.LetDirective;
   fragment: SvelteAST.Fragment;
 }
-function transformFragment(params: TransformTemplateParams): SvelteAST.Fragment {
+function transformFragment(params: TransformFragmentParams): SvelteAST.Fragment {
   let { letDirectiveArgs, letDirectiveContext, fragment } = params;
 
   let parameters: SvelteAST.SnippetBlock['parameters'] = [
diff --git a/src/compiler/pre-transform/codemods/template-to-snippet.test.ts b/src/compiler/pre-transform/codemods/template-to-snippet.test.ts
index b1712fb..d1b33e8 100644
--- a/src/compiler/pre-transform/codemods/template-to-snippet.test.ts
+++ b/src/compiler/pre-transform/codemods/template-to-snippet.test.ts
@@ -18,13 +18,20 @@ describe(transformTemplateToSnippet.name, () => {
         <Button {...args} variant="primary" />
       </Template>
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
 
-    expect(print(transformTemplateToSnippet(node))).toMatchInlineSnapshot(`
-			"{#snippet children(args)}
-				<Button {...args} variant="primary" />
-			{/snippet}"
-		`);
+    expect(
+      print(
+        transformTemplateToSnippet({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`
+      "{#snippet sb_default_template_0(args)}
+      	<Button {...args} variant="primary" />
+      {/snippet}"
+    `);
   });
 
   it("covers a case with provided prop 'id'", async ({ expect }) => {
@@ -37,9 +44,16 @@ describe(transformTemplateToSnippet.name, () => {
         <Button {...args} variant="primary" />
       </Template>
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
 
-    expect(print(transformTemplateToSnippet(node))).toMatchInlineSnapshot(`
+    expect(
+      print(
+        transformTemplateToSnippet({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`
 			"{#snippet coolTemplate(args)}
 				<Button {...args} variant="primary" />
 			{/snippet}"
@@ -56,12 +70,19 @@ describe(transformTemplateToSnippet.name, () => {
         <p>{context.args}</p>
       </Template>
     `;
-    const node = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
 
-    expect(print(transformTemplateToSnippet(node))).toMatchInlineSnapshot(`
-			"{#snippet children(_args, context)}
-				<p>{context.args}</p>
-			{/snippet}"
-		`);
+    expect(
+      print(
+        transformTemplateToSnippet({
+          component,
+          state: { componentIdentifierName: {}, templateComponents: [] },
+        })
+      )
+    ).toMatchInlineSnapshot(`
+      "{#snippet sb_default_template_0(_args, context)}
+      	<p>{context.args}</p>
+      {/snippet}"
+    `);
   });
 });
diff --git a/src/compiler/pre-transform/codemods/template-to-snippet.ts b/src/compiler/pre-transform/codemods/template-to-snippet.ts
index 45920ca..c83065d 100644
--- a/src/compiler/pre-transform/codemods/template-to-snippet.ts
+++ b/src/compiler/pre-transform/codemods/template-to-snippet.ts
@@ -1,6 +1,13 @@
 import { getStringValueFromAttribute } from '#parser/analyse/story/attributes';
 import type { SvelteAST } from '#parser/ast';
 
+import type { State } from '..';
+
+interface Params {
+  component: SvelteAST.Component;
+  state: State;
+}
+
 /**
  *
  * Codemod to transform AST node of `<Template>` component to `SnippetBlock`
@@ -25,7 +32,8 @@ import type { SvelteAST } from '#parser/ast';
  * - </Template>
  * ```
  */
-export function transformTemplateToSnippet(component: SvelteAST.Component): SvelteAST.SnippetBlock {
+export function transformTemplateToSnippet(params: Params): SvelteAST.SnippetBlock {
+  const { component, state } = params;
   const { attributes, fragment } = component;
 
   const attributeId = attributes.find((attr) => {
@@ -65,7 +73,7 @@ export function transformTemplateToSnippet(component: SvelteAST.Component): Svel
     type: 'SnippetBlock',
     expression: {
       type: 'Identifier',
-      name: id ?? 'children',
+      name: id ?? `sb_default_template_${state.templateComponents.length}`,
     },
     parameters,
     body: fragment,
diff --git a/src/compiler/pre-transform/index.test.ts b/src/compiler/pre-transform/index.test.ts
index 4318e93..4d77ac8 100644
--- a/src/compiler/pre-transform/index.test.ts
+++ b/src/compiler/pre-transform/index.test.ts
@@ -14,13 +14,13 @@ describe(codemodLegacyNodes.name, () => {
         import { Story } from "${pkg.name}";
 
         /** This is a description for the **Button** component stories. */
-				export const meta = {
+  		export const meta = {
           title: "Atoms/Button",
           component: Button,
         };
       </script>
 
-			<!-- This is a description for **default** Button. -->
+  	<!-- This is a description for **default** Button. -->
       <Story name="Default" />
     `);
     const ast = getSvelteAST({ code });
@@ -45,7 +45,7 @@ describe(codemodLegacyNodes.name, () => {
         import { Meta, Template } from "${pkg.name}";
       </script>
 
-			<!-- This is a description for the **Button** component stories. -->
+  	<!-- This is a description for the **Button** component stories. -->
       <Meta title="Atoms/Button" component={Button} />
     `);
     const ast = getSvelteAST({ code });
@@ -65,11 +65,11 @@ describe(codemodLegacyNodes.name, () => {
 
   it("replaces 'Template' with snippet block", async ({ expect }) => {
     const code = dedent(`
-      <script context="module">
+      <script>
         import { Meta, Template } from "${pkg.name}";
       </script>
 
-			<!-- This is a description for the **Button** component stories. -->
+  	<!-- This is a description for the **Button** component stories. -->
       <Meta title="Atoms/Button" component={Button} />
 
       <Template let:args>
@@ -82,18 +82,18 @@ describe(codemodLegacyNodes.name, () => {
     const transformed = await codemodLegacyNodes({ ast });
 
     expect(print(transformed)).toMatchInlineSnapshot(`
-			"<script context="module">
-				import { defineMeta } from "@storybook/addon-svelte-csf";
-
-				/** This is a description for the **Button** component stories. */
-				const { Story } = defineMeta({ title: "Atoms/Button", component: Button });
-			</script>
-
-			{#snippet children(args)}
-				<Button {...args} />
-			{/snippet}
-			<Story name="Default" />"
-		`);
+      "<script context="module">
+      	import { defineMeta } from "@storybook/addon-svelte-csf";
+
+      	/** This is a description for the **Button** component stories. */
+      	const { Story } = defineMeta({ title: "Atoms/Button", component: Button });
+      </script>
+
+      {#snippet sb_default_template_1(args)}
+      	<Button {...args} />
+      {/snippet}
+      <Story name="Default" />"
+    `);
   });
 
   it('transforms legacy syntax correctly', async ({ expect }) => {
@@ -102,7 +102,7 @@ describe(codemodLegacyNodes.name, () => {
         import { Meta, Story, Template } from "${pkg.name}";
       </script>
 
-			<!-- This is a description for the **Button** component stories. -->
+  	  <!-- This is a description for the **Button** component stories. -->
       <Meta title="Atoms/Button" component={Button} />
 
       <Template id="sample" let:args let:context>
@@ -129,13 +129,14 @@ describe(codemodLegacyNodes.name, () => {
       {#snippet sample(args, context)}
       	<p>{context.id}</p>
       	<Button {...args} />
-      {/snippet}
-      <Story name="Default" children={sample} tags={["autodocs"]} parameters={{
+       
+      {/snippet} <Story name="Default" children={sample} tags={["autodocs"]} parameters={{
       	docs: { source: { code: "<Button {...args} />" } }
       }}>
       	{#snippet children(args, context)}
       		<p>{context.id}</p>
       		<Button {...args} />
+       
       	{/snippet}
       </Story>"
     `);
@@ -218,4 +219,41 @@ describe(codemodLegacyNodes.name, () => {
       </script>"
     `);
   });
+
+  it('handles multiple id-less Template components', async ({ expect }) => {
+    const code = `
+      <script context="module" lang="ts">
+        import { Story, Template } from "${pkg.name}";
+      </script>
+
+      <Template let:context>
+        <p>{context.args}</p>
+      </Template>
+
+      <Story name="Default" />
+
+      <Template let:args>
+        <Button {...args} />
+      </Template>
+
+      <Story name="NextOne" />
+    `;
+    const ast = getSvelteAST({ code });
+    const transformed = await codemodLegacyNodes({ ast });
+
+    expect(print(transformed)).toMatchInlineSnapshot(`
+      "<script context="module" lang="ts">
+      	import { defineMeta } from "@storybook/addon-svelte-csf";
+      </script>
+
+      {#snippet sb_default_template_1(_args, context)}
+      	<p>{context.args}</p>
+      {/snippet}
+      <Story name="Default" children={sb_default_template_1} />
+      {#snippet sb_default_template_2(args)}
+      	<Button {...args} />
+      {/snippet}
+      <Story name="NextOne" children={sb_default_template_2} />"
+    `);
+  });
 });
diff --git a/src/compiler/pre-transform/index.ts b/src/compiler/pre-transform/index.ts
index e62ec9c..acb8867 100644
--- a/src/compiler/pre-transform/index.ts
+++ b/src/compiler/pre-transform/index.ts
@@ -12,23 +12,26 @@ interface Params {
   filename?: string;
 }
 
+export interface State {
+  componentIdentifierName: ComponentIdentifierName;
+  componentMetaHtmlComment?: SvelteAST.Comment;
+  defineMetaFromExportConstMeta?: ESTreeAST.VariableDeclaration;
+  defineMetaFromComponentMeta?: ESTreeAST.VariableDeclaration;
+  currentScript?: 'instance' | 'module';
+  pkgImportDeclaration?: ESTreeAST.ImportDeclaration;
+  storiesComponentIdentifier?: ESTreeAST.Identifier;
+  storiesComponentImportDeclaration?: ESTreeAST.ImportDeclaration;
+  templateComponents: SvelteAST.Component[];
+}
+
 export async function codemodLegacyNodes(params: Params): Promise<SvelteAST.Root> {
   const { walk } = await import('zimmerframe');
 
   const { ast, filename } = params;
 
-  interface State {
-    componentIdentifierName: ComponentIdentifierName;
-    componentMetaHtmlComment?: SvelteAST.Comment;
-    defineMetaFromExportConstMeta?: ESTreeAST.VariableDeclaration;
-    defineMetaFromComponentMeta?: ESTreeAST.VariableDeclaration;
-    currentScript?: 'instance' | 'module';
-    pkgImportDeclaration?: ESTreeAST.ImportDeclaration;
-    storiesComponentIdentifier?: ESTreeAST.Identifier;
-    storiesComponentImportDeclaration?: ESTreeAST.ImportDeclaration;
-  }
   const state: State = {
     componentIdentifierName: {},
+    templateComponents: [],
   };
   let transformedAst = walk(ast as SvelteAST.SvelteNode | SvelteAST.Script, state, {
     _(_node, context) {
@@ -161,12 +164,13 @@ export async function codemodLegacyNodes(params: Params): Promise<SvelteAST.Root
 
       if (name === componentIdentifierName?.Story) {
         state.componentMetaHtmlComment = undefined;
-        return transformLegacyStory({ node, filename });
+        return transformLegacyStory({ component: node, filename, state });
       }
 
       if (name === componentIdentifierName?.Template) {
         state.componentMetaHtmlComment = undefined;
-        return transformTemplateToSnippet(node);
+        state.templateComponents.push(node);
+        return transformTemplateToSnippet({ component: node, state });
       }
     },
   });