Release: Patch 10.2.19

.github/copilot-instructions.md

@@ -297,7 +297,7 @@ cd code && yarn test
 
 ### End-to-End Testing
 
-- Playwright tests available (version 1.52.0 configured)
+- Playwright tests available (version 1.58.2 configured)
 - E2E test tasks: `yarn task e2e-tests-build --start-from auto` or `yarn task e2e-tests-dev --start-from auto`
 - Test runner scenarios: `yarn task test-runner-build --start-from auto` or `yarn task test-runner-dev --start-from auto`
 - Smoke tests: `yarn task smoke-test --start-from auto`

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 10.2.19
+
+- Maintenance: Support vite-plugin-svelte@7 which supports Vite 8 - [#34115](https://github.com/storybookjs/storybook/pull/34115), thanks @valentinpalkovic!
+- Vite: Support Vite 8 - [#33788](https://github.com/storybookjs/storybook/pull/33788), thanks @valentinpalkovic!
+
 ## 10.2.18
 
 - Core: Correctly fallback to first detected vitest config file - [#33865](https://github.com/storybookjs/storybook/pull/33865), thanks @yannbf!

code/frameworks/svelte-vite/package.json

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

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

@@ -96,6 +96,11 @@ export type Template = {
     editAddons?: (addons: string[]) => string[];
     useCsfFactory?: boolean;
   };
+  /** Additional CI steps in case this template has special needs during CI. */
+  extraCiSteps?: {
+    // Some sandboxes (e.g. Angular) rely on Node 22.22.1 as minimum supported version and threfore it needs enforcing, even if the CI image comes with a different node version.
+    ensureMinNodeVersion?: boolean;
+  };
   /** Additional options to pass to the initiate command when initializing Storybook. */
   initOptions?: {
     builder?: SupportedBuilder;
@@ -626,6 +631,9 @@ export const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'],
+    },
     skipTasks: ['e2e-tests', 'bench'],
   },
   'svelte-vite/default-ts': {
@@ -636,6 +644,9 @@ export const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'],
+    },
     // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test', 'bench'],
   },
@@ -647,6 +658,9 @@ export const baseTemplates = {
       // extraDependencies: ['@standard-schema/spec@^1', '@angular/forms@next'],
       useCsfFactory: true,
     },
+    extraCiSteps: {
+      ensureMinNodeVersion: true,
+    },
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -662,6 +676,9 @@ export const baseTemplates = {
       extraDependencies: ['@angular/forms@latest'],
       useCsfFactory: true,
     },
+    extraCiSteps: {
+      ensureMinNodeVersion: true,
+    },
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -678,6 +695,9 @@ export const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['@sveltejs/vite-plugin-svelte@7.0.0'],
+    },
     skipTasks: ['e2e-tests', 'bench'],
   },
   'lit-vite/default-js': {

code/package.json

@@ -75,7 +75,7 @@
   ],
   "dependencies": {
     "@chromatic-com/storybook": "^5.0.0",
-    "@playwright/test": "1.52.0",
+    "@playwright/test": "1.58.2",
     "@storybook/addon-a11y": "workspace:*",
     "@storybook/addon-designs": "^11.0.3",
     "@storybook/addon-docs": "workspace:*",
@@ -220,5 +220,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "10.2.19"
 }

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"10.2.18","info":{"plain":"- Core: Correctly fallback to first detected vitest config file - [#33865](https://github.com/storybookjs/storybook/pull/33865), thanks @yannbf!\n- Core: Fix error reporting in ManagerErrorBoundary - [#33915](https://github.com/storybookjs/storybook/pull/33915), thanks @ghengeveld!"}}
+{"version":"10.2.19","info":{"plain":"- Maintenance: Support vite-plugin-svelte@7 which supports Vite 8 - [#34115](https://github.com/storybookjs/storybook/pull/34115), thanks @valentinpalkovic!\n- Vite: Support Vite 8 - [#33788](https://github.com/storybookjs/storybook/pull/33788), thanks @valentinpalkovic!"}}

docs/writing-tests/in-ci.mdx

@@ -58,7 +58,7 @@ jobs:
     container:
       # Make sure to grab the latest version of the Playwright image
       # https://playwright.dev/docs/docker#pull-the-image
-      image: mcr.microsoft.com/playwright:v1.52.0-noble
+      image: mcr.microsoft.com/playwright:v1.58.2-noble
     steps:
       - uses: actions/checkout@v4
 
@@ -98,7 +98,7 @@ Test:
   stage: UI_Tests
   # Make sure to grab the latest version of the Playwright image
   # https://playwright.dev/docs/docker#pull-the-image
