@storybook/addon-svelte-csf 5.1.1 → 5.1.2

package/dist/compiler/post-transform/story/index.test.js

@@ -0,0 +1,147 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+import { print } from 'esrap';
+import MagicString from 'magic-string';
+import { parseAst } from 'rollup/parseAst';
+import { describe, it } from 'vitest';
+import { transformStory } from './index.js';
+import { getSvelteAST } from '../../../parser/ast.js';
+import { extractSvelteASTNodes } from '../../../parser/extract/svelte/nodes.js';
+import { extractCompiledASTNodes } from '../../../parser/extract/compiled/nodes.js';
+import { extractStoriesNodesFromExportDefaultFn } from '../../../parser/extract/compiled/stories.js';
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+describe(transformStory.name, () => {
+    it("each transformed compiled 'Story' component matches inlined snapshots", async ({ expect, }) => {
+        const filename = path.resolve(__dirname, '../../../../tests/stories/Example.stories.svelte');
+        const originalCode = fs.readFileSync(filename).toString();
+        const compiledPreTransformCode = fs
+            .readFileSync(path.resolve(__dirname, '../../../../tests/__compiled__/pre-transform/Example.stories.dev.js'))
+            .toString();
+        const svelteAST = getSvelteAST({ code: originalCode, filename });
+        const svelteASTNodes = await extractSvelteASTNodes({
+            ast: svelteAST,
+            filename,
+        });
+        const compiledASTNodes = await extractCompiledASTNodes({
+            ast: parseAst(compiledPreTransformCode),
+            filename,
+        });
+        const code = new MagicString(compiledPreTransformCode);
+        const extractedCompiledStoriesNodes = await extractStoriesNodesFromExportDefaultFn({
+            nodes: compiledASTNodes,
+            filename,
+        });
+        const svelteStories = [...svelteASTNodes.storyComponents].reverse();
+        const compiledPreTransformedStories = [...extractedCompiledStoriesNodes].reverse();
+        svelteStories.forEach((svelte, index) => {
+            transformStory({
+                code,
+                nodes: {
+                    svelte: svelteASTNodes,
+                    component: {
+                        svelte,
+                        compiled: compiledPreTransformedStories[index],
+                    },
+                },
+                filename,
+                originalCode,
+            });
+        });
+        const compiledPostTransformedStories = await extractStoriesNodesFromExportDefaultFn({
+            nodes: await extractCompiledASTNodes({
+                ast: parseAst(code.toString()),
+            }),
+            filename,
+        });
+        expect(print(compiledPostTransformedStories[0]).code).toMatchInlineSnapshot(`
+      "Story(node_1, {
+      	name: 'Default',
+      	template,
+      	parameters: {
+      		docs: {
+      			description: { story: "Description for the default story" }
+      		},
+      		__svelteCsf: {
+      			rawCode: "<Example {...args} onclick={handleClick}>\\n  <p>{context.name}</p>\\n  You clicked: {count}<br />\\n</Example>"
+      		}
+      	}
+      })"
+    `);
+        expect(print(compiledPostTransformedStories[1]).code).toMatchInlineSnapshot(`
+      "Story(node_2, {
+      	name: 'Rounded',
+      	args: { rounded: true },
+      	template,
+      	parameters: {
+      		docs: {
+      			description: { story: "Description for the rounded story" }
+      		},
+      		__svelteCsf: {
+      			rawCode: "<Example {...args} onclick={handleClick}>\\n  <p>{context.name}</p>\\n  You clicked: {count}<br />\\n</Example>"
+      		}
+      	}
+      })"
+    `);
+        expect(print(compiledPostTransformedStories[2]).code).toMatchInlineSnapshot(`
+      "Story(node_3, {
+      	name: 'Square',
+      	args: { rounded: false },
+      	template,
+      	parameters: {
+      		docs: {
+      			description: { story: "Description for the squared story" }
+      		},
+      		__svelteCsf: {
+      			rawCode: "<Example {...args} onclick={handleClick}>\\n  <p>{context.name}</p>\\n  You clicked: {count}<br />\\n</Example>"
+      		}
+      	}
+      })"
+    `);
+        expect(print(compiledPostTransformedStories[3]).code).toMatchInlineSnapshot(`
+      "Story(node_4, {
+      	name: 'As child',
+      	asChild: true,
+      	children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => {
+      		var fragment_3 = $.comment();
+      		var node_5 = $.first_child(fragment_3);
+
+      		Example(node_5, {
+      			children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => {
+      				$.next();
+
+      				var text_2 = $.text('Label');
+
+      				$.append($$anchor, text_2);
+      			}),
+      			$$slots: { default: true }
+      		});
+
+      		$.append($$anchor, fragment_3);
+      	}),
+      	$$slots: { default: true },
+      	parameters: {
+      		__svelteCsf: { rawCode: "<Example>Label</Example>" }
+      	}
+      })"
+    `);
+        expect(print(compiledPostTransformedStories[4]).code).toMatchInlineSnapshot(`
+      "Story(node_6, {
+      	name: 'Children forwared',
+      	children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => {
+      		$.next();
+
+      		var text_3 = $.text('Forwarded label');
+
+      		$.append($$anchor, text_3);
+      	}),
+      	$$slots: { default: true },
+      	parameters: {
+      		__svelteCsf: {
+      			rawCode: "<Example {...args}>\\n  Forwarded label\\n</Example>"
+      		}
+      	}
+      })"
+    `);
+    });
+});

