@storybook/addon-svelte-csf 5.1.0 → 5.1.2

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

@@ -0,0 +1,143 @@
+import { describe, it } from 'vitest';
+import { extractModuleNodes } from './module-nodes.js';
+import { getSvelteAST } from '../../ast.js';
+import { StorybookSvelteCSFError } from '../../../utils/error.js';
+describe(extractModuleNodes.name, () => {
+    it('fails when module tag not found', async ({ expect }) => {
+        const { module } = getSvelteAST({
+            code: `<script></script>`,
+        });
+        await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0001 (MissingModuleTagError): The file '<path not specified>'
+      does not have a module context (<script module> ... </script>).
+
+      defineMeta(...) should be called inside a module script tag, like so:
+
+      <script module>
+      import { defineMeta } from "@storybook/addon-svelte-csf";
+
+      const { Story } = defineMeta({});
+      </script>
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0001
+      ]
+    `);
+    });
+    it("fails when 'defineMeta' not imported", async ({ expect }) => {
+        const { module } = getSvelteAST({
+            code: `<script module></script>`,
+        });
+        await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0003 (MissingDefineMetaImportError): The file '<path not specified>'
+      does not import defineMeta from "@storybook/addon-svelte-csf" inside the module context.
+
+      Make sure to import defineMeta from the package and use it inside the module context like so:
+
+      <script module>
+      import { defineMeta } from "@storybook/addon-svelte-csf";
+
+      const { Story } = defineMeta({});
+      </script>
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0003
+      ]
+    `);
+    });
+    it("fails when 'defineMeta' not used", async ({ expect }) => {
+        const { module } = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+        </script>
+      `,
+        });
+        await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004 (MissingDefineMetaVariableDeclarationError): The file '<path not specified>'
+      does not store the result of calling defineMeta(). While defineMeta() might have been called,
+      it's return value needs to be stored and destructured for the parsing to succeed, eg.:
+
+      <script module>
+      import { defineMeta } from "@storybook/addon-svelte-csf";
+
+      const { Story } = defineMeta({});
+      </script>
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004
+      ]
+    `);
+    });
+    it("fails when 'Story' is not destructured", async ({ expect }) => {
+        const { module } = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          defineMeta();
+        </script>`,
+        });
+        await expect(extractModuleNodes({ module })).rejects.toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004 (MissingDefineMetaVariableDeclarationError): The file '<path not specified>'
+      does not store the result of calling defineMeta(). While defineMeta() might have been called,
+      it's return value needs to be stored and destructured for the parsing to succeed, eg.:
+
+      <script module>
+      import { defineMeta } from "@storybook/addon-svelte-csf";
+
+      const { Story } = defineMeta({});
+      </script>
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_SVELTE_0004
+      ]
+    `);
+    });
+    it('works when it has valid required entry snippet', async ({ expect }) => {
+        const { module } = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>`,
+        });
+        await expect(extractModuleNodes({ module })).resolves.not.toThrow();
+    });
+    it('works when meta was destructured too', async ({ expect }) => {
+        const { module } = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story, meta } = defineMeta();
+        </script>
+      `,
+        });
+        await expect(extractModuleNodes({ module })).resolves.not.toThrow();
+    });
+    it('extracts module nodes', async ({ expect }) => {
+        const { module } = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+      `,
+        });
+        const nodes = await extractModuleNodes({ module });
+        expect(nodes.defineMetaImport).toBeDefined();
+        expect(nodes.defineMetaImport.imported.name).toBe('defineMeta');
+        expect(nodes.defineMetaVariableDeclaration).toBeDefined();
+        expect(nodes.storyIdentifier).toBeDefined();
+        expect(nodes.storyIdentifier.name).toBe('Story');
+    });
+    it('extracts module nodes with renamed identifiers', async ({ expect }) => {
+        const { module } = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta as dm } from "@storybook/addon-svelte-csf"
+          const { Story: S, meta: m } = dm();
+        </script>
+      `,
+        });
+        const nodes = await extractModuleNodes({ module });
+        expect(nodes.defineMetaImport.local.name).toBe('dm');
+        expect(nodes.defineMetaVariableDeclaration).toBeDefined();
+        expect(nodes.storyIdentifier.name).toBe('S');
+    });
+});

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

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

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

