@storybook/addon-svelte-csf 5.1.0 → 5.1.2

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

@@ -0,0 +1,75 @@
+import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };
+import { print } from 'svelte-ast-print';
+import { describe, it } from 'vitest';
+import { transformTemplateToSnippet } from './template-to-snippet.js';
+import { parseAndExtractSvelteNode } from '../../../../tests/extractor.js';
+describe(transformTemplateToSnippet.name, () => {
+    it("covers a case without provided prop 'id'", async ({ expect }) => {
+        const code = `
+      <script context="module" lang="ts">
+        import { Template } from "${pkg.name}";
+      </script>
+
+      <Template let:args>
+        <Button {...args} variant="primary" />
+      </Template>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformTemplateToSnippet({ component }))).toMatchInlineSnapshot(`
+      "{#snippet sb_default_template(args)}
+      	<Button {...args} variant="primary" />
+      {/snippet}"
+    `);
+    });
+    it("covers a case with provided prop 'id'", async ({ expect }) => {
+        const code = `
+      <script context="module" lang="ts">
+        import { Template } from "${pkg.name}";
+      </script>
+
+      <Template id="coolTemplate" let:args>
+        <Button {...args} variant="primary" />
+      </Template>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformTemplateToSnippet({ component }))).toMatchInlineSnapshot(`
+			"{#snippet coolTemplate(args)}
+				<Button {...args} variant="primary" />
+			{/snippet}"
+		`);
+    });
+    it("covers a case with provided prop 'id' and prop `id` not being a valid identifier", async ({ expect, }) => {
+        const code = `
+      <script context="module" lang="ts">
+        import { Template } from "${pkg.name}";
+      </script>
+
+      <Template id="cool-template" let:args>
+        <Button {...args} variant="primary" />
+      </Template>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformTemplateToSnippet({ component }))).toMatchInlineSnapshot(`
+      "{#snippet template_haitqt(args)}
+      	<Button {...args} variant="primary" />
+      {/snippet}"
+    `);
+    });
+    it("works with 'let:context' directive", async ({ expect }) => {
+        const code = `
+      <script context="module" lang="ts">
+        import { Template } from "${pkg.name}";
+      </script>
+
+      <Template let:context>
+        <p>{context.args}</p>
+      </Template>
+    `;
+        const component = await parseAndExtractSvelteNode(code, 'Component');
+        expect(print(transformTemplateToSnippet({ component }))).toMatchInlineSnapshot(`
+      "{#snippet sb_default_template(_args, context)}
+      	<p>{context.args}</p>
+      {/snippet}"
+    `);
+    });
+});

package/dist/compiler/pre-transform/index.test.d.ts

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

package/dist/compiler/pre-transform/index.test.js

@@ -0,0 +1,256 @@
+import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };
+import dedent from 'dedent';
+import { print } from 'svelte-ast-print';
+import { describe, it } from 'vitest';
+import { codemodLegacyNodes } from './index.js';
+import { getSvelteAST } from '../../parser/ast.js';
+describe(codemodLegacyNodes.name, () => {
+    it("replaces 'export const meta' with 'defineMeta'", async ({ expect }) => {
+        const code = dedent(`
+      <script context="module">
+        import { Story } from "${pkg.name}";
+
+        /** This is a description for the **Button** component stories. */
+  		export const meta = {
+          title: "Atoms/Button",
+          component: Button,
+        };
+      </script>
+
+  	<!-- This is a description for **default** Button. -->
+      <Story name="Default" />
+    `);
+        const ast = getSvelteAST({ code });
+        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>
+
+      <!-- This is a description for **default** Button. -->
+      <Story name="Default" tags={["svelte-csf-v4"]} />"
+    `);
+    });
+    it("replaces 'Meta' with inserting 'defineMeta' to module tag", async ({ expect }) => {
+        const code = dedent(`
+      <script context="module">
+        import { Meta, Template } from "${pkg.name}";
+      </script>
+
+  	<!-- This is a description for the **Button** component stories. -->
+      <Meta title="Atoms/Button" component={Button} />
+    `);
+        const ast = getSvelteAST({ code });
+        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>"
+    `);
+    });
+    it("replaces 'Template' with snippet block", async ({ expect }) => {
+        const code = dedent(`
+      <script>
+        import { Meta, Template } from "${pkg.name}";
+      </script>
+
+  	<!-- This is a description for the **Button** component stories. -->
+      <Meta title="Atoms/Button" component={Button} />
+
+      <Template let:args>
+        <Button {...args} />
+      </Template>
+
+      <Story name="Default" />
+    `);
+        const ast = getSvelteAST({ code });
+        const transformed = await codemodLegacyNodes({ ast });
+        expect(print(transformed)).toMatchInlineSnapshot(`
+      "<script 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(args)}
+      	<Button {...args} />
+      {/snippet}
+      <Story name="Default" />"
+    `);
+    });
+    it('transforms legacy syntax correctly', async ({ expect }) => {
+        const code = dedent(`
+      <script context="module">
+        import { Meta, Story, Template } from "${pkg.name}";
+      </script>
+
+  	  <!-- This is a description for the **Button** component stories. -->
+      <Meta title="Atoms/Button" component={Button} />
+
+      <Template id="sample" let:args let:context>
+        <p>{context.id}</p>
+        <Button {...args} />
+      </Template>
+
+      <Story name="Default" autodocs source={"<Button {...args} />"} template="sample" let:args let:context>
+        <p>{context.id}</p>
+        <Button {...args} />
+      </Story>
+    `);
+        const ast = getSvelteAST({ code });
+        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 sample(args, context)}
+      	<p>{context.id}</p>
+      	<Button {...args} />
+       
+      {/snippet} <Story name="Default" template={sample} tags={["autodocs", "svelte-csf-v4"]} parameters={{
+      	docs: { source: { code: "<Button {...args} />" } }
+      }}>
+      	{#snippet template(args, context)}
+      		<p>{context.id}</p>
+      		<Button {...args} />
+       
+      	{/snippet}
+      </Story>"
+    `);
+    });
+    it('moves package import declaration from instance to module tag', async ({ expect }) => {
+        const code = dedent(`
+      <script>
+        import { Meta, Story, Template } from "${pkg.name}";
+      </script>
+    `);
+        const ast = getSvelteAST({ code });
+        const transformed = await codemodLegacyNodes({ ast });
+        expect(print(transformed)).toMatchInlineSnapshot(`
+      "<script module>
+      	import { defineMeta } from "@storybook/addon-svelte-csf";
+      </script>"
+    `);
+    });
+    it('moves transformed export const meta from instance to module tag', async ({ expect }) => {
+        const code = dedent(`
+      <script>
+        import { Story, Template } from "${pkg.name}";
+
+        export const meta = {
+          args: {
+            primary: true,
+          },
+          tags: ["autodocs"],
+        };
+      </script>
+    `);
+        const ast = getSvelteAST({ code });
+        const transformed = await codemodLegacyNodes({ ast });
+        expect(print(transformed)).toMatchInlineSnapshot(`
+      "<script module>
+      	import { defineMeta } from "@storybook/addon-svelte-csf";
+
+      	const { Story } = defineMeta({
+      		args: { primary: true },
+      		tags: ["autodocs"]
+      	});
+      </script>"
+    `);
+    });
+    it('moves transformed export const meta and stories component import declaration from instance to module tag', async ({ expect, }) => {
+        const code = dedent(`
+      <script>
+        import { Story, Template } from "${pkg.name}";
+        import Button from "./Button.svelte";
+
+        export const meta = {
+          component: Button,
+          args: {
+            primary: true,
+          },
+          tags: ["autodocs"],
+        };
+      </script>
+    `);
+        const ast = getSvelteAST({ code });
+        const transformed = await codemodLegacyNodes({ ast });
+        expect(print(transformed)).toMatchInlineSnapshot(`
+      "<script module>
+      	import { defineMeta } from "@storybook/addon-svelte-csf";
+      	import Button from "./Button.svelte";
+
+      	const { Story } = defineMeta({
+      		component: Button,
+      		args: { primary: true },
+      		tags: ["autodocs"]
+      	});
+      </script>"
+    `);
+    });
+    it('throws error on more than one unidentified <Template> components', async ({ expect }) => {
+        const code = `
+      <script 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 });
+        await expect(codemodLegacyNodes({ ast })).rejects.toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_LEGACY_API_0003 (DuplicatedUnidentifiedTemplateError): Stories file: undefined
+      has two '<Template />' components without provided prop 'id'. This leads to unwanted runtime behavior.
+
+      Please provide an 'id' to one of them.
+      And for the '<Story />' component(s) which are supposed to use it, add the 'template' prop with the same 'id' value.
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${pkg.version}/ERRORS.md#SB_SVELTE_CSF_LEGACY_API_0003
+      ]
+    `);
+    });
+    it('moves import declaration of stories target component from instance tag to module tag', async ({ expect, }) => {
+        const code = `
+      <script context="module" lang="ts">
+        export const meta: Meta<Button> = {
+          component: Button,
+        };
+      </script>
+
+      <script>
+        import { Story } from "${pkg.name}";
+        import Button from "./Button.svelte";
+      </script>
+    `;
+        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";
+      	import Button from "./Button.svelte";
+
+      	const { Story } = defineMeta({ component: Button });
+      </script>"
+    `);
+    });
+});

package/dist/parser/analyse/story/attributes/identifiers.test.d.ts

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

package/dist/parser/analyse/story/attributes/identifiers.test.js

@@ -0,0 +1,294 @@
+import { describe, expect, it } from 'vitest';
+import { getStoryIdentifiers, getStoriesIdentifiers } from './identifiers.js';
+import { getSvelteAST } from '../../../ast.js';
+import { extractSvelteASTNodes } from '../../../extract/svelte/nodes.js';
+import { extractStoryAttributesNodes } from '../../../extract/svelte/story/attributes.js';
+import { StorybookSvelteCSFError } from '../../../../utils/error.js';
+describe(getStoryIdentifiers.name, () => {
+    it("extracts 'exportName' attribute when is a Text string", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story exportName="Text" />
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { exportName, name } = extractStoryAttributesNodes({
+            component,
+            attributes: ['exportName', 'name'],
+        });
+        expect(getStoryIdentifiers({
+            exportNameNode: exportName,
+            nameNode: name,
+            component,
+        })).toEqual({
+            exportName: 'Text',
+            name: undefined,
+        });
+    });
+    it("extracts 'exportName' attribute when is an expression with literal", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story exportName={"ExpressionWithLiteral"} />
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { exportName, name } = extractStoryAttributesNodes({
+            component,
+            attributes: ['exportName', 'name'],
+        });
+        expect(getStoryIdentifiers({
+            exportNameNode: exportName,
+            nameNode: name,
+            component,
+        })).toEqual({
+            exportName: 'ExpressionWithLiteral',
+            name: undefined,
+        });
+    });
+    it("throws when '<Story />' doesn't provide an 'exportName' or 'name' attribute prop", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story />
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { exportName, name } = extractStoryAttributesNodes({
+            component,
+            attributes: ['exportName', 'name'],
+        });
+        expect(() => getStoryIdentifiers({
+            exportNameNode: exportName,
+            nameNode: name,
+            filename: 'invalid.stories.svelte',
+            component,
+        })).toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0004 (NoStoryIdentifierError): Missing 'name' or 'exportName' attribute (prop) in a '<Story />' definition in the stories file:  'file://${process.cwd()}/invalid.stories.svelte'.
+      All stories must either have a 'name' or an 'exportName' prop, or both.
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0004
+      ]
+    `);
+    });
+    it("it ignores the 'exportName' attribute of '<Story>'s children component", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story exportName="Default">
+          <Icon exportName="close" />
+        </Story>
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { exportName } = extractStoryAttributesNodes({
+            component,
+            attributes: ['exportName', 'args'],
+        });
+        expect(getStoryIdentifiers({
+            exportNameNode: exportName,
+            nameNode: undefined,
+            component,
+        })).toEqual({
+            exportName: 'Default',
+            name: undefined,
+        });
+    });
+    it("extracts both 'exportName' and 'name' attributes", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story exportName="SomeExportName" name="some name" />
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { exportName, name } = extractStoryAttributesNodes({
+            component,
+            attributes: ['exportName', 'name'],
+        });
+        expect(getStoryIdentifiers({
+            exportNameNode: exportName,
+            nameNode: name,
+            component,
+        })).toEqual({
+            exportName: 'SomeExportName',
+            name: 'some name',
+        });
+    });
+    it("derives 'exportName' from 'name' attribute when 'exportName' attribute is missing", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story name="some name" />
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { exportName, name } = extractStoryAttributesNodes({
+            component,
+            attributes: ['exportName', 'name'],
+        });
+        expect(getStoryIdentifiers({
+            exportNameNode: exportName,
+            nameNode: name,
+            component,
+        })).toEqual({
+            exportName: 'SomeName',
+            name: 'some name',
+        });
+    });
+    it("throws when 'exportName' is not a valid JavaScript variable name", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story exportName="default" />
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { exportName } = extractStoryAttributesNodes({
+            component,
+            attributes: ['exportName'],
+        });
+        expect(() => getStoryIdentifiers({
+            exportNameNode: exportName,
+            nameNode: undefined,
+            filename: 'invalid.stories.svelte',
+            component,
+        })).toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0005 (InvalidStoryExportNameError): Invalid attribute 'exportName' value 'default' found in '<Story />' component inside stories file: file://${process.cwd()}/invalid.stories.svelte
+
+        'exportName' value must be a valid JavaScript variable name.
+        It must start with a letter, $ or _, followed by letters, numbers, $ or _.
+        Reserved words like 'default' are also not allowed (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_words)
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0005
+      ]
+    `);
+    });
+});
+describe(getStoriesIdentifiers.name, () => {
+    it('extracts multiple <Story /> components identifiers', async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+
+        <Story name="Only name" />
+        <Story exportName="OnlyExportName" />
+        <Story exportName="BothExportNameAndName" name="Both export name and name" />
+        <Story exportName="DifferentExportName" name="ExportName and name, but different" />`,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        expect(getStoriesIdentifiers({ nodes })).toMatchInlineSnapshot(`
+      [
+        {
+          "exportName": "OnlyName",
+          "name": "Only name",
+        },
+        {
+          "exportName": "OnlyExportName",
+          "name": undefined,
+        },
+        {
+          "exportName": "BothExportNameAndName",
+          "name": "Both export name and name",
+        },
+        {
+          "exportName": "DifferentExportName",
+          "name": "ExportName and name, but different",
+        },
+      ]
+    `);
+    });
+    it("throws on identical 'exportName' attributes", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+
+        <Story exportName="SomeExportName" />
+        <Story exportName="OtherExportName" />
+        <Story exportName="SomeExportName" />`,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        expect(() => getStoriesIdentifiers({
+            nodes,
+            filename: 'duplicate-identifiers.stories.svelte',
+        })).toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006 (DuplicateStoryIdentifiersError): Duplicate exportNames found between two '<Story />' definitions in stories file: file://${process.cwd()}/duplicate-identifiers.stories.svelte
+
+      First instance: <Story name={undefined} exportName="SomeExportName" ... />
+      Second instance: <Story name={undefined} exportName="SomeExportName" ... />
+
+      This can happen when 'exportName' is implicitly derived by 'name'.
+      Complex names will be simplified to a PascalCased, valid JavaScript variable name,
+      eg. 'Some story name!!' will be converted to 'SomeStoryName'.
+      You can fix this collision by providing a unique 'exportName' prop with <Story exportName="SomeUniqueExportName" ... />.
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006
+      ]
+    `);
+    });
+    it("throws on identical 'exportName' attributes when deriving from 'name' attributes", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+
+        <Story exportName="SomeStoryName" />
+        <Story name="some story name!!!" />`,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        expect(() => getStoriesIdentifiers({
+            nodes,
+            filename: 'duplicate-identifiers.stories.svelte',
+        })).toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006 (DuplicateStoryIdentifiersError): Duplicate exportNames found between two '<Story />' definitions in stories file: file://${process.cwd()}/duplicate-identifiers.stories.svelte
+
+      First instance: <Story name={undefined} exportName="SomeStoryName" ... />
+      Second instance: <Story name="some story name!!!" exportName="SomeStoryName" ... />
+
+      This can happen when 'exportName' is implicitly derived by 'name'.
+      Complex names will be simplified to a PascalCased, valid JavaScript variable name,
+      eg. 'Some story name!!' will be converted to 'SomeStoryName'.
+      You can fix this collision by providing a unique 'exportName' prop with <Story exportName="SomeUniqueExportName" ... />.
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0006
+      ]
+    `);
+    });
+});

package/dist/parser/analyse/story/attributes.test.d.ts

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