@storybook/addon-svelte-csf 5.1.4 → 5.1.5

package/dist/compiler/plugins.js

@@ -48,7 +48,7 @@ export async function preTransformPlugin() {
                     };
                 }
                 let magicCode = new MagicString(code);
-                magicCode.overwrite(0, code.length - 1, print(transformedSvelteAST));
+                magicCode.overwrite(0, code.length, print(transformedSvelteAST));
                 const stringifiedMagicCode = magicCode.toString();
                 return {
                     code: stringifiedMagicCode,

package/dist/compiler/plugins.test.js

@@ -43,4 +43,20 @@ describe(preTransformPlugin.name, () => {
         expect(result.code).toContain('defineMeta');
         expect(result.meta._storybook_csf_pre_transform).toBe(result.code);
     });
+    it('does not repeat the last character of a legacy file', async ({ expect }) => {
+        const code = dedent(`
+      <script context="module">
+        import { Story } from "${pkg.name}";
+        import Button from "./Button.svelte";
+
+        export const meta = { component: Button };
+      </script>
+
+      <Story name="Default" />
+      foo
+    `);
+        const result = await runPreTransform(code);
+        expect(code.endsWith('foo')).toBe(true);
+        expect(result.code).toMatch(/[^o]foo$/);
+    });
 });

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

@@ -1,7 +1,7 @@
 import { STORYBOOK_INTERNAL_PREFIX, SVELTE_CSF_TAG_PREFIX, SVELTE_CSF_V5_TAG, } from '../../../constants.js';
 import { createASTArrayExpression, createASTIdentifier, createASTObjectExpression, createASTProperty, } from '../../../parser/ast.js';
 export function createRuntimeStoryVariableDeclaration(params) {
-    const tags = createASTArrayExpression(params.nodes.tags?.elements);
+    const tags = createASTArrayExpression([...(params.nodes.tags?.elements ?? [])]);
     // In legacy stories, the pre-transform will add a SVELTE_CSF_V4_TAG tag.
     // if it is not present, we add the SVELTE_CSF_V5_TAG tag.
     const hasSvelteCsfTag = tags.elements.some((element) => element?.type === 'Literal' && element.value?.toString().startsWith(SVELTE_CSF_TAG_PREFIX));

package/dist/compiler/post-transform/define-meta/insert-parameters.js

@@ -1,5 +1,5 @@
 import { findASTPropertyIndex, findPropertyDescriptionIndex, findPropertyDocsIndex, findPropertyParametersIndex, getDescriptionPropertyValue, getDocsPropertyValue, getParametersPropertyValue, } from '../shared/parameters.js';
-import { createASTObjectExpression, createASTProperty } from '../../../parser/ast.js';
+import { appendASTProperty, createASTObjectExpression, createASTProperty, } from '../../../parser/ast.js';
 import { getDefineMetaFirstArgumentObjectExpression } from '../../../parser/extract/svelte/define-meta.js';
 /**
  * This function inserts parameters to `defineMeta()`.
@@ -37,25 +37,25 @@ export function insertDefineMetaParameters(params) {
         filename,
         node: defineMetaFirstArgumentObjectExpression,
     }) === -1) {
-        defineMetaFirstArgumentObjectExpression.properties.push(createASTProperty('parameters', createASTObjectExpression()));
+        appendASTProperty(defineMetaFirstArgumentObjectExpression, createASTProperty('parameters', createASTObjectExpression()));
     }
     if (findPropertyDocsIndex({
         filename,
         node: defineMetaFirstArgumentObjectExpression,
     }) === -1) {
-        getParametersPropertyValue({
+        appendASTProperty(getParametersPropertyValue({
             filename,
             node: defineMetaFirstArgumentObjectExpression,
-        }).properties.push(createASTProperty('docs', createASTObjectExpression()));
+        }), createASTProperty('docs', createASTObjectExpression()));
     }
     if (findPropertyDescriptionIndex({
         filename,
         node: defineMetaFirstArgumentObjectExpression,
     }) === -1) {
-        getDocsPropertyValue({
+        appendASTProperty(getDocsPropertyValue({
             filename,
             node: defineMetaFirstArgumentObjectExpression,
-        }).properties.push(createASTProperty('description', createASTObjectExpression()));
+        }), createASTProperty('description', createASTObjectExpression()));
     }
     if (findASTPropertyIndex({
         name: 'component',
@@ -70,10 +70,10 @@ export function insertDefineMetaParameters(params) {
         ${filename}`);
         return;
     }
-    getDescriptionPropertyValue({
+    appendASTProperty(getDescriptionPropertyValue({
         filename,
         node: defineMetaFirstArgumentObjectExpression,
-    }).properties.push(createASTProperty('component', {
+    }), createASTProperty('component', {
         type: 'Literal',
         value: extractDescription(nodes.svelte.defineMetaVariableDeclaration.leadingComments),
     }));

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

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

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

@@ -0,0 +1,41 @@
+import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };
+import dedent from 'dedent';
+import { print } from 'esrap';
+import { parseAst } from 'rollup/parseAst';
+import { compile } from 'svelte/compiler';
+import { describe, it } from 'vitest';
+import { insertDefineMetaParameters } from './insert-parameters.js';
+import { getSvelteAST } from '../../../parser/ast.js';
+import { extractCompiledASTNodes } from '../../../parser/extract/compiled/nodes.js';
+import { extractSvelteASTNodes } from '../../../parser/extract/svelte/nodes.js';
+import { getDefineMetaFirstArgumentObjectExpression } from '../../../parser/extract/svelte/define-meta.js';
+describe(insertDefineMetaParameters.name, () => {
+    it('works when defineMeta gets an empty object', async ({ expect }) => {
+        const code = dedent `
+      <script module>
+        import { defineMeta } from "${pkg.name}";
+
+        /** Description of the component */
+        const { Story } = defineMeta({});
+      </script>
+
+      <Story name="Default" />
+    `;
+        const svelteNodes = await extractSvelteASTNodes({ ast: getSvelteAST({ code }) });
+        // NOTE: Rollup's parser returns a frozen array for the properties of an empty object literal
+        const compiledNodes = await extractCompiledASTNodes({
+            ast: parseAst(compile(code, { filename: 'Test.stories.svelte' }).js.code),
+        });
+        insertDefineMetaParameters({ nodes: { svelte: svelteNodes, compiled: compiledNodes } });
+        const objectExpression = getDefineMetaFirstArgumentObjectExpression({ nodes: compiledNodes });
+        expect(print(objectExpression).code).toMatchInlineSnapshot(`
+      "{
+      	parameters: {
+      		docs: {
+      			description: { component: "Description of the component" }
+      		}
+      	}
+      }"
+    `);
+    });
+});

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

@@ -1,8 +1,11 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import url from 'node:url';
+import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };
+import dedent from 'dedent';
 import MagicString from 'magic-string';
 import { parseAst } from 'rollup/parseAst';
+import { compile } from 'svelte/compiler';
 import { describe, it } from 'vitest';
 import { transformStoriesCode } from './index.js';
 import { getSvelteAST } from '../../parser/ast.js';
@@ -276,4 +279,42 @@ describe(transformStoriesCode.name, () => {
       };"
     `);
     });
