@storybook/addon-svelte-csf 5.1.1 → 5.1.2

package/dist/compiler/post-transform/appendix/create-export-order.test.d.ts

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

package/dist/compiler/post-transform/appendix/create-export-order.test.js

@@ -0,0 +1,21 @@
+import { print } from 'esrap';
+import { describe, it } from 'vitest';
+import { createExportOrderVariableDeclaration } from './create-export-order.js';
+describe(createExportOrderVariableDeclaration.name, () => {
+    it('correctly creates a variable with named exports order', ({ expect }) => {
+        const stringified = print(createExportOrderVariableDeclaration({
+            storiesIdentifiers: [
+                { exportName: 'Default', name: 'Default' },
+                { exportName: 'SomeComponent', name: 'Some Component' },
+                { exportName: 'ThisNameIsWeird', name: 'This-Name-Is-Weird' },
+            ],
+        })).code;
+        expect(stringified).toMatchInlineSnapshot(`
+			"export const __namedExportsOrder = [
+				"Default",
+				"SomeComponent",
+				"ThisNameIsWeird"
+			];"
+		`);
+    });
+});

package/dist/compiler/post-transform/appendix/create-import.test.d.ts

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

package/dist/compiler/post-transform/appendix/create-import.test.js

@@ -0,0 +1,9 @@
+import { print } from 'esrap';
+import { describe, it } from 'vitest';
+import { createRuntimeStoriesImport } from './create-import.js';
+describe(createRuntimeStoriesImport.name, () => {
+    it('creates import correctly', ({ expect }) => {
+        const stringified = print(createRuntimeStoriesImport()).code;
+        expect(stringified).toMatchInlineSnapshot(`"import { createRuntimeStories } from "@storybook/addon-svelte-csf/internal/create-runtime-stories";"`);
+    });
+});

package/dist/compiler/post-transform/appendix/create-named-export-stories.test.d.ts

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

package/dist/compiler/post-transform/appendix/create-named-export-stories.test.js

@@ -0,0 +1,35 @@
+import { print } from 'esrap';
+import { describe, it } from 'vitest';
+import { createNamedExportStories } from './create-named-export-stories.js';
+describe(createNamedExportStories, () => {
+    it('works', ({ expect }) => {
+        const namedExportDeclaration = createNamedExportStories({
+            storiesIdentifiers: [
+                {
+                    exportName: 'Default',
+                    name: undefined,
+                },
+                {
+                    exportName: 'Primary',
+                    name: 'Primary',
+                },
+                {
+                    exportName: 'Secondary',
+                    name: 'Secondary',
+                },
+                {
+                    exportName: 'Disabled',
+                    name: 'Disabled',
+                },
+            ],
+        });
+        expect(print(namedExportDeclaration).code).toMatchInlineSnapshot(`
+      "export {
+      	$__Default as Default,
+      	$__Primary as Primary,
+      	$__Secondary as Secondary,
+      	$__Disabled as Disabled
+      };"
+    `);
+    });
+});

package/dist/compiler/post-transform/appendix/create-runtime-story-variable-declaration.test.d.ts

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

package/dist/compiler/post-transform/appendix/create-runtime-story-variable-declaration.test.js

