Svelte: Drop Support for Svelte < 5

.circleci/config.yml

@@ -1003,30 +1003,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 34
+          parallelism: 33
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 30
           requires:
             - create-sandboxes
       - e2e-production:
-          parallelism: 29
+          parallelism: 28
           requires:
             - create-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 29
+          parallelism: 28
           requires:
             - create-sandboxes
       - vitest-integration:
-          parallelism: 9
+          parallelism: 8
           requires:
             - create-sandboxes
       - test-portable-stories:

.gitignore

@@ -62,5 +62,6 @@ code/.vite-inspect
 .nx/workspace-data
 !**/fixtures/**/yarn.lock
 code/core/report
+node_modules/.svelte2tsx-language-server-files
 
 *storybook.log

CODEOWNERS

@@ -44,7 +44,6 @@
 # /code/frameworks/react-vite/              @valentinpalkovic @kasperpeulen
 # /code/frameworks/react-webpack5/          @valentinpalkovic @kasperpeulen
 # /code/frameworks/svelte-vite/             @kasperpeulen @JReinhold
-# /code/frameworks/svelte-webpack5/         @kasperpeulen @JReinhold
 # /code/frameworks/sveltekit/               @kasperpeulen @JReinhold
 # /code/frameworks/vue3-vite/               @kasperpeulen @yannbf @JReinhold
 # /code/frameworks/vue3-webpack5/           @kasperpeulen @yannbf @JReinhold

MIGRATION.md

@@ -1,5 +1,9 @@
 <h1>Migration</h1>
 
