Merge pull request #26188 from storybookjs/jeppe/svelte-5-prerelease

Svelte: Support `5.0.0-next.65` prerelease

.circleci/config.yml

@@ -706,30 +706,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 34
+          parallelism: 35
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 34
+          parallelism: 35
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 29
+          parallelism: 30
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 29
+          parallelism: 30
           requires:
             - build-sandboxes
 

code/frameworks/svelte-vite/package.json

@@ -58,13 +58,13 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/node": "^18.0.0",
-    "svelte": "^5.0.0-next.28",
+    "svelte": "^5.0.0-next.65",
     "typescript": "^5.3.2",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0",
-    "svelte": "^4.0.0 || ^5.0.0-next.16",
+    "svelte": "^4.0.0 || ^5.0.0-next.65",
     "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {

code/frameworks/svelte-webpack5/package.json

@@ -58,7 +58,7 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0-next.16",
+    "svelte": "^4.0.0 || ^5.0.0-next.65",
     "svelte-loader": "*"
   },
   "engines": {

code/frameworks/svelte-webpack5/src/typings.d.ts

@@ -1,3 +1,2 @@
-declare module '@storybook/svelte/templates/SlotDecorator.svelte';
-declare module '@storybook/svelte/templates/PreviewRender.svelte';
-declare module '@storybook/svelte/templates/HOC.svelte';
+declare module '@storybook/svelte/internal/SlotDecorator.svelte';
+declare module '@storybook/svelte/internal/PreviewRender.svelte';

code/frameworks/sveltekit/package.json

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

code/lib/cli/src/sandbox-templates.ts

@@ -626,6 +626,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/13-ts',
   'nextjs/default-js',

code/package.json

@@ -214,7 +214,7 @@
     "react-dom": "^18.2.0",
     "semver": "^7.3.7",
     "serve-static": "^1.14.1",
-    "svelte": "^5.0.0-next.28",
+    "svelte": "^5.0.0-next.65",
     "trash": "^7.0.0",
     "ts-dedent": "^2.0.0",
     "ts-node": "^10.9.1",

code/presets/svelte-webpack/package.json

@@ -75,7 +75,7 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0-next.16",
+    "svelte": "^4.0.0 || ^5.0.0-next.65",
     "svelte-loader": "*"
   },
   "engines": {

code/renderers/svelte/package.json

@@ -30,16 +30,15 @@
     "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
     "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json",
-    "./templates/HOC.svelte": "./templates/HOC.svelte",
-    "./templates/PreviewRender.svelte": "./templates/PreviewRender.svelte",
-    "./templates/SlotDecorator.svelte": "./templates/SlotDecorator.svelte"
+    "./internal/PreviewRender.svelte": "./dist/components/PreviewRender.svelte",
+    "./internal/SlotDecorator.svelte": "./dist/components/SlotDecorator.svelte",
+    "./internal/createSvelte5Props": "./dist/createSvelte5Props.svelte.js"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "templates/**/*",
     "template/cli/**/*",
     "README.md",
     "*.js",
@@ -62,14 +61,15 @@
     "type-fest": "~2.19"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "expect-type": "^0.15.0",
-    "svelte": "^5.0.0-next.28",
-    "svelte-check": "^3.6.1",
+    "fs-extra": "^11.1.0",
+    "svelte": "^5.0.0-next.65",
+    "svelte-check": "^3.6.4",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0-next.16"
+    "svelte": "^4.0.0 || ^5.0.0-next.65"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -78,6 +78,7 @@
     "access": "public"
   },
   "bundler": {
+    "post": "./scripts/copy-unbundled-to-dist.ts",
     "entries": [
       "./src/index.ts",
       "./src/preset.ts",

code/renderers/svelte/scripts/copy-unbundled-to-dist.ts

@@ -0,0 +1,23 @@
+import { copy } from 'fs-extra';
+import { join } from 'path';
+
+const src = join(__dirname, '..', 'src');
+const dist = join(__dirname, '..', 'dist');
+
+// relative to src directory
+const PATHS_TO_COPY = ['createSvelte5Props.svelte.js', 'components'];
+
+const run = async () => {
+  console.log('Copying unbundled files to dist...');
+  await Promise.all(
+    PATHS_TO_COPY.map((pathToCopy) =>
+      copy(join(src, pathToCopy), join(dist, pathToCopy), { overwrite: true })
+    )
+  );
+  console.log('Done!');
+};
+
+run().catch((e) => {
+  console.error(e);
+  process.exitCode = 1;
+});

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

@@ -3,7 +3,7 @@
   import { dedent } from 'ts-dedent';
 
   export let name;
-  export let kind;
+  export let title;
   export let storyFn;
   export let showError;
   export let storyContext;
@@ -17,22 +17,22 @@
     on,
   } = storyFn();
 
-	let firstTime = true;
-
-	// the first time we don't want to call storyFn two times so we just return the values
-	// we already have from the previous call. If storyFn changes this function will run
-	// again but this time firstTime will be false
-	function getStoryFnValue(storyFn){
-		if(firstTime){
-			firstTime = false;
-			return {
-				Component,
-				props,
-				on,
-			}
-		}
-		return storyFn();
-	}
+  let firstTime = true;
+
+  // the first time we don't want to call storyFn two times so we just return the values
+  // we already have from the previous call. If storyFn changes this function will run
+  // again but this time firstTime will be false
+  function getStoryFnValue(storyFn) {
+    if (firstTime) {
+      firstTime = false;
+      return {
+        Component,
+        props,
+        on,
+      };
+    }
+    return storyFn();
+  }
 
   // reactive, re-render on storyFn change
   $: ({ Component, props = {}, on } = getStoryFnValue(storyFn));
@@ -45,7 +45,7 @@
 
   if (!Component) {
     showError({
-      title: `Expecting a Svelte component from the story: "${name}" of "${kind}".`,
+      title: `Expecting a Svelte component from the story: "${name}" of "${title}".`,
       description: dedent`
         Did you forget to return the Svelte component configuration from the story?
         Use "() => ({ Component: YourComponent, props: {} })"

code/renderers/svelte/src/createSvelte5Props.svelte.js

@@ -0,0 +1,13 @@
+/**
+ * Turns an object into reactive props in Svelte 5.
+ * Needs to be in a separate .svelte.js file to ensure Svelte
+ * compiles it.
+ * As proposed in https://github.com/sveltejs/svelte/issues/9827#issuecomment-1845589616
+ * @template TProps
+ * @param {TProps} data - The data to create Svelte 5 props from.
+ * @returns {TProps} - The created Svelte 5 props.
+ */
+export const createSvelte5Props = (data) => {
+  const props = $state(data);
+  return props;
+};

code/renderers/svelte/src/decorators.ts

@@ -1,12 +1,13 @@
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
-// ! DO NOT change this SlotDecorator import to a relative path, it will break it.
-// ! A relative import will be compiled at build time, and Svelte will be unable to
-// ! render the component together with the user's Svelte components
-// ! importing from @storybook/svelte will make sure that it is compiled at runtime
-// ! with the same bundle as the user's Svelte components
-// eslint-disable-next-line import/no-extraneous-dependencies
-import SlotDecorator from '@storybook/svelte/templates/SlotDecorator.svelte';
+/*
+! DO NOT change this SlotDecorator import to a relative path, it will break it.
+! A relative import will be compiled at build time, and Svelte will be unable to
+! render the component together with the user's Svelte components
+! importing from @storybook/svelte will make sure that it is compiled at runtime
+! with the same bundle as the user's Svelte components
+*/
+import SlotDecorator from '@storybook/svelte/internal/SlotDecorator.svelte';
 import type { SvelteRenderer } from './types';
 
 /**