@@ -0,0 +1,100 @@
+import { print } from 'esrap';
+import { describe, it } from 'vitest';
+import { createASTArrayExpression, createASTIdentifier } from '../../../parser/ast.js';
+import { SVELTE_CSF_V4_TAG } from '../../../constants.js';
+import { createRuntimeStoryVariableDeclaration } from './create-runtime-story-variable-declaration.js';
+import { createVariableFromRuntimeStoriesCall } from './create-variable-from-runtime-stories-call.js';
+describe(createRuntimeStoryVariableDeclaration, () => {
+    it('correctly creates a runtime story variable', ({ expect }) => {
+        const stringified = print(createRuntimeStoryVariableDeclaration({
+            exportName: 'Default',
+            nodes: {
+                variable: createVariableFromRuntimeStoriesCall({
+                    storiesFunctionDeclaration: {
+                        type: 'FunctionDeclaration',
+                        id: createASTIdentifier('Example_stories'),
+                        body: {
+                            type: 'BlockStatement',
+                            body: [],
+                        },
+                        params: [],
+                    },
+                }),
+            },
+        })).code;
+        expect(stringified).toMatchInlineSnapshot(`
+      "const $__Default = {
+      	...$__stories["Default"],
+      	tags: ["svelte-csf-v5"]
+      };"
+    `);
+    });
+    it('allows passing Story-level tags', ({ expect }) => {
+        const stringified = print(createRuntimeStoryVariableDeclaration({
+            exportName: 'Default',
+            nodes: {
+                variable: createVariableFromRuntimeStoriesCall({
+                    storiesFunctionDeclaration: {
+                        type: 'FunctionDeclaration',
+                        id: createASTIdentifier('Example_stories'),
+                        body: {
+                            type: 'BlockStatement',
+                            body: [],
+                        },
+                        params: [],
+                    },
+                }),
+                tags: createASTArrayExpression([
+                    {
+                        type: 'Literal',
+                        value: 'autodocs',
+                    },
+                    {
+                        type: 'Literal',
+                        value: '!test',
+                    },
+                ]),
+            },
+        })).code;
+        expect(stringified).toMatchInlineSnapshot(`
+      "const $__Default = {
+      	...$__stories["Default"],
+      	tags: ["autodocs", "!test", "svelte-csf-v5"]
+      };"
+    `);
+    });
+    it('keeps Svelte CSF v4 tag if present, and does not add Svelte CSF v5 tag', ({ expect }) => {
+        const stringified = print(createRuntimeStoryVariableDeclaration({
+            exportName: 'Default',
+            nodes: {
+                variable: createVariableFromRuntimeStoriesCall({
+                    storiesFunctionDeclaration: {
+                        type: 'FunctionDeclaration',
+                        id: createASTIdentifier('Example_stories'),
+                        body: {
+                            type: 'BlockStatement',
+                            body: [],
+                        },
+                        params: [],
+                    },
+                }),
+                tags: createASTArrayExpression([
+                    {
+                        type: 'Literal',
+                        value: 'autodocs',
+                    },
+                    {
+                        type: 'Literal',
+                        value: SVELTE_CSF_V4_TAG,
+                    },
+                ]),
+            },
+        })).code;
+        expect(stringified).toMatchInlineSnapshot(`
+      "const $__Default = {
+      	...$__stories["Default"],
+      	tags: ["autodocs", "svelte-csf-v4"]
+      };"
+    `);
+    });
+});

package/dist/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.test.d.ts

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

package/dist/compiler/post-transform/appendix/create-variable-from-runtime-stories-call.test.js

@@ -0,0 +1,22 @@
+import { print } from 'esrap';
+import { describe, it } from 'vitest';
+import { createVariableFromRuntimeStoriesCall } from './create-variable-from-runtime-stories-call.js';
+describe(createVariableFromRuntimeStoriesCall.name, () => {
+    it('creates a variable correctly', ({ expect }) => {
+        const stringified = print(createVariableFromRuntimeStoriesCall({
+            storiesFunctionDeclaration: {
+                type: 'FunctionDeclaration',
+                id: {
+                    type: 'Identifier',
+                    name: 'Example_stories',
+                },
+                body: {
+                    type: 'BlockStatement',
+                    body: [],
+                },
+                params: [],
+            },
+        })).code;
+        expect(stringified).toMatchInlineSnapshot(`"const $__stories = createRuntimeStories(Example_stories, $__meta);"`);
+    });
+});

package/dist/compiler/post-transform/define-meta/index.test.d.ts

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

package/dist/compiler/post-transform/define-meta/index.test.js