+- [From version 8.x to 9.0.0](#from-version-8x-to-900)
+  - [Framework changes](#framework-changes)
+    - [Svelte: Dropped support for Svelte 4](#svelte-dropped-support-for-svelte-4)
+    - [Svelte: Dropped support for @storybook/svelte-webpack5](#svelte-dropped-support-for-storybooksvelte-webpack5)
 - [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
   - [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
   - [Addon-a11y: Replaced experimental `ally-test` tag behavior with `parameters.a11y.test`](#addon-a11y-replaced-experimental-ally-test-tag-behavior-with-parametersa11ytest)
@@ -431,6 +435,50 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 8.x to 9.0.0
+
+### Framework changes
+
+#### Svelte: Dropped support for Svelte 4
+
+In Storybook 9.0, we've dropped support for Svelte 4. If you're currently using Svelte 4, you need to upgrade to Svelte 5.
+
+#### Svelte: Dropped support for @storybook/svelte-webpack5
+
+In Storybook 9.0, we've dropped support for `@storybook/svelte-webpack5`. If you're currently using it, you need to migrate to `@storybook/svelte-vite` instead.
+
+Follow these steps to migrate:
+
+1. Remove the webpack5 framework package:
+
+```bash
+npm uninstall @storybook/svelte-webpack5
+# or
+yarn remove @storybook/svelte-webpack5
+```
+
+2. Install the Vite framework package:
+
+```bash
+npm install -D @storybook/svelte-vite
+# or
+yarn add -D @storybook/svelte-vite
+```
+
+3. Update your Storybook configuration in `.storybook/main.js` or `.storybook/main.ts`:
+
+```diff
+export default {
+  framework: {
+-    name: '@storybook/svelte-vite',
++    name: '@storybook/svelte-webpack5'
+  },
+  // ...other configuration
+};
+```
+
+For more details, please refer to the [Svelte & Vite documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-vite).
+
 ## From version 8.5.x to 8.6.x
 
 ### Angular: Support experimental zoneless support
@@ -2156,7 +2204,6 @@ The current list of frameworks include:
 - `@storybook/nextjs`
 - `@storybook/server-webpack5`
 - `@storybook/svelte-vite`
-- `@storybook/svelte-webpack5`
 - `@storybook/sveltekit`
 - `@storybook/vue-vite`
 - `@storybook/vue-webpack5`

code/core/src/cli/helpers.ts

@@ -165,7 +165,6 @@ export const frameworkToDefaultBuilder: Record<
   'server-webpack5': CoreBuilder.Webpack5,
   solid: CoreBuilder.Vite,
   'svelte-vite': CoreBuilder.Vite,
-  'svelte-webpack5': CoreBuilder.Webpack5,
   sveltekit: CoreBuilder.Vite,
   'vue3-vite': CoreBuilder.Vite,
   'vue3-webpack5': CoreBuilder.Webpack5,
@@ -211,26 +210,13 @@ export async function copyTemplateFiles({
   commonAssetsDir,
   features,
 }: CopyTemplateFilesOptions) {
-  let languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
+  const languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
     // keeping this for backwards compatibility in case community packages are using it
     typescript: 'ts',
     [SupportedLanguage.JAVASCRIPT]: 'js',
     [SupportedLanguage.TYPESCRIPT_3_8]: 'ts-3-8',
     [SupportedLanguage.TYPESCRIPT_4_9]: 'ts-4-9',
   };
-  // FIXME: remove after 9.0
-  if (renderer === 'svelte') {
-    const svelteVersion = await getVersionSafe(packageManager, 'svelte');
-    if (svelteVersion && major(svelteVersion) >= 5) {
-      languageFolderMapping = {
-        // keeping this for backwards compatibility in case community packages are using it
-        typescript: 'ts',
-        [SupportedLanguage.JAVASCRIPT]: 'svelte-5-js',
-        [SupportedLanguage.TYPESCRIPT_3_8]: 'svelte-5-ts-3-8',
-        [SupportedLanguage.TYPESCRIPT_4_9]: 'svelte-5-ts-4-9',
-      };
-    }
-  }
   const templatePath = async () => {
     const baseDir = await getRendererDir(packageManager, renderer);
     const assetsDir = join(baseDir, 'template', 'cli');

code/core/src/common/utils/framework-to-renderer.ts

@@ -20,7 +20,6 @@ export const frameworkToRenderer: Record<
   'server-webpack5': 'server',
   solid: 'solid',
   'svelte-vite': 'svelte',
-  'svelte-webpack5': 'svelte',
   sveltekit: 'svelte',
   'vue3-vite': 'vue3',
   'vue3-webpack5': 'vue3',

code/core/src/common/utils/get-storybook-info.ts

@@ -38,7 +38,6 @@ export const frameworkPackages: Record<string, SupportedFrameworks> = {
   '@storybook/react-webpack5': 'react-webpack5',
   '@storybook/server-webpack5': 'server-webpack5',
   '@storybook/svelte-vite': 'svelte-vite',
-  '@storybook/svelte-webpack5': 'svelte-webpack5',
   '@storybook/sveltekit': 'sveltekit',
   '@storybook/vue3-vite': 'vue3-vite',
   '@storybook/experimental-nextjs-vite': 'experimental-nextjs-vite',

code/core/src/common/versions.ts

@@ -35,7 +35,6 @@ export default {
   '@storybook/react-webpack5': '9.0.0-alpha.0',
   '@storybook/server-webpack5': '9.0.0-alpha.0',
   '@storybook/svelte-vite': '9.0.0-alpha.0',
-  '@storybook/svelte-webpack5': '9.0.0-alpha.0',
   '@storybook/sveltekit': '9.0.0-alpha.0',
   '@storybook/vue3-vite': '9.0.0-alpha.0',
   '@storybook/vue3-webpack5': '9.0.0-alpha.0',
@@ -57,7 +56,6 @@ export default {
   '@storybook/preset-preact-webpack': '9.0.0-alpha.0',
   '@storybook/preset-react-webpack': '9.0.0-alpha.0',
   '@storybook/preset-server-webpack': '9.0.0-alpha.0',
-  '@storybook/preset-svelte-webpack': '9.0.0-alpha.0',
   '@storybook/preset-vue3-webpack': '9.0.0-alpha.0',
   '@storybook/html': '9.0.0-alpha.0',
   '@storybook/preact': '9.0.0-alpha.0',

code/core/src/server-errors.ts

@@ -40,7 +40,6 @@ export enum Category {
   FRAMEWORK_REACT_WEBPACK5 = 'FRAMEWORK_REACT-WEBPACK5',
   FRAMEWORK_SERVER_WEBPACK5 = 'FRAMEWORK_SERVER-WEBPACK5',
   FRAMEWORK_SVELTE_VITE = 'FRAMEWORK_SVELTE-VITE',
-  FRAMEWORK_SVELTE_WEBPACK5 = 'FRAMEWORK_SVELTE-WEBPACK5',
   FRAMEWORK_SVELTEKIT = 'FRAMEWORK_SVELTEKIT',
   FRAMEWORK_VUE_VITE = 'FRAMEWORK_VUE-VITE',
   FRAMEWORK_VUE_WEBPACK5 = 'FRAMEWORK_VUE-WEBPACK5',

code/core/src/types/modules/frameworks.ts

@@ -13,7 +13,6 @@ export type SupportedFrameworks =
   | 'react-webpack5'
   | 'server-webpack5'
   | 'svelte-vite'
-  | 'svelte-webpack5'
   | 'sveltekit'
   | 'vue3-vite'
   | 'vue3-webpack5'

code/frameworks/svelte-vite/package.json

@@ -72,7 +72,7 @@
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
     "storybook": "workspace:^",
-    "svelte": "^4.0.0 || ^5.0.0",
+    "svelte": "^5.0.0",
     "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {