@storybook/addon-svelte-csf 5.1.3 → 5.1.5

package/README.md

@@ -1,27 +1,34 @@
 # Svelte CSF
 
-This Storybook addon allows you to write Storybook stories using the Svelte language instead of ESM that regular CSF is based on.
-
-```bash
-npx storybook@latest add @storybook/addon-svelte-csf
-```
-
-Using the Svelte language makes it easier to write stories for composed components that rely on snippets or slots, which aren't easily re-created outside of Svelte files.
+The **Svelte CSF** addon lets you write [Storybook](https://storybook.js.org/) stories directly in `.svelte` files instead of `.js` or `.ts` files.
+By leveraging native Svelte syntax and reactivity, it provides a more natural and seamless way to document and showcase your Svelte components directly within Storybook.
 
 ## 🐣 Getting Started
 
 > [!TIP]
 > If you've initialized your Storybook project with Storybook version 8.2.0 or above, this addon is already set up for you!
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > Not running the latest and greatest versions of Storybook or Svelte? Be sure to check [the version compatibility section below](#version-compatibility).
 
-The easiest way to install the addon is with `storybook add`:
+### Sveltekit
+
+If you’re using SvelteKit, you can set up Storybook with the [official Svelte CLI](https://svelte.dev/docs/cli/storybook):
+
+```bash
+npx sv add storybook
+```
+
+### Storybook CLI
+
+Install via the storybook CLI:
 
 ```bash
 npx storybook@latest add @storybook/addon-svelte-csf
 ```
 
+### Manual Setup
+
 You can also add the addon manually. First, install the package:
 
 ```bash
@@ -39,7 +46,7 @@ export default {
     ...
   ],
   ...
-}
+};
 ```
 
 Restart your Storybook server for the changes to take effect.
@@ -47,11 +54,22 @@ Restart your Storybook server for the changes to take effect.
 ## 🐓 Usage
 
 > [!NOTE]
-> The documentation here does not cover all of Storybook's features, only the aspects that are specific to the addon and Svelte CSF. We recommend that you familiarize yourself with Storybook's core concepts at <https://storybook.js.org/docs>.
+> This documentation only covers Storybook features specific to this addon. We recommend that you familiarize yourself with Storybook's core concepts at <https://storybook.js.org/docs>.
 
-The [`examples`](./examples/) directory contains examples describing each feature of the addon. The [`Button.stories.svelte` example](./examples/Button.stories.svelte) is a good one to get started with. [The Storybook with all the examples is published on Chromatic here](https://next--667492d3e52064f1d418ec95.chromatic.com).
+> [!NOTE]
+> Svelte CSF stories files must always have the `.stories.svelte` extension.
+
+- Official tutorial using `Svelte`. ( [link](https://storybook.js.org/tutorials/intro-to-storybook/svelte/en/get-started/) )
+- Getting started with `Sveltekit`. ( [link](https://storybook.js.org/docs/get-started/frameworks/sveltekit) )
+- Getting started with `Svelte`. ( [link](https://storybook.js.org/docs/get-started/frameworks/svelte-vite) )
+- A published storybook. ( [chromatic](https://next--667492d3e52064f1d418ec95.chromatic.com) / [src](./examples/) )
 
-Svelte CSF stories files must always have the `.stories.svelte` extension.
+- [Storybook for Svelte Part 1: Intro](https://youtu.be/GQLgq09-knM?t=2635)
+- [Storybook for Svelte Part 2: Docs](https://youtu.be/h0MHSpLRx_o?t=2957)
+- [Storybook for Svelte Part 3: Testing](https://youtu.be/P8jdPBKwq54?t=2167)
+
+- [Adding Storybook to sveltesociety.dev](https://www.youtube.com/live/3u-PXSbU5iA)
+- [Storybook is actually good now, with Jeppe Reinhold](https://youtu.be/TDTS74Bz6Eo)
 
 ### Defining the meta
 
@@ -119,7 +137,7 @@ If you need more customization of the story, like composing components or defini
 </Story>
 ```
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > This format completely ignores args, as they are not passed down to any of the child components defined. Even if your story has args and Controls, they won't have an effect. See the snippet-based formats below.
 
 #### Inline snippet

package/dist/compiler/plugins.js

@@ -35,8 +35,20 @@ export async function preTransformPlugin() {
                     ast: svelteAST,
                     filename: id,
                 });
+                // NOTE: Printing the AST again collapses the whitespace between nodes,
+                // which would also remove the newlines from the stories' source code snippets.
+                // So only print it when a codemod changed something.
+                if (transformedSvelteAST === svelteAST) {
+                    return {
+                        code,
+                        map: null,
+                        meta: {
+                            _storybook_csf_pre_transform: code,
+                        },
+                    };
+                }
                 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.d.ts

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

package/dist/compiler/plugins.test.js

@@ -0,0 +1,62 @@
+import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };
+import dedent from 'dedent';
+import { describe, it } from 'vitest';
+import { preTransformPlugin } from './plugins.js';
+async function runPreTransform(code) {
+    const plugin = await preTransformPlugin();
+    const { handler } = plugin.transform;
+    return handler.call({}, code, '/Button.stories.svelte');
+}
+describe(preTransformPlugin.name, () => {
+    it('keeps the original code when there is no legacy syntax', async ({ expect }) => {
+        const code = dedent(`
+      <script module>
+        import { defineMeta } from "${pkg.name}";
+        import Button from "./Button.svelte";
+
+        const { Story } = defineMeta({ component: Button });
+      </script>
+
+      <Story name="Custom template">
+        {#snippet template(args)}
+          <Button {...args}>First</Button>
+          <Button {...args}>Second</Button>
+        {/snippet}
+      </Story>
+    `);
+        const result = await runPreTransform(code);
+        expect(result.code).toBe(code);
+        expect(result.meta._storybook_csf_pre_transform).toBe(code);
+    });
+    it('transforms legacy syntax', 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" />
+    `);
+        const result = await runPreTransform(code);
+        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/compiler/pre-transform/index.d.ts

@@ -17,7 +17,15 @@ export interface State {
      * We store it to ensure there's no more than one - we will throw error if there's more.
      */
     unidentifiedTemplateComponent?: SvelteAST.Component;
+    /**
+     * Set when the stories file uses any legacy syntax that needs a codemod.
+     */
+    isLegacy?: boolean;
 }
+/**
+ * Transform the legacy syntax in a stories file to the current syntax.
+ * If the file has no legacy syntax, it returns the given AST unchanged.
+ */
 export declare function codemodLegacyNodes(params: Params): Promise<SvelteAST.Root>;
 interface ComponentIdentifierName {
     Meta?: string;

package/dist/compiler/pre-transform/index.js

@@ -6,6 +6,10 @@ import { transformLegacyStory } from './codemods/legacy-story.js';
 import { transformTemplateToSnippet } from './codemods/template-to-snippet.js';
 import { createASTScript } from '../../parser/ast.js';
 import { DuplicatedUnidentifiedTemplateError } from '../../utils/error/legacy-api/index.js';
+/**
+ * Transform the legacy syntax in a stories file to the current syntax.
+ * If the file has no legacy syntax, it returns the given AST unchanged.
+ */
 export async function codemodLegacyNodes(params) {
     const { walk } = await import('zimmerframe');
     const { ast, filename } = params;
@@ -46,6 +50,10 @@ export async function codemodLegacyNodes(params) {
             const { state } = context;
             if (node.source.value === pkg.name) {
                 state.componentIdentifierName = getComponentsIdentifiersNames(node.specifiers);
+                if (state.currentScript !== 'module' ||
+                    Object.keys(state.componentIdentifierName).length > 0) {
+                    state.isLegacy = true;
+                }
                 const transformed = transformImportDeclaration({ node, filename });
                 if (state.currentScript !== 'module') {
                     // NOTE: We store current node in AST walker state.
@@ -66,6 +74,7 @@ export async function codemodLegacyNodes(params) {
                 declaration.declarations[0].id.name === 'meta')) {
                 return;
             }
+            state.isLegacy = true;
             const transformed = transformExportMetaToDefineMeta(node);
             const { currentScript } = state;
             if (currentScript === 'instance') {
@@ -121,6 +130,9 @@ export async function codemodLegacyNodes(params) {
             }
         },
     });
+    if (!state.isLegacy) {
+        return ast;
+    }
     // Clean-up
     // TODO: To optimize it (stop walking on AST again)...
     // it might be possible to use `visit(path(-1))` for some cases in the previous AST walk,

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

@@ -253,4 +253,19 @@ describe(codemodLegacyNodes.name, () => {
       </script>"
     `);
     });
+    it('returns the same AST when there is no legacy syntax', async ({ expect }) => {
+        const code = dedent(`
+      <script module>
+        import { defineMeta } from "${pkg.name}";
+        import Button from "./Button.svelte";
+
+        const { Story } = defineMeta({ component: Button });
+      </script>
+
+      <Story name="Default" />
+    `);
+        const ast = getSvelteAST({ code });
+        const transformed = await codemodLegacyNodes({ ast });
+        expect(transformed).toBe(ast);
+    });
 });

package/dist/indexer/parser.js

@@ -10,14 +10,31 @@ import { DefaultOrNamespaceImportUsedError, GetDefineMetaFirstArgumentError, Mis
 import { NoDestructuredDefineMetaCallError } from '../utils/error/parser/analyse/define-meta.js';
 import { StoryTemplateAndChildrenError, StoryTemplateAndAsChildError, StoryAsChildWithoutChildrenError, } from '../utils/error/parser/analyse/story.js';
 import { extractStoryTemplateSnippetBlock } from '../parser/extract/svelte/story/template.js';
+/**
+ * The indexer runs once per `*.stories.svelte` file, while the Svelte config is per-project state.
+ * Cache the lookup so the config-file scan runs once per process instead of once per story file —
+ * without this, projects without a `svelte.config.js` get one
+ * "no Svelte config found ... using default configuration" log line per story file.
+ * Trade-off: adding or changing a svelte.config file while `storybook dev` runs requires a restart to be picked up.
+ */
+let svelteConfigPromise;
+async function loadCachedSvelteConfig() {
+    svelteConfigPromise ??= import('@sveltejs/vite-plugin-svelte')
+        .then(({ loadSvelteConfig }) => loadSvelteConfig())
+        .catch((error) => {
+        // Don't cache failures (e.g. a broken svelte.config.js), so the next indexing run retries.
+        svelteConfigPromise = undefined;
+        throw error;
+    });
+    return svelteConfigPromise;
+}
 export async function parseForIndexer(filename, options) {
-    let [code, { walk }, { loadSvelteConfig }] = await Promise.all([
+    let [code, { walk }, svelteConfig] = await Promise.all([
         fs.readFile(filename, { encoding: 'utf8' }),
         import('zimmerframe'),
-        import('@sveltejs/vite-plugin-svelte'),
+        loadCachedSvelteConfig(),
     ]);
     const { legacyTemplate } = options;
-    const svelteConfig = await loadSvelteConfig();
     if (svelteConfig?.preprocess) {
         code = (await preprocess(code, svelteConfig.preprocess, {
             filename: filename,

package/dist/indexer/parser.test.d.ts

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

package/dist/indexer/parser.test.js

@@ -0,0 +1,29 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { beforeEach, describe, it, vi } from 'vitest';
+const loadSvelteConfig = vi.hoisted(() => vi.fn(async () => undefined));
+vi.mock('@sveltejs/vite-plugin-svelte', () => ({ loadSvelteConfig }));
+const currentDir = dirname(fileURLToPath(import.meta.url));
+const storyFile = resolve(currentDir, '../../examples/Button.stories.svelte');
+describe('parseForIndexer', () => {
+    beforeEach(() => {
+        // The config cache lives in module scope — reset modules so each test starts cold
+        vi.resetModules();
+        loadSvelteConfig.mockClear();
+    });
+    it('loads the Svelte config once across multiple story files', async ({ expect }) => {
+        const { parseForIndexer } = await import('./parser.js');
+        const files = [storyFile, resolve(currentDir, '../../examples/ExportName.stories.svelte')];
+        for (const file of files) {
+            await parseForIndexer(file, { legacyTemplate: false });
+        }
+        expect(loadSvelteConfig).toHaveBeenCalledTimes(1);
+    });
+    it('retries the Svelte config lookup after a failure instead of caching it', async ({ expect, }) => {
+        const { parseForIndexer } = await import('./parser.js');
+        loadSvelteConfig.mockRejectedValueOnce(new Error('broken config'));
+        await expect(parseForIndexer(storyFile, { legacyTemplate: false })).rejects.toThrow('broken config');
+        await expect(parseForIndexer(storyFile, { legacyTemplate: false })).resolves.toBeDefined();
+        expect(loadSvelteConfig).toHaveBeenCalledTimes(2);
+    });
+});

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

@@ -123,10 +123,14 @@ export function getStoryContentRawCode(params) {
         nodes: svelte,
         filename,
     });
-    // NOTE: It should never be `undefined` in this particular case, otherwise Storybook wouldn't know what to render.
-    return dedent(`<${defineMetaComponentValue?.name} {...args}>
+    // If there's no component defined in defineMeta, return the raw code directly
+    // This handles static templates without a component wrapper
+    if (!defineMetaComponentValue) {
+        return rawCode;
+    }
+    return dedent(`<${defineMetaComponentValue.name} {...args}>
     ${rawCode}
-  </${defineMetaComponentValue?.name}>`);
+  </${defineMetaComponentValue.name}>`);
 }
 /**
  * Extract from the original code a string slice with the body of the svelte's snippet block.

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

@@ -259,5 +259,34 @@ describe(getStoryContentRawCode.name, () => {
             });
             expect(rawSource).toBe(`<SomeComponent wins="inner-template" {...args} />`);
         });
+        it('works when a static children content provided without component in defineMeta', async ({ expect, }) => {
+            const code = `
+        <script module>
+          import { defineMeta } from "@storybook/addon-svelte-csf";
+
+          const { Story } = defineMeta({
+            title: 'Templating',
+          });
+        </script>
+
+        <Story name="Static template">
+          <h2 data-testid="heading">Static template</h2>
+          <p>This story is static</p>
+        </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 `<h2 data-testid="heading">Static template</h2>
+          <p>This story is static</p>`);
+        });
     });
 });

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/dist/runtime/LegacyStory.svelte

@@ -12,9 +12,13 @@ Vite pre-transform hook does codemod where this component gets transformed into
 <script lang="ts">
   import type { Slots, StoryProps } from '../legacy-types.d.ts';
 
-  type $$Props = StoryProps;
+  // Props use `$props()` so this file compiles when `compilerOptions.runes` is `true`.
+  // It still renders a `<slot>`, because the typing of legacy `let:args` and `let:context` comes from `$$Slots`.
   type $$Slots = Slots;
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const _props: StoryProps = $props();
+
   let args!: $$Slots['default']['args'];
   let context!: $$Slots['default']['context'];
 </script>

package/dist/runtime/LegacyStory.svelte.d.ts

@@ -3,7 +3,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -28,6 +28,6 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  */
 declare const LegacyStory: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<StoryProps, Slots>, {
     [evt: string]: CustomEvent<any>;
-}, Slots, {}, string>;
+}, Slots, {}, "">;
 type LegacyStory = InstanceType<typeof LegacyStory>;
 export default LegacyStory;

package/dist/runtime/LegacyTemplate.svelte

@@ -11,13 +11,13 @@ Vite pre-transform hook does codemod where this component gets transformed into
 <script lang="ts">
   import type { Slots, TemplateProps } from '../legacy-types.d.ts';
 
-  export let id: string = 'default';
-  // silents the Svelte warning about 'id' being unused. It's only here for typing purposes.
-  const silentWarningAboutId = id;
-
-  type $$Props = TemplateProps;
+  // Props use `$props()` so this file compiles when `compilerOptions.runes` is `true`.
+  // It still renders a `<slot>`, because the typing of legacy `let:args` and `let:context` comes from `$$Slots`.
   type $$Slots = Slots;
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const _props: TemplateProps = $props();
+
   let args!: $$Slots['default']['args'];
   let context!: $$Slots['default']['context'];
 </script>

package/dist/runtime/LegacyTemplate.svelte.d.ts

@@ -28,6 +28,6 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  */
 declare const LegacyTemplate: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<TemplateProps, Slots>, {
     [evt: string]: CustomEvent<any>;
-}, Slots, {}, string>;
+}, Slots, {}, "">;
 type LegacyTemplate = InstanceType<typeof LegacyTemplate>;
 export default LegacyTemplate;

package/dist/runtime/emit-code.js

@@ -46,8 +46,17 @@ const skipSourceRender = (context) => {
     return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 };
 export const generateCodeToEmit = ({ code, args }) => {
+    // check if children is used in the template (e.g., {args.children})
+    // if so, we should exclude it from the props to avoid it appearing twice
+    const childrenUsedInTemplate = /\bargs\??\.children\b/.test(code);
     const allPropsArray = Object.entries(args ?? {})
-        .map(([argKey, argValue]) => argsToProps(argKey, argValue))
+        .map(([argKey, argValue]) => {
+        // skip children if it's used in the template content (slot)
+        if (childrenUsedInTemplate && argKey === 'children') {
+            return null;
+        }
+        return argsToProps(argKey, argValue);
+    })
         .filter((p) => p);
     let allPropsString = allPropsArray.join(' ');
     // make the props multiline if the string is longer than 50 chars
@@ -58,6 +67,13 @@ export const generateCodeToEmit = ({ code, args }) => {
     }
     let codeToEmit = code
         .replaceAll('{...args}', allPropsString)
+        // replace text expressions that reference a string arg with the plain text,
+        // eg. <Button>{args.children}</Button> => <Button>Click me</Button>
+        // attribute values like prop={args.something} are skipped
+        .replace(/(?<!=)\{\s*(args(?:[\w\d_$.?[\]"'])+)\s*\}/g, (match, argPath) => {
+        const value = get({ args }, argPath.replaceAll('?', ''));
+        return isPlainText(value) ? value : match;
+    })
         // replace single arg references with their actual value,
         // eg. myProp={args.something} => myProp={"actual"}
         // or <h1>{args.something}</h1> => <h1>"actual"</h1>
@@ -68,6 +84,11 @@ export const generateCodeToEmit = ({ code, args }) => {
     });
     return codeToEmit;
 };
+/**
+ * A string can be shown as plain text if it has content and
+ * no characters that Svelte would read as markup, an expression or an entity
+ */
+const isPlainText = (value) => typeof value === 'string' && value.trim() !== '' && !/[{}<>"\\&]/.test(value);
 const getFunctionName = (fn) => {
     const name = fn.getMockName?.() ?? fn.name;
     if (name && name !== 'spy') {

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

@@ -130,12 +130,12 @@ describe('Emit Code', () => {
         ternaryProp={true ? "yup" : "nope"}
       >
         {args}
-        {"some text"}
-        {"optional text"}
+        some text
+        optional text
         {{ "nested": "deep" }}
         {{ "nested": "deep" }}
-        {"deep"}
-        {"second"}
+        deep
+        second
         {someUnnamedFn}
         {namedFunc}
         {vi.fn()}
@@ -146,4 +146,111 @@ describe('Emit Code', () => {
       </MyComponent>"
     `);
     });
+    it('should exclude children from props when used in template and unwrap string literals', () => {
+        expect(generateCodeToEmit({
+            code: '<Button {...args}>{args.children}</Button>',
+            args: {
+                onclick: 'onclick',
+                primary: true,
+                children: 'Click me',
+            },
+        })).toMatchInlineSnapshot(`"<Button onclick="onclick" primary>Click me</Button>"`);
+    });
+    it('should exclude children from props when children is used in slot', () => {
+        expect(generateCodeToEmit({
+            code: '<Button {...args}>{args.children}</Button>',
+            args: {
+                onclick: 'onclick',
+                primary: true,
+                size: 'large',
+                children: 'Button text',
+            },
+        })).toMatchInlineSnapshot(`"<Button onclick="onclick" primary size="large">Button text</Button>"`);
+    });
+    it('should handle children when not used in template', () => {
+        expect(generateCodeToEmit({
+            code: '<Button {...args} />',
+            args: {
+                onclick: 'onclick',
+                children: 'Click me',
+            },
+        })).toMatchInlineSnapshot(`"<Button onclick="onclick" children="Click me" />"`);
+    });
+    it('should unwrap string literals in slot content', () => {
+        expect(generateCodeToEmit({
+            code: '<Component>{args.text}</Component>',
+            args: {
+                text: 'Hello World',
+            },
+        })).toMatchInlineSnapshot(`"<Component>Hello World</Component>"`);
+    });
+    it('should unwrap multiple string literals in slot content', () => {
+        expect(generateCodeToEmit({
+            code: '<div><p>{args.first}</p><p>{args.second}</p></div>',
+            args: {
+                first: 'First text',
+                second: 'Second text',
+            },
+        })).toMatchInlineSnapshot(`"<div><p>First text</p><p>Second text</p></div>"`);
+    });
+    it('should unwrap multiple string args in the same element', () => {
+        expect(generateCodeToEmit({
+            code: '<p>Hello {args.first} and {args.second}</p>',
+            args: {
+                first: 'x',
+                second: 'y',
+            },
+        })).toMatchInlineSnapshot(`"<p>Hello x and y</p>"`);
+    });
+    it('should keep the whitespace around unwrapped string args', () => {
+        expect(generateCodeToEmit({
+            code: dedent `<Button>
+          {args.label}
+        </Button>`,
+            args: {
+                label: 'Hi',
+            },
+        })).toMatchInlineSnapshot(`
+      "<Button>
+        Hi
+      </Button>"
+    `);
+    });
+    it('should not unwrap strings that Svelte would read as markup or expressions', () => {
+        expect(generateCodeToEmit({
+            code: dedent `<p>{args.markup}</p>
+          <p>{args.braces}</p>
+          <p>{args.quotes}</p>
+          <p>{args.entity}</p>`,
+            args: {
+                markup: '<b>bold</b>',
+                braces: 'a {b} c',
+                quotes: 'say "hi"',
+                entity: 'a &amp; b',
+            },
+        })).toMatchInlineSnapshot(`
+      "<p>{"<b>bold</b>"}</p>
+      <p>{"a {b} c"}</p>
+      <p>{"say \\"hi\\""}</p>
+      <p>{"a &amp; b"}</p>"
+    `);
+    });
+    it('should not unwrap non-string args or attribute values', () => {
+        expect(generateCodeToEmit({
+            code: '<Button label={args.label}>{args.count}</Button>',
+            args: {
+                label: 'Hi',
+                count: 42,
+            },
+        })).toMatchInlineSnapshot(`"<Button label={"Hi"}>{42}</Button>"`);
+    });
+    it('should exclude children from props when used with optional chaining', () => {
+        expect(generateCodeToEmit({
+            code: '<Button {...args}>{args?.children}</Button>',
+            args: {
+                primary: true,
+                children: 'Click me',
+            },
+        })).toMatchInlineSnapshot(`"<Button primary>Click me</Button>"`);
+    });
 });

package/dist/types.d.ts

@@ -1,7 +1,9 @@
 import type { ComponentAnnotations as BaseComponentAnnotations, StoryAnnotations as BaseStoryAnnotations, StoryContext as BaseStoryContext, WebRenderer } from 'storybook/internal/types';
 import type { Component, ComponentProps } from 'svelte';
 export type Cmp = Component<any>;
-export type ComponentAnnotations<TCmp extends Cmp, TArgs extends Record<string, any> = Record<string, any>> = BaseComponentAnnotations<SvelteRenderer<TCmp>, TArgs>;
+export type ComponentAnnotations<TCmp extends Cmp, TArgs extends Record<string, any> = Record<string, any>> = Omit<BaseComponentAnnotations<SvelteRenderer<TCmp>, TArgs>, 'subcomponents'> & {
+    subcomponents?: Record<string, Cmp>;
+};
 export interface SvelteRenderer<TCmp extends Cmp> extends WebRenderer {
     component: TCmp;
     storyResult: SvelteStoryResult<TCmp>;

package/package.json

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