@storybook/addon-svelte-csf - npm Package Compare versions

Comparing version 5.0.0--canary.181.4405dde.0 to 5.0.0--canary.181.44dbdfc.0

dist/compiler/plugin.js

@@ -48,3 +48,3 @@ /**
             const svelteAST = getSvelteAST({ code: rawCode, filename: id });
-            const svelteNodes = await extractSvelteASTNodes({
+            const svelteASTNodes = await extractSvelteASTNodes({
                 ast: svelteAST,
@@ -68,13 +68,11 @@ filename: id,
              */
-            const svelteStories = [...svelteNodes.storyComponents].reverse();
+            const svelteStories = [...svelteASTNodes.storyComponents].reverse();
             const compiledStories = [...extractedCompiledStoriesNodes].reverse();
-            for (const [index, compiled] of Object.entries(compiledStories)) {
-                updateCompiledStoryProps({
-                    code: magicCompiledCode,
-                    nodes: { svelte: svelteStories[index], compiled },
-                    setTemplateSnippetBlock: svelteNodes.setTemplateSnippetBlock,
-                    filename: id,
-                    originalCode: rawCode,
-                });
-            }
+            await Promise.all(compiledStories.map((compiled, index) => updateCompiledStoryProps({
+                code: magicCompiledCode,
+                componentASTNodes: { svelte: svelteStories[index], compiled },
+                svelteASTNodes,
+                filename: id,
+                originalCode: rawCode,
+            })));
             await destructureMetaFromDefineMeta({
@@ -89,3 +87,3 @@ code: magicCompiledCode,
                     compiled: compiledNodes,
-                    svelte: svelteNodes,
+                    svelte: svelteASTNodes,
                 },
@@ -103,3 +101,3 @@ filename: id,
                     compiled: compiledNodes,
-                    svelte: svelteNodes,
+                    svelte: svelteASTNodes,
                 },
@@ -106,0 +104,0 @@ filename: id,

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

@@ -6,2 +6,3 @@ import type { FunctionDeclaration, VariableDeclaration } from 'estree';
     metaIdentifier: ReturnType<typeof getMetaIdentifier>;
+    codeByStoryMapDeclaration: VariableDeclaration;
     filename: string;