package/dist/compiler/pre-transform/codemods/component-meta-to-define-meta.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/compiler/pre-transform/codemods/component-meta-to-define-meta.test.js

@@ -0,0 +1,121 @@
+import { print } from 'svelte-ast-print';
+import { describe, it } from 'vitest';
+import { transformComponentMetaToDefineMeta } from './component-meta-to-define-meta.js';
+import { parseAndExtractSvelteNode } from '../../../../tests/extractor.js';
+describe(transformComponentMetaToDefineMeta.name, () => {
+    it('works with a simple example', async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Meta } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Meta title="Atoms/Button" component={Button} />
+    `;
+        const node = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformComponentMetaToDefineMeta({
+            component: node,
+        }))).toMatchInlineSnapshot(`"const { Story } = defineMeta({ title: "Atoms/Button", component: Button });"`);
+    });
+    it('leading comments are included', async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Meta } from "@storybook/addon-svelte-csf";
+      </script>
+
+			<!-- This is a description for the **Button** component stories. -->
+      <Meta title="Atoms/Button" component={Button} />
+    `;
+        const [comment, component] = await Promise.all([
+            parseAndExtractSvelteNode(code, 'Comment'),
+            parseAndExtractSvelteNode(code, 'Component'),
+        ]);
+        expect(print(transformComponentMetaToDefineMeta({
+            component,
+            comment,
+        }))).toMatchInlineSnapshot(`
+      "/** This is a description for the **Button** component stories. */ const { Story } = defineMeta({ title: "Atoms/Button", component: Button });"
+    `);
+    });
+    it('supports <Meta> parameters with functions', async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Meta } from "@storybook/addon-svelte-csf";
+        import WithParameters from './WithParameters.svelte';
+      </script>
+
+      <Meta component={WithParameters} parameters={{
+          docs: {
+            source: {
+              transform: (code) => {
+                return code + 'transformed';
+              }
+            }
+          }
+        }} />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformComponentMetaToDefineMeta({ component }))).toMatchInlineSnapshot(`
+      "const { Story } = defineMeta({
+      	component: WithParameters,
+      	parameters: {
+      		docs: {
+      			source: {
+      				transform: (code) => {
+      					return code + 'transformed';
+      				}
+      			}
+      		}
+      	}
+      });"
+    `);
+    });
+    it('supports <Meta> with parameters being referenced to variable in the instance tag', async ({ expect, }) => {
+        const code = `
+      <script>
+        const parameters = { foo: 'bar' };
+      </script>
+
+      <Meta component={WithParameters} parameters={{ ...parameters, baz: 'yes'}} />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformComponentMetaToDefineMeta({ component }))).toMatchInlineSnapshot(`
+      "const { Story } = defineMeta({
+      	component: WithParameters,
+      	parameters: { ...parameters, baz: 'yes' }
+      });"
+    `);
+    });
+    it("transforms singular expresion tag with literal string on 'tags' attribute to array expression", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Meta tags={"autodocs"} />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformComponentMetaToDefineMeta({ component }))).toMatchInlineSnapshot(`"const { Story } = defineMeta({ tags: ["autodocs"] });"`);
+    });
+    it("transforms singular text value on 'tags' attribute to array expression", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Meta tags="singular" />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformComponentMetaToDefineMeta({ component }))).toMatchInlineSnapshot(`"const { Story } = defineMeta({ tags: ["singular"] });"`);
+    });
+    it('tags with an array expression are left as-is', async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Meta tags={["autodocs", "!dev"]} />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformComponentMetaToDefineMeta({ component }))).toMatchInlineSnapshot(`"const { Story } = defineMeta({ tags: ["autodocs", "!dev"] });"`);
+    });
+});

package/dist/compiler/pre-transform/codemods/export-const-to-define-meta.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/compiler/pre-transform/codemods/export-const-to-define-meta.test.js

@@ -0,0 +1,68 @@
+import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };
+import { print } from 'svelte-ast-print';
+import { describe, it } from 'vitest';
+import { transformExportMetaToDefineMeta } from './export-const-to-define-meta.js';
+import { parseAndExtractSvelteNode } from '../../../../tests/extractor.js';
+describe(transformExportMetaToDefineMeta.name, () => {
+    it('works with advanced example', async ({ expect }) => {
+        const code = `
+      <script context="module" lang="ts">
+        import { Story, Template } from "${pkg.name}";
+
+        export const meta = {
+          component: Button,
+          tags: ['autodocs'],
+          args: {
+            children: 'Click me',
+            onclick: onclickFn,
+          },
+          argTypes: {
+            backgroundColor: { control: 'color' },
+            size: {
+              control: { type: 'select' },
+              options: ['small', 'medium', 'large'],
+            },
+            children: { control: 'text' },
+          }
+        } satisfies Meta<Button>;
+      </script>
+    `;
+        const node = await parseAndExtractSvelteNode(code, 'ExportNamedDeclaration');
+        expect(print(transformExportMetaToDefineMeta(node))).toMatchInlineSnapshot(`
+			"const { Story } = defineMeta({
+				component: Button,
+				tags: ['autodocs'],
+				args: { children: 'Click me', onclick: onclickFn },
+				argTypes: {
+					backgroundColor: { control: 'color' },
+					size: {
+						control: { type: 'select' },
+						options: ['small', 'medium', 'large']
+					},
+					children: { control: 'text' }
+				}
+			});"
+		`);
+    });
+    it('leading comments are included', async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Story, Template } from "${pkg.name}";
+
+        /**
+         * This is a description for the **Button** component stories.
+         */
+        export const meta = {
+          component: Button,
+        };
+      </script>
+    `;
+        const node = await parseAndExtractSvelteNode(code, 'ExportNamedDeclaration');
+        expect(print(transformExportMetaToDefineMeta(node))).toMatchInlineSnapshot(`
+			"/**
+			 * This is a description for the **Button** component stories.
+			 */
+			const { Story } = defineMeta({ component: Button });"
+		`);
+    });
+});

