From 024de34b51ecad24fa49154ffe53ae1f18a70647 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 30 Nov 2022 23:00:06 +0100
Subject: [PATCH 01/14] initial SvelteKit framework

---
 code/frameworks/svelte-kit/package.json       | 79 +++++++++++++++++++
 code/frameworks/svelte-kit/preset.js          |  1 +
 code/frameworks/svelte-kit/src/index.ts       |  1 +
 code/frameworks/svelte-kit/src/preset.ts      | 21 +++++
 .../svelte-kit/template/cli/Button.stories.js | 39 +++++++++
 .../svelte-kit/template/cli/Button.svelte     | 34 ++++++++
 code/frameworks/svelte-kit/tsconfig.json      |  9 +++
 code/frameworks/svelte-vite/src/preset.ts     |  9 ++-
 .../cli/src/generators/SVELTE_KIT/index.ts    |  8 ++
 code/lib/cli/src/generators/baseGenerator.ts  |  2 +-
 code/lib/cli/src/initiate.ts                  |  6 ++
 code/lib/cli/src/project_types.ts             | 11 ++-
 code/lib/cli/src/repro-generators/configs.ts  |  8 ++
 code/lib/cli/src/repro-templates.ts           |  5 +-
 code/lib/cli/src/versions.ts                  |  1 +
 code/workspace.json                           |  5 ++
 code/yarn.lock                                | 16 +++-
 17 files changed, 249 insertions(+), 6 deletions(-)
 create mode 100644 code/frameworks/svelte-kit/package.json
 create mode 100644 code/frameworks/svelte-kit/preset.js
 create mode 100644 code/frameworks/svelte-kit/src/index.ts
 create mode 100644 code/frameworks/svelte-kit/src/preset.ts
 create mode 100644 code/frameworks/svelte-kit/template/cli/Button.stories.js
 create mode 100644 code/frameworks/svelte-kit/template/cli/Button.svelte
 create mode 100644 code/frameworks/svelte-kit/tsconfig.json
 create mode 100644 code/lib/cli/src/generators/SVELTE_KIT/index.ts

diff --git a/code/frameworks/svelte-kit/package.json b/code/frameworks/svelte-kit/package.json
new file mode 100644
index 000000000000..33dc8324128f
--- /dev/null
+++ b/code/frameworks/svelte-kit/package.json
@@ -0,0 +1,79 @@
+{
+  "name": "@storybook/svelte-kit",
+  "version": "7.0.0-alpha.54",
+  "description": "Storybook for SvelteKit",
+  "keywords": [
+    "storybook",
+    "svelte",
+    "sveltekit",
+    "svelte-kit"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/svelte-kit",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/svelte-kit"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "types/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/builder-vite": "7.0.0-alpha.54",
+    "@storybook/svelte-vite": "7.0.0-alpha.54"
+  },
+  "peerDependencies": {
+    "@storybook/addon-svelte-csf": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@storybook/addon-svelte-csf": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b"
+}
diff --git a/code/frameworks/svelte-kit/preset.js b/code/frameworks/svelte-kit/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/frameworks/svelte-kit/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/frameworks/svelte-kit/src/index.ts b/code/frameworks/svelte-kit/src/index.ts
new file mode 100644
index 000000000000..1a8d7c1a6e62
--- /dev/null
+++ b/code/frameworks/svelte-kit/src/index.ts
@@ -0,0 +1 @@
+export * from '@storybook/svelte-vite';
diff --git a/code/frameworks/svelte-kit/src/preset.ts b/code/frameworks/svelte-kit/src/preset.ts
new file mode 100644
index 000000000000..2719f02b7b57
--- /dev/null
+++ b/code/frameworks/svelte-kit/src/preset.ts
@@ -0,0 +1,21 @@
+import { type StorybookConfig } from '@storybook/svelte-vite';
+// @ts-expect-error -- TS picks up the type from preset.js instead of dist/preset.d.ts
+import { viteFinal as svelteViteFinal } from '@storybook/svelte-vite/preset';
+import { withoutVitePlugins } from '@storybook/builder-vite';
+
+export const core: StorybookConfig['core'] = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/svelte',
+};
+
+export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
+  const baseConfig = await svelteViteFinal(config, options);
+
+  let { plugins = [] } = baseConfig;
+
+  // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
+  // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
+  plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+
+  return { ...baseConfig, plugins };
+};
diff --git a/code/frameworks/svelte-kit/template/cli/Button.stories.js b/code/frameworks/svelte-kit/template/cli/Button.stories.js
new file mode 100644
index 000000000000..6377b5dda3dc
--- /dev/null
+++ b/code/frameworks/svelte-kit/template/cli/Button.stories.js
@@ -0,0 +1,39 @@
+import Button from './Button.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/code/frameworks/svelte-kit/template/cli/Button.svelte b/code/frameworks/svelte-kit/template/cli/Button.svelte
new file mode 100644
index 000000000000..cdf77abadac7
--- /dev/null
+++ b/code/frameworks/svelte-kit/template/cli/Button.svelte
@@ -0,0 +1,34 @@
+<script>
+  import './button.css';
+
+  /**
+   * Is this the principal call to action on the page?
+   */
+  export let primary = false;
+
+  /**
+   * What background color to use
+   */
+  export let backgroundColor = undefined;
+  /**
+   * How large should the button be?
+   */
+  export let size = 'medium';
+  /**
+   * Button contents
+   */
+  export let label;
+
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  on:click
+>
+  {label}
+</button>
diff --git a/code/frameworks/svelte-kit/tsconfig.json b/code/frameworks/svelte-kit/tsconfig.json
new file mode 100644
index 000000000000..26be65113f88
--- /dev/null
+++ b/code/frameworks/svelte-kit/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*", "template/**/*"]
+}
diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts
index 5a709ef26169..8687e3cbd38c 100644
--- a/code/frameworks/svelte-vite/src/preset.ts
+++ b/code/frameworks/svelte-vite/src/preset.ts
@@ -1,4 +1,5 @@
 import { type StorybookConfig, withoutVitePlugins } from '@storybook/builder-vite';
+import { deprecate } from '@storybook/node-logger';
 import { hasPlugin } from './utils';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