@@ -8,0 +9,0 @@ }

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

 export function createVariableFromRuntimeStoriesCall(params) {
-    const { storiesFunctionDeclaration, metaIdentifier } = params;
+    const { storiesFunctionDeclaration, metaIdentifier, codeByStoryMapDeclaration } = params;
     return {
@@ -27,2 +27,6 @@ type: 'VariableDeclaration',
                         metaIdentifier,
+                        {
+                            type: 'Identifier',
+                            name: codeByStoryMapDeclaration.declarations[0].id.name
+                        }
                     ],
@@ -29,0 +33,0 @@ optional: false,

dist/compiler/transform/compiled-story-props.d.ts

 import type MagicString from 'magic-string';
 import type { extractStoriesNodesFromExportDefaultFn } from '../../parser/extract/compiled/stories.js';
 import type { SvelteASTNodes } from '../../parser/extract/svelte/nodes.js';
-import type { extractFragmentNodes } from '../../parser/extract/svelte/fragment-nodes.js';
 interface Params {
     code: MagicString;
-    nodes: {
+    componentASTNodes: {
         svelte: SvelteASTNodes['storyComponents'][number];
         compiled: Awaited<ReturnType<typeof extractStoriesNodesFromExportDefaultFn>>[number];
     };
-    setTemplateSnippetBlock: Awaited<ReturnType<typeof extractFragmentNodes>>['setTemplateSnippetBlock'];
+    svelteASTNodes: SvelteASTNodes;
     filename: string;
     originalCode: string;
 }
-export declare function updateCompiledStoryProps(params: Params): void;
+export declare function updateCompiledStoryProps(params: Params): Promise<void>;
 export {};

dist/compiler/transform/compiled-story-props.js

@@ -5,5 +5,5 @@ import { toJs } from 'estree-util-to-js';
 import { insertSourceCode } from './story-props/insert-source-code.js';
-export function updateCompiledStoryProps(params) {
-    const { code, setTemplateSnippetBlock, nodes, filename, originalCode } = params;
-    const { svelte, compiled } = nodes;
+export async function updateCompiledStoryProps(params) {
+    const { code, svelteASTNodes, componentASTNodes, filename, originalCode } = params;
+    const { svelte, compiled } = componentASTNodes;
     const { component, comment } = svelte;
@@ -36,5 +36,5 @@ const storyPropsObjectExpression = getStoryPropsObjectExpression(compiled);
     }
-    insertSourceCode({
+    await insertSourceCode({
         component,
-        setTemplateSnippetBlock,
+        svelteASTNodes,
         currentDocsProperty,
@@ -46,3 +46,3 @@ filename,
         code,
-        nodes,
+        nodes: componentASTNodes,
         metaObjectExpression: storyPropsObjectExpression,
@@ -49,0 +49,0 @@ });

dist/compiler/transform/create-appendix.js

 import MagicString from 'magic-string';
 import { toJs } from 'estree-util-to-js';
 import { createExportDefaultMeta } from './appendix/create-export-default.js';
+import { createCodeByStoryMap } from './appendix/create-code-by-story-map.js';
 import { createExportOrderVariable } from './appendix/create-export-order.js';
@@ -19,5 +20,7 @@ import { createImport } from './appendix/create-import.js';
     });
+    const codeByStoryMapDeclaration = createCodeByStoryMap({ storyIdentifiers });
     const variableFromRuntimeStoriesCall = createVariableFromRuntimeStoriesCall({
         storiesFunctionDeclaration,
         metaIdentifier,
+        codeByStoryMapDeclaration,
         filename,
@@ -35,2 +38,3 @@ });
             createImport(),
+            createCodeByStoryMap({ storyIdentifiers }),
             variableFromRuntimeStoriesCall,
@@ -37,0 +41,0 @@ createExportDefaultMeta({ metaIdentifier, filename }),

dist/compiler/transform/story-props/insert-source-code.d.ts

 /// <reference types="svelte" />
 import type { Property } from 'estree';
 import type { Component } from 'svelte/compiler';
-import type { extractFragmentNodes } from '../../../parser/extract/svelte/fragment-nodes.js';
+import type { extractSvelteASTNodes } from '../../../parser/extract/svelte/nodes.js';
 interface Params {
     component: Component;
-    setTemplateSnippetBlock: Awaited<ReturnType<typeof extractFragmentNodes>>['setTemplateSnippetBlock'];
+    svelteASTNodes: Awaited<ReturnType<typeof extractSvelteASTNodes>>;
     currentDocsProperty: Property;
@@ -17,3 +17,3 @@ filename?: string;
  */
-export declare function insertSourceCode(params: Params): void;
+export declare function insertSourceCode(params: Params): Promise<void>;
 export {};

dist/compiler/transform/story-props/insert-source-code.js

@@ -8,4 +8,4 @@ import { createASTObjectExpression, createASTProperty, findASTPropertyIndex } from './shared.js';
  */
-export function insertSourceCode(params) {
-    const { component, setTemplateSnippetBlock, currentDocsProperty, filename, originalCode } = params;
+export async function insertSourceCode(params) {
+    const { component, svelteASTNodes, currentDocsProperty, filename, originalCode } = params;
     if (currentDocsProperty.value.type !== 'ObjectExpression') {
@@ -34,5 +34,5 @@ throw new Error(`Invalid schema for property "docs" value - expected "ObjectExpression", but got ${currentDocsProperty.value.type}. Stories file: ${filename}`);
     }
-    const value = getStoryChildrenRawSource({
+    const value = await getStoryChildrenRawSource({
         component,
-        setTemplateSnippetBlock,
+        svelteASTNodes,
         originalCode,
@@ -39,0 +39,0 @@ });

dist/parser/analyse/Story/children.d.ts

 /// <reference types="svelte" />
 import type { Component } from 'svelte/compiler';
-import type { extractFragmentNodes } from 'src/parser/extract/svelte/fragment-nodes.js';
+import type { extractSvelteASTNodes } from '../../extract/svelte/nodes.js';
 interface Params {
     component: Component;
-    setTemplateSnippetBlock: Awaited<ReturnType<typeof extractFragmentNodes>>['setTemplateSnippetBlock'];
+    svelteASTNodes: Awaited<ReturnType<typeof extractSvelteASTNodes>>;
     originalCode: string;
+    filename?: string;
 }
@@ -13,3 +14,3 @@ /**
  */
-export declare function getStoryChildrenRawSource(params: Params): string;
+export declare function getStoryChildrenRawSource(params: Params): Promise<string>;
 export {};

dist/parser/analyse/Story/children.js

@@ -1,2 +0,4 @@
-import { extractStoryChildrenSnippetBlock } from '../../../parser/extract/svelte/Story/children.js';
+import { getDefineMetaComponentValue } from '../meta/component-identifier.js';
+import { extractStoryAttributesNodes } from '../../extract/svelte/Story/attributes.js';
+import { extractStoryChildrenSnippetBlock } from '../../extract/svelte/Story/children.js';
 /**
@@ -6,34 +8,122 @@ * Determine the `source.code` of the `<Story />` component children.
  */
-export function getStoryChildrenRawSource(params) {
-    const { component, setTemplateSnippetBlock, originalCode } = params;
+export async function getStoryChildrenRawSource(params) {
+    const { component, svelteASTNodes, originalCode, filename } = params;
+    // `<Story />` component is self-closing...
+    if (component.fragment.nodes.length === 0) {
+        /**
+         * Case - "explicit template" - `children` attribute references to a snippet block at the root level of fragment.
+         *
+         * Example:
+         *
+         * ```svelte
+         * {#snippet template1(args)}
+         *     <SomeComponent {...args} />
+         * {/snippet}
+         *
+         * <Story name="Default" children={template1} />
+         * ```
+         */
+        const storyAttributeChildrenSnippetBlock = findChildrenPropSnippetBlock(component, {
+            svelteASTNodes,
+            filename,
+        });
+        if (storyAttributeChildrenSnippetBlock) {
+            return await getSnippetBlockBodyRawCode(originalCode, storyAttributeChildrenSnippetBlock);
+        }
+        /**
+         * Case - `setTemplate was used in the instance tag of `*.stories.svelte` file
+         *
+         * Example:
+         *
+         * ```svelte
+         * <script>
+         *     setTemplate(myCustomTemplate);
+         * </script>
+         *
+         * {#snippet myCustomTemplate(args)}
+         *     <SomeComponent {...args} />
+         * {/snippet}
+         *
+         * <Story name="Default" />
+         * ```
+         */
+        const setTemplateSnippetBlock = findSetTemplateSnippetBlock({
+            svelteASTNodes,
+            filename,
+        });
+        if (setTemplateSnippetBlock) {
+            return await getSnippetBlockBodyRawCode(originalCode, setTemplateSnippetBlock);
+        }
+        /* Case - No `children` attribute provided, no `setTemplate` used, just a Story */
+        const defineMetaComponentValue = getDefineMetaComponentValue({
+            svelteASTNodes,
+            filename,
+        });
+        // NOTE: It should never be undefined in this particular case, otherwise Storybook wouldn't know what to render.
+        return `<${defineMetaComponentValue?.name} {...args} />`;
+    }
+    /**
+     * Case - Story with children - and with a snippet block `children` inside
+     *
+     * Example:
+     *
+     * ```svelte
+     * <Story name="Default">
+     *     {#snippet children(args)}
+     *          <SomeComponent {...args} />
+     *     {/snippet}
+     * </Story>
+     * ```
+     */
     const storyChildrenSnippetBlock = extractStoryChildrenSnippetBlock(component);
-    /* Case 1 - No template, no children, just Story */
-    if (component.fragment.nodes.length === 0 &&
-        !storyChildrenSnippetBlock &&
-        !setTemplateSnippetBlock) {
-        // TODO: How do we fill ComponentName? Extract from defineMeta? - it can be optional
-        return `<[ComponentName] {...args} />`;
+    if (storyChildrenSnippetBlock) {
+        return await getSnippetBlockBodyRawCode(originalCode, storyChildrenSnippetBlock);
     }
-    /* Case 2 - No template, just Story with static content */
-    if (component.fragment.nodes.length > 0 &&
-        !storyChildrenSnippetBlock &&
-        !setTemplateSnippetBlock) {
-        const { fragment } = component;
-        const { nodes } = fragment;
-        const firstNode = nodes[0];
-        const lastNode = nodes[nodes.length - 1];
-        return originalCode.slice(firstNode.start, lastNode.end);
+    /**
+     * Case - No inner `children`, just Story with a static content
+     *
+     * Example:
+     *
+     * ```svelte
+     * <Story name="Default">
+     *     <SomeComponent foo="bar" />
+     * </Story>
+     * ```
+     */
+    const { fragment } = component;
+    const { nodes } = fragment;
+    const firstNode = nodes[0];
+    const lastNode = nodes[nodes.length - 1];
+    const rawCode = originalCode.slice(firstNode.start, lastNode.end);
+    return prettifyCodeSlice(rawCode);
+}
+function findTemplateSnippetBlock(name, svelteASTNodes) {
+    const { snippetBlocks } = svelteASTNodes;
+    return snippetBlocks.find((snippetBlock) => name === snippetBlock.expression.name);
+}
+function findSetTemplateSnippetBlock(params) {
+    const { svelteASTNodes, filename } = params;
+    const { setTemplateCall } = svelteASTNodes;
+    if (!setTemplateCall) {
+        return;
     }
-    /* Case 3 - No template, Story with snippet content */
-    if (storyChildrenSnippetBlock) {
-        return getSnippetBlockBodyRawCode(originalCode, storyChildrenSnippetBlock);
+    if (setTemplateCall.arguments[0].type !== 'Identifier') {
+        throw new Error(`Invalid schema - expected 'setTemplate' first argument to be an identifier. Stories file: ${filename}`);
     }
-    /* Case 4 - Explicit template as children */
-    // TODO: Might need to collect all the existing snippets blocks in the `*.stories.svelte`
-    /* Case 5 - Implicit template via `setTemplate` */
-    if (setTemplateSnippetBlock) {
-        return getSnippetBlockBodyRawCode(originalCode, setTemplateSnippetBlock);
+    return findTemplateSnippetBlock(setTemplateCall.arguments[0].name, svelteASTNodes);
+}
+function findChildrenPropSnippetBlock(component, options) {
+    const { svelteASTNodes, filename } = options;
+    const { children } = extractStoryAttributesNodes({
+        component,
+        attributes: ['children'],
+    });
+    if (!children) {
+        return;
     }
-    // TODO: To throw or not to throw - when we reach an unhandled case?
-    return '';
+    const { value } = children;
+    if (value === true || value[0].type === 'Text' || value[0].expression.type !== 'Identifier') {
+        throw new Error(`Invalid schema. Expected '<Story />'s attribute 'children' to be an expression with identifier to snippet block. Stories file: ${filename}`);
+    }
+    return findTemplateSnippetBlock(value[0].expression.name, svelteASTNodes);
 }
@@ -62,3 +152,3 @@ /**
  */
-function getSnippetBlockBodyRawCode(originalCode, node) {
+async function getSnippetBlockBodyRawCode(originalCode, node) {
     const { body } = node;
@@ -68,3 +158,19 @@ const { nodes } = body;
     const lastNode = nodes[nodes.length - 1];
-    return originalCode.slice(firstNode.start, lastNode.end);
+    const rawCode = originalCode.slice(firstNode.start, lastNode.end);
+    return await prettifyCodeSlice(rawCode);
 }
+async function prettifyCodeSlice(rawCode) {
+    const { format } = await import('prettier');
+    /**
+     * FIXME: Perhaps we don't need to prettify the code at this point, and do it at runtime instead?
+     */
+    const formatted = await format(rawCode, {
+        plugins: [
+            // @ts-expect-error FIXME: Upstream issue?
+            import('prettier-plugin-svelte'),
+        ],
+        parser: 'svelte',
+    });
+    // NOTE: Remove trailing new line
+    return formatted.replace(/\n$/, '');
+}

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

@@ -7,6 +7,16 @@ /// <reference types="svelte" />
     storyComponents: Array<{
+        /** Leading HTML comment as AST nodes which can be used as description for the story. */
         comment?: Comment;
+        /** '<Story>' component AST node. */
         component: Component;
     }>;
-    setTemplateSnippetBlock: SnippetBlock | undefined;
+    /**
+     * "First level" _(at the root of fragment)_ snippet blocks AST nodes, which can be used for further transformation.
+     *
+     * For example:
+     * Determining the source code of the `<Story />`.
+     * Based on either `setTemplate` call,
+     * or by passing `children` as prop from the outer Svelte snippet block definition - e.g. `Story children={template1} />`.
+     */
+    snippetBlocks: SnippetBlock[];
 }
@@ -13,0 +23,0 @@ interface Params {

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

@@ -8,4 +8,3 @@ /**
     const { walk } = await import('zimmerframe');
-    const { fragment, filename, moduleNodes, instanceNodes } = params;
-    const { setTemplateCall } = instanceNodes;
+    const { fragment, moduleNodes } = params;
     const { storyIdentifier } = moduleNodes;
@@ -15,3 +14,3 @@ let latestComment;
         storyComponents: [],
-        setTemplateSnippetBlock: undefined,
+        snippetBlocks: [],
     };
@@ -33,7 +32,3 @@ const visitors = {
         SnippetBlock(node, { state }) {
-            if (setTemplateCall &&
-                setTemplateCall.arguments[0].type === 'Identifier' &&
-                setTemplateCall.arguments[0].name === node.expression.name) {
-                state.setTemplateSnippetBlock = node;
-            }
+            state.snippetBlocks.push(node);
         },
@@ -40,0 +35,0 @@ };

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

 import { describe, expect, it } from 'vitest';
 import { extractFragmentNodes } from './fragment-nodes.js';
-import { getSvelteAST } from '../../../parser/ast.js';
 import { extractInstanceNodes } from './instance-nodes.js';
 import { extractModuleNodes } from './module-nodes.js';
+import { getSvelteAST } from '../../../parser/ast.js';
 describe(extractFragmentNodes.name, () => {
@@ -35,2 +35,3 @@ it("extracts '<Story />' AST nodes correctly", async () => {
         }
+        expect(fragmentNodes.snippetBlocks).toHaveLength(0);
     });
@@ -71,28 +72,6 @@ it("extracts '<Story />' leading HTML comments correctly", async () => {
     });
-    it("extracts 'setTemplateSnippet' correclty when NOT used", async () => {
+    it('extracts first level snippet blocks (at the root of fragment) correclty', async () => {
         const ast = getSvelteAST({
             code: `
         <script context="module">
-          import { defineMeta } from "@storybook/addon-svelte-csf"
-          const { Story } = defineMeta();
-        </script>
-        <Story name="Example" />
-      `,
-        });
-        const moduleNodes = await extractModuleNodes({ module: ast.module });
-        const instanceNodes = await extractInstanceNodes({
-            instance: ast.instance,
-            moduleNodes,
-        });
-        const fragmentNodes = await extractFragmentNodes({
-            fragment: ast.fragment,
-            instanceNodes,
-            moduleNodes,
-        });
-        expect(fragmentNodes.setTemplateSnippetBlock).not.toBeDefined();
-    });
-    it("extracts 'setTemplateSnippet' correclty when used with 'args' parameter only", async () => {
-        const ast = getSvelteAST({
-            code: `
-        <script context="module">
           import { defineMeta, setTemplate } from "@storybook/addon-svelte-csf"
@@ -107,40 +86,20 @@ const { Story } = defineMeta();
         {#snippet render(args)}
-          <SampleChildren {...args} />
+          <SampleComponent {...args} />
         {/snippet}
 
-        <Story name="Example" />
-      `,
-        });
-        const moduleNodes = await extractModuleNodes({ module: ast.module });
-        const instanceNodes = await extractInstanceNodes({
-            instance: ast.instance,
-            moduleNodes,
-        });
-        const fragmentNodes = await extractFragmentNodes({
-            fragment: ast.fragment,
-            instanceNodes,
-            moduleNodes,
-        });
-        expect(fragmentNodes.setTemplateSnippetBlock).toBeDefined();
-        expect(fragmentNodes.setTemplateSnippetBlock?.expression.name).toBe('render');
-        expect(fragmentNodes.setTemplateSnippetBlock?.parameters).toHaveLength(1);
-        expect((fragmentNodes.setTemplateSnippetBlock?.parameters[0]).name).toBe('args');
-    });
-    it("extracts 'setTemplateSnippet' correclty when used with both 'args' and 'storyContext' parameters", async () => {
-        const ast = getSvelteAST({
-            code: `
-        <script context="module">
-          import { defineMeta, setTemplate } from "@storybook/addon-svelte-csf"
-          const { Story } = defineMeta();
-        </script>
+        {#snippet template1(args)}
+          <SampleComponent {...args} />
+        {/snippet}
 
-        <script>
-          setTemplate(myTemplate);
-        </script>
-
-        {#snippet myTemplate(args, storyContext)}
-          <SampleChildren {...args} />
+        {#snippet template2(args)}
+          <SampleComponent {...args} />
         {/snippet}
 
-        <Story name="Example" />
+        <Story name="Example1" />
+
+        <Story name="Example2">
+          {#snippet children(args)}
+            <SampleComponent {...args} />
+          {/snippet}
+        </Story>
       `,
@@ -158,8 +117,7 @@ });
         });
-        expect(fragmentNodes.setTemplateSnippetBlock).toBeDefined();
-        expect(fragmentNodes.setTemplateSnippetBlock?.expression.name).toBe('myTemplate');
-        expect(fragmentNodes.setTemplateSnippetBlock?.parameters).toHaveLength(2);
-        expect((fragmentNodes.setTemplateSnippetBlock?.parameters[0]).name).toBe('args');
-        expect((fragmentNodes.setTemplateSnippetBlock?.parameters[1]).name).toBe('storyContext');
+        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');
     });
 });

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

@@ -10,3 +10,3 @@ /// <reference types="svelte" />
  */
-export type SvelteASTNodes = Awaited<ReturnType<typeof extractModuleNodes>> & Awaited<ReturnType<typeof extractFragmentNodes> & Awaited<ReturnType<typeof extractInstanceNodes>>>;
+export type SvelteASTNodes = Awaited<ReturnType<typeof extractModuleNodes>> & Awaited<ReturnType<typeof extractFragmentNodes>> & Awaited<ReturnType<typeof extractInstanceNodes>>;
 interface Params {
@@ -13,0 +13,0 @@ ast: Root;

dist/parser/extract/svelte/Story/attributes.d.ts

@@ -1,7 +0,6 @@
-/// <reference types="svelte" />
-import type { StoryObj } from '@storybook/svelte';
+import type { Meta } from '@storybook/svelte';
+import type { ComponentProps } from 'svelte';
 import type { Attribute, Component } from 'svelte/compiler';
-type StoryAttributes = Array<keyof (StoryObj & {
-    exportName: string;
-})>;
+import type Story from '../../../../runtime/Story.svelte';
+type StoryAttributes = Array<keyof ComponentProps<Story<Meta>>>;
 interface Options<Attributes extends StoryAttributes> {
@@ -8,0 +7,0 @@ component: Component;

dist/runtime/create-runtime-stories.d.ts

@@ -16,7 +16,8 @@ import type { StoryObj } from '@storybook/svelte';
  */
-export declare const createRuntimeStories: <TMeta extends import("@storybook/types").ComponentAnnotations<import("@storybook/svelte").SvelteRenderer<import("svelte").SvelteComponent<Record<string, any>, any, any>>, import("@storybook/types").Args>>(Stories: ComponentType, meta: TMeta) => Record<string, import("@storybook/types").StoryAnnotations<import("@storybook/svelte").SvelteRenderer<StoryRenderer<TMeta>>, {
+export declare const createRuntimeStories: <TMeta extends import("@storybook/types").ComponentAnnotations<import("@storybook/svelte").SvelteRenderer<import("svelte").SvelteComponent<Record<string, any>, any, any>>, import("@storybook/types").Args>>(Stories: ComponentType, meta: TMeta, codeByStoryMap: Record<string, string>) => Record<string, import("@storybook/types").StoryAnnotations<import("@storybook/svelte").SvelteRenderer<StoryRenderer<TMeta>>, {
     Stories: ComponentType;
     exportName: string;
+    code: string;
     args: StoryObj<TMeta>["args"];
     storyContext: import("@storybook/svelte").StoryContext<TMeta["args"]>;
 }>>;

dist/runtime/create-runtime-stories.js

@@ -6,2 +6,3 @@ /* eslint-env browser */
 import StoryRenderer from './StoryRenderer.svelte';
+import { combineParameters } from '@storybook/preview-api';
 const createFragment = document.createDocumentFragment
@@ -23,3 +24,3 @@ ? () => document.createDocumentFragment()
 // TODO: I'm not sure the 'meta' is necessary here. As long as it's default exported, SB should internally combine it with the stories. Except for the play logic below, that looks funky, need to ask Pablo about that.
-export const createRuntimeStories = (Stories, meta) => {
+export const createRuntimeStories = (Stories, meta, codeByStoryMap) => {
     const repository = {
@@ -50,2 +51,3 @@ stories: new Map(),
                     Stories,
+                    code: codeByStoryMap[exportName],
                     storyContext,
@@ -52,0 +54,0 @@ args,

dist/runtime/StoryRenderer.svelte.d.ts

@@ -8,2 +8,3 @@ import { SvelteComponent } from "svelte";
         exportName: string;
+        code: string;
         args: StoryObj<TMeta>["args"];
@@ -10,0 +11,0 @@ storyContext: StoryContext<TMeta["args"]>;

dist/utils/get-component-name.js

@@ -0,1 +1,2 @@
+// FIXME: Unused module. Verify if it can be freely removed
 // Copied from https://github.com/sveltejs/svelte/blob/14ddb87c311ff3280dde0ae44b0a0d864ec26353/packages/svelte/src/compiler/phases/2-analyze/index.js#L57-L69
@@ -6,4 +7,4 @@ export function getComponentName(filename) {
     const last_dir = parts.at(-1);
-    let name = basename.replace('.svelte', '');
-    if (name === 'index' && last_dir && last_dir !== 'src') {
+    let name = basename.replace(".svelte", "");
+    if (name === "index" && last_dir && last_dir !== "src") {
         name = last_dir;
@@ -10,0 +11,0 @@ }

package.json

 {
   "name": "@storybook/addon-svelte-csf",
-  "version": "5.0.0--canary.181.4405dde.0",
+  "version": "5.0.0--canary.181.44dbdfc.0",
   "description": "Allows to write stories in Svelte syntax",
@@ -56,2 +56,4 @@ "keywords": [
     "magic-string": "^0.30.1",
+    "prettier": "^3.3.1",
+    "prettier-plugin-svelte": "^3.2.4",
     "zimmerframe": "^1.1.2"
@@ -61,14 +63,15 @@ },
     "@auto-it/released": "^10.32.6",
-    "@storybook/addon-actions": "^8.1.0",
-    "@storybook/addon-essentials": "^8.1.0",
-    "@storybook/addon-interactions": "^8.1.0",
-    "@storybook/client-logger": "^8.1.0",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/addon-actions": "^8.1.6",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-interactions": "^8.1.6",
+    "@storybook/client-logger": "^8.1.6",
+    "@storybook/csf": "^0.1.8",
+    "@storybook/docs-tools": "^8.1.6",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/node-logger": "^8.1.0",
-    "@storybook/preview-api": "^8.1.0",
-    "@storybook/svelte": "^8.1.0",
-    "@storybook/svelte-vite": "^8.1.0",
-    "@storybook/test": "^8.1.0",
-    "@storybook/types": "^8.1.0",
+    "@storybook/node-logger": "^8.1.6",
+    "@storybook/preview-api": "^8.1.6",
+    "@storybook/svelte": "^8.1.6",
+    "@storybook/svelte-vite": "^8.1.6",
+    "@storybook/test": "^8.1.6",
+    "@storybook/types": "^8.1.6",
     "@sveltejs/package": "^2.2.0",
@@ -78,3 +81,3 @@ "@sveltejs/vite-plugin-svelte": "4.0.0-next.1",
     "@types/estree": "^1.0.5",
-    "@types/node": "^20.12.12",
+    "@types/node": "^20.14.2",
     "@vitest/ui": "^1.6.0",
@@ -86,7 +89,8 @@ "auto": "^11.1.1",
     "eslint-plugin-storybook": "^0.6.12",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.0.0",
+    "jsdom": "^24.1.0",
+    "lodash-es": "^4.17.21",
+    "prettier": "^3.3.1",
     "rimraf": "^5.0.7",
-    "storybook": "^8.1.0",
     "rollup": "^4.18.0",
+    "storybook": "^8.1.6",
     "svelte": "5.0.0-next.136",
@@ -93,0 +97,0 @@ "svelte-check": "^3.5.0",

No alert changes

Improved metrics

Total package byte prevSize

158504

increased by14.89%

Number of package files

115

increased by7.48%

Lines of code

3515

increased by16.89%

Worsened metrics

Dependency count

10

increased by25%

Dev dependency count

38

increased by5.56%

Dependency changes

• + Addedprettier@^3.3.1

• + Addedprettier-plugin-svelte@^3.2.4

• + Addedprettier-plugin-svelte@3.2.5(transitive)