Merge pull request #24889 from allozaur/allozaur/#24886

Svelte: Support v5 prereleases

.circleci/config.yml

@@ -614,30 +614,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 35
+          parallelism: 36
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 35
+          parallelism: 36
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 32
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 30
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 30
+          parallelism: 31
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

code/e2e-tests/addon-actions.spec.ts

@@ -3,9 +3,16 @@ import process from 'process';
 import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('addon-actions', () => {
   test('should trigger an action', async ({ page }) => {
+    // eslint-disable-next-line jest/no-disabled-tests
+    test.skip(
+      // eslint-disable-next-line jest/valid-title
+      templateName.includes('svelte') && templateName.includes('prerelease'),
+      'Svelte 5 prerelase does not support automatic actions with our current example components yet'
+    );
     await page.goto(storybookUrl);
     const sbPage = new SbPage(page);
     sbPage.waitUntilLoaded();

code/frameworks/svelte-vite/package.json

@@ -52,18 +52,18 @@
     "@storybook/svelte": "workspace:*",
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "magic-string": "^0.30.0",
-    "svelte-preprocess": "^5.0.4",
+    "svelte-preprocess": "^5.1.1",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
-    "svelte": "^4.0.0",
+    "svelte": "^5.0.0-next.16",
     "typescript": "^5.3.2",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.16",
     "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "engines": {

code/frameworks/svelte-webpack5/package.json

@@ -59,7 +59,7 @@
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "svelte": "^3.48.0 || ^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.16",
     "svelte-loader": "*"
   },
   "engines": {

code/frameworks/sveltekit/package.json

@@ -64,7 +64,7 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0",
+    "svelte": "^4.0.0 || ^5.0.0-next.16",
     "vite": "^4.0.0"
   },
   "engines": {

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/ButtonTypeScript.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * @component Button TypeScript
+   * @wrapper
+   */
+  import { global as globalThis } from '@storybook/global';
+  // @ts-ignore
+  const Button = globalThis.Components?.Button;
+
+  /**
+   * Rounds the button
+   */
+  export let primary: boolean = false;
+
+  /**
+   * Displays the count
+   */
+  export let count: number = 0;
+
+  /**
+   * Button text
+   * @slot
+   */
+  export let text: string = 'You clicked';
+
+  function handleClick(_event: MouseEvent) {
+    count += 1;
+  }
+</script>
+
+<h1>Button TypeScript</h1>
+
+<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
+
+<p>A little text to show this is a view.</p>
+<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Forms.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { enhance } from '$app/forms';
+</script>
+
+<form use:enhance>
+	<button>enhance</button>
+</form>

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Hrefs.svelte

@@ -0,0 +1,8 @@
+<ul>
+  <li><a href="/basic-href">Link to <code>/basic-href</code></a></li>
+  <li>
+    <a href="/deep/nested/link?with=true&multiple-params=200#and-an-id"
+      >Link to <code>/deep/nested/link?with=true&multiple-params=200#and-an-id</code></a
+    >
+  </li>
+</ul>

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Navigation.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { goto, invalidate, invalidateAll, afterNavigate } from '$app/navigation';
+
+	export let afterNavigateFn;
+
+	afterNavigate(afterNavigateFn);
+</script>
+
+<button
+	on:click={() => {
+		goto('/storybook-goto');
+	}}>goto</button
+>
+
+<button
+	on:click={() => {
+		invalidate('/storybook-invalidate');
+	}}>invalidate</button
+>
+
+<button
+	on:click={() => {
+		invalidateAll();
+	}}>invalidateAll</button
+>

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/Stores.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { page, navigating, updated, getStores } from '$app/stores';
+
+	let { navigating: navigatingStore, page: pageStore, updated: updatedStore } = getStores();
+
+	updated.check();
+</script>
+
+<p>Directly importing</p>
+<pre>{JSON.stringify($page, null, 2)}</pre>
+<pre>{JSON.stringify($navigating, null, 2)}</pre>
+<pre>{JSON.stringify($updated, null, 2)}</pre>
+
+<p>With getStores</p>
+<pre>{JSON.stringify($pageStore, null, 2)}</pre>
+<pre>{JSON.stringify($navigatingStore, null, 2)}</pre>
+<pre>{JSON.stringify($updatedStore, null, 2)}</pre>

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/forms.stories.js

@@ -0,0 +1,26 @@
+import { expect, fn, within } from '@storybook/test';
+import Forms from './Forms.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/forms',
+  component: Forms,
+  tags: ['autodocs'],
+};
+
+const enhance = fn();
+
+export const Enhance = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('enhance');
+    button.click();
+    expect(enhance).toHaveBeenCalled();
+  },
+  parameters: {
+    sveltekit_experimental: {
+      forms: {
+        enhance,
+      },
+    },
+  },
+};

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/hrefs.stories.js

@@ -0,0 +1,53 @@
+import { expect, fn, within } from '@storybook/test';
+import Hrefs from './Hrefs.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/hrefs',
+  component: Hrefs,
+  tags: ['autodocs'],
+};
+
+export const DefaultActions = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    // eslint-disable-next-line no-undef
+    const initialUrl = window.location.toString();
+
+    const basicHref = canvas.getByText('/basic-href');
+    basicHref.click();
+
+    const complexHref = canvas.getByText(
+      '/deep/nested/link?with=true&multiple-params=200#and-an-id'
+    );
+    complexHref.click();
+
+    // eslint-disable-next-line no-undef
+    const finalUrl = window.location.toString();
+    expect(finalUrl).toBe(initialUrl);
+  },
+};
+
+const basicStringMatch = fn();
+const noMatch = fn();
+const exactStringMatch = fn();
+const regexMatch = fn();
+
+export const Callbacks = {
+  parameters: {
+    sveltekit_experimental: {
+      hrefs: {
+        '/basic-href': basicStringMatch,
+        '/basic': noMatch,
+        '/deep/nested/link?with=true&multiple-params=200#and-an-id': exactStringMatch,
+        'nested/link\\?with': { callback: regexMatch, asRegex: true },
+      },
+    },
+  },
+  play: async (ctx) => {
+    await DefaultActions.play(ctx);
+    expect(basicStringMatch).toHaveBeenCalledTimes(1);
+    expect(noMatch).not.toHaveBeenCalled();
+    expect(exactStringMatch).toHaveBeenCalledTimes(1);
+    expect(regexMatch).toHaveBeenCalledTimes(1);
+  },
+};