+    it('works with empty object and array literals', async ({ expect }) => {
+        const filename = 'Empty.stories.svelte';
+        const originalCode = dedent `
+      <script module>
+        import { defineMeta } from "${pkg.name}";
+
+        /** Description of the component */
+        const { Story } = defineMeta({});
+      </script>
+
+      <!-- Description of the story -->
+      <Story name="Default" parameters={{}} tags={[]} />
+    `;
+        const compiledCode = compile(originalCode, { filename, dev: true }).js.code;
+        const svelteASTNodes = await extractSvelteASTNodes({
+            ast: getSvelteAST({ code: originalCode, filename }),
+            filename,
+        });
+        // NOTE: Rollup's parser returns frozen arrays for empty object and array literals
+        const compiledASTNodes = await extractCompiledASTNodes({
+            ast: parseAst(compiledCode),
+            filename,
+        });
+        const code = new MagicString(compiledCode);
+        await transformStoriesCode({
+            code,
+            nodes: {
+                svelte: svelteASTNodes,
+                compiled: compiledASTNodes,
+            },
+            filename,
+            originalCode,
+        });
+        const output = code.toString();
+        expect(output).toContain('component: "Description of the component"');
+        expect(output).toContain('story: "Description of the story"');
+        expect(output).toContain('__svelteCsf');
+    });
 });

package/dist/compiler/post-transform/story/insert-description.js

@@ -1,6 +1,6 @@
 import dedent from 'dedent';
 import { findASTPropertyIndex, findPropertyDescriptionIndex, findPropertyDocsIndex, findPropertyParametersIndex, getParametersPropertyValue, getDocsPropertyValue, getDescriptionPropertyValue, } from '../shared/parameters.js';