-  image: mcr.microsoft.com/playwright:v1.52.0-noble
+  image: mcr.microsoft.com/playwright:v1.58.2-noble
   script:
     - npm run test-storybook
 ```
@@ -125,7 +125,7 @@ pipelines:
               name: "Run Tests"
               # Make sure to grab the latest version of the Playwright image
               # https://playwright.dev/docs/docker#pull-the-image
-              image: mcr.microsoft.com/playwright:v1.52.0-noble
+              image: mcr.microsoft.com/playwright:v1.58.2-noble
               caches:
                 - npm
                 - node
@@ -149,7 +149,7 @@ executors:
     docker:
       # Make sure to grab the latest version of the Playwright image
       # https://playwright.dev/docs/docker#pull-the-image
-      - image: mcr.microsoft.com/playwright:v1.52.0-noble
+      - image: mcr.microsoft.com/playwright:v1.58.2-noble
     working_directory: ~/repo
 
 jobs:
@@ -222,7 +222,7 @@ pipeline {
            * Make sure to grab the latest version of the Playwright image
            * https://playwright.dev/docs/docker#pull-the-image
            */
-          image 'mcr.microsoft.com/playwright:v1.52.0-noble'
+          image 'mcr.microsoft.com/playwright:v1.58.2-noble'
           reuseNode true
         }
       }
@@ -257,7 +257,7 @@ stages:
         displayName: "Storybook tests"
         # Make sure to grab the latest version of the Playwright image
         # https://playwright.dev/docs/docker#pull-the-image
-        container: mcr.microsoft.com/playwright:v1.52.0-noble
+        container: mcr.microsoft.com/playwright:v1.58.2-noble
         variables:
           npm_config_cache: $(Pipeline.Workspace)/.npm
         steps:
@@ -308,7 +308,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.52.0-noble
+      image: mcr.microsoft.com/playwright:v1.58.2-noble
 +   # 👇 Only run on successful deployments
 +   if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
     steps:

docs/writing-tests/index.mdx

@@ -90,7 +90,7 @@ Next, add a new CI workflow.
       container:
         # Make sure to grab the latest version of the Playwright image
         # https://playwright.dev/docs/docker#pull-the-image
-        image: mcr.microsoft.com/playwright:v1.52.0-noble
+        image: mcr.microsoft.com/playwright:v1.58.2-noble
       steps:
         - uses: actions/checkout@v4
 

package.json

@@ -40,7 +40,7 @@
     "@babel/runtime": "latest",
     "@babel/traverse": "latest",
     "@babel/types": "^7.28.4",
-    "@playwright/test": "1.52.0",
+    "@playwright/test": "1.58.2",
     "@testing-library/user-event@npm:^14.4.0": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
     "@testing-library/user-event@npm:^14.6.1": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
     "@types/babel__traverse@npm:*": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch",
@@ -50,16 +50,16 @@
     "@vitest/expect@npm:3.2.4": "patch:@vitest/expect@npm%3A3.2.4#~/.yarn/patches/@vitest-expect-npm-3.2.4-97c526d5cc.patch",
     "aria-query@5.3.0": "^5.3.0",
     "esbuild": "^0.27.0",
-    "playwright": "1.52.0",
-    "playwright-core": "1.52.0",
+    "playwright": "1.58.2",
+    "playwright-core": "1.58.2",
     "react": "^18.2.0",
     "serialize-javascript": "^3.1.0",
     "type-fest": "~2.19",
     "typescript": "^5.9.3"
   },
   "devDependencies": {
     "@nx/workspace": "^22.1.3",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.58.2",
     "@types/kill-port": "^2.0.3",
     "http-server": "^14.1.1",
     "jiti": "^2.6.1",

scripts/ci/sandboxes.ts

@@ -1,6 +1,7 @@
 import { join } from 'path';
 
 import * as sandboxTemplates from '../../code/lib/cli-storybook/src/sandbox-templates';
+import { type TemplateKey } from '../../code/lib/cli-storybook/src/sandbox-templates';
 import { build_linux } from './common-jobs';
 import { LINUX_ROOT_DIR, SANDBOX_DIR, WINDOWS_ROOT_DIR, WORKING_DIR } from './utils/constants';
 import {
@@ -17,6 +18,23 @@ import {
 import { defineJob, defineNoOpJob, isWorkflowOrAbove } from './utils/types';
 import type { JobOrNoOpJob, Workflow } from './utils/types';
 
+function getSandboxSetupSteps(template: string) {
+  const extraSteps = [];
+  const templateData = sandboxTemplates.allTemplates[template as TemplateKey];
+
+  if (templateData.extraCiSteps?.ensureMinNodeVersion) {
+    extraSteps.push({
+      'node/install': {
+        'install-yarn': true,
+        // Currently using Node 22.22.1 as minimum supported version for Angular sandboxes
+        'node-version': '22.22.1',
+      },
+    });
+  }
+
+  return extraSteps;
+}
+
 function defineSandboxJob_build({
   directory,
   name,
@@ -36,6 +54,7 @@ function defineSandboxJob_build({
         class: 'large',
       },
       steps: [
+        ...getSandboxSetupSteps(template),
         ...workflow.restoreLinux(),
         {
           run: {
@@ -75,6 +94,7 @@ function defineSandboxJob_dev({
             class: 'large',
           },
       steps: [
+        ...getSandboxSetupSteps(template),
         ...workflow.restoreLinux(),
         ...(options.e2e
           ? [
@@ -130,6 +150,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
         class: 'large',
       },
       steps: [
+        ...getSandboxSetupSteps(key),
         ...workflow.restoreLinux(),
         verdaccio.start(),
         {
@@ -219,6 +240,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
         class: 'medium',
       },
       steps: [
+        ...getSandboxSetupSteps(key),
         'checkout', // we need the full git history for chromatic
         workspace.attach(),
         cache.attach(CACHE_KEYS()),
@@ -250,6 +272,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
         class: 'medium',
       },
       steps: [
+        ...getSandboxSetupSteps(key),
         ...workflow.restoreLinux(),
         {
           run: {
@@ -270,6 +293,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
         class: 'xlarge',
       },
       steps: [
+        ...getSandboxSetupSteps(key),
         ...workflow.restoreLinux(),
         {
           run: {
@@ -302,6 +326,7 @@ export function defineSandboxFlow<Key extends string>(key: Key) {
         class: 'medium',
       },
       steps: [
+        ...getSandboxSetupSteps(key),
         ...workflow.restoreLinux(),
         {
           run: {
@@ -351,6 +376,7 @@ export function defineSandboxTestRunner(sandbox: ReturnType<typeof defineSandbox
         class: 'medium',
       },
       steps: [
+        ...getSandboxSetupSteps(sandbox.name),
         ...workflow.restoreLinux(),
         {
           run: {

scripts/ci/utils/executors.ts

@@ -7,7 +7,7 @@ export const executors = {
         environment: {
           NODE_OPTIONS: '--max_old_space_size=6144',
         },
-        image: 'cimg/node:22.15.0-browsers',
+        image: 'cimg/node:22.22.1-browsers',
       },
     ],
     parameters: {
@@ -27,7 +27,7 @@ export const executors = {
         environment: {
           NODE_OPTIONS: '--max_old_space_size=6144',
         },
-        image: 'cimg/node:22.15.0',
+        image: 'cimg/node:22.22.1',
       },
     ],
     parameters: {
@@ -47,7 +47,7 @@ export const executors = {
         environment: {
           NODE_OPTIONS: '--max_old_space_size=6144',
         },
-        image: 'mcr.microsoft.com/playwright:v1.52.0-noble',
+        image: 'mcr.microsoft.com/playwright:v1.58.2-noble',
       },
     ],
     parameters: {

scripts/package.json

@@ -144,8 +144,8 @@
     "p-limit": "^7.2.0",
     "p-retry": "^7.1.0",
     "picocolors": "^1.1.0",
-    "playwright": "1.52.0",
-    "playwright-core": "1.52.0",
+    "playwright": "1.58.2",
+    "playwright-core": "1.58.2",
     "polka": "^1.0.0-next.28",
     "prettier": "^3.7.1",
     "prettier-plugin-brace-style": "^0.8.1",

scripts/utils/yarn.ts

@@ -37,9 +37,9 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => {
     ...packageJson.resolutions,
     ...storybookVersions,
     // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml`