@@ -7,7 +8,7 @@ export const core: StorybookConfig['core'] = {
   renderer: '@storybook/svelte',
 };
 
-export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
+export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
   let { plugins = [] } = config;
   const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
   const svelteOptions: Record<string, any> = await options.presets.apply(
@@ -25,6 +26,12 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
   // Add docgen plugin
   plugins.push(svelteDocgen(svelteConfig));
 
+  // TODO: better SvelteKit detection, this warns when using @storybook/svelte-kit too
+  if (hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
+    deprecate(
+      'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use the official @storybook/svelte-kit framework instead.'
+    );
+  }
   // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
   // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
   plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
diff --git a/code/lib/cli/src/generators/SVELTE_KIT/index.ts b/code/lib/cli/src/generators/SVELTE_KIT/index.ts
new file mode 100644
index 000000000000..9ec3eead95b2
--- /dev/null
+++ b/code/lib/cli/src/generators/SVELTE_KIT/index.ts
@@ -0,0 +1,8 @@
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(packageManager, npmOptions, options, 'svelte', undefined, 'svelte-kit');
+};
+
+export default generator;
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index 027a45df129b..b7b8b39e0a11 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -101,7 +101,7 @@ const hasInteractiveStories = (rendererId: SupportedRenderers) =>
   ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(rendererId);
 
 const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