@@ -0,0 +1,96 @@
+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 { createMetaVariableDeclaration, transformDefineMeta } 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 { insertDefineMetaParameters } from './insert-parameters.js';
+import { replaceDefineMetaArgument } from './replace-argument.js';
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+describe(transformDefineMeta.name, () => {
+    it("transformed 'defineMeta' matches inlined snapshot", 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);
+        transformDefineMeta({
+            code,
+            nodes: {
+                svelte: svelteASTNodes,
+                compiled: compiledASTNodes,
+            },
+            filename,
+        });
+        const { defineMetaVariableDeclaration } = await extractCompiledASTNodes({
+            ast: parseAst(code.toString()),
+        });
+        expect(print(defineMetaVariableDeclaration).code).toMatchInlineSnapshot(`"const { Story } = defineMeta($__meta);"`);
+    });
+});
+describe(createMetaVariableDeclaration.name, () => {
+    it('parameters are transformed correctly', 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,
+        });
+        insertDefineMetaParameters({
+            nodes: {
+                svelte: svelteASTNodes,
+                compiled: compiledASTNodes,
+            },
+            filename,
+        });
+        const metaObjectExpression = replaceDefineMetaArgument({
+            nodes: {
+                svelte: svelteASTNodes,
+                compiled: compiledASTNodes,
+            },
+        });
+        const metaVariableDeclaration = createMetaVariableDeclaration({ init: metaObjectExpression });
+        expect(print(metaVariableDeclaration).code).toMatchInlineSnapshot(`
+      "const $__meta = {
+      	title: 'Example',
+      	component: Example,
+      	tags: ['autodocs'],
+      	args: {
+      		onclick: fn(),
+      		onmouseenter: fn(),
+      		onmouseleave: fn()
+      	},
+      	parameters: {
+      		docs: {
+      			description: {
+      				component: "Description set explicitly in the comment above \`defineMeta\`.\\n\\nMultiline supported. And also Markdown syntax:\\n\\n* **Bold**,\\n* _Italic_,\\n* \`Code\`."
+      			}
+      		}
+      	}
+      };"
+    `);
+    });
+});

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

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

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

@@ -0,0 +1,279 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+import MagicString from 'magic-string';
+import { parseAst } from 'rollup/parseAst';
+import { describe, it } from 'vitest';
+import { transformStoriesCode } 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';
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+describe(transformStoriesCode.name, () => {
+    it('transformed code matches inlined snapshot', 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);
+        await transformStoriesCode({
+            code,
+            nodes: {
+                svelte: svelteASTNodes,
+                compiled: compiledASTNodes,
+            },
+            filename,
+            originalCode,
+        });
+        expect(code.toString()).toMatchInlineSnapshot(`
+      "import 'svelte/internal/disclose-version';
+
+      Example_stories[$.FILENAME] = 'tests/stories/Example.stories.svelte';
+
+      import * as $ from 'svelte/internal/client';
+      import { fn } from 'storybook/test';
+      import { defineMeta } from '@storybook/addon-svelte-csf';
+      import Example from './Example.svelte';
+
+      /**
+       * Description set explicitly in the comment above \`defineMeta\`.
+       *
+       * Multiline supported. And also Markdown syntax:
+       *
+       * * **Bold**,
+       * * _Italic_,
+       * * \`Code\`.
+       */
+      const $__meta = {
+      	title: 'Example',
+      	component: Example,
+      	tags: ['autodocs'],
+      	args: {
+      		onclick: fn(),
+      		onmouseenter: fn(),
+      		onmouseleave: fn()
+      	},
+      	parameters: {
+      		docs: {
+      			description: {
+      				component: "Description set explicitly in the comment above \`defineMeta\`.\\n\\nMultiline supported. And also Markdown syntax:\\n\\n* **Bold**,\\n* _Italic_,\\n* \`Code\`."
+      			}
+      		}
+      	}
+      };
+      const { Story } = defineMeta($__meta);
+
+      var root_2 = $.add_locations($.template(\`<p> </p> <br>\`, 1), Example_stories[$.FILENAME], [[37, 2], [37, 44]]);
+      var root = $.add_locations($.template(\`<!> <!> <!> <!> <!>\`, 1), Example_stories[$.FILENAME], []);
+
+      function Example_stories($$anchor, $$props) {
+      	$.check_target(new.target);
+      	$.push($$props, true, Example_stories);
+
+      	const template = $.wrap_snippet(Example_stories, function ($$anchor, args = $.noop, context = $.noop) {
+      		$.validate_snippet_args(...arguments);
+
+      		var fragment = $.comment();
+      		var node = $.first_child(fragment);
+
+      		Example(node, $.spread_props(args, {
+      			onclick: handleClick,
+      			children: $.wrap_snippet(Example_stories, ($$anchor, $$slotProps) => {
+      				var fragment_1 = root_2();
+      				var p = $.first_child(fragment_1);
+      				var text = $.child(p, true);
+
+      				$.reset(p);
+
+      				var text_1 = $.sibling(p);
+
+      				$.next();
+
+      				$.template_effect(() => {
+      					$.set_text(text, context().name);
+      					$.set_text(text_1, \` You clicked: \${$.get(count) ?? ''}\`);
+      				});
+
+      				$.append($$anchor, fragment_1);
+      			}),
+      			$$slots: { default: true }
+      		}));
+
+      		$.append($$anchor, fragment);
+      	});
+
+      	let count = $.state(0);
+
+      	function handleClick() {
+      		$.set(count, $.get(count) + 1);
+      	}
+
+      	var fragment_2 = root();
+      	var node_1 = $.first_child(fragment_2);
+
+      	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>"
+      		}
+      	}
+      });
+
+      	var node_2 = $.sibling(node_1, 2);
+
+      	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>"
+      		}
+      	}
+      });
+
+      	var node_3 = $.sibling(node_2, 2);
+
+      	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>"
+      		}
+      	}
+      });
+
+      	var node_4 = $.sibling(node_3, 2);
+
+      	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>" }
+      	}
+      });
+
+      	var node_6 = $.sibling(node_4, 2);
+
+      	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>"
+      		}
+      	}
+      });
+
+      	$.append($$anchor, fragment_2);
+      	return $.pop({ ...$.legacy_api() });
+      }
+
+      if (import.meta.hot) {
+      	Example_stories = $.hmr(Example_stories, () => Example_stories[$.HMR].source);
+
+      	import.meta.hot.acceptExports(["default"],(module) => {
+      		module.default[$.HMR].source = Example_stories[$.HMR].source;
+      		$.set(Example_stories[$.HMR].source, module.default[$.HMR].original);
+      	});
+      }
+
+
+
+      import { createRuntimeStories } from "@storybook/addon-svelte-csf/internal/create-runtime-stories";
+
+      const $__stories = createRuntimeStories(Example_stories, $__meta);
+
+      export default $__meta;
+
+      export const __namedExportsOrder = [
+      	"Default",
+      	"Rounded",
+      	"Square",
+      	"AsChild",
+      	"ChildrenForwared"
+      ];
+
+      const $__Default = {
+      	...$__stories["Default"],
+      	tags: ["svelte-csf-v5"]
+      };
+
+      const $__Rounded = {
+      	...$__stories["Rounded"],
+      	tags: ["svelte-csf-v5"]
+      };
+
+      const $__Square = {
+      	...$__stories["Square"],
+      	tags: ["svelte-csf-v5"]
+      };
+
+      const $__AsChild = {
+      	...$__stories["AsChild"],
+      	tags: ["svelte-csf-v5"]
+      };
+
+      const $__ChildrenForwared = {
+      	...$__stories["ChildrenForwared"],
+      	tags: ["svelte-csf-v5"]
+      };
+
+      export {
+      	$__Default as Default,
+      	$__Rounded as Rounded,
+      	$__Square as Square,
+      	$__AsChild as AsChild,
+      	$__ChildrenForwared as ChildrenForwared
+      };"
+    `);
+    });
+});

