From 3eb65af3c5c03b38404c5b6bb1eba2660ab821be Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 16 Oct 2024 22:12:56 +0200
Subject: [PATCH 1/8] add svelte 5 story templates to Svelte renderer

---
 .../cli/svelte-5-js/Button.stories.svelte     | 31 ++++++++
 .../template/cli/svelte-5-js/Button.svelte    | 26 +++++++
 .../cli/svelte-5-js/Header.stories.svelte     | 26 +++++++
 .../template/cli/svelte-5-js/Header.svelte    | 47 +++++++++++++
 .../cli/svelte-5-js/Page.stories.svelte       | 30 ++++++++
 .../template/cli/svelte-5-js/Page.svelte      | 70 +++++++++++++++++++
 .../cli/svelte-5-ts-3-8/Button.stories.svelte | 31 ++++++++
 .../cli/svelte-5-ts-3-8/Button.svelte         | 29 ++++++++
 .../cli/svelte-5-ts-3-8/Header.stories.svelte | 26 +++++++
 .../cli/svelte-5-ts-3-8/Header.svelte         | 45 ++++++++++++
 .../cli/svelte-5-ts-3-8/Page.stories.svelte   | 30 ++++++++
 .../template/cli/svelte-5-ts-3-8/Page.svelte  | 70 +++++++++++++++++++
 .../cli/svelte-5-ts-4-9/Button.stories.svelte | 31 ++++++++
 .../cli/svelte-5-ts-4-9/Button.svelte         | 29 ++++++++
 .../cli/svelte-5-ts-4-9/Header.stories.svelte | 26 +++++++
 .../cli/svelte-5-ts-4-9/Header.svelte         | 45 ++++++++++++
 .../cli/svelte-5-ts-4-9/Page.stories.svelte   | 30 ++++++++
 .../template/cli/svelte-5-ts-4-9/Page.svelte  | 70 +++++++++++++++++++
 18 files changed, 692 insertions(+)
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-js/Button.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-js/Header.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-js/Header.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-js/Page.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-js/Page.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.stories.svelte
 create mode 100644 code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.svelte

diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte
new file mode 100644
index 000000000000..4c8c7cce632a
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte
@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      backgroundColor: { control: 'color' },
+      size: {
+        control: { type: 'select' },
+        options: ['small', 'medium', 'large'],
+      },
+    },
+    args: {
+      onClick: fn(),
+    }
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Button.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Button.svelte
new file mode 100644
index 000000000000..b2b820ea4971
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Button.svelte
@@ -0,0 +1,26 @@
+<script>
+  import './button.css';
+
+  /**
+   * @typedef {Object} Props
+   * @property {boolean} [primary] Is this the principal call to action on the page?
+   * @property {string} [backgroundColor] What background color to use
+   * @property {'small' | 'medium' | 'large'} [size] How large should the button be?
+   * @property {string} label Button contents
+   * @property {() => void} [onClick] The onclick event handler
+   */
+
+  /** @type {Props} */
+  const { primary = false, backgroundColor, size = 'medium', label, onClick } = $props();
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`].join(' ')}
+  class:storybook-button--primary={primary}
+  class:storybook-button--secondary={!primary}
+  style:background-color={backgroundColor}
+  onclick={onClick}
+>
+  {label}
+</button>
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Header.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Header.stories.svelte
new file mode 100644
index 000000000000..0130c115acf6
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Header.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Header from './Header.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+    args: {
+      onLogin: fn(),
+      onLogout: fn(),
+      onCreateAccount: fn(),
+    }
+  });
+</script>
+
+<Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Header.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Header.svelte
new file mode 100644
index 000000000000..dba3b7880f49
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Header.svelte
@@ -0,0 +1,47 @@
+<script>
+  import './header.css';
+  import Button from './Button.svelte';
+
+  /**
+   * @typedef {Object} Props
+   * @property {{name: string}} [user] The user object
+   * @property {() => void} [onLogin] The login event handler
+   * @property {() => void} [onLogout] The logout event handler
+   * @property {() => void} [onCreateAccount] The account creation event handler
+   */
+
+  /** @type {Props} */
+  const { user, onLogin, onLogout, onCreateAccount } = $props();
+</script>
+
+<header>
+  <div class="storybook-header">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
+        <Button size="small" onClick={onLogout} label="Log out" />
+      {:else}
+        <Button size="small" onClick={onLogin} label="Log in" />
+        <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+      {/if}
+    </div>
+  </div>
+</header>
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Page.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Page.stories.svelte
new file mode 100644
index 000000000000..aa7372c58ef4
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Page.stories.svelte
@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, waitFor, within } from '@storybook/test';
+  import Page from './Page.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+  });
+</script>
+
+<Story name="Logged In" play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  }}
+  />
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Page.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Page.svelte
new file mode 100644
index 000000000000..92a95c00c5c5
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Page.svelte
@@ -0,0 +1,70 @@
+<script>
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user = $state(null);
+</script>
+
+<article>
+  <Header
+    {user}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = null)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.stories.svelte
new file mode 100644
index 000000000000..4c8c7cce632a
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.stories.svelte
@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      backgroundColor: { control: 'color' },
+      size: {
+        control: { type: 'select' },
+        options: ['small', 'medium', 'large'],
+      },
+    },
+    args: {
+      onClick: fn(),
+    }
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.svelte
new file mode 100644
index 000000000000..b31f5bffe4a5
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import './button.css';
+
+  interface Props {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** The onclick event handler */
+    onClick?: () => void;
+  }
+  
+  const { primary = false, backgroundColor, size = 'medium', label, onClick }: Props = $props();
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`].join(' ')}
+  class:storybook-button--primary={primary}
+  class:storybook-button--secondary={!primary}
+  style:background-color={backgroundColor}
+  onclick={onClick}
+>
+  {label}
+</button>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.stories.svelte
new file mode 100644
index 000000000000..0130c115acf6
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Header from './Header.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+    args: {
+      onLogin: fn(),
+      onLogout: fn(),
+      onCreateAccount: fn(),
+    }
+  });
+</script>
+
+<Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.svelte
new file mode 100644
index 000000000000..14e890c79e98
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import './header.css';
+  import Button from './Button.svelte';
+
+  interface Props {
+    user?: { name: string };
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+  }
+
+  const { user, onLogin, onLogout, onCreateAccount }: Props = $props();
+</script>
+
+<header>
+  <div class="storybook-header">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
+        <Button size="small" onClick={onLogout} label="Log out" />
+      {:else}
+        <Button size="small" onClick={onLogin} label="Log in" />
+        <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+      {/if}
+    </div>
+  </div>
+</header>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.stories.svelte
new file mode 100644
index 000000000000..ed850d83718e
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.stories.svelte
@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, waitFor, within } from '@storybook/test';
+  import Page from './Page.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+  });
+</script>
+
+<Story name="Logged In" play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  }}
+/>
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.svelte
new file mode 100644
index 000000000000..c4c069a5a50b
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user = $state<{ name: string }>();
+</script>
+
+<article>
+  <Header
+    {user}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = undefined)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.stories.svelte
new file mode 100644
index 000000000000..4c8c7cce632a
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.stories.svelte
@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      backgroundColor: { control: 'color' },
+      size: {
+        control: { type: 'select' },
+        options: ['small', 'medium', 'large'],
+      },
+    },
+    args: {
+      onClick: fn(),
+    }
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.svelte
new file mode 100644
index 000000000000..b31f5bffe4a5
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import './button.css';
+
+  interface Props {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** The onclick event handler */
+    onClick?: () => void;
+  }
+  
+  const { primary = false, backgroundColor, size = 'medium', label, onClick }: Props = $props();
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`].join(' ')}
+  class:storybook-button--primary={primary}
+  class:storybook-button--secondary={!primary}
+  style:background-color={backgroundColor}
+  onclick={onClick}
+>
+  {label}
+</button>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.stories.svelte
new file mode 100644
index 000000000000..0130c115acf6
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Header from './Header.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+    args: {
+      onLogin: fn(),
+      onLogout: fn(),
+      onCreateAccount: fn(),
+    }
+  });
+</script>
+
+<Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.svelte
new file mode 100644
index 000000000000..14e890c79e98
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import './header.css';
+  import Button from './Button.svelte';
+
+  interface Props {
+    user?: { name: string };
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+  }
+
+  const { user, onLogin, onLogout, onCreateAccount }: Props = $props();
+</script>
+
+<header>
+  <div class="storybook-header">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
+        <Button size="small" onClick={onLogout} label="Log out" />
+      {:else}
+        <Button size="small" onClick={onLogin} label="Log in" />
+        <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+      {/if}
+    </div>
+  </div>
+</header>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.stories.svelte
new file mode 100644
index 000000000000..ed850d83718e
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.stories.svelte
@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, waitFor, within } from '@storybook/test';
+  import Page from './Page.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+  });
+</script>
+
+<Story name="Logged In" play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  }}
+/>
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.svelte
new file mode 100644
index 000000000000..c4c069a5a50b
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user = $state<{ name: string }>();
+</script>
+
+<article>
+  <Header
+    {user}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = undefined)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>

From c764db191540b86784edf76508718a8591981aca Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 16 Oct 2024 22:13:09 +0200
Subject: [PATCH 2/8] upgrade Svelte to latest prerelease

---
 code/package.json |  2 +-
 code/yarn.lock    | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/code/package.json b/code/package.json
index bd2b064fce56..6f49f25d7ead 100644
--- a/code/package.json
+++ b/code/package.json
@@ -215,7 +215,7 @@
     "serve-static": "^1.14.1",
     "slash": "^5.0.0",
     "storybook": "workspace:^",
-    "svelte": "^5.0.0-next.65",
+    "svelte": "^5.0.0-next.268",
     "ts-dedent": "^2.0.0",
     "typescript": "^5.4.3",
     "util": "^0.12.4",
diff --git a/code/yarn.lock b/code/yarn.lock
index 79822b6950b8..e5e350d27780 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6925,7 +6925,7 @@ __metadata:
     serve-static: "npm:^1.14.1"
     slash: "npm:^5.0.0"
     storybook: "workspace:^"
-    svelte: "npm:^5.0.0-next.65"
+    svelte: "npm:^5.0.0-next.268"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.4.3"
     util: "npm:^0.12.4"
@@ -9926,6 +9926,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:^5.3.1":
+  version: 5.3.2
+  resolution: "aria-query@npm:5.3.2"
+  checksum: 10c0/003c7e3e2cff5540bf7a7893775fc614de82b0c5dde8ae823d47b7a28a9d4da1f7ed85f340bdb93d5649caa927755f0e31ecc7ab63edfdfc00c8ef07e505e03e
+  languageName: node
+  linkType: hard
+
 "arr-diff@npm:^4.0.0":
   version: 4.0.0
   resolution: "arr-diff@npm:4.0.0"
@@ -10337,6 +10344,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axobject-query@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "axobject-query@npm:4.1.0"
+  checksum: 10c0/c470e4f95008f232eadd755b018cb55f16c03ccf39c027b941cd8820ac6b68707ce5d7368a46756db4256fbc91bb4ead368f84f7fb034b2b7932f082f6dc0775
+  languageName: node
+  linkType: hard
+
 "babel-core@npm:^7.0.0-bridge.0":
   version: 7.0.0-bridge.0
   resolution: "babel-core@npm:7.0.0-bridge.0"
@@ -14727,6 +14741,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esrap@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "esrap@npm:1.2.2"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
+    "@types/estree": "npm:^1.0.1"
+  checksum: 10c0/a3a0b665c034f604a162b910346309c64c42635c5d2e8704a27afcdf4e6d4c529e05475d1875d6b3e0d550f8470986116414097230ab3a7c565b85091ca5e177
+  languageName: node
+  linkType: hard
+
 "esrecurse@npm:^4.3.0":
   version: 4.3.0
   resolution: "esrecurse@npm:4.3.0"
@@ -26752,6 +26776,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte@npm:^5.0.0-next.268":
+  version: 5.0.0-next.268
+  resolution: "svelte@npm:5.0.0-next.268"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.3.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+    "@types/estree": "npm:^1.0.5"
+    acorn: "npm:^8.12.1"
+    acorn-typescript: "npm:^1.4.13"
+    aria-query: "npm:^5.3.1"
+    axobject-query: "npm:^4.1.0"
+    esm-env: "npm:^1.0.0"
+    esrap: "npm:^1.2.2"
+    is-reference: "npm:^3.0.2"
+    locate-character: "npm:^3.0.0"
+    magic-string: "npm:^0.30.11"
+    zimmerframe: "npm:^1.1.2"
+  checksum: 10c0/74a954cffe2a70259a1d1d2a834e9615d3f393429ac8cc1e15bfdc66b8bbe5dc449a8289370631b29023bca51aa451d1906f570b3761de4c235ea731913ee1b2
+  languageName: node
+  linkType: hard
+
 "svelte@npm:^5.0.0-next.65":
   version: 5.0.0-next.65
   resolution: "svelte@npm:5.0.0-next.65"

From 0861679101ff64f5c7075f78c2c435ba5346d34c Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Thu, 17 Oct 2024 12:17:24 +0800
Subject: [PATCH 3/8] CLI: Use Svelte 5 CSF template files

---
 code/core/src/cli/helpers.ts                  | 33 +++++++++++++++++--
 .../src/generators/SVELTE/index.ts            | 32 ++++++------------
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts
index 38cf6151294f..4be9a584b47a 100644
--- a/code/core/src/cli/helpers.ts
+++ b/code/core/src/cli/helpers.ts
@@ -13,7 +13,7 @@ import type { SupportedFrameworks, SupportedRenderers } from '@storybook/core/ty
 
 import { findUpSync } from 'find-up';
 import picocolors from 'picocolors';
-import { coerce, satisfies } from 'semver';
+import { coerce, major, satisfies } from 'semver';
 import stripJsonComments from 'strip-json-comments';
 import invariant from 'tiny-invariant';
 
@@ -173,6 +173,22 @@ export const frameworkToDefaultBuilder: Record<
   'vue3-rsbuild': CommunityBuilder.Rsbuild,
 };
 
+export async function getVersionSafe(packageManager: JsPackageManager, packageName: string) {
+  try {
+    const version = await packageManager.getInstalledVersion(packageName);
+    if (version) {
+      return coerce(version);
+    } else {
+      const deps = await packageManager.getAllDependencies();
+      const versionSpecifier = deps[packageName];
+      return coerce(versionSpecifier);
+    }
+  } catch (err) {
+    // fall back to no version
+  }
+  return undefined;
+}
+
 export async function copyTemplateFiles({
   packageManager,
   renderer,
@@ -180,13 +196,26 @@ export async function copyTemplateFiles({
   destination,
   commonAssetsDir,
 }: CopyTemplateFilesOptions) {
-  const languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
+  let languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
     // keeping this for backwards compatibility in case community packages are using it
     typescript: 'ts',
     [SupportedLanguage.JAVASCRIPT]: 'js',
     [SupportedLanguage.TYPESCRIPT_3_8]: 'ts-3-8',
     [SupportedLanguage.TYPESCRIPT_4_9]: 'ts-4-9',
   };
+  // FIXME: remove after 9.0
+  if (renderer === 'svelte') {
+    const svelteVersion = await getVersionSafe(packageManager, 'svelte');
+    if (svelteVersion && major(svelteVersion) >= 5) {
+      languageFolderMapping = {
+        // keeping this for backwards compatibility in case community packages are using it
+        typescript: 'ts',
+        [SupportedLanguage.JAVASCRIPT]: 'svelte-5-js',
+        [SupportedLanguage.TYPESCRIPT_3_8]: 'svelte-5-ts-3-8',
+        [SupportedLanguage.TYPESCRIPT_4_9]: 'svelte-5-ts-4-9',
+      };
+    }
+  }
   const templatePath = async () => {
     const baseDir = await getRendererDir(packageManager, renderer);
     const assetsDir = join(baseDir, 'template', 'cli');
diff --git a/code/lib/create-storybook/src/generators/SVELTE/index.ts b/code/lib/create-storybook/src/generators/SVELTE/index.ts
index 21661f5b02b9..9d00099437fb 100644
--- a/code/lib/create-storybook/src/generators/SVELTE/index.ts
+++ b/code/lib/create-storybook/src/generators/SVELTE/index.ts
@@ -1,33 +1,21 @@
+import { getVersionSafe } from 'storybook/internal/cli';
 import type { JsPackageManager } from 'storybook/internal/common';
 
-import { coerce, major } from 'semver';
+import { major } from 'semver';
 
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
-const versionHelper = (svelteMajor?: number) => {
-  if (svelteMajor === 4) {
-    return '4';
-  }
-  // TODO: update when addon-svelte-csf v5 is released
-  if (svelteMajor === 5) {
-    return '^5.0.0-next.0';
-  }
-  return '';
-};
-
 export const getAddonSvelteCsfVersion = async (packageManager: JsPackageManager) => {
-  const svelteVersion = await packageManager.getInstalledVersion('svelte');
+  const svelteVersion = await getVersionSafe(packageManager, 'svelte');
   try {
-    if (svelteVersion) {
-      return versionHelper(major(coerce(svelteVersion) || ''));
-    } else {
-      const deps = await packageManager.getAllDependencies();
-      const svelteSpecifier = deps['svelte'];
-      const coerced = coerce(svelteSpecifier);
-      if (coerced?.version) {
-        return versionHelper(major(coerced.version));
-      }
+    const svelteMajor = major(svelteVersion ?? '');
+    if (svelteMajor === 4) {
+      return '4';
+    }
+    // TODO: update when addon-svelte-csf v5 is released
+    if (svelteMajor === 5) {
+      return '^5.0.0-next.0';
     }
   } catch {
     // fallback to latest version

From 8b5972fc186a91deab666fd00a27d0aefc0a163c Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Thu, 17 Oct 2024 12:33:31 +0800
Subject: [PATCH 4/8] Fix linting

---
 code/lib/blocks/src/blocks/Canvas.stories.tsx             | 5 +----
 code/lib/blocks/src/components/ArgsTable/ArgControl.tsx   | 6 +-----
 code/lib/blocks/src/examples/CanvasParameters.stories.tsx | 5 +----
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/code/lib/blocks/src/blocks/Canvas.stories.tsx b/code/lib/blocks/src/blocks/Canvas.stories.tsx
index bdedf650e534..987e28678a71 100644
--- a/code/lib/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/lib/blocks/src/blocks/Canvas.stories.tsx
@@ -93,10 +93,7 @@ export const PropAdditionalActions: Story = {
       {
         title: 'Go to documentation',
         onClick: () => {
-          window.open(
-            'https://storybook.js.org/docs/essentials/controls#annotation',
-            '_blank'
-          );
+          window.open('https://storybook.js.org/docs/essentials/controls#annotation', '_blank');
         },
       },
     ],
diff --git a/code/lib/blocks/src/components/ArgsTable/ArgControl.tsx b/code/lib/blocks/src/components/ArgsTable/ArgControl.tsx
index e90609eb51c2..064a115dd410 100644
--- a/code/lib/blocks/src/components/ArgsTable/ArgControl.tsx
+++ b/code/lib/blocks/src/components/ArgsTable/ArgControl.tsx
@@ -71,11 +71,7 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovere
   if (!control || control.disable) {
     const canBeSetup = control?.disable !== true && row?.type?.name !== 'function';
     return isHovered && canBeSetup ? (
-      <Link
-        href="https://storybook.js.org/docs/essentials/controls"
-        target="_blank"
-        withArrow
-      >
+      <Link href="https://storybook.js.org/docs/essentials/controls" target="_blank" withArrow>
         Setup controls
       </Link>
     ) : (
diff --git a/code/lib/blocks/src/examples/CanvasParameters.stories.tsx b/code/lib/blocks/src/examples/CanvasParameters.stories.tsx
index 6f0c3cb3484c..4d4433747494 100644
--- a/code/lib/blocks/src/examples/CanvasParameters.stories.tsx
+++ b/code/lib/blocks/src/examples/CanvasParameters.stories.tsx
@@ -30,10 +30,7 @@ export const AdditionalActions: Story = {
           {
             title: 'Go to documentation',
             onClick: () => {
-              window.open(
-                'https://storybook.js.org/docs/essentials/controls#annotation',
-                '_blank'
-              );
+              window.open('https://storybook.js.org/docs/essentials/controls#annotation', '_blank');
             },
           },
         ],

From f608e2240dfd11c6ef29c6b05adfa3533a920752 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Thu, 17 Oct 2024 13:03:07 +0800
Subject: [PATCH 5/8] Clean up helper and add tests

---
 code/core/src/cli/helpers.test.ts | 41 +++++++++++++++++++++++++++++++
 code/core/src/cli/helpers.ts      | 14 +++++++----
 2 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/code/core/src/cli/helpers.test.ts b/code/core/src/cli/helpers.test.ts
index 4615f0cfdd84..03e85ccc941d 100644
--- a/code/core/src/cli/helpers.test.ts
+++ b/code/core/src/cli/helpers.test.ts
@@ -75,6 +75,47 @@ describe('Helpers', () => {
     vi.clearAllMocks();
   });
 
+  describe('getVersionSafe', () => {
+    describe('installed', () => {
+      it.each([
+        ['3.0.0', '3.0.0'],
+        ['5.0.0-next.0', '5.0.0-next.0'],
+        [
+          '4.2.19::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-4.2.19.tgz',
+          '4.2.19',
+        ],
+      ])('svelte %s => %s', async (svelteVersion, expectedAddonSpecifier) => {
+        const packageManager = {
+          getInstalledVersion: async (pkg: string) =>
+            pkg === 'svelte' ? svelteVersion : undefined,
+          getAllDependencies: async () => ({ svelte: `^${svelteVersion}` }),
+        } as any as JsPackageManager;
+        await expect(helpers.getVersionSafe(packageManager, 'svelte')).resolves.toBe(
+          expectedAddonSpecifier
+        );
+      });
+    });
+
+    describe('uninstalled', () => {
+      it.each([
+        ['^3', '3.0.0'],
+        ['^5.0.0-next.0', '5.0.0-next.0'],
+        [
+          '4.2.19::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-4.2.19.tgz',
+          '4.2.19',
+        ],
+      ])('svelte %s => %s', async (svelteSpecifier, expectedAddonSpecifier) => {
+        const packageManager = {
+          getInstalledVersion: async (pkg: string) => undefined,
+          getAllDependencies: async () => ({ svelte: svelteSpecifier }),
+        } as any as JsPackageManager;
+        await expect(helpers.getVersionSafe(packageManager, 'svelte')).resolves.toBe(
+          expectedAddonSpecifier
+        );
+      });
+    });
+  });
+
   describe('copyTemplate', () => {
     it(`should copy template files when directory is present`, () => {
       const csfDirectory = /template-csf\/$/;
diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts
index 4be9a584b47a..47df29aba89e 100644
--- a/code/core/src/cli/helpers.ts
+++ b/code/core/src/cli/helpers.ts
@@ -173,16 +173,20 @@ export const frameworkToDefaultBuilder: Record<
   'vue3-rsbuild': CommunityBuilder.Rsbuild,
 };
 
+/**
+ * Return the installed version of a package, or the coerced version specifier from package.json if
+ * it's a dependency but not installed (e.g. in a fresh project)
+ */
 export async function getVersionSafe(packageManager: JsPackageManager, packageName: string) {
   try {
-    const version = await packageManager.getInstalledVersion(packageName);
-    if (version) {
-      return coerce(version);
-    } else {
+    let version = await packageManager.getInstalledVersion(packageName);
+    if (!version) {
       const deps = await packageManager.getAllDependencies();
       const versionSpecifier = deps[packageName];
-      return coerce(versionSpecifier);
+      version = versionSpecifier ?? '';
     }
+    const coerced = coerce(version, { includePrerelease: true });
+    return coerced?.toString();
   } catch (err) {
     // fall back to no version
   }

From f1b65b04efc039dbf03b52a5a2c6e626567825b7 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 17 Oct 2024 15:39:51 +0200
Subject: [PATCH 6/8] Fix Svelte type issues

---
 code/frameworks/svelte-vite/package.json      |   2 +-
 code/renderers/svelte/package.json            |   4 +-
 .../__test__/composeStories/Button.stories.ts |  34 +++---
 code/yarn.lock                                | 106 ++++++++----------
 4 files changed, 69 insertions(+), 77 deletions(-)

diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 0fa571b8cb0f..bc84fb925c87 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/node": "^22.0.0",
-    "svelte": "^5.0.0-next.65",
+    "svelte": "^5.0.0-next.268",
     "typescript": "^5.3.2",
     "vite": "^4.0.0"
   },
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index db0cd01b454b..d2fd3a847f7a 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -68,8 +68,8 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch",
     "expect-type": "^0.15.0",
-    "svelte": "^5.0.0-next.65",
-    "svelte-check": "^3.6.4",
+    "svelte": "^5.0.0-next.268",
+    "svelte-check": "^4.0.5",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
diff --git a/code/renderers/svelte/src/__test__/composeStories/Button.stories.ts b/code/renderers/svelte/src/__test__/composeStories/Button.stories.ts
index 94558abf996e..92ade46f29a8 100644
--- a/code/renderers/svelte/src/__test__/composeStories/Button.stories.ts
+++ b/code/renderers/svelte/src/__test__/composeStories/Button.stories.ts
@@ -53,7 +53,11 @@ const getCaptionForLocale = (locale: string) => {
   }
 };
 
-export const CSF2StoryWithLocale: CSF2Story<StoryWithLocaleComponent> = (args, { globals }) => ({
+// @ts-expect-error -- incompatibility with Svelte 5 types and CSF
+export const CSF2StoryWithLocale: CSF2Story<typeof StoryWithLocaleComponent> = (
+  args,
+  { globals }
+) => ({
   Component: StoryWithLocaleComponent,
   props: {
     ...args,
@@ -113,10 +117,11 @@ export const CSF3ButtonWithRender: StoryObj<CustomRenderComponent> = {
   }),
 };
 
-export const CSF3InputFieldFilled: StoryObj<InputFilledStoryComponent> = {
-  render: () => ({
-    Component: InputFilledStoryComponent,
-  }),
+export const CSF3InputFieldFilled: StoryObj<typeof InputFilledStoryComponent> = {
+  render: () =>
+    ({
+      Component: InputFilledStoryComponent,
+    }) as any,
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     await step('Step label', async () => {
@@ -128,10 +133,10 @@ export const CSF3InputFieldFilled: StoryObj<InputFilledStoryComponent> = {
 };
 
 const mockFn = fn();
-export const LoaderStory: StoryObj<LoaderStoryComponent> = {
+export const LoaderStory: StoryObj<typeof LoaderStoryComponent> = {
   args: {
     mockFn,
-  },
+  } as any,
   loaders: [
     async () => {
       mockFn.mockReturnValueOnce('mockFn return value');
@@ -140,13 +145,14 @@ export const LoaderStory: StoryObj<LoaderStoryComponent> = {
       };
     },
   ],
-  render: (args, { loaded }) => ({
-    Component: LoaderStoryComponent,
-    props: {
-      ...args,
-      loaded,
-    },
-  }),
+  render: (args, { loaded }) =>
+    ({
+      Component: LoaderStoryComponent,
+      props: {
+        ...args,
+        loaded,
+      },
+    }) as any,
   play: async () => {
     expect(mockFn).toHaveBeenCalledWith('render');
   },
diff --git a/code/yarn.lock b/code/yarn.lock
index ddc9e33ef86f..a81df9a4ec6e 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6998,7 +6998,7 @@ __metadata:
     "@sveltejs/vite-plugin-svelte": "npm:^3.0.1"
     "@types/node": "npm:^22.0.0"
     magic-string: "npm:^0.30.0"
-    svelte: "npm:^5.0.0-next.65"
+    svelte: "npm:^5.0.0-next.268"
     svelte-preprocess: "npm:^5.1.1"
     sveltedoc-parser: "npm:^4.2.1"
     ts-dedent: "npm:^2.2.0"
@@ -7041,8 +7041,8 @@ __metadata:
     "@sveltejs/vite-plugin-svelte": "npm:^3.0.2"
     "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch"
     expect-type: "npm:^0.15.0"
-    svelte: "npm:^5.0.0-next.65"
-    svelte-check: "npm:^3.6.4"
+    svelte: "npm:^5.0.0-next.268"
+    svelte-check: "npm:^4.0.5"
     sveltedoc-parser: "npm:^4.2.1"
     ts-dedent: "npm:^2.0.0"
     type-fest: "npm:~2.19"
@@ -9579,7 +9579,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
   version: 8.12.1
   resolution: "acorn@npm:8.12.1"
   bin:
@@ -10310,15 +10310,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axobject-query@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "axobject-query@npm:4.0.0"
-  dependencies:
-    dequal: "npm:^2.0.3"
-  checksum: 10c0/4d756b5c2ff099f1c7f99e55a5de9b2066cb2a13a3170185ff34bfec2d7bcab81eb820a4e7340d35c251341b61ebee6e705b7ce64db78224df1df5a4d68448fe
-  languageName: node
-  linkType: hard
-
 "axobject-query@npm:^4.1.0":
   version: 4.1.0
   resolution: "axobject-query@npm:4.1.0"
@@ -11556,7 +11547,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.4.1, chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -11575,6 +11566,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "chokidar@npm:4.0.1"
+  dependencies:
+    readdirp: "npm:^4.0.1"
+  checksum: 10c0/4bb7a3adc304059810bb6c420c43261a15bb44f610d77c35547addc84faa0374265c3adc67f25d06f363d9a4571962b02679268c40de07676d260de1986efea9
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^1.1.1":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -14673,16 +14673,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esrap@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "esrap@npm:1.2.1"
-  dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-    "@types/estree": "npm:^1.0.1"
-  checksum: 10c0/28d6e36adcf4342a844a938a736132269c33e9db6bbefc98c6af5ed06c14899afcc85391e7ce4824ce5066877fa10b0ed5c5007592cbc58012be95f13c66467f
-  languageName: node
-  linkType: hard
-
 "esrap@npm:^1.2.2":
   version: 1.2.2
   resolution: "esrap@npm:1.2.2"
@@ -15085,7 +15075,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:3.3.2, fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
+"fast-glob@npm:3.3.2, fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -15193,6 +15183,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fdir@npm:^6.2.0":
+  version: 6.4.2
+  resolution: "fdir@npm:6.4.2"
+  peerDependencies:
+    picomatch: ^3 || ^4
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: 10c0/34829886f34a3ca4170eca7c7180ec4de51a3abb4d380344063c0ae2e289b11d2ba8b724afee974598c83027fea363ff598caf2b51bc4e6b1e0d8b80cc530573
+  languageName: node
+  linkType: hard
+
 "fetch-retry@npm:^6.0.0":
   version: 6.0.0
   resolution: "fetch-retry@npm:6.0.0"
@@ -24069,6 +24071,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "readdirp@npm:4.0.2"
+  checksum: 10c0/a16ecd8ef3286dcd90648c3b103e3826db2b766cdb4a988752c43a83f683d01c7059158d623cbcd8bdfb39e65d302d285be2d208e7d9f34d022d912b929217dd
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -26577,23 +26586,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-check@npm:^3.6.4":
-  version: 3.6.4
-  resolution: "svelte-check@npm:3.6.4"
+"svelte-check@npm:^4.0.5":
+  version: 4.0.5
+  resolution: "svelte-check@npm:4.0.5"
   dependencies:
-    "@jridgewell/trace-mapping": "npm:^0.3.17"
-    chokidar: "npm:^3.4.1"
-    fast-glob: "npm:^3.2.7"
-    import-fresh: "npm:^3.2.1"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    chokidar: "npm:^4.0.1"
+    fdir: "npm:^6.2.0"
     picocolors: "npm:^1.0.0"
     sade: "npm:^1.7.4"
-    svelte-preprocess: "npm:^5.1.0"
-    typescript: "npm:^5.0.3"
   peerDependencies:
-    svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
+    svelte: ^4.0.0 || ^5.0.0-next.0
+    typescript: ">=5.0.0"
   bin:
     svelte-check: bin/svelte-check
-  checksum: 10c0/acbcc04c8c6ab7baee7ccf36ca134dcabe49fae103aa92661e7f80e01216623363fb794fec9a3f794f7003d55629373567ff485925dc33272f48cea63e7b2452
+  checksum: 10c0/192ee83f83169408b5f0b819440349f53e256db868d59fdd2422e831ef581891f5f257632dd3e632b12518ca307e1f99ff97455f56c19c3d2a5ee7be6391a181
   languageName: node
   linkType: hard
 
@@ -26635,7 +26642,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-preprocess@npm:^5.1.0, svelte-preprocess@npm:^5.1.1":
+"svelte-preprocess@npm:^5.1.1":
   version: 5.1.1
   resolution: "svelte-preprocess@npm:5.1.1"
   dependencies:
@@ -26723,27 +26730,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte@npm:^5.0.0-next.65":
-  version: 5.0.0-next.65
-  resolution: "svelte@npm:5.0.0-next.65"
-  dependencies:
-    "@ampproject/remapping": "npm:^2.2.1"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-    "@types/estree": "npm:^1.0.5"
-    acorn: "npm:^8.11.3"
-    acorn-typescript: "npm:^1.4.13"
-    aria-query: "npm:^5.3.0"
-    axobject-query: "npm:^4.0.0"
-    esm-env: "npm:^1.0.0"
-    esrap: "npm:^1.2.1"
-    is-reference: "npm:^3.0.2"
-    locate-character: "npm:^3.0.0"
-    magic-string: "npm:^0.30.5"
-    zimmerframe: "npm:^1.1.2"
-  checksum: 10c0/6a686847f887d2871eabce4888916cba6aec5bae924a76fd01f4098db1c0053d4e5d6434070d0a048eac75eaddd4fd40e3fae625a0253464f7baa6b0f147f209
-  languageName: node
-  linkType: hard
-
 "sveltedoc-parser@npm:^4.2.1":
   version: 4.3.1
   resolution: "sveltedoc-parser@npm:4.3.1"
@@ -27521,7 +27507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.0.3, typescript@npm:^5.3.2, typescript@npm:^5.4.3":
+"typescript@npm:^5.3.2, typescript@npm:^5.4.3":
   version: 5.4.3
   resolution: "typescript@npm:5.4.3"
   bin:
@@ -27551,7 +27537,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.0.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.3.2#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.4.3#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A^5.3.2#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.4.3#optional!builtin<compat/typescript>":
   version: 5.4.3
   resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin<compat/typescript>::version=5.4.3&hash=5adc0c"
   bin:

From 47541e8508b74e1d00ee329e9f49f963e96229c1 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 17 Oct 2024 20:41:49 +0200
Subject: [PATCH 7/8] fix Svelte vitests that broke when upgrading to most
 recent Svelte 5 prerelease

---
 ...-library-svelte-npm-4.1.0-34b7037bc0.patch | 97 -------------------
 code/renderers/svelte/package.json            |  2 +-
 .../portable-stories.test.ts.snap             | 74 ++++++++------
 code/renderers/svelte/vitest.config.ts        |  8 +-
 code/yarn.lock                                | 36 +++----
 5 files changed, 66 insertions(+), 151 deletions(-)
 delete mode 100644 code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch

diff --git a/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch b/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch
deleted file mode 100644
index 212dfcc7d0ea..000000000000
--- a/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch
+++ /dev/null
@@ -1,97 +0,0 @@
-diff --git a/package.json b/package.json
-index 195dac9ee7d42fdb76bb22dc37580fa0bffd4680..980ad42f41a06023f9f7e370fd382c9217c24be5 100644
---- a/package.json
-+++ b/package.json
-@@ -55,7 +55,7 @@
-     "contributors:generate": "all-contributors generate"
-   },
-   "peerDependencies": {
--    "svelte": "^3 || ^4"
-+    "svelte": "^3 || ^4 || ^5"
-   },
-   "dependencies": {
-     "@testing-library/dom": "^9.3.1"
-diff --git a/src/pure.js b/src/pure.js
-index 6d4943412448c9f310f007ca7dab9d04cef90d0d..d62f4aebeb1b23ccc3c3d82aadd67075c6507c0e 100644
---- a/src/pure.js
-+++ b/src/pure.js
-@@ -3,7 +3,7 @@ import {
-   getQueriesForElement,
-   prettyDOM
- } from '@testing-library/dom'
--import { tick } from 'svelte'
-+import { tick, mount, unmount } from 'svelte'
- 
- const containerCache = new Set()
- const componentCache = new Set()
-@@ -54,40 +54,34 @@ const render = (
-     return { props: options }
-   }
- 
--  let component = new ComponentConstructor({
-+  let component = mount(ComponentConstructor, {
-     target,
--    ...checkProps(options)
-+    ...checkProps(options),
-+    ondestroy: () => componentCache.delete(component)
-   })
- 
-   containerCache.add({ container, target, component })
-   componentCache.add(component)
- 
--  component.$$.on_destroy.push(() => {
--    componentCache.delete(component)
--  })
--
-   return {
-     container,
-     component,
-     debug: (el = container) => console.log(prettyDOM(el)),
-     rerender: (options) => {
--      if (componentCache.has(component)) component.$destroy()
-+      if (componentCache.has(component)) unmount(component)
- 
-       // eslint-disable-next-line no-new
-       component = new ComponentConstructor({
-         target,
--        ...checkProps(options)
-+        ...checkProps(options),
-+        ondestroy: () => componentCache.delete(component)
-       })
- 
-       containerCache.add({ container, target, component })
-       componentCache.add(component)
--
--      component.$$.on_destroy.push(() => {
--        componentCache.delete(component)
--      })
-     },
-     unmount: () => {
--      if (componentCache.has(component)) component.$destroy()
-+      if (componentCache.has(component)) unmount(component)
-     },
-     ...getQueriesForElement(container, queries)
-   }
-@@ -96,7 +90,7 @@ const render = (
- const cleanupAtContainer = (cached) => {
-   const { target, component } = cached
- 
--  if (componentCache.has(component)) component.$destroy()
-+  if (componentCache.has(component)) unmount(component)
- 
-   if (target.parentNode === document.body) {
-     document.body.removeChild(target)
-@@ -109,9 +103,10 @@ const cleanup = () => {
-   Array.from(containerCache.keys()).forEach(cleanupAtContainer)
- }
- 
--const act = async (fn) => {
--  if (fn) {
--    await fn()
-+const act = (fn) => {
-+  const value = fn && fn()
-+  if (value !== undefined && typeof value.then === 'function') {
-+    return value.then(() => tick())
-   }
-   return tick()
- }
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index d2fd3a847f7a..b5180a46c612 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -66,7 +66,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch",
+    "@testing-library/svelte": "^5.2.3",
     "expect-type": "^0.15.0",
     "svelte": "^5.0.0-next.268",
     "svelte-check": "^4.0.5",
diff --git a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
index 6042c29439c9..7141b7af1311 100644
--- a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
+++ b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
@@ -3,6 +3,8 @@
 exports[`Renders CSF2Secondary story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -11,9 +13,8 @@ exports[`Renders CSF2Secondary story 1`] = `
       label coming from story args! 
       <!---->
     </button>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -22,10 +23,15 @@ exports[`Renders CSF2Secondary story 1`] = `
 exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