-  ['angular', 'nextjs'].includes(framework);
+  ['angular', 'nextjs', 'svelte-kit'].includes(framework);
 
 export async function baseGenerator(
   packageManager: JsPackageManager,
diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
index d8cad6f19e8b..4377209ab9a2 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@@ -26,6 +26,7 @@ import webComponentsGenerator from './generators/WEB-COMPONENTS';
 import riotGenerator from './generators/RIOT';
 import preactGenerator from './generators/PREACT';
 import svelteGenerator from './generators/SVELTE';
+import svelteKitGenerator from './generators/SVELTE_KIT';
 import raxGenerator from './generators/RAX';
 import serverGenerator from './generators/SERVER';
 import type { JsPackageManager } from './js-package-manager';
@@ -183,6 +184,11 @@ const installStorybook = (
           commandLog('Adding Storybook support to your "Svelte" app\n')
         );
 
+      case ProjectType.SVELTE_KIT:
+        return svelteKitGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "SvelteKit" app\n')
+        );
+
       case ProjectType.RAX:
         return raxGenerator(packageManager, npmOptions, generatorOptions).then(
           commandLog('Adding Storybook support to your "Rax" app\n')
diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
index 2b0ac24d219b..0bbc73d2e6a1 100644
--- a/code/lib/cli/src/project_types.ts
+++ b/code/lib/cli/src/project_types.ts
@@ -16,7 +16,7 @@ function eqMajor(versionRange: string, major: number) {
 }
 
 // Should match @storybook/<framework>
-export type SupportedFrameworks = 'nextjs' | 'angular';
+export type SupportedFrameworks = 'nextjs' | 'angular' | 'svelte-kit';
 
 // Should match @storybook/<renderer>
 export type SupportedRenderers =
@@ -78,6 +78,7 @@ export enum ProjectType {
   RIOT = 'RIOT',
   PREACT = 'PREACT',
   SVELTE = 'SVELTE',
+  SVELTE_KIT = 'SVELTE_KIT',
   RAX = 'RAX',
   AURELIA = 'AURELIA',
   SERVER = 'SERVER',
@@ -254,6 +255,14 @@ export const supportedTemplates: TemplateConfiguration[] = [
       return dependencies.every(Boolean);
     },
   },
+  {
+    // TODO: This only works because it is before the SVELTE template. could be more explicit
+    preset: ProjectType.SVELTE_KIT,
+    dependencies: ['@sveltejs/kit'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
   {
     preset: ProjectType.SVELTE,
     dependencies: ['svelte'],
diff --git a/code/lib/cli/src/repro-generators/configs.ts b/code/lib/cli/src/repro-generators/configs.ts
index 3a2194c152be..acdae8dbdaf9 100644
--- a/code/lib/cli/src/repro-generators/configs.ts
+++ b/code/lib/cli/src/repro-generators/configs.ts
@@ -266,3 +266,11 @@ export const svelte: Parameters = {
   version: 'latest',
   generator: 'npx giget github:sveltejs/template#master {{appName}}',
 };
+
+export const svelteKit: Parameters = {
+  renderer: 'svelte',
+  name: 'svelteKit',
+  version: 'latest',
+  generator:
+    'yarn create svelte-with-args --name={{appName}} --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
+};
diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index ec243a090c2d..2e6ede5ef653 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -169,10 +169,11 @@ export const allTemplates = {
   },
   'svelte-kit/skeleton-js': {
     name: 'Svelte Kit (JS)',
+    inDevelopment: true,
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
     expected: {
-      framework: '@storybook/svelte-vite',
+      framework: '@storybook/svelte-kit',
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
@@ -182,7 +183,7 @@ export const allTemplates = {
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright',
     expected: {
-      framework: '@storybook/svelte-vite',
+      framework: '@storybook/svelte-kit',
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index 4b16d815e4b4..4eccda50297e 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -68,6 +68,7 @@ export default {
   '@storybook/source-loader': '7.0.0-alpha.54',
   '@storybook/store': '7.0.0-alpha.54',
   '@storybook/svelte': '7.0.0-alpha.54',
+  '@storybook/svelte-kit': '7.0.0-alpha.54',
   '@storybook/svelte-vite': '7.0.0-alpha.54',
   '@storybook/svelte-webpack5': '7.0.0-alpha.54',
   '@storybook/telemetry': '7.0.0-alpha.54',
diff --git a/code/workspace.json b/code/workspace.json
index ad82327b6ada..b3823712f466 100644
--- a/code/workspace.json
+++ b/code/workspace.json
@@ -356,6 +356,11 @@
       "root": "renderers/svelte",
       "type": "library"
     },
+    "@storybook/svelte-kit": {
+      "implicitDependencies": [],
+      "root": "frameworks/svelte-kit",
+      "type": "library"
+    },
     "@storybook/svelte-vite": {
       "implicitDependencies": [],
       "root": "frameworks/svelte-vite",
diff --git a/code/yarn.lock b/code/yarn.lock
index 834d9e989047..06328b3ea9e1 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -7431,7 +7431,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte-vite@workspace:frameworks/svelte-vite":
+"@storybook/svelte-kit@workspace:frameworks/svelte-kit":
+  version: 0.0.0-use.local
+  resolution: "@storybook/svelte-kit@workspace:frameworks/svelte-kit"
+  dependencies:
+    "@storybook/builder-vite": 7.0.0-alpha.54
+    "@storybook/svelte-vite": 7.0.0-alpha.54
+  peerDependencies:
+    "@storybook/addon-svelte-csf": ^2.0.0
+  peerDependenciesMeta:
+    "@storybook/addon-svelte-csf":
+      optional: true
+  languageName: unknown
+  linkType: soft
+
+"@storybook/svelte-vite@7.0.0-alpha.54, @storybook/svelte-vite@workspace:frameworks/svelte-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte-vite@workspace:frameworks/svelte-vite"
   dependencies:

From 842a1539285425b580e54ee44b03bf3014096e0e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 30 Nov 2022 23:50:57 +0100
Subject: [PATCH 02/14] make svelte-kit framework more like svelte-vite

---
 code/frameworks/svelte-kit/README.md         | 1 +
 code/frameworks/svelte-kit/jest.config.js    | 7 +++++++
 code/frameworks/svelte-kit/package.json      | 5 +++++
 code/frameworks/svelte-kit/tsconfig.json     | 8 ++++----
 code/frameworks/svelte-vite/src/preset.ts    | 2 +-
 code/lib/cli/src/generators/baseGenerator.ts | 6 +++++-
 6 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 code/frameworks/svelte-kit/README.md
 create mode 100644 code/frameworks/svelte-kit/jest.config.js

diff --git a/code/frameworks/svelte-kit/README.md b/code/frameworks/svelte-kit/README.md
new file mode 100644
index 000000000000..d9243c63d0a4
--- /dev/null
+++ b/code/frameworks/svelte-kit/README.md
@@ -0,0 +1 @@
+# Storybook for SvelteKit
diff --git a/code/frameworks/svelte-kit/jest.config.js b/code/frameworks/svelte-kit/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/svelte-kit/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/svelte-kit/package.json b/code/frameworks/svelte-kit/package.json
index 33dc8324128f..d927647ee472 100644
--- a/code/frameworks/svelte-kit/package.json
+++ b/code/frameworks/svelte-kit/package.json
@@ -54,6 +54,11 @@
     "@storybook/builder-vite": "7.0.0-alpha.54",
     "@storybook/svelte-vite": "7.0.0-alpha.54"
   },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^3.1.3"
+  },
   "peerDependencies": {
     "@storybook/addon-svelte-csf": "^2.0.0"
   },
diff --git a/code/frameworks/svelte-kit/tsconfig.json b/code/frameworks/svelte-kit/tsconfig.json
index 26be65113f88..13e04352a3c7 100644
--- a/code/frameworks/svelte-kit/tsconfig.json
+++ b/code/frameworks/svelte-kit/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "strict": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true
+    "rootDir": "./src",
+    "types": ["node"],
+    "resolveJsonModule": true
   },
-  "include": ["src/**/*", "template/**/*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts
index 8687e3cbd38c..226cd5f8c490 100644
--- a/code/frameworks/svelte-vite/src/preset.ts
+++ b/code/frameworks/svelte-vite/src/preset.ts
@@ -29,7 +29,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
   // TODO: better SvelteKit detection, this warns when using @storybook/svelte-kit too
   if (hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
     deprecate(
-      'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use the official @storybook/svelte-kit framework instead.'
+      'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/svelte-kit instead.'
     );
   }
   // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index b7b8b39e0a11..6dfba9eb5ba5 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -209,7 +209,11 @@ export async function baseGenerator(
   await configurePreview(rendererId);
 
   // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
-  if (frameworkPackages.find((pkg) => pkg.match(/^@storybook\/.*-vite$/))) {
+  if (
+    frameworkPackages.find(
+      (pkg) => pkg.match(/^@storybook\/.*-vite$/) || pkg === '@storybook/svelte-kit'
+    )
+  ) {
     const previewHead = dedent`
       <script>
         window.global = window;

From 43268fa92dc41e07c07b5991af3bc0deb998ff94 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 1 Dec 2022 00:36:53 +0100
Subject: [PATCH 03/14] cleaner SvelteKit warning

---
 code/frameworks/svelte-vite/src/preset.ts | 16 ++------
 code/frameworks/svelte-vite/src/utils.ts  | 47 +++++++++++++++++++++++
 2 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts
index 226cd5f8c490..bfa34d9045e0 100644
--- a/code/frameworks/svelte-vite/src/preset.ts
+++ b/code/frameworks/svelte-vite/src/preset.ts
@@ -1,6 +1,5 @@
-import { type StorybookConfig, withoutVitePlugins } from '@storybook/builder-vite';
-import { deprecate } from '@storybook/node-logger';
-import { hasPlugin } from './utils';
+import { type StorybookConfig } from '@storybook/builder-vite';
+import { handleSvelteKit, hasPlugin } from './utils';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
 export const core: StorybookConfig['core'] = {
@@ -26,15 +25,8 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
   // Add docgen plugin
   plugins.push(svelteDocgen(svelteConfig));
 
-  // TODO: better SvelteKit detection, this warns when using @storybook/svelte-kit too
-  if (hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
-    deprecate(
-      'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/svelte-kit instead.'
-    );
-  }
-  // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
-  // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
-  plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+  // temporarily support SvelteKit until
+  plugins = handleSvelteKit(plugins);
 
   // TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed
   // Wrapping in try-catch in case `@storybook/addon-svelte-csf is not installed
diff --git a/code/frameworks/svelte-vite/src/utils.ts b/code/frameworks/svelte-vite/src/utils.ts
index 3672cededa2c..5ad1d8994666 100644
--- a/code/frameworks/svelte-vite/src/utils.ts
+++ b/code/frameworks/svelte-vite/src/utils.ts
@@ -1,4 +1,8 @@
+import path from 'path';
+import fs from 'fs';
 import type { PluginOption } from 'vite';
+import { deprecate } from '@storybook/node-logger';
+import { withoutVitePlugins } from '@storybook/builder-vite';
 
 function checkName(plugin: PluginOption, name: string) {
   return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
@@ -14,3 +18,46 @@ export function hasPlugin(plugins: PluginOption[], name: string) {
     })
   );
 }
+
+/**
+ * A migration step that ensures the svelte-vite framework still supports SvelteKit,
+ * but warns the user that they should use the svelte-kit framework instead.
+ * Should be removed when we decide to remove support completely for SvelteKit in svelte-vite
+ */
+export function handleSvelteKit(plugins: PluginOption[]): PluginOption[] {
+  if (!hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
+    // this is not a SvelteKit project ✅
+    return plugins;
+  }
+
+  /*
+  the svelte-kit framework uses this svelte-vite framework under the hood
+  so we have to take extra care of only warning when the user is actually using
+  svelte-vite directly and not just through svelte-kit
+  */
+
+  const packageJsonPath = path.resolve('package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    // we can't determine if this is using svelte-kit, let's assume it does ✅
+    return plugins;
+  }
+
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const allDependencies = [
+    ...Object.keys(packageJson.dependencies || {}),
+    ...Object.keys(packageJson.devDependencies || {}),
+  ];
+  if (
+    allDependencies.includes('@storybook/svelte-kit') &&
+    !allDependencies.includes('@storybook/svelte-vite')
+  ) {
+    // this uses @storybook/svelte-kit, so everything is fine ✅
+    return plugins;
+  }
+
+  // this is a SvelteKit project but uses @storybook/svelte-vite, warn user about this and remove vite-plugin-svelte-kit ❌
+  deprecate(
+    'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/svelte-kit instead.'
+  );
+  return withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+}

From d82fc9e9a08ba87551db3b35dd8289ae367c339f Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 1 Dec 2022 10:58:17 +0100
Subject: [PATCH 04/14] simplify SvelteKit handling in Svelte Vite

---
 code/frameworks/svelte-vite/src/preset.ts |  2 +-
 code/frameworks/svelte-vite/src/utils.ts  | 27 ++++++++---------------
 2 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts
index bfa34d9045e0..46c31c62ce01 100644
--- a/code/frameworks/svelte-vite/src/preset.ts
+++ b/code/frameworks/svelte-vite/src/preset.ts
@@ -26,7 +26,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
   plugins.push(svelteDocgen(svelteConfig));
 
   // temporarily support SvelteKit until
-  plugins = handleSvelteKit(plugins);
+  plugins = await handleSvelteKit(plugins, options);
 
   // TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed
   // Wrapping in try-catch in case `@storybook/addon-svelte-csf is not installed
diff --git a/code/frameworks/svelte-vite/src/utils.ts b/code/frameworks/svelte-vite/src/utils.ts
index 5ad1d8994666..b475f3e4b566 100644
--- a/code/frameworks/svelte-vite/src/utils.ts
+++ b/code/frameworks/svelte-vite/src/utils.ts
@@ -1,8 +1,7 @@
-import path from 'path';
-import fs from 'fs';
 import type { PluginOption } from 'vite';
 import { deprecate } from '@storybook/node-logger';
 import { withoutVitePlugins } from '@storybook/builder-vite';
+import type { Options } from '@storybook/types';
 
 function checkName(plugin: PluginOption, name: string) {
   return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
@@ -24,7 +23,10 @@ export function hasPlugin(plugins: PluginOption[], name: string) {
  * but warns the user that they should use the svelte-kit framework instead.
  * Should be removed when we decide to remove support completely for SvelteKit in svelte-vite
  */
-export function handleSvelteKit(plugins: PluginOption[]): PluginOption[] {
+export async function handleSvelteKit(
+  plugins: PluginOption[],
+  options: Options
+): Promise<PluginOption[]> {
   if (!hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
     // this is not a SvelteKit project ✅
     return plugins;
@@ -36,26 +38,15 @@ export function handleSvelteKit(plugins: PluginOption[]): PluginOption[] {
   svelte-vite directly and not just through svelte-kit
   */
 
-  const packageJsonPath = path.resolve('package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    // we can't determine if this is using svelte-kit, let's assume it does ✅
-    return plugins;
-  }
+  const frameworkPreset = await options.presets.apply('framework', {}, options);
+  const framework = typeof frameworkPreset === 'string' ? frameworkPreset : frameworkPreset.name;
 
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-  const allDependencies = [
-    ...Object.keys(packageJson.dependencies || {}),
-    ...Object.keys(packageJson.devDependencies || {}),
-  ];
-  if (
-    allDependencies.includes('@storybook/svelte-kit') &&
-    !allDependencies.includes('@storybook/svelte-vite')
-  ) {
+  if (framework === '@storybook/svelte-kit') {
     // this uses @storybook/svelte-kit, so everything is fine ✅
     return plugins;
   }
 
-  // this is a SvelteKit project but uses @storybook/svelte-vite, warn user about this and remove vite-plugin-svelte-kit ❌
+  // this is a SvelteKit project but doesn't use @storybook/svelte-kit, warn user about this and remove vite-plugin-svelte-kit ❌
   deprecate(
     'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/svelte-kit instead.'
   );

From 51217cd70d4dc78fb73bbf247b9a3dd2f5f3a98b Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 1 Dec 2022 10:59:14 +0100
Subject: [PATCH 05/14] move link check from sandbox task to generate task

---
 scripts/tasks/generate.ts | 11 +++++++++--
 scripts/tasks/sandbox.ts  |  2 --
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/scripts/tasks/generate.ts b/scripts/tasks/generate.ts
index 80b527895a82..96704bfc9368 100644
--- a/scripts/tasks/generate.ts
+++ b/scripts/tasks/generate.ts
@@ -9,8 +9,15 @@ const reprosDir = resolve(__dirname, '../../repros');
 export const generate: Task = {
   description: 'Create the template repro',
   dependsOn: ['run-registry'],
-  async ready({ key }) {
-    return pathExists(join(reprosDir, key));
+  async ready({ key, template }, { link }) {
+    const isReady = pathExists(join(reprosDir, key, 'after-storybook'));
+    if (isReady) {
+      return isReady;
+    }
+    if ('inDevelopment' in template && template.inDevelopment && link) {
+      throw new Error('Cannot link an in development template');
+    }
+    return isReady;
   },
   async run(details) {
     const reproDir = join(reprosDir, details.key);
diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
index 286199b5045d..f81c14b6968a 100644
--- a/scripts/tasks/sandbox.ts
+++ b/scripts/tasks/sandbox.ts
@@ -8,8 +8,6 @@ export const sandbox: Task = {
   description: 'Create the sandbox from a template',
   dependsOn: ({ template }, { link }) => {
     if ('inDevelopment' in template && template.inDevelopment) {
-      if (link) throw new Error('Cannot link an in development template');
-
       return ['run-registry', 'generate'];
     }
 

From 3bb4c1f8dc8323deef5e14a484ca06528f8f40c3 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 1 Dec 2022 14:05:53 +0100
Subject: [PATCH 06/14] svelte-kit > sveltekit

---
 .vscode/settings.json                         |  1 +
 code/frameworks/svelte-vite/src/utils.ts      | 14 ++++----
 .../{svelte-kit => sveltekit}/README.md       |  0
 .../{svelte-kit => sveltekit}/jest.config.js  |  0
 .../{svelte-kit => sveltekit}/package.json    |  6 ++--
 .../{svelte-kit => sveltekit}/preset.js       |  0
 .../{svelte-kit => sveltekit}/src/index.ts    |  0
 .../{svelte-kit => sveltekit}/src/preset.ts   |  0
 .../template/cli/Button.stories.js            |  0
 .../template/cli/Button.svelte                |  0
 .../{svelte-kit => sveltekit}/tsconfig.json   |  0
 .../{SVELTE_KIT => SVELTEKIT}/index.ts        |  2 +-
 code/lib/cli/src/generators/baseGenerator.ts  |  4 +--
 code/lib/cli/src/initiate.ts                  |  4 +--
 code/lib/cli/src/project_types.ts             |  6 ++--
 code/lib/cli/src/repro-templates.ts           |  4 +--
 code/lib/cli/src/versions.ts                  |  2 +-
 code/lib/telemetry/src/storybook-metadata.ts  |  2 +-
 code/workspace.json                           |  4 +--
 code/yarn.lock                                | 34 +++++++++----------
 scripts/tasks/generate.ts                     |  4 +--
 21 files changed, 44 insertions(+), 43 deletions(-)
 rename code/frameworks/{svelte-kit => sveltekit}/README.md (100%)
 rename code/frameworks/{svelte-kit => sveltekit}/jest.config.js (100%)
 rename code/frameworks/{svelte-kit => sveltekit}/package.json (94%)
 rename code/frameworks/{svelte-kit => sveltekit}/preset.js (100%)
 rename code/frameworks/{svelte-kit => sveltekit}/src/index.ts (100%)
 rename code/frameworks/{svelte-kit => sveltekit}/src/preset.ts (100%)
 rename code/frameworks/{svelte-kit => sveltekit}/template/cli/Button.stories.js (100%)
 rename code/frameworks/{svelte-kit => sveltekit}/template/cli/Button.svelte (100%)
 rename code/frameworks/{svelte-kit => sveltekit}/tsconfig.json (100%)
 rename code/lib/cli/src/generators/{SVELTE_KIT => SVELTEKIT}/index.ts (89%)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6ab5ff8b7ecc..6cf2716c6ef9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,4 +17,5 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": true
   },
+  "deepscan.enable": true
 }
diff --git a/code/frameworks/svelte-vite/src/utils.ts b/code/frameworks/svelte-vite/src/utils.ts
index b475f3e4b566..5d6e3b21d6b1 100644
--- a/code/frameworks/svelte-vite/src/utils.ts
+++ b/code/frameworks/svelte-vite/src/utils.ts
@@ -20,7 +20,7 @@ export function hasPlugin(plugins: PluginOption[], name: string) {
 
 /**
  * A migration step that ensures the svelte-vite framework still supports SvelteKit,
- * but warns the user that they should use the svelte-kit framework instead.
+ * but warns the user that they should use the sveltekit framework instead.
  * Should be removed when we decide to remove support completely for SvelteKit in svelte-vite
  */
 export async function handleSvelteKit(
@@ -33,22 +33,22 @@ export async function handleSvelteKit(
   }
 
   /*
-  the svelte-kit framework uses this svelte-vite framework under the hood
+  the sveltekit framework uses this svelte-vite framework under the hood
   so we have to take extra care of only warning when the user is actually using
-  svelte-vite directly and not just through svelte-kit
+  svelte-vite directly and not just through sveltekit
   */
 
   const frameworkPreset = await options.presets.apply('framework', {}, options);
   const framework = typeof frameworkPreset === 'string' ? frameworkPreset : frameworkPreset.name;
 
-  if (framework === '@storybook/svelte-kit') {
-    // this uses @storybook/svelte-kit, so everything is fine ✅
+  if (framework === '@storybook/sveltekit') {
+    // this uses @storybook/sveltekit, so everything is fine ✅
     return plugins;
   }
 
-  // this is a SvelteKit project but doesn't use @storybook/svelte-kit, warn user about this and remove vite-plugin-svelte-kit ❌
+  // this is a SvelteKit project but doesn't use @storybook/sveltekit, warn user about this and remove vite-plugin-svelte-kit ❌
   deprecate(
-    'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/svelte-kit instead.'
+    'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/sveltekit instead.'
   );
   return withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
 }
diff --git a/code/frameworks/svelte-kit/README.md b/code/frameworks/sveltekit/README.md
similarity index 100%
rename from code/frameworks/svelte-kit/README.md
rename to code/frameworks/sveltekit/README.md
diff --git a/code/frameworks/svelte-kit/jest.config.js b/code/frameworks/sveltekit/jest.config.js
similarity index 100%
rename from code/frameworks/svelte-kit/jest.config.js
rename to code/frameworks/sveltekit/jest.config.js
diff --git a/code/frameworks/svelte-kit/package.json b/code/frameworks/sveltekit/package.json
similarity index 94%
rename from code/frameworks/svelte-kit/package.json
rename to code/frameworks/sveltekit/package.json
index 856253dff022..8d39de799ff4 100644
--- a/code/frameworks/svelte-kit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@storybook/svelte-kit",
+  "name": "@storybook/sveltekit",
   "version": "7.0.0-alpha.55",
   "description": "Storybook for SvelteKit",
   "keywords": [
@@ -8,14 +8,14 @@
     "sveltekit",
     "svelte-kit"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/svelte-kit",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/sveltekit",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/frameworks/svelte-kit"
+    "directory": "code/frameworks/sveltekit"
   },
   "funding": {
     "type": "opencollective",
diff --git a/code/frameworks/svelte-kit/preset.js b/code/frameworks/sveltekit/preset.js
similarity index 100%
rename from code/frameworks/svelte-kit/preset.js
rename to code/frameworks/sveltekit/preset.js
diff --git a/code/frameworks/svelte-kit/src/index.ts b/code/frameworks/sveltekit/src/index.ts
similarity index 100%
rename from code/frameworks/svelte-kit/src/index.ts
rename to code/frameworks/sveltekit/src/index.ts
diff --git a/code/frameworks/svelte-kit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts
similarity index 100%
rename from code/frameworks/svelte-kit/src/preset.ts
rename to code/frameworks/sveltekit/src/preset.ts
diff --git a/code/frameworks/svelte-kit/template/cli/Button.stories.js b/code/frameworks/sveltekit/template/cli/Button.stories.js
similarity index 100%
rename from code/frameworks/svelte-kit/template/cli/Button.stories.js
rename to code/frameworks/sveltekit/template/cli/Button.stories.js
diff --git a/code/frameworks/svelte-kit/template/cli/Button.svelte b/code/frameworks/sveltekit/template/cli/Button.svelte
similarity index 100%
rename from code/frameworks/svelte-kit/template/cli/Button.svelte
rename to code/frameworks/sveltekit/template/cli/Button.svelte
diff --git a/code/frameworks/svelte-kit/tsconfig.json b/code/frameworks/sveltekit/tsconfig.json
similarity index 100%
rename from code/frameworks/svelte-kit/tsconfig.json
rename to code/frameworks/sveltekit/tsconfig.json
diff --git a/code/lib/cli/src/generators/SVELTE_KIT/index.ts b/code/lib/cli/src/generators/SVELTEKIT/index.ts
similarity index 89%
rename from code/lib/cli/src/generators/SVELTE_KIT/index.ts
rename to code/lib/cli/src/generators/SVELTEKIT/index.ts
index 9ec3eead95b2..21565e6a45cc 100644
--- a/code/lib/cli/src/generators/SVELTE_KIT/index.ts
+++ b/code/lib/cli/src/generators/SVELTEKIT/index.ts
@@ -2,7 +2,7 @@ import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'svelte', undefined, 'svelte-kit');
+  await baseGenerator(packageManager, npmOptions, options, 'svelte', undefined, 'sveltekit');
 };
 
 export default generator;
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index 6dfba9eb5ba5..7124076ed228 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -101,7 +101,7 @@ const hasInteractiveStories = (rendererId: SupportedRenderers) =>
   ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html'].includes(rendererId);
 
 const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
-  ['angular', 'nextjs', 'svelte-kit'].includes(framework);
+  ['angular', 'nextjs', 'sveltekit'].includes(framework);
 
 export async function baseGenerator(
   packageManager: JsPackageManager,
@@ -211,7 +211,7 @@ export async function baseGenerator(
   // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516
   if (
     frameworkPackages.find(
-      (pkg) => pkg.match(/^@storybook\/.*-vite$/) || pkg === '@storybook/svelte-kit'
+      (pkg) => pkg.match(/^@storybook\/.*-vite$/) || pkg === '@storybook/sveltekit'
     )
   ) {
     const previewHead = dedent`
diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
index 4377209ab9a2..1b9e24a2496b 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@@ -26,7 +26,7 @@ import webComponentsGenerator from './generators/WEB-COMPONENTS';
 import riotGenerator from './generators/RIOT';
 import preactGenerator from './generators/PREACT';
 import svelteGenerator from './generators/SVELTE';
-import svelteKitGenerator from './generators/SVELTE_KIT';
+import svelteKitGenerator from './generators/SVELTEKIT';
 import raxGenerator from './generators/RAX';
 import serverGenerator from './generators/SERVER';
 import type { JsPackageManager } from './js-package-manager';
@@ -184,7 +184,7 @@ const installStorybook = (
           commandLog('Adding Storybook support to your "Svelte" app\n')
         );
 
-      case ProjectType.SVELTE_KIT:
+      case ProjectType.SVELTEKIT:
         return svelteKitGenerator(packageManager, npmOptions, generatorOptions).then(
           commandLog('Adding Storybook support to your "SvelteKit" app\n')
         );
diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
index 0bbc73d2e6a1..5de0f9c3812d 100644
--- a/code/lib/cli/src/project_types.ts
+++ b/code/lib/cli/src/project_types.ts
@@ -16,7 +16,7 @@ function eqMajor(versionRange: string, major: number) {
 }
 
 // Should match @storybook/<framework>
-export type SupportedFrameworks = 'nextjs' | 'angular' | 'svelte-kit';
+export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit';
 
 // Should match @storybook/<renderer>
 export type SupportedRenderers =
@@ -78,7 +78,7 @@ export enum ProjectType {
   RIOT = 'RIOT',
   PREACT = 'PREACT',
   SVELTE = 'SVELTE',
-  SVELTE_KIT = 'SVELTE_KIT',
+  SVELTEKIT = 'SVELTEKIT',
   RAX = 'RAX',
   AURELIA = 'AURELIA',
   SERVER = 'SERVER',
@@ -257,7 +257,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
   },
   {
     // TODO: This only works because it is before the SVELTE template. could be more explicit
-    preset: ProjectType.SVELTE_KIT,
+    preset: ProjectType.SVELTEKIT,
     dependencies: ['@sveltejs/kit'],
     matcherFunction: ({ dependencies }) => {
       return dependencies.every(Boolean);
diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index 2e6ede5ef653..47d83c43d077 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -173,7 +173,7 @@ export const allTemplates = {
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
     expected: {
-      framework: '@storybook/svelte-kit',
+      framework: '@storybook/sveltekit',
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
@@ -183,7 +183,7 @@ export const allTemplates = {
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright',
     expected: {
-      framework: '@storybook/svelte-kit',
+      framework: '@storybook/sveltekit',
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index 80fec52eb7ac..9fc21fdf9420 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -68,7 +68,7 @@ export default {
   '@storybook/source-loader': '7.0.0-alpha.55',
   '@storybook/store': '7.0.0-alpha.55',
   '@storybook/svelte': '7.0.0-alpha.55',
-  '@storybook/svelte-kit': '7.0.0-alpha.55',
+  '@storybook/sveltekit': '7.0.0-alpha.55',
   '@storybook/svelte-vite': '7.0.0-alpha.55',
   '@storybook/svelte-webpack5': '7.0.0-alpha.55',
   '@storybook/telemetry': '7.0.0-alpha.55',
diff --git a/code/lib/telemetry/src/storybook-metadata.ts b/code/lib/telemetry/src/storybook-metadata.ts
index d590f7af408c..44c0da8cb720 100644
--- a/code/lib/telemetry/src/storybook-metadata.ts
+++ b/code/lib/telemetry/src/storybook-metadata.ts
@@ -21,7 +21,7 @@ export const metaFrameworks = {
   '@nuxtjs/storybook': 'nuxt',
   '@nrwl/storybook': 'nx',
   '@vue/cli-service': 'vue-cli',
-  '@sveltejs/kit': 'svelte-kit',
+  '@sveltejs/kit': 'sveltekit',
 } as Record<string, string>;
 
 export const sanitizeAddonName = (name: string) => {
diff --git a/code/workspace.json b/code/workspace.json
index b3823712f466..c258a3c9aa41 100644
--- a/code/workspace.json
+++ b/code/workspace.json
@@ -356,9 +356,9 @@
       "root": "renderers/svelte",
       "type": "library"
     },
-    "@storybook/svelte-kit": {
+    "@storybook/sveltekit": {
       "implicitDependencies": [],
-      "root": "frameworks/svelte-kit",
+      "root": "frameworks/sveltekit",
       "type": "library"
     },
     "@storybook/svelte-vite": {
diff --git a/code/yarn.lock b/code/yarn.lock
index 648a95a40cb2..f8ce74d390b8 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -7431,23 +7431,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte-kit@workspace:frameworks/svelte-kit":
-  version: 0.0.0-use.local
-  resolution: "@storybook/svelte-kit@workspace:frameworks/svelte-kit"
-  dependencies:
-    "@storybook/builder-vite": 7.0.0-alpha.55
-    "@storybook/svelte-vite": 7.0.0-alpha.55
-    "@types/node": ^16.0.0
-    typescript: ^4.9.3
-    vite: ^3.1.3
-  peerDependencies:
-    "@storybook/addon-svelte-csf": ^2.0.0
-  peerDependenciesMeta:
-    "@storybook/addon-svelte-csf":
-      optional: true
-  languageName: unknown
-  linkType: soft
-
 "@storybook/svelte-vite@7.0.0-alpha.55, @storybook/svelte-vite@workspace:frameworks/svelte-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte-vite@workspace:frameworks/svelte-vite"
@@ -7515,6 +7498,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@storybook/sveltekit@workspace:frameworks/sveltekit":
+  version: 0.0.0-use.local
+  resolution: "@storybook/sveltekit@workspace:frameworks/sveltekit"
+  dependencies:
+    "@storybook/builder-vite": 7.0.0-alpha.55
+    "@storybook/svelte-vite": 7.0.0-alpha.55
+    "@types/node": ^16.0.0
+    typescript: ^4.9.3
+    vite: ^3.1.3
+  peerDependencies:
+    "@storybook/addon-svelte-csf": ^2.0.0
+  peerDependenciesMeta:
+    "@storybook/addon-svelte-csf":
+      optional: true
+  languageName: unknown
+  linkType: soft
+
 "@storybook/telemetry@7.0.0-alpha.55, @storybook/telemetry@workspace:*, @storybook/telemetry@workspace:lib/telemetry":
   version: 0.0.0-use.local
   resolution: "@storybook/telemetry@workspace:lib/telemetry"
diff --git a/scripts/tasks/generate.ts b/scripts/tasks/generate.ts
index 96704bfc9368..2e373d9df283 100644
--- a/scripts/tasks/generate.ts
+++ b/scripts/tasks/generate.ts
@@ -19,9 +19,9 @@ export const generate: Task = {
     }
     return isReady;
   },
-  async run(details) {
+  async run(details, options) {
     const reproDir = join(reprosDir, details.key);
-    if (await this.ready(details)) {
+    if (await this.ready(details, options)) {
       logger.info('🗑  Removing old repro dir');
       await remove(reproDir);
     }

From 412cad287fd39a920d4f125d3b3cca8145bbe16e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 1 Dec 2022 14:06:44 +0100
Subject: [PATCH 07/14] cleanup

---
 code/frameworks/svelte-vite/src/preset.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts
index 46c31c62ce01..669473bfa351 100644
--- a/code/frameworks/svelte-vite/src/preset.ts
+++ b/code/frameworks/svelte-vite/src/preset.ts
@@ -25,7 +25,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
   // Add docgen plugin
   plugins.push(svelteDocgen(svelteConfig));
 
-  // temporarily support SvelteKit until
+  // temporarily support SvelteKit
   plugins = await handleSvelteKit(plugins, options);
 
   // TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed

From 73caea596c2e431efbaf0758406e4b6f52c6cdfb Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 1 Dec 2022 14:22:48 +0100
Subject: [PATCH 08/14] migration docs

---
 MIGRATION.md | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 2ce1ad13472e..fb56ee330dbf 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -22,9 +22,10 @@
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated)
     - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [SvelteKit needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
     - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
-    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
     - [Icons API changed](#icons-api-changed)
     - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
     - [Dropped support for Angular 12 and below](#dropped-support-for-angular-12-and-below)
@@ -475,6 +476,7 @@ In 7.0, frameworks also specify the builder to be used. For example, The current
 - `@storybook/server-webpack5`
 - `@storybook/svelte-webpack5`
 - `@storybook/svelte-vite`
+- `@storybook/sveltekit`
 - `@storybook/vue-webpack5`
 - `@storybook/vue-vite`
 - `@storybook/vue3-webpack5`
@@ -574,6 +576,10 @@ If you were using `viteFinal` in 6.5 to simply merge in your project's standard
 
 Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
 
+#### SvelteKit needs the `@storybook/sveltekit` framework
+
+SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.
+
 #### Removed docs.getContainer and getPage parameters
 
 It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
@@ -2267,7 +2273,7 @@ const story = data.stories[storyId];
 const parameters = combineParameters(
   data.globalParameters,
   data.kindParameters[story.kind],
-  story.parameters
+  story.parameters,
 );
 ```
 
@@ -3043,7 +3049,7 @@ addDecorator(
     url: 'https://storybook.js.org',
     goFullScreen: false,
     addonPanelInRight: true,
-  })
+  }),
 );
 ```
 
@@ -3143,7 +3149,7 @@ addDecorator(
         picked: false,
       },
     ],
-  })
+  }),
 );
 ```
 
@@ -3162,7 +3168,7 @@ addDecorator(
         picked: false,
       },
     ],
-  })
+  }),
 );
 ```
 
@@ -3547,8 +3553,8 @@ storiesOf('composition', module).add(
   withInfo('see Notes panel for composition info')(
     withNotes({ text: 'Composition: Info(Notes())' })((context) => (
       <MyComponent name={context.story} />
-    ))
-  )
+    )),
+  ),
 );
 ```
 

From 63334f8dd5b642bea88486d941daea12b774272d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@chromatic.com>
Date: Thu, 1 Dec 2022 14:31:24 +0100
Subject: [PATCH 09/14] Cleanup

---
 .vscode/settings.json               | 1 -
 code/lib/cli/src/repro-templates.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6cf2716c6ef9..6ab5ff8b7ecc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,5 +17,4 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": true
   },
-  "deepscan.enable": true
 }
diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index 47d83c43d077..ab113db94d28 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -169,7 +169,6 @@ export const allTemplates = {
   },
   'svelte-kit/skeleton-js': {
     name: 'Svelte Kit (JS)',
-    inDevelopment: true,
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
     expected: {

From f827df3493e440e528144f3109b3822a092b50d9 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 2 Dec 2022 10:55:17 +0100
Subject: [PATCH 10/14] set inDevelopment to turn CI green

---
 code/lib/cli/src/repro-templates.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index ab113db94d28..19a281f09dd2 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -168,6 +168,7 @@ export const allTemplates = {
     },
   },
   'svelte-kit/skeleton-js': {
+    inDevelopment: true,
     name: 'Svelte Kit (JS)',
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright',
@@ -178,6 +179,7 @@ export const allTemplates = {
     },
   },
   'svelte-kit/skeleton-ts': {
+    inDevelopment: true,
     name: 'Svelte Kit (TS)',
     script:
       'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright',

From cc0af2b04f40668ae01454fb1968b91eb6ba9894 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 2 Dec 2022 14:24:11 +0100
Subject: [PATCH 11/14] cleanup migration

---
 MIGRATION.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index fb56ee330dbf..b0f949c5a234 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -2273,7 +2273,7 @@ const story = data.stories[storyId];
 const parameters = combineParameters(
   data.globalParameters,
   data.kindParameters[story.kind],
-  story.parameters,
+  story.parameters
 );
 ```
 
@@ -3049,7 +3049,7 @@ addDecorator(
     url: 'https://storybook.js.org',
     goFullScreen: false,
     addonPanelInRight: true,
-  }),
+  })
 );
 ```
 
@@ -3149,7 +3149,7 @@ addDecorator(
         picked: false,
       },
     ],
-  }),
+  })
 );
 ```
 
@@ -3168,7 +3168,7 @@ addDecorator(
         picked: false,
       },
     ],
-  }),
+  })
 );
 ```
 
@@ -3553,8 +3553,8 @@ storiesOf('composition', module).add(
   withInfo('see Notes panel for composition info')(
     withNotes({ text: 'Composition: Info(Notes())' })((context) => (
       <MyComponent name={context.story} />
-    )),
-  ),
+    ))
+  )
 );
 ```
 

From 45dd16af195d04cb04fb6ebc5ceac844a35ea712 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Fri, 2 Dec 2022 15:53:41 +0100
Subject: [PATCH 12/14] lower parallelism because inDevelopment

---
 .circleci/config.yml | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4be3a2592179..d6fd64f957e4 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -536,23 +536,23 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build
       - build-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
   merged:
@@ -586,23 +586,23 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build
       - build-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
   daily:
@@ -611,25 +611,25 @@ workflows:
     jobs:
       - build
       - create-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - build-sandboxes

From eefd349fe4bb1b43f95814aeddc2e14b665c1506 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sat, 3 Dec 2022 22:26:38 +0800
Subject: [PATCH 13/14] Clarify migration

---
 MIGRATION.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/MIGRATION.md b/MIGRATION.md
index 462ca3206e2d..8d0c33d43dbc 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -582,6 +582,13 @@ Previously, Storybook's Vite builder placed cache files in node_modules/.vite-st
 
 SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.
 
+```js
+// .storybook/main.js
+export default {
+  framework: '@storybook/sveltekit',
+};
+```
+
 #### Removed docs.getContainer and getPage parameters
 
 It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.

From d6b3ce50b6ff9dd6e87a2e18852271b583d15cfd Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sat, 3 Dec 2022 22:30:09 +0800
Subject: [PATCH 14/14] fix versions

---
 code/frameworks/sveltekit/package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index e1727f920ede..16783b4f3eed 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "7.0.0-alpha.56",
+  "version": "7.0.0-alpha.57",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
@@ -51,8 +51,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.0.0-alpha.56",
-    "@storybook/svelte-vite": "7.0.0-alpha.56"
+    "@storybook/builder-vite": "7.0.0-alpha.57",
+    "@storybook/svelte-vite": "7.0.0-alpha.57"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",