package/dist/compiler/post-transform/remove-export-default.test.d.ts

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

package/dist/compiler/post-transform/remove-export-default.test.js

@@ -0,0 +1,33 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+import MagicString from 'magic-string';
+import { parseAst } from 'rollup/parseAst';
+import { describe, it } from 'vitest';
+import { removeExportDefault } from './remove-export-default.js';
+import { extractCompiledASTNodes } from '../../parser/extract/compiled/nodes.js';
+import { StorybookSvelteCSFError } from '../../utils/error.js';
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+describe(removeExportDefault.name, () => {
+    it('removes pre-transformed export default correctly', async ({ expect }) => {
+        const compiledPreTransformCode = fs
+            .readFileSync(path.resolve(__dirname, '../../../tests/__compiled__/pre-transform/Example.stories.dev.js'))
+            .toString();
+        const compiledASTNodes = await extractCompiledASTNodes({
+            ast: parseAst(compiledPreTransformCode),
+        });
+        const code = new MagicString(compiledPreTransformCode);
+        removeExportDefault({
+            code,
+            nodes: compiledASTNodes,
+        });
+        await expect(extractCompiledASTNodes({
+            ast: parseAst(code.toString()),
+        })).rejects.toThrowErrorMatchingInlineSnapshot(`
+      [SB_SVELTE_CSF_PARSER_EXTRACT_COMPILED_0003 (NoExportDefaultError): Could not find 'export default' in the compiled output of the stories file: <path not specified>
+
+      More info: https://github.com/storybookjs/addon-svelte-csf/blob/v${StorybookSvelteCSFError.packageVersion}/ERRORS.md#SB_SVELTE_CSF_PARSER_EXTRACT_COMPILED_0003
+      ]
+    `);
+    });
+});

package/dist/compiler/post-transform/story/index.test.d.ts

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