-import { createASTObjectExpression, createASTProperty } from '../../../parser/ast.js';
+import { appendASTProperty, createASTObjectExpression, createASTProperty, } from '../../../parser/ast.js';
 import { getStoryPropsObjectExpression } from '../../../parser/extract/compiled/story.js';
 /**
  * Attempt to insert HTML comment above the `<Story />` component as a description **into the compiled code**.
@@ -22,29 +22,29 @@ export function insertStoryHTMLCommentAsDescription(params) {
         component,
         node: storyPropsObjectExpression,
     }) === -1) {
-        storyPropsObjectExpression.properties.push(createASTProperty('parameters', createASTObjectExpression()));
+        appendASTProperty(storyPropsObjectExpression, createASTProperty('parameters', createASTObjectExpression()));
     }
     if (findPropertyDocsIndex({
         filename,
         component,
         node: storyPropsObjectExpression,
     }) === -1) {
-        getParametersPropertyValue({
+        appendASTProperty(getParametersPropertyValue({
             filename,
             component,
             node: storyPropsObjectExpression,
-        }).properties.push(createASTProperty('docs', createASTObjectExpression()));
+        }), createASTProperty('docs', createASTObjectExpression()));
     }
     if (findPropertyDescriptionIndex({
         filename,
         component,
         node: storyPropsObjectExpression,
     }) === -1) {
-        getDocsPropertyValue({
+        appendASTProperty(getDocsPropertyValue({
             filename,
             component,
             node: storyPropsObjectExpression,
-        }).properties.push(createASTProperty('description', createASTObjectExpression()));
+        }), createASTProperty('description', createASTObjectExpression()));
     }
     if (findASTPropertyIndex({
         filename,
@@ -67,11 +67,11 @@ export function insertStoryHTMLCommentAsDescription(params) {
           ${filename}`);
         return;
     }
-    getDescriptionPropertyValue({
+    appendASTProperty(getDescriptionPropertyValue({
         filename,
         component,
         node: storyPropsObjectExpression,
-    }).properties.push(createASTProperty('story', {
+    }), createASTProperty('story', {
         type: 'Literal',
         value: dedent(comment.data),
     }));

package/dist/compiler/post-transform/story/insert-svelte-csf.js

@@ -1,7 +1,7 @@
 import { findPropertyParametersIndex, getParametersPropertyValue, } from '../shared/parameters.js';
 import { getStoryPropsObjectExpression } from '../../../parser/extract/compiled/story.js';
 import { getStoryContentRawCode } from '../../../parser/analyse/story/content.js';
-import { createASTObjectExpression, createASTProperty } from '../../../parser/ast.js';
+import { appendASTProperty, createASTObjectExpression, createASTProperty, } from '../../../parser/ast.js';
 /**
  * Insert addon's internal object `__svelteCsf`
  * to `parameters` of every `<Story />` component **into the compiled code**.
@@ -18,7 +18,7 @@ export function insertSvelteCSFToStoryParameters(params) {
         component: component.svelte.component,
         node: storyPropsObjectExpression,
     }) === -1) {
-        storyPropsObjectExpression.properties.push(createASTProperty('parameters', createASTObjectExpression()));
+        appendASTProperty(storyPropsObjectExpression, createASTProperty('parameters', createASTObjectExpression()));
     }
     const rawCode = getStoryContentRawCode({
         nodes: {
@@ -27,11 +27,11 @@ export function insertSvelteCSFToStoryParameters(params) {
         },
         originalCode,
     });
-    getParametersPropertyValue({
+    appendASTProperty(getParametersPropertyValue({
         filename,
         component: component.svelte.component,
         node: storyPropsObjectExpression,
-    }).properties.push(createASTProperty('__svelteCsf', createASTObjectExpression([
+    }), createASTProperty('__svelteCsf', createASTObjectExpression([
         createASTProperty('rawCode', {
             type: 'Literal',
             value: rawCode,

package/dist/parser/ast.d.ts

@@ -29,6 +29,11 @@ export declare function createASTArrayExpression(elements?: ESTreeAST.ArrayExpre
  * By default it will create an empty object.
  */
 export declare function createASTObjectExpression(properties?: ESTreeAST.ObjectExpression['properties']): ESTreeAST.ObjectExpression;
+/**
+ * Append a property to an {@link ESTreeAST.ObjectExpression}.
+ * It replaces the array instead of using `push`, because Rollup's parser returns a frozen array for an empty object literal.
+ */
+export declare function appendASTProperty(node: ESTreeAST.ObjectExpression, property: ESTreeAST.ObjectExpression['properties'][number]): void;
 interface ASTScriptOptions {
     module?: boolean;
     content: SvelteAST.Script['content'];

package/dist/parser/ast.js

@@ -66,6 +66,13 @@ export function createASTObjectExpression(properties = []) {
         properties,
     };
 }
+/**
+ * Append a property to an {@link ESTreeAST.ObjectExpression}.
+ * It replaces the array instead of using `push`, because Rollup's parser returns a frozen array for an empty object literal.
+ */
+export function appendASTProperty(node, property) {
+    node.properties = [...node.properties, property];
+}
 export function createASTScript(options) {
     const { content, module = false } = options;
     const attributes = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-svelte-csf",
-  "version": "5.1.4",
+  "version": "5.1.5",
   "description": "Allows to write stories in Svelte syntax",
   "keywords": [
     "storybook-addons",