-    playwright: '1.52.0',
-    'playwright-core': '1.52.0',
-    '@playwright/test': '1.52.0',
+    playwright: '1.58.2',
+    'playwright-core': '1.58.2',
+    '@playwright/test': '1.58.2',
   };
   await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
 };

test-storybooks/portable-stories-kitchen-sink/react-vitest-3/package.json

@@ -12,7 +12,7 @@
     "vitest": "SKIP_FAIL_ON_PURPOSE=true vitest run"
   },
   "resolutions": {
-    "@playwright/test": "1.52.0",
+    "@playwright/test": "1.58.2",
     "@storybook/addon-a11y": "file:../../../code/addons/a11y",
     "@storybook/addon-docs": "file:../../../code/addons/docs",
     "@storybook/addon-jest": "file:../../../code/addons/jest",
@@ -47,15 +47,15 @@
     "@storybook/web-components": "file:../../../code/renderers/web-components",
     "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite",
     "eslint-plugin-storybook": "file:../../../code/lib/eslint-plugin",
-    "playwright": "1.52.0",
+    "playwright": "1.58.2",
     "storybook": "portal:../../../code/core"
   },
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.52.0",
+    "@playwright/test": "1.58.2",
     "@storybook/addon-a11y": "^8.0.0",
     "@storybook/addon-vitest": "^8.0.0",
     "@storybook/react": "^8.0.0",