Svelte: Support v4

code/frameworks/svelte-vite/package.json

@@ -52,18 +52,17 @@
     "@storybook/svelte": "7.1.0-alpha.27",
     "@sveltejs/vite-plugin-svelte": "^2.0.0",
     "magic-string": "^0.27.0",
-    "svelte": "^3.0.0",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",
+    "svelte": "^4.0.0-next.0",
     "typescript": "~4.9.3",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "svelte": "^3.0.0 || ^4.0.0 || ^4.0.0-next.0",
     "vite": "^3.0.0 || ^4.0.0"
   },
   "engines": {

code/frameworks/sveltekit/package.json

@@ -60,6 +60,7 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
+    "svelte": "^3.0.0 || ^4.0.0 || ^4.0.0-next.0",
     "vite": "^4.0.0"
   },
   "engines": {

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

@@ -248,7 +248,8 @@ const baseTemplates = {
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte',
+    script:
+      'npm create vite@latest --yes {{beforeDir}} -- --template svelte && cd {{beforeDir}} && npm install --save-dev svelte@next',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -258,7 +259,8 @@ const baseTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts',
+    script:
+      'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts && cd {{beforeDir}} && npm install --save-dev svelte@next',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -303,7 +305,7 @@ const baseTemplates = {
   'svelte-kit/skeleton-js': {
     name: 'Svelte Kit (JS)',
     script:
-      'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory={{beforeDir}} --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest',
+      'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory={{beforeDir}} --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest && cd {{beforeDir}} && npm install --save-dev svelte@next',
     expected: {
       framework: '@storybook/sveltekit',
       renderer: '@storybook/svelte',
@@ -314,7 +316,7 @@ const baseTemplates = {
   'svelte-kit/skeleton-ts': {
     name: 'Svelte Kit (TS)',
     script:
-      'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory={{beforeDir}} --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest',
+      'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory={{beforeDir}} --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest && cd {{beforeDir}} && npm install --save-dev svelte@next',
     expected: {
       framework: '@storybook/sveltekit',
       renderer: '@storybook/svelte',

code/renderers/svelte/package.json

@@ -64,12 +64,12 @@
   },
   "devDependencies": {
     "expect-type": "^0.14.2",
-    "svelte": "^3.59.1",
+    "svelte": "^4.0.0-next.0",
     "svelte-check": "^3.4.3",
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "svelte": "^3.1.0"
+    "svelte": "^3.59.1 || ^4.0.0 || ^4.0.0-next.0"
   },
   "engines": {
     "node": ">=16.0.0"

code/renderers/svelte/src/public-types.ts

@@ -12,7 +12,9 @@ import type {
   ProjectAnnotations,
 } from '@storybook/types';
 
-import type { ComponentProps, ComponentType, SvelteComponentTyped } from 'svelte';
+// TODO: don't use internal type when https://github.com/sveltejs/svelte/issues/8692 has been resolved
+import type { ComponentType } from 'svelte/types/runtime/internal';
+import type { ComponentProps, SvelteComponentTyped } from 'svelte';
 import type { SetOptional, Simplify } from 'type-fest';
 import type { SvelteRenderer } from './types';
 

code/yarn.lock

@@ -12,7 +12,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ampproject/remapping@npm:2.2.1, @ampproject/remapping@npm:^2.2.0":
+"@ampproject/remapping@npm:2.2.1, @ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.2.1":
   version: 2.2.1
   resolution: "@ampproject/remapping@npm:2.2.1"
   dependencies:
@@ -3814,7 +3814,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13, @jridgewell/sourcemap-codec@npm:^1.4.14":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
   version: 1.4.15
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
   checksum: 0c6b5ae663087558039052a626d2d7ed5208da36cfd707dcc5cea4a07cfc918248403dcb5989a8f7afaf245ce0573b7cc6fd94c4a30453bd10e44d9363940ba5
@@ -7539,14 +7539,13 @@ __metadata:
     "@sveltejs/vite-plugin-svelte": ^2.0.0
     "@types/node": ^16.0.0
     magic-string: ^0.27.0
-    svelte: ^3.0.0
+    svelte: ^4.0.0-next.0
     sveltedoc-parser: ^4.2.1
     ts-dedent: ^2.2.0
     typescript: ~4.9.3
     vite: ^4.0.0
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    svelte: ^3.0.0 || ^4.0.0 || ^4.0.0-next.0
     vite: ^3.0.0 || ^4.0.0
   languageName: unknown
   linkType: soft
@@ -7583,13 +7582,13 @@ __metadata:
     "@storybook/preview-api": 7.1.0-alpha.27
     "@storybook/types": 7.1.0-alpha.27
     expect-type: ^0.14.2
-    svelte: ^3.59.1
+    svelte: ^4.0.0-next.0
     svelte-check: ^3.4.3
     sveltedoc-parser: ^4.2.1
     type-fest: 2.19.0
     typescript: ^5.0.4
   peerDependencies:
-    svelte: ^3.1.0
+    svelte: ^3.59.1 || ^4.0.0 || ^4.0.0-next.0
   languageName: unknown
   linkType: soft
 
@@ -7604,6 +7603,7 @@ __metadata:
     typescript: ^4.9.3
     vite: ^4.0.0
   peerDependencies:
+    svelte: ^3.0.0 || ^4.0.0 || ^4.0.0-next.0
     vite: ^4.0.0
   languageName: unknown
   linkType: soft
@@ -10075,7 +10075,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.1.0, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.1":
+"acorn@npm:^8.0.0, acorn@npm:^8.1.0, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.1, acorn@npm:^8.8.2":
   version: 8.8.2
   resolution: "acorn@npm:8.8.2"
   bin:
@@ -12637,6 +12637,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"code-red@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "code-red@npm:1.0.0"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.4.14
+    "@types/estree": ^1.0.0
+    acorn: ^8.8.2
+    estree-walker: ^3.0.3
+    periscopic: ^3.1.0
+  checksum: 584bad8f23b4aa13b9b7ce043fb92d3165aaa0a3bfd058b9cb9ec4cb7b2b3f1289abbc353cf62f353e05463c3f323560dfe1e4cb680d2900a7b85a549ab9206c
+  languageName: node
+  linkType: hard
+
 "collapse-white-space@npm:^1.0.4":
   version: 1.0.6
   resolution: "collapse-white-space@npm:1.0.6"
@@ -13432,7 +13445,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^2.0.1":
+"css-tree@npm:^2.0.1, css-tree@npm:^2.3.1":
   version: 2.3.1
   resolution: "css-tree@npm:2.3.1"
   dependencies:
@@ -15653,6 +15666,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-walker@npm:^3.0.0, estree-walker@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "estree-walker@npm:3.0.3"
+  dependencies:
+    "@types/estree": ^1.0.0
+  checksum: c12e3c2b2642d2bcae7d5aa495c60fa2f299160946535763969a1c83fc74518ffa9c2cd3a8b69ac56aea547df6a8aac25f729a342992ef0bbac5f1c73e78995d
+  languageName: node
+  linkType: hard
+
 "esutils@npm:^2.0.2":
   version: 2.0.3
   resolution: "esutils@npm:2.0.3"
@@ -19036,6 +19058,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-reference@npm:^3.0.0, is-reference@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "is-reference@npm:3.0.1"
+  dependencies:
+    "@types/estree": "*"
+  checksum: 003af01fd96c4300111853d68b048e2f094e27ccd70eb66fdb7bb3cd7f7a9e6ad3f633387b2b453c85134fcc1ba0473dca55349a0162312d9fd127306d9f5a9b
+  languageName: node
+  linkType: hard
+
 "is-regex@npm:^1.0.3, is-regex@npm:^1.0.5, is-regex@npm:^1.1.0, is-regex@npm:^1.1.4":
   version: 1.1.4
   resolution: "is-regex@npm:1.1.4"
@@ -21143,6 +21174,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"locate-character@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "locate-character@npm:2.0.5"
+  checksum: 134d79b3494a4c56b91d2cee3cb333bcec1acdf145bf9a73e8bf03a917c0f1e0c6b2a4f7ce0fc550af494dec29835c0aa81f6d9836c30031b40faf2fe94aeaae
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -24962,6 +25000,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"periscopic@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "periscopic@npm:3.1.0"
+  dependencies:
+    "@types/estree": ^1.0.0
+    estree-walker: ^3.0.0
+    is-reference: ^3.0.0
+  checksum: fb5ce7cd810c49254cdf1cd3892811e6dd1a1dfbdf5f10a0a33fb7141baac36443c4cad4f0e2b30abd4eac613f6ab845c2bc1b7ce66ae9694c7321e6ada5bd96
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^0.2.1":
   version: 0.2.1
   resolution: "picocolors@npm:0.2.1"
@@ -29282,13 +29331,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte@npm:^3.0.0, svelte@npm:^3.31.2, svelte@npm:^3.48.0, svelte@npm:^3.59.1":
+"svelte@npm:^3.31.2, svelte@npm:^3.48.0":
   version: 3.59.1
   resolution: "svelte@npm:3.59.1"
   checksum: 12a250de5c359d3a184f15727d5e61e45103a795adb32e8c4100a40929d987832ab7edcbfe357d86863c0819ad4edbd69bfc83ac33bf9b5e47a233a621fbcc3e
   languageName: node
   linkType: hard
 
+"svelte@npm:^4.0.0-next.0":
+  version: 4.0.0-next.0
+  resolution: "svelte@npm:4.0.0-next.0"
+  dependencies:
+    "@ampproject/remapping": ^2.2.1
+    "@jridgewell/sourcemap-codec": ^1.4.15
+    acorn: ^8.8.2
+    aria-query: ^5.1.3
+    axobject-query: ^3.1.1
+    code-red: ^1.0.0
+    css-tree: ^2.3.1
+    estree-walker: ^3.0.3
+    is-reference: ^3.0.1
+    locate-character: ^2.0.5
+    magic-string: ^0.30.0
+    periscopic: ^3.1.0
+  checksum: 8dade0d28c01310a1f35fe8b08edbd17286110f11291c962f10b7566ec20752a9fe65ee4ca01b522741e3037f71c02eb78b67fed8b98ae5417af0d323c2d18b0
+  languageName: node
+  linkType: hard
+
 "sveltedoc-parser@npm:^4.2.1":
   version: 4.3.1
   resolution: "sveltedoc-parser@npm:4.3.1"