Svelte: Support latest prerelease

.circleci/config.yml

@@ -8,7 +8,7 @@ parameters:
     default: "skipped"
 
 executors:
-  sb_node_16_classic:
+  sb_node_18_classic:
     parameters:
       class:
         description: The Resource class
@@ -21,7 +21,7 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
-  sb_node_16_browsers:
+  sb_node_18_browsers:
     parameters:
       class:
         description: The Resource class
@@ -99,7 +99,7 @@ jobs:
   pretty-docs:
     executor:
       class: medium
-      name: sb_node_16_classic
+      name: sb_node_18_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -125,7 +125,7 @@ jobs:
   build:
     executor:
       class: xlarge
-      name: sb_node_16_classic
+      name: sb_node_18_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -169,7 +169,7 @@ jobs:
   lint:
     executor:
       class: large
-      name: sb_node_16_classic
+      name: sb_node_18_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -185,7 +185,7 @@ jobs:
   check:
     executor:
       class: xlarge
-      name: sb_node_16_classic
+      name: sb_node_18_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -202,7 +202,7 @@ jobs:
       - report-workflow-on-failure
       - cancel-workflow-on-failure
   script-checks:
-    executor: sb_node_16_browsers
+    executor: sb_node_18_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -230,7 +230,7 @@ jobs:
   unit-tests:
     executor:
       class: xlarge
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -252,7 +252,7 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -263,7 +263,7 @@ jobs:
   chromatic-internal-storybooks:
     executor:
       class: medium+
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     environment:
       NODE_OPTIONS: --max_old_space_size=6144
     steps:
@@ -287,13 +287,16 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Enable Corepack
+          command: sudo corepack enable yarn
       - run:
           name: Creating Sandboxes
           command: yarn task --task sandbox --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) --no-link --start-from=never --junit
@@ -311,7 +314,7 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -331,7 +334,7 @@ jobs:
         type: integer
     executor:
       class: large
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -410,7 +413,7 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - checkout
@@ -493,7 +496,7 @@ jobs:
   test-empty-init:
     executor:
       class: medium
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parameters:
       packageManager:
         type: string

code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount } from 'svelte';
+  export let svelteVersion;
   export let decorator;
   export let decoratorProps = {};
   export let component;
@@ -14,7 +15,7 @@
     return instance || decoratorInstance;
   }
 
-  if (on) {
+  if (on && svelteVersion < 5) {
     // Attach svelte event listeners.
     Object.keys(on).forEach((eventName) => {
       onMount(() => getInstance().$on(eventName, on[eventName]));

code/renderers/svelte/src/components/PreviewRender.svelte

@@ -2,6 +2,7 @@
   import SlotDecorator from './SlotDecorator.svelte';
   import { dedent } from 'ts-dedent';
 
+  export let svelteVersion;
   export let name;
   export let title;
   export let storyFn;
@@ -55,4 +56,4 @@
   }
 </script>
 
-<SlotDecorator {Component} {props} on={{ ...eventsFromArgTypes, ...on }} />
+<SlotDecorator {svelteVersion} {Component} {props} on={{ ...eventsFromArgTypes, ...on }} />

code/renderers/svelte/src/components/SlotDecorator.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
 
+  export let svelteVersion;
   export let decorator = undefined;
   export let Component;
   export let props = {};
@@ -9,7 +10,7 @@
   let instance;
   let decoratorInstance;
 
-  if (on) {
+  if (on && svelteVersion < 5) {
     // Attach Svelte event listeners in Svelte v4
     // In Svelte v5 this is not possible anymore as instances are no longer classes with $on() properties, so it will be a no-op
     onMount(() => {

code/renderers/svelte/src/render.ts

@@ -77,6 +77,7 @@ function renderToCanvasV4(
     const mountedComponent = new PreviewRender({
       target: canvasElement,
       props: {
+        svelteVersion: 4,
         storyFn,
         storyContext,
         name,
@@ -148,6 +149,7 @@ function renderToCanvasV5(
       name,
       title,
       showError,
+      svelteVersion: 5,
     });
     const mountedComponent = svelte.mount(PreviewRender, {
       target: canvasElement,

code/renderers/svelte/template/cli/js/Page.stories.js

@@ -1,4 +1,4 @@
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect, waitFor } from '@storybook/test';
 
 import Page from './Page.svelte';
 
@@ -20,7 +20,7 @@ export const LoggedIn = {
     const loginButton = canvas.getByRole('button', { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
 
     const logoutButton = canvas.getByRole('button', { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();

code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect, waitFor } from '@storybook/test';
 
 import Page from './Page.svelte';
 
@@ -24,7 +24,7 @@ export const LoggedIn: Story = {
     const loginButton = canvas.getByRole('button', { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
 
     const logoutButton = canvas.getByRole('button', { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();

code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect, waitFor } from '@storybook/test';
 
 import Page from './Page.svelte';
 
@@ -24,7 +24,7 @@ export const LoggedIn: Story = {
     const loginButton = canvas.getByRole('button', { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
 
     const logoutButton = canvas.getByRole('button', { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();

code/renderers/svelte/template/stories/args.stories.js

@@ -23,7 +23,10 @@ export const RemountOnResetStoryArgs = {
     await expect(button).toHaveTextContent('You clicked: 0');
 
     await userEvent.click(button);
-    await expect(button).toHaveTextContent('You clicked: 1');
+
+    await waitFor(async () => {
+      await expect(button).toHaveTextContent('You clicked: 1');
+    });
 
     await step("Update story args with { text: 'Changed' }", async () => {
       await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { text: 'Changed' } });