Svelte: Support v5 prereleases

.circleci/config.yml

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

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/lib/cli/src/sandbox-templates.ts

@@ -355,6 +355,17 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
+  'svelte-kit/prerelease-ts': {
+    name: 'SvelteKit Prerelease (Vite | TypeScript)',
+    script:
+      'yarn create svelte-with-args --name=svelte-kit/prerelease-ts --directory={{beforeDir}} --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest --svelte5',
+    expected: {
+      framework: '@storybook/sveltekit',
+      renderer: '@storybook/svelte',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'lit-vite/default-js': {
     name: 'Lit Latest (Vite | JavaScript)',
     script:
@@ -598,6 +609,7 @@ export const daily: TemplateKey[] = [
   'vue-cli/default-js',
   'lit-vite/default-js',
   'svelte-kit/skeleton-js',
+  'svelte-kit/prerelease-ts',
   'svelte-vite/default-js',
   'nextjs/12-js',
   'nextjs/default-js',

code/presets/svelte-webpack/package.json

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

code/renderers/svelte/package.json

@@ -63,12 +63,12 @@
   },
   "devDependencies": {
     "expect-type": "^0.15.0",
-    "svelte": "^4.0.0",
-    "svelte-check": "3.4.6",
+    "svelte": "^5.0.0-next.15",
+    "svelte-check": "^3.6.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "svelte": "^3.1.0 || ^4.0.0"
+    "svelte": "^4.0.0 || ^5.0.0-next.16"
   },
   "engines": {
     "node": ">=16.0.0"

code/renderers/svelte/src/render.ts

@@ -1,6 +1,5 @@
 /* eslint-disable no-param-reassign */
 import type { RenderContext, ArgsStoryFn } from '@storybook/types';
-import type { SvelteComponentTyped } from 'svelte';
 import { RESET_STORY_ARGS } from '@storybook/core-events';
 // ! DO NOT change this PreviewRender import to a relative path, it will break it.
 // ! A relative import will be compiled at build time, and Svelte will be unable to
@@ -10,10 +9,14 @@ import { RESET_STORY_ARGS } from '@storybook/core-events';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
 import { addons } from '@storybook/preview-api';
+import * as svelte from 'svelte';
 
 import type { SvelteRenderer } from './types';
 
-const componentsByDomElement = new Map<SvelteRenderer['canvasElement'], SvelteComponentTyped>();
+const componentsByDomElement = new Map<
+  SvelteRenderer['canvasElement'],
+  any // ReturnType<typeof createRoot | typeof mount> depends on the version of Svelte v4 or v5
+>();
 
 function teardown(canvasElement: SvelteRenderer['canvasElement']) {
   if (!componentsByDomElement.has(canvasElement)) {
@@ -26,6 +29,25 @@ function teardown(canvasElement: SvelteRenderer['canvasElement']) {
   componentsByDomElement.delete(canvasElement);
 }
 
+/**
+ * Mount the PreviewRender component to the provided canvasElement
+ * Either using the Svelte v4 or v5 API
+ */
+function createRoot(target: HTMLElement, props: any) {
+  if ((svelte as any).createRoot) {
+    // Svelte v5
+    return svelte.createRoot(PreviewRender, {
+      target,
+      props,
+    });
+  }
+  // Svelte v4
+  return new (PreviewRender as any)({
+    target,
+    props,
+  });
+}
+
 /**
  * This is a workaround for the issue that when resetting args,
  * the story needs to be remounted completely to revert to the component's default props.
@@ -66,16 +88,13 @@ export function renderToCanvas(
   }
 
   if (!existingComponent || remount) {
-    const createdComponent = new PreviewRender({
-      target: canvasElement,
-      props: {
-        storyFn,
-        storyContext,
-        name,
-        kind,
-        showError,
-      },
-    }) as SvelteComponentTyped;
+    const createdComponent = createRoot(canvasElement, {
+      storyFn,
+      storyContext,
+      name,
+      kind,
+      showError,
+    });
     componentsByDomElement.set(canvasElement, createdComponent);
   } else {
     existingComponent.$set({

code/renderers/svelte/templates/SlotDecorator.svelte

@@ -5,19 +5,19 @@
   export let Component;
   export let props = {};
   export let on = undefined;
-
+  
   let instance;
   let decoratorInstance;
-
-  function getInstance() {
-    // instance can be undefined if a decorator doesn't have <slot/>
-    return instance || decoratorInstance;
-  }
-
+
   if (on) {
-    // Attach svelte event listeners.
-    Object.keys(on).forEach((eventName) => {
-      onMount(() => getInstance().$on(eventName, on[eventName]));
+    // 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(() => {
+      Object.entries(on).forEach(([eventName, eventCallback]) => {
+        // instance can be undefined if a decorator doesn't have <slot/>
+        const inst = instance ?? decoratorInstance;
+        inst?.$on?.(eventName, eventCallback)
+      });
     });
   }
 </script>