+    <!---->
+    <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
     >
+      <!---->
       <button
         class="storybook-button storybook-button--medium storybook-button--secondary"
         style=""
@@ -34,14 +40,13 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
         foo 
         <!---->
       </button>
-      <!---->
+      
       <!---->
     </div>
-    <!---->
-    <!---->
-    <!---->
-    <!---->
-    <!---->
+    
+    
+    
+    
     
   </div>
 </body>
@@ -50,6 +55,8 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 exports[`Renders CSF3Button story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -58,9 +65,8 @@ exports[`Renders CSF3Button story 1`] = `
       foo 
       <!---->
     </button>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -69,6 +75,8 @@ exports[`Renders CSF3Button story 1`] = `
 exports[`Renders CSF3ButtonWithRender story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <div>
       <p
         data-testid="custom-render"
@@ -86,9 +94,8 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
       </button>
       <!---->
     </div>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -97,14 +104,15 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
 exports[`Renders CSF3InputFieldFilled story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <input
       data-testid="input"
       formaction="http://localhost:3000/"
       formmethod=""
     />
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -113,6 +121,8 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
 exports[`Renders CSF3Primary story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--large storybook-button--primary"
       style=""
@@ -121,9 +131,8 @@ exports[`Renders CSF3Primary story 1`] = `
       foo 
       <!---->
     </button>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -132,6 +141,8 @@ exports[`Renders CSF3Primary story 1`] = `
 exports[`Renders LoaderStory story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <div>
       <div
         data-testid="loaded-data"
@@ -145,9 +156,8 @@ exports[`Renders LoaderStory story 1`] = `
         mockFn return value
       </div>
     </div>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -156,10 +166,15 @@ exports[`Renders LoaderStory story 1`] = `
 exports[`Renders NewStory story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
+    <!---->
+    <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
     >
+      <!---->
       <button
         class="storybook-button storybook-button--large storybook-button--primary"
         style=""
@@ -168,14 +183,13 @@ exports[`Renders NewStory story 1`] = `
         foo 
         <!---->
       </button>
-      <!---->
+      
       <!---->
     </div>
-    <!---->
-    <!---->
-    <!---->
-    <!---->
-    <!---->
+    
+    
+    
+    
     
   </div>
 </body>
diff --git a/code/renderers/svelte/vitest.config.ts b/code/renderers/svelte/vitest.config.ts
index 58fc647e8f30..8d2664dc9021 100644
--- a/code/renderers/svelte/vitest.config.ts
+++ b/code/renderers/svelte/vitest.config.ts
@@ -5,9 +5,11 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default defineConfig(
   mergeConfig(vitestCommonConfig, {
     plugins: [
-      import('@sveltejs/vite-plugin-svelte').then(({ svelte, vitePreprocess }) =>
-        svelte({ preprocess: vitePreprocess() })
-      ),
+      import('@sveltejs/vite-plugin-svelte').then(({ svelte }) => svelte()),
+      import('@testing-library/svelte/vite').then(({ svelteTesting }) => svelteTesting()),
     ],
+    test: {
+      environment: 'happy-dom',
+    },
   })
 );
diff --git a/code/yarn.lock b/code/yarn.lock
index a81df9a4ec6e..61e3e672ce05 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -7039,7 +7039,7 @@ __metadata:
     "@storybook/preview-api": "workspace:^"
     "@storybook/theming": "workspace:^"
     "@sveltejs/vite-plugin-svelte": "npm:^3.0.2"
-    "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch"
+    "@testing-library/svelte": "npm:^5.2.3"
     expect-type: "npm:^0.15.0"
     svelte: "npm:^5.0.0-next.268"
     svelte-check: "npm:^4.0.5"
@@ -7320,7 +7320,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:10.4.0, @testing-library/dom@npm:^10.4.0":
+"@testing-library/dom@npm:10.4.0, @testing-library/dom@npm:^10.0.0, @testing-library/dom@npm:^10.4.0":
   version: 10.4.0
   resolution: "@testing-library/dom@npm:10.4.0"
   dependencies:
@@ -7336,7 +7336,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.1, @testing-library/dom@npm:^9.3.3":
+"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.3":
   version: 9.3.4
   resolution: "@testing-library/dom@npm:9.3.4"
   dependencies:
@@ -7401,25 +7401,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/svelte@npm:4.1.0":
-  version: 4.1.0
-  resolution: "@testing-library/svelte@npm:4.1.0"
+"@testing-library/svelte@npm:^5.2.3":
+  version: 5.2.3
+  resolution: "@testing-library/svelte@npm:5.2.3"
   dependencies:
-    "@testing-library/dom": "npm:^9.3.1"
+    "@testing-library/dom": "npm:^10.0.0"
   peerDependencies:
-    svelte: ^3 || ^4
-  checksum: 10c0/4335d8be01bd1e6475062be218577fa1d1b24e9dc97c33db523c5af6b044b97625f65a58bb5f73225064c5a2bf9ae9696948a2bcd2d82c1c25423014d635dce2
-  languageName: node
-  linkType: hard
-
-"@testing-library/svelte@patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch":
-  version: 4.1.0
-  resolution: "@testing-library/svelte@patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch::version=4.1.0&hash=490043"
-  dependencies:
-    "@testing-library/dom": "npm:^9.3.1"
-  peerDependencies:
-    svelte: ^3 || ^4
-  checksum: 10c0/95586fa05bb536fb538d01731a705121d71797a77ab7a8e1f255909e50dfe4fa09f3a6678a60b8a075332dd45940c0fa37d002d2f6c201400295fa3840c88821
+    svelte: ^3 || ^4 || ^5 || ^5.0.0-next.0
+    vite: "*"
+    vitest: "*"
+  peerDependenciesMeta:
+    vite:
+      optional: true
+    vitest:
+      optional: true
+  checksum: 10c0/a83d662ee7a0ce901598bd985b8d6afde72c7aa37f22447078bd38c7ec9df6b3fb15464d3f171726479a65f0e562732526686b6a33d6b2c7fd34edb6e7b706a9
   languageName: node
   linkType: hard
 

From d22b8e92510f04bd9895d9b0d18b5d1a2ab1118b Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 17 Oct 2024 20:42:45 +0200
Subject: [PATCH 8/8] fix types in vitest config

---
 code/renderers/svelte/vitest.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/renderers/svelte/vitest.config.ts b/code/renderers/svelte/vitest.config.ts
index 8d2664dc9021..f80ba91df63f 100644
--- a/code/renderers/svelte/vitest.config.ts
+++ b/code/renderers/svelte/vitest.config.ts
@@ -6,6 +6,7 @@ export default defineConfig(
   mergeConfig(vitestCommonConfig, {
     plugins: [
       import('@sveltejs/vite-plugin-svelte').then(({ svelte }) => svelte()),
+      // @ts-expect-error -- types don't match our TS module resolution setting
       import('@testing-library/svelte/vite').then(({ svelteTesting }) => svelteTesting()),
     ],
     test: {