code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/navigation.stories.js

@@ -0,0 +1,84 @@
+import { expect, fn, within } from '@storybook/test';
+import Navigation from './Navigation.svelte';
+
+export default {
+  title: 'stories/sveltekit/modules/navigation',
+  component: Navigation,
+  tags: ['autodocs'],
+};
+
+const goto = fn();
+
+export const Goto = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('goto');
+    button.click();
+    expect(goto).toHaveBeenCalledWith('/storybook-goto');
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        goto,
+      },
+    },
+  },
+};
+
+export const DefaultActions = {};
+
+const invalidate = fn();
+
+export const Invalidate = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('invalidate', { exact: true });
+    button.click();
+    expect(invalidate).toHaveBeenCalledWith('/storybook-invalidate');
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        invalidate,
+      },
+    },
+  },
+};
+
+const invalidateAll = fn();
+
+export const InvalidateAll = {
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText('invalidateAll');
+    button.click();
+    expect(invalidateAll).toHaveBeenCalledWith();
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        invalidateAll,
+      },
+    },
+  },
+};
+
+const afterNavigateFn = fn();
+
+export const AfterNavigate = {
+  async play() {
+    expect(afterNavigateFn).toHaveBeenCalledWith({ test: 'passed' });
+  },
+  args: {
+    afterNavigateFn,
+  },
+  parameters: {
+    sveltekit_experimental: {
+      navigation: {
+        afterNavigate: {
+          test: 'passed',
+        },
+      },
+    },
+  },
+};