@storybook/addon-svelte-csf 5.1.0 → 5.1.2

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

@@ -0,0 +1,151 @@
+import { describe, it } from 'vitest';
+import { getArrayOfStringsValueFromAttribute, getStringValueFromAttribute } from './attributes.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(getStringValueFromAttribute.name, () => {
+    it("throws error when a `<Story />` 'name' attribute value is not a string", async ({ expect, }) => {
+        const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        <Story name />
+      `;
+        const ast = getSvelteAST({ code });
+        const svelteASTNodes = await extractSvelteASTNodes({ ast });
+        const { storyComponents } = svelteASTNodes;
+        const component = storyComponents[0].component;
+        const { name } = extractStoryAttributesNodes({
+            attributes: ['name'],
+            component,
+        });
+        expect(() => getStringValueFromAttribute({ component, node: name }))
+            .toThrowErrorMatchingInlineSnapshot(`
+        [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0001 (AttributeNotStringError): In the stories file: <path not specified>
+
+        A '<Story name="undefined" />' has a prop 'name' whose value must be a static literal string.
+
+        More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0001
+        ]
+      `);
+    });
+});
+describe(getArrayOfStringsValueFromAttribute.name, () => {
+    it("throws error when a `<Story />` 'tags' attribute value is not an array expression", async ({ expect, }) => {
+        const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        <Story name="Default" tags={0} />
+      `;
+        const ast = getSvelteAST({ code });
+        const svelteASTNodes = await extractSvelteASTNodes({ ast });
+        const { storyComponents } = svelteASTNodes;
+        const component = storyComponents[0].component;
+        const { tags } = extractStoryAttributesNodes({
+            attributes: ['tags'],
+            component,
+        });
+        expect(() => getArrayOfStringsValueFromAttribute({ component, node: tags })).toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0002 (AttributeNotArrayError): In the stories file: <path not specified>
+
+      A '<Story name="Default" />' has a prop'tags' whose value was expected to be a static array.
+      Instead the value type is '0'.
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0002
+      ]
+    `);
+    });
+    it("throws error when a `<Story />` 'tags' attribute value is not an array of strings only", async ({ expect, }) => {
+        const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        <Story name="Default" tags={[null, "autodocs"]} />
+      `;
+        const ast = getSvelteAST({ code });
+        const svelteASTNodes = await extractSvelteASTNodes({ ast });
+        const { storyComponents } = svelteASTNodes;
+        const component = storyComponents[0].component;
+        const { tags } = extractStoryAttributesNodes({
+            attributes: ['tags'],
+            component,
+        });
+        expect(() => getArrayOfStringsValueFromAttribute({ component, node: tags })).toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0003 (AttributeNotArrayOfStringsError): In the stories file: <path not specified>
+
+      A '<Story name="Default" />' has attribute 'tags' whose value was expected to be an array expression.
+      All elements in the array must be static literal strings only, but one of the elements is of type 'undefined'.
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_ANALYSE_STORY_0003
+      ]
+    `);
+    });
+    it("extracts 'tags' attribute when is a correct type - array of strings", async ({ expect }) => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story name="Default" tags={["autodocs", "!dev"]} />
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { tags } = extractStoryAttributesNodes({
+            component,
+            attributes: ['tags'],
+        });
+        const tagsValue = getArrayOfStringsValueFromAttribute({
+            node: tags,
+            component,
+        });
+        expect(tagsValue).toBeInstanceOf(Array);
+        expect(tagsValue).toEqual(['autodocs', '!dev']);
+    });
+    it("returns empty array when 'tags' attribute is not provided", async ({ expect }) => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story name="Default" />
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const { tags } = extractStoryAttributesNodes({
+            component,
+            attributes: ['tags'],
+        });
+        const tagsValue = getArrayOfStringsValueFromAttribute({
+            node: tags,
+            component,
+        });
+        expect(tagsValue).toEqual([]);
+    });
+});

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

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

package/dist/parser/analyse/story/content.test.js

@@ -0,0 +1,263 @@
+import { describe, it } from 'vitest';
+import { getStoryContentRawCode } from './content.js';
+import { getSvelteAST } from '../../ast.js';
+import { extractSvelteASTNodes } from '../../extract/svelte/nodes.js';
+import dedent from 'dedent';
+describe(getStoryContentRawCode.name, () => {
+    describe('When a `<Story />` is a self-closing tag...', () => {
+        it('works when `template` attribute was provided with a reference to snippet at the root of fragment', async ({ expect, }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        {#snippet template(args)}
+          <SomeComponent {...args} />
+        {/snippet}
+
+        <Story name="Default" {template} />
+      `;
+            const ast = getSvelteAST({ code });
+            const svelteASTNodes = await extractSvelteASTNodes({ ast });
+            const { storyComponents } = svelteASTNodes;
+            const component = storyComponents[0].component;
+            const rawSource = getStoryContentRawCode({
+                nodes: {
+                    component,
+                    svelte: svelteASTNodes,
+                },
+                originalCode: code,
+            });
+            expect(rawSource).toBe('<SomeComponent {...args} />');
+        });
+        it('works when `render` is set in `defineMeta`', async ({ expect }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+            render: template,
+          });
+        </script>
+
+        {#snippet template(args)}
+          <SomeComponent {...args} />
+        {/snippet}
+
+        <Story name="Default" />
+      `;
+            const ast = getSvelteAST({ code });
+            const svelteASTNodes = await extractSvelteASTNodes({ ast });
+            const { storyComponents } = svelteASTNodes;
+            const component = storyComponents[0].component;
+            const rawSource = getStoryContentRawCode({
+                nodes: {
+                    component,
+                    svelte: svelteASTNodes,
+                },
+                originalCode: code,
+            });
+            expect(rawSource).toBe('<SomeComponent {...args} />');
+        });
+        it('works implicit `template` attribute takes precedence over `render` in `defineMeta`', async ({ expect, }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+            render: templateForRender,
+          });
+        </script>
+
+        {#snippet templateForRender(args)}
+          <SomeComponent wins="render" {...args} />
+        {/snippet}
+
+        {#snippet templateForTemplateAttribute(args)}
+          <SomeComponent wins="templateAttribute" {...args} />
+        {/snippet}
+
+        <Story name="Default" template={templateForTemplateAttribute} />
+      `;
+            const ast = getSvelteAST({ code });
+            const svelteASTNodes = await extractSvelteASTNodes({ ast });
+            const { storyComponents } = svelteASTNodes;
+            const component = storyComponents[0].component;
+            const rawSource = getStoryContentRawCode({
+                nodes: {
+                    component,
+                    svelte: svelteASTNodes,
+                },
+                originalCode: code,
+            });
+            expect(rawSource).toBe(`<SomeComponent wins="templateAttribute" {...args} />`);
+        });
+        it('works when no `render` in `defineMeta`, no `template` attribute, just a story', async ({ expect, }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        <Story name="Default" />
+      `;
+            const ast = getSvelteAST({ code });
+            const svelteASTNodes = await extractSvelteASTNodes({ ast });
+            const { storyComponents } = svelteASTNodes;
+            const component = storyComponents[0].component;
+            const rawSource = getStoryContentRawCode({
+                nodes: {
+                    component,
+                    svelte: svelteASTNodes,
+                },
+                originalCode: code,
+            });
+            expect(rawSource).toBe(`<SampleComponent {...args} />`);
+        });
+    });
+    describe('When a `<Story />` is NOT a self-closing tag...', () => {
+        it('works when a static children content provided with asChild', async ({ expect }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        <Story name="Default" asChild>
+          <h1>Static content</h1>
+        </Story>
+      `;
+            const ast = getSvelteAST({ code });
+            const svelteASTNodes = await extractSvelteASTNodes({ ast });
+            const { storyComponents } = svelteASTNodes;
+            const component = storyComponents[0].component;
+            const rawSource = getStoryContentRawCode({
+                nodes: {
+                    component,
+                    svelte: svelteASTNodes,
+                },
+                originalCode: code,
+            });
+            expect(rawSource).toBe(`<h1>Static content</h1>`);
+        });
+        it('works when a static children content provided as a child to the component', async ({ expect, }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        <Story name="Default">
+          <h1>Static children content</h1>
+        </Story>
+      `;
+            const ast = getSvelteAST({ code });
+            const svelteASTNodes = await extractSvelteASTNodes({ ast });
+            const { storyComponents } = svelteASTNodes;
+            const component = storyComponents[0].component;
+            const rawSource = getStoryContentRawCode({
+                nodes: {
+                    component,
+                    svelte: svelteASTNodes,
+                },
+                originalCode: code,
+            });
+            expect(rawSource).toBe(dedent `<SampleComponent {...args}>
+          <h1>Static children content</h1>
+        </SampleComponent>`);
+        });
+        it("works when a `template` svelte's snippet block used inside", async ({ expect }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        <Story name="Default">
+          {#snippet template(args)}
+            <SomeComponent {...args} />
+          {/snippet}
+        </Story>
+      `;
+            const ast = getSvelteAST({ code });
+            const svelteASTNodes = await extractSvelteASTNodes({ ast });
+            const { storyComponents } = svelteASTNodes;
+            const component = storyComponents[0].component;
+            const rawSource = getStoryContentRawCode({
+                nodes: {
+                    component,
+                    svelte: svelteASTNodes,
+                },
+                originalCode: code,
+            });
+            expect(rawSource).toBe(`<SomeComponent {...args} />`);
+        });
+        it("inner `<Story>`'s template content takes precedence over `render` in `defineMeta`", async ({ expect, }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          import SampleComponent from "./SampleComponent.svelte";
+
+          const { Story } = defineMeta({
+            component: SampleComponent,
+          });
+        </script>
+
+        {#snippet templateForRender(args)}
+          <SomeComponent wins="render" {...args} />
+        {/snippet}
+
+        <Story name="Default">
+          {#snippet template(args)}
+            <SomeComponent wins="inner-template" {...args} />
+          {/snippet}
+        </Story>
+      `;
+            const ast = getSvelteAST({ code });
+            const svelteASTNodes = await extractSvelteASTNodes({ ast });
+            const { storyComponents } = svelteASTNodes;
+            const component = storyComponents[0].component;
+            const rawSource = getStoryContentRawCode({
+                nodes: {
+                    component,
+                    svelte: svelteASTNodes,
+                },
+                originalCode: code,
+            });
+            expect(rawSource).toBe(`<SomeComponent wins="inner-template" {...args} />`);
+        });
+    });
+});

package/dist/parser/extract/svelte/define-meta.test.d.ts

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

package/dist/parser/extract/svelte/define-meta.test.js

@@ -0,0 +1,32 @@
+import { describe, it } from 'vitest';
+import { extractDefineMetaPropertiesNodes } from './define-meta.js';
+import { getSvelteAST } from '../../ast.js';
+import { extractSvelteASTNodes } from './nodes.js';
+describe(extractDefineMetaPropertiesNodes.name, () => {
+    it('extracts correctly selected properties', async ({ expect }) => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+
+          const { Story } = defineMeta({
+            title: "My Story",
+            id: "custom-id",
+            tags: ["autodocs", "!dev"],
+          });
+        </script>
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const properties = extractDefineMetaPropertiesNodes({
+            nodes,
+            properties: ['title', 'id', 'tags', 'args', 'parameters'],
+        });
+        expect((properties.title?.value).value).toBe('My Story');
+        expect((properties.id?.value).value).toBe('custom-id');
+        expect((properties.tags?.value).elements[0].value).toBe('autodocs');
+        expect((properties.tags?.value).elements[1].value).toBe('!dev');
+        expect(properties.args).toBeUndefined();
+        expect(properties.parameters).toBeUndefined();
+    });
+});

package/dist/parser/extract/svelte/fragment-nodes.test.d.ts

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

package/dist/parser/extract/svelte/fragment-nodes.test.js

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest';
+import { extractFragmentNodes } from './fragment-nodes.js';
+import { extractModuleNodes } from './module-nodes.js';
+import { getSvelteAST } from '../../ast.js';
+describe(extractFragmentNodes.name, () => {
+    it("extracts '<Story />' AST nodes correctly", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story name="1" />
+        <Story name="2" />
+        <Story name="3" />
+        <Story name="4" />
+        <Story name="5" />
+      `,
+        });
+        const moduleNodes = await extractModuleNodes({ module: ast.module });
+        const fragmentNodes = await extractFragmentNodes({
+            fragment: ast.fragment,
+            moduleNodes,
+        });
+        expect(fragmentNodes.storyComponents).toHaveLength(5);
+        for (const story of fragmentNodes.storyComponents) {
+            expect(story.comment).toBeUndefined();
+        }
+        expect(fragmentNodes.snippetBlocks).toHaveLength(0);
+    });
+    it("extracts '<Story />' leading HTML comments correctly", async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <!-- Comment 1 -->
+        <Story name="1" />
+        <!-- Comment 2 -->
+        <Story name="2" />
+        <!-- Comment 3 -->
+        <Story name="3" />
+        <!-- Comment 4 -->
+        <Story name="4" />
+        <!-- Comment 5 -->
+        <Story name="5" />
+      `,
+        });
+        const moduleNodes = await extractModuleNodes({ module: ast.module });
+        const fragmentNodes = await extractFragmentNodes({
+            fragment: ast.fragment,
+            moduleNodes,
+        });
+        expect(fragmentNodes.storyComponents).toHaveLength(5);
+        for (const [index, story] of Object.entries(fragmentNodes.storyComponents)) {
+            expect(story.comment?.data).toBe(` Comment ${Number(index) + 1} `);
+        }
+    });
+    it('extracts first level snippet blocks (at the root of fragment) correctly', async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta({
+            render,
+          });
+        </script>
+
+        {#snippet render(args)}
+          <SampleComponent {...args} />
+        {/snippet}
+
+        {#snippet template1(args)}
+          <SampleComponent {...args} />
+        {/snippet}
+
+        {#snippet template2(args)}
+          <SampleComponent {...args} />
+        {/snippet}
+
+        <Story name="Example1" />
+
+        <Story name="Example2">
+          {#snippet template(args)}
+            <SampleComponent {...args} />
+          {/snippet}
+        </Story>
+      `,
+        });
+        const moduleNodes = await extractModuleNodes({ module: ast.module });
+        const fragmentNodes = await extractFragmentNodes({
+            fragment: ast.fragment,
+            moduleNodes,
+        });
+        expect(fragmentNodes.snippetBlocks).toHaveLength(3);
+        expect(fragmentNodes.snippetBlocks[0].expression.name).toBe('render');
+        expect(fragmentNodes.snippetBlocks[1].expression.name).toBe('template1');
+        expect(fragmentNodes.snippetBlocks[2].expression.name).toBe('template2');
+    });
+});

package/dist/parser/extract/svelte/module-nodes.test.d.ts

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