@@ -0,0 +1,29 @@
+import { describe, it } from 'vitest';
+import { extractSvelteASTNodes } from './nodes.js';
+import { getSvelteAST } from '../../ast.js';
+describe(extractSvelteASTNodes.name, () => {
+    it('works with a simple example', async ({ expect }) => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+
+          import Button from "./Button.svelte";
+
+          const { Story, meta } = defineMeta({
+            component: Button,
+          });
+        </script>
+
+        <Story name="Default" />
+
+        <Story name="Playground">
+          {#snippet template(args)}
+            <Button {...args} />
+          {/snippet}
+        </Story>
+      `,
+        });
+        await expect(extractSvelteASTNodes({ ast })).resolves.not.toThrow();
+    });
+});

package/dist/parser/extract/svelte/story/attributes.test.d.ts

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

package/dist/parser/extract/svelte/story/attributes.test.js

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+import { extractStoryAttributesNodes } from './attributes.js';
+import { getSvelteAST } from '../../../ast.js';
+import { extractSvelteASTNodes } from '../nodes.js';
+describe(extractStoryAttributesNodes.name, () => {
+    it("extracts '<Story />' attributes correctly", async () => {
+        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 attributes = extractStoryAttributesNodes({
+            component,
+            attributes: ['name', 'args'],
+        });
+        expect(attributes.name).not.toBeUndefined();
+        expect(attributes.name?.name).toBe('name');
+        expect(attributes.name?.value[0].data).toBe('Default');
+        expect(attributes.args).toBeUndefined();
+    });
+    it('it ignores the attributes of <Story> children components', async () => {
+        const ast = getSvelteAST({
+            code: `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf"
+          const { Story } = defineMeta();
+        </script>
+        <Story name="Default">
+          <Icon name="close" />
+        </Story>
+      `,
+        });
+        const nodes = await extractSvelteASTNodes({ ast });
+        const { component } = nodes.storyComponents[0];
+        const attributes = extractStoryAttributesNodes({
+            component,
+            attributes: ['name', 'args'],
+        });
+        expect(attributes.name).not.toBeUndefined();
+        expect(attributes.name?.name).toBe('name');
+        expect(attributes.name?.value[0].data).toBe('Default');
+        expect(attributes.args).toBeUndefined();
+    });
+});

package/dist/parser/extract/svelte/story/template.test.d.ts

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

package/dist/parser/extract/svelte/story/template.test.js

@@ -0,0 +1,51 @@
+import { describe, it } from 'vitest';
+import { extractStoryTemplateSnippetBlock } from './template.js';
+import { getSvelteAST } from '../../../ast.js';
+import { extractSvelteASTNodes } from '../nodes.js';
+describe(extractStoryTemplateSnippetBlock.name, () => {
+    it('returns correctly AST node, when a `<Story>` compponent has a snippet block `template` 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="With template">
+          {#snippet template(args)}
+            <SomeComponent {...args} />
+          {/snippet}
+        </Story>
+      `;
+        const ast = getSvelteAST({ code });
+        const svelteASTNodes = await extractSvelteASTNodes({ ast });
+        const { storyComponents } = svelteASTNodes;
+        const component = storyComponents[0].component;
+        expect(extractStoryTemplateSnippetBlock(component)).toBeDefined();
+        expect(extractStoryTemplateSnippetBlock(component)?.expression.name).toBe('template');
+    });
+    it('returns undefined, when a `<Story>` compponent is a self-closing tag', 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="Self closing" />
+      `;
+        const ast = getSvelteAST({ code });
+        const svelteASTNodes = await extractSvelteASTNodes({ ast });
+        const { storyComponents } = svelteASTNodes;
+        const component = storyComponents[0].component;
+        expect(extractStoryTemplateSnippetBlock(component)).not.toBeDefined();
+    });
+});

package/dist/runtime/emit-code.test.d.ts

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

package/dist/runtime/emit-code.test.js

@@ -0,0 +1,149 @@
+import { describe, expect, it, vi } from 'vitest';
+import dedent from 'dedent';
+import { generateCodeToEmit } from './emit-code.js';
+describe('Emit Code', () => {
+    it('should replace short spread args with single-line props', () => {
+        expect(generateCodeToEmit({
+            code: '<MyComponent {...args} />',
+            args: { someBool: true, someString: 'this is a string' },
+        })).toMatchInlineSnapshot(`"<MyComponent someBool someString="this is a string" />"`);
+    });
+    it('should replace long spread args with multi-line props', () => {
+        expect(generateCodeToEmit({
+            code: '<MyComponent {...args} />',
+            args: {
+                someBool: true,
+                someString: 'this is a string',
+                someNumber: 42,
+                someObject: { nested: 'yes', multiple: 'also yes' },
+            },
+        })).toMatchInlineSnapshot(`
+      "<MyComponent 
+        someBool
+        someString="this is a string"
+        someNumber={42}
+        someObject={{ "nested": "yes", "multiple": "also yes" }}
+       />"
+    `);
+    });
+    it('should replace all types of values', () => {
+        expect(generateCodeToEmit({
+            code: '<MyComponent {...args} />',
+            args: {
+                someTrue: true,
+                someFalse: false,
+                someNull: null,
+                someUndefined: undefined,
+                someString: 'this is a string',
+                someNumber: 42,
+                someObject: { nested: 'yes', deep: { nestedDeep: true } },
+                someArray: [11, 'some string', { someObj: { nested: 'yes' } }],
+            },
+        })).toMatchInlineSnapshot(`
+      "<MyComponent 
+        someTrue
+        someFalse={false}
+        someString="this is a string"
+        someNumber={42}
+        someObject={{ "nested": "yes", "deep": {  "nestedDeep": true } }}
+        someArray={[ 11, "some string", {  "someObj": {   "nested": "yes"  } } ]}
+       />"
+    `);
+    });
+    it('should replace args in nested components', () => {
+        expect(generateCodeToEmit({
+            code: dedent `
+        <Top topProp={args.single}>
+          <Child {...args}>
+            <GrandChild nestedProp={args.other} />
+          </Child>
+        </Top>`,
+            args: {
+                single: 'some string',
+                aNumber: 42,
+                other: { someBool: true, nested: 'yes' },
+            },
+        })).toMatchInlineSnapshot(`
+      "<Top topProp={"some string"}>
+        <Child 
+        single="some string"
+        aNumber={42}
+        other={{ "someBool": true, "nested": "yes" }}
+      >
+          <GrandChild nestedProp={{ "someBool": true, "nested": "yes" }} />
+        </Child>
+      </Top>"
+    `);
+    });
+    it('should replace individually referenced args', () => {
+        expect(generateCodeToEmit({
+            code: dedent `<MyComponent
+        firstProp={args.someString}
+        num={args.someNumber}
+        nestedBool={args.someObject.someBool}
+        nestedOptional={args.someObject?.nested}
+        optionalNotExist={args.doesNotExist?.someKey}
+        ternaryProp={args.someObject.someBool ? args.yes : args.no}
+      >
+        {args}
+        {args.text}
+        {args?.optional?.text}
+        {args.someObject["someStringKey"]}
+        {args.someObject['someStringKey']}
+        {args.someObject['someStringKey'].nested}
+        {args.someArray[1]}
+        {args.someUnnamedFn}
+        {args.someNamedFn}
+        {args.someUnnamedMockFn}
+        {args.someNamedMockFn}
+        {someFunction(args.yes)}
+        {someFunction(!args.someObject.someBool ? "literal yes" : args.no)}
+        args.shouldNotBeReplacedButIs
+      </MyComponent>`,
+            args: {
+                someIgnoredArg: 'should not show up anywhere',
+                someString: 'this is a string',
+                someNumber: 42,
+                someObject: {
+                    someBool: true,
+                    nested: 'yes',
+                    deep: { shouldAlsoBeIgnored: true },
+                    someStringKey: { nested: 'deep' },
+                },
+                someArray: ['first', 'second'],
+                someUnnamedFn: () => { },
+                someNamedFn: function namedFunc() { },
+                someUnnamedMockFn: vi.fn(),
+                someNamedMockFn: vi.fn().mockName('namedMockFn'),
+                yes: 'yup',
+                no: 'nope',
+                text: 'some text',
+                optional: { text: 'optional text' },
+            },
+        })).toMatchInlineSnapshot(`
+      "<MyComponent
+        firstProp={"this is a string"}
+        num={42}
+        nestedBool={true}
+        nestedOptional={"yes"}
+        optionalNotExist={undefined}
+        ternaryProp={true ? "yup" : "nope"}
+      >
+        {args}
+        {"some text"}
+        {"optional text"}
+        {{ "nested": "deep" }}
+        {{ "nested": "deep" }}
+        {"deep"}
+        {"second"}
+        {someUnnamedFn}
+        {namedFunc}
+        {vi.fn()}
+        {namedMockFn}
+        {someFunction("yup")}
+        {someFunction(!true ? "literal yes" : "nope")}
+        undefined
+      </MyComponent>"
+    `);
+    });
+});

package/dist/utils/identifier-utils.test.d.ts

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

package/dist/utils/identifier-utils.test.js

@@ -0,0 +1,22 @@
+import { it, expect } from 'vitest';
+import { storyIdToExportName, exportNameToStoryId, storyNameToId, storyNameToExportName, } from './identifier-utils.js';
+it('storyIdToExportName', () => {
+    expect(storyIdToExportName('single')).toBe('Single');
+    expect(storyIdToExportName('multiple-parts')).toBe('MultipleParts');
+});
+it('exportNameToStoryId', () => {
+    expect(exportNameToStoryId('Single')).toBe('single');
+    expect(exportNameToStoryId('MultipleParts')).toBe('multiple-parts');
+});
+it('storyNameToId', () => {
+    expect(storyNameToId('simple')).toBe('simple');
+    expect(storyNameToId('PascalCase')).toBe('pascal-case');
+    expect(storyNameToId('Start Case')).toBe('start-case');
+    expect(storyNameToId('With 2 illegal !! characters, a PascalCase and an ?')).toBe('with-2-illegal-characters-a-pascal-case-and-an');
+});
+it('storyNameToExportName', () => {
+    expect(storyNameToExportName('simple')).toBe('Simple');
+    expect(storyNameToExportName('PascalCase')).toBe('PascalCase');
+    expect(storyNameToExportName('Start Case')).toBe('StartCase');
+    expect(storyNameToExportName('With 2 illegal !! characters, a PascalCase and an ?')).toBe('With2IllegalCharactersAPascalCaseAndAn');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-svelte-csf",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "Allows to write stories in Svelte syntax",
   "keywords": [
     "storybook-addons",
@@ -35,22 +35,6 @@
     "preset.js",
     "README.md"
   ],
-  "scripts": {
-    "build": "svelte-package --types",
-    "build-storybook": "storybook build",
-    "check": "svelte-check",
-    "chromatic": "chromatic --exit-zero-on-changes",
-    "clean": "rimraf ./dist ./node_modules/.cache ./storybook-static ./svelte-kit ./.vite-inspect",
-    "coverage": "vitest run --coverage",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "lint": "eslint . --cache --cache-location=\"./node_modules/.cache\"",
-    "prepublish": "pnpm run clean && pnpm run build",
-    "release": "pnpm run build && auto shipit",
-    "start": "pnpm run build && concurrently \"pnpm run build --watch\" \"pnpm run storybook --quiet\"",
-    "storybook": "storybook dev --port 6006 --no-open",
-    "test": "vitest"
-  },
   "dependencies": {
     "@storybook/csf": "^0.1.13",
     "dedent": "^1.5.3",
@@ -61,7 +45,8 @@
     "zimmerframe": "^1.1.2"
   },
   "devDependencies": {
-    "@auto-it/released": "^11.3.6",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.6",
     "@chromatic-com/storybook": "^5.0.2",
     "@eslint/compat": "^1.2.8",
     "@eslint/js": "^9.25.0",
@@ -77,13 +62,13 @@
     "@vitest/browser-playwright": "^4.1.0",
     "@vitest/coverage-v8": "^4.1.0",
     "@vitest/ui": "^4.1.0",
-    "auto": "^11.3.6",
     "chromatic": "^15.1.0",
     "concurrently": "^9.2.1",
     "eslint": "^9.25.0",
     "eslint-plugin-storybook": "^10.3.0",
     "eslint-plugin-svelte": "^3.15.0",
     "happy-dom": "^20.6.1",
+    "pkg-pr-new": "^0.0.57",
     "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
@@ -108,15 +93,9 @@
     "svelte": "^5.0.0",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
-  "packageManager": "pnpm@10.18.0+sha512.e804f889f1cecc40d572db084eec3e4881739f8dec69c0ff10d2d1beff9a4e309383ba27b5b750059d7f4c149535b6cd0d2cb1ed3aeb739239a4284a68f40cfa",
   "publishConfig": {
-    "access": "public"
-  },
-  "auto": {
-    "plugins": [
-      "npm",
-      "released"
-    ]
+    "access": "public",
+    "provenance": true
   },
   "storybook": {
     "displayName": "Svelte CSF",
@@ -124,5 +103,22 @@
       "svelte"
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
+  },
+  "scripts": {
+    "build": "svelte-package --types",
+    "build-storybook": "storybook build",
+    "check": "svelte-check",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "clean": "rimraf ./dist ./node_modules/.cache ./storybook-static ./svelte-kit ./.vite-inspect",
+    "coverage": "vitest run --coverage",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint . --cache --cache-location=\"./node_modules/.cache\"",
+    "prepublish": "pnpm run clean && pnpm run build",
+    "release": "pnpm changeset publish",
+    "start": "pnpm run build && concurrently \"pnpm run build --watch\" \"pnpm run storybook --quiet\"",
+    "storybook": "storybook dev --port 6006 --no-open",
+    "test": "vitest",
+    "changeset": "changeset"
   }
-}
+}