package/dist/compiler/pre-transform/codemods/import-declaration.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/compiler/pre-transform/codemods/import-declaration.test.js

@@ -0,0 +1,24 @@
+import { print } from 'svelte-ast-print';
+import { describe, it } from 'vitest';
+import { transformImportDeclaration } from './import-declaration.js';
+import { parseAndExtractSvelteNode } from '../../../../tests/extractor.js';
+describe(transformImportDeclaration.name, () => {
+    it("removes legacy components and add 'defineMeta'", async ({ expect }) => {
+        const code = `
+      <script context="module" lang="ts">
+        import { Story, Template } from "@storybook/addon-svelte-csf";
+      </script>
+    `;
+        const node = await parseAndExtractSvelteNode(code, 'ImportDeclaration');
+        expect(print(transformImportDeclaration({ node }))).toMatchInlineSnapshot(`"import { defineMeta } from "@storybook/addon-svelte-csf";"`);
+    });
+    it("it doesn't remove existing 'defineMeta'", async ({ expect }) => {
+        const code = `
+      <script context="module" lang="ts">
+        import { Story, Template, defineMeta } from "@storybook/addon-svelte-csf";
+      </script>
+    `;
+        const node = await parseAndExtractSvelteNode(code, 'ImportDeclaration');
+        expect(print(transformImportDeclaration({ node }))).toMatchInlineSnapshot(`"import { defineMeta } from "@storybook/addon-svelte-csf";"`);
+    });
+});

package/dist/compiler/pre-transform/codemods/legacy-story.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/compiler/pre-transform/codemods/legacy-story.test.js

@@ -0,0 +1,287 @@
+import { print } from 'svelte-ast-print';
+import { describe, it } from 'vitest';
+import { transformLegacyStory } from './legacy-story.js';
+import { parseAndExtractSvelteNode } from '../../../../tests/extractor.js';
+describe(transformLegacyStory.name, () => {
+    it("it moves 'autodocs' prop to 'tags' correctly", async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" autodocs />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`"<Story name="Default" tags={["autodocs", "svelte-csf-v4"]} />"`);
+    });
+    it("moving 'autodocs' prop doesn't break with existing 'tags' prop", async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" autodocs tags={["!dev"]} />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`"<Story name="Default" tags={["!dev", "autodocs", "svelte-csf-v4"]} />"`);
+    });
+    it("'source' prop when is a shorthand gets removed", async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" source />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`"<Story name="Default" tags={["svelte-csf-v4"]} />"`);
+    });
+    it("'source' prop when is a text expression gets moved to 'parameters' prop", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" source="'<Button primary />'" />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`
+      "<Story name="Default" parameters={{
+      	docs: { source: { code: "'<Button primary />'" } }
+      }} tags={["svelte-csf-v4"]} />"
+    `);
+    });
+    it("'source' prop when is a text expression and Story has children, gets moved to 'parameters' prop", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="With source as text" source="<LegacyStory>Hi</LegacyStory>">
+        <LegacyStory>{'Hi'}</LegacyStory>
+      </Story>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`
+      "<Story name="With source as text" parameters={{
+      	docs: {
+      		source: { code: "<LegacyStory>Hi</LegacyStory>" }
+      	}
+      }} tags={["svelte-csf-v4"]}>
+      	<LegacyStory>{'Hi'}</LegacyStory>
+      </Story>"
+    `);
+    });
+    it("'source' prop when is a text expression gets moved to existing 'parameters'", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story
+        name="Default"
+        source="'<Button primary />'"
+        parameters={{
+          controls: { disable: true },
+          interactions: { disable: true },
+        }}
+      />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`
+      "<Story name="Default" parameters={{
+      	controls: { disable: true },
+      	interactions: { disable: true },
+      	docs: { source: { code: "'<Button primary />'" } }
+      }} tags={["svelte-csf-v4"]} />"
+    `);
+    });
+    it("transforms 'template' id prop to 'template' reference prop and text expression becomes expression tag with identifier to snippet", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" template="someTemplate" />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`"<Story name="Default" template={someTemplate} tags={["svelte-csf-v4"]} />"`);
+    });
+    it("transforms 'template' id prop to 'template' reference prop and text expression becomes expression tag with identifier to snippet (case with invalid identifier)", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" template="some template with non valid identifier" />
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`"<Story name="Default" template={template_r71ke5} tags={["svelte-csf-v4"]} />"`);
+    });
+    it("when directive 'let:args' is used then it wraps Story fragment with 'template' snippet block", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" let:args>
+        <Button {...args} />
+      </Story>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`
+      "<Story name="Default" tags={["svelte-csf-v4"]}>
+      	{#snippet template(args)}
+      		<Button {...args} />
+      	{/snippet}
+      </Story>"
+    `);
+    });
+    it("when directive 'let:context' is used then it wraps Story fragment with 'template' snippet block", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" let:context>
+        <p>{context.id}</p>
+      </Story>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`
+      "<Story name="Default" tags={["svelte-csf-v4"]}>
+      	{#snippet template(_args, context)}
+      		<p>{context.id}</p>
+      	{/snippet}
+      </Story>"
+    `);
+    });
+    it("when both directives 'let:args' and 'let:context' is used then it wraps Story fragment with 'template' snippet block", async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story name="Default" let:args let:context>
+        <h1>{args.title}</h1>
+        <p>{context.id}</p>
+      </Story>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`
+      "<Story name="Default" tags={["svelte-csf-v4"]}>
+      	{#snippet template(args, context)}
+      		<h1>{args.title}</h1>
+      		<p>{context.id}</p>
+      	{/snippet}
+      </Story>"
+    `);
+    });
+    it('leaves existing Story parameters untouched', async ({ expect }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story
+        name="Default"
+        parameters={{ 
+          sveltekit_experimental: {
+            stores: {
+              page: {
+                data: {
+                  test: 'passed',
+                },
+              },
+              navigating: {
+                route: {
+                  id: '/storybook',
+                },
+              },
+              updated: true,
+            },
+          },
+        }}
+      >
+        <h1>{"Test"}</h1>
+      </Story>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`
+      "<Story name="Default" parameters={{
+      	sveltekit_experimental: {
+      		stores: {
+      			page: { data: { test: 'passed' } },
+      			navigating: { route: { id: '/storybook' } },
+      			updated: true
+      		}
+      	}
+      }} tags={["svelte-csf-v4"]}>
+      	<h1>{"Test"}</h1>
+      </Story>"
+    `);
+    });
+    it('legacy `source` prop with template literal value is supported _(moved to parameters)_', async ({ expect, }) => {
+        const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story
+        name="Default"
+        source={\`
+          <Foo bar />
+        \`}
+      >
+        <h1>{"Test"}</h1>
+      </Story>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformLegacyStory({
+            component,
+            state: { componentIdentifierName: {} },
+        }))).toMatchInlineSnapshot(`
+      "<Story name="Default" parameters={{
+      	docs: { source: { code: "\\n    <Foo bar />\\n  " } }
+      }} tags={["svelte-csf-v4"]}>
+      	<h1>{"Test"}</h1>
+      </Story>"
+    `);
+    });
+});

package/dist/compiler/pre-transform/codemods/template-to-snippet.test.d.ts

@@ -0,0 +1 @@
+export {};