Release: Patch 10.3.4

.github/workflows/fork-checks.yml

@@ -25,7 +25,7 @@ jobs:
       - name: check
         run: yarn task --task check
 
-  prettier:
+  formatting:
     name: Core Formatting
     if: github.repository_owner != 'storybookjs'
     runs-on: ubuntu-latest
@@ -39,8 +39,8 @@ jobs:
         with:
           install-code-deps: true
 
-      - name: prettier
-        run: cd code && yarn lint:prettier --check .
+      - name: oxfmt
+        run: cd code && yarn lint:fmt
 
   test:
     strategy:

.github/workflows/nx.yml

@@ -32,7 +32,7 @@ jobs:
 
     runs-on: ubuntu-latest
     env:
-      ALL_TASKS: compile,check,knip,test,pretty-docs,lint,sandbox,build,e2e-tests,e2e-tests-dev,test-runner,vitest-integration,check-sandbox,e2e-ui,jest,vitest,playwright-ct,cypress
+      ALL_TASKS: compile,check,knip,test,lint,fmt,sandbox,build,e2e-tests,e2e-tests-dev,test-runner,vitest-integration,check-sandbox,e2e-ui,jest,vitest,playwright-ct,cypress
     steps:
       - uses: actions/checkout@v4
         with:

.husky/pre-commit

@@ -1,7 +1,3 @@
 if [ -z "$SKIP_STORYBOOK_GIT_HOOKS" ]; then
-  cd code
-  yarn lint-staged
-
-  cd ../scripts
   yarn lint-staged
 fi

.lintstagedrc.mjs

@@ -0,0 +1,11 @@
+import { detectAgent } from 'std-env';
+
+const fmtCmd = detectAgent().name ? 'oxfmt' : 'oxfmt --check';
+
+export default {
+  'code/**/*.{js,jsx,mjs,ts,tsx,html,json}': [fmtCmd, 'yarn --cwd code lint:js:cmd'],
+  'scripts/**/*.{html,js,json,jsx,mjs,ts,tsx}': ['yarn --cwd scripts lint:js:cmd'],
+  'docs/_snippets/**/*.{js,jsx,mjs,ts,tsx,html,json}': [fmtCmd],
+  '**/*.ejs': ['yarn --cwd scripts exec ejslint'],
+  '**/package.json': ['yarn --cwd scripts lint:package'],
+};

.nx/workflows/distribution-config.yaml

@@ -14,7 +14,6 @@ assignment-rules:
       - compile
       - check
       - lint
-      - pretty-docs
       - knip
     run-on:
       - agent: linux-js

.oxfmtrc.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "arrowParens": "always",
+  "sortPackageJson": false,
+  "ignorePatterns": [
+    "*.bundle.js",
+    "*.js.map",
+    ".yarn",
+    ".vscode",
+    ".nx/cache",
+    ".nx/workspace-data",
+    "dist",
+    "build",
+    "bench",
+    "coverage",
+    "node_modules",
+    "storybook-static",
+    "built-storybooks",
+    "ember-output",
+    "code/core/assets",
+    "code/core/report",
+    "code/core/src/core-server/presets/common-manager.ts",
+    "code/core/src/core-server/utils/__search-files-tests__",
+    "code/core/src/core-server/utils/__mockdata__/src/Empty.stories.ts",
+    "code/lib/codemod/src/transforms/__testfixtures__",
+    "code/frameworks/angular/template/**",
+    "code/lib/eslint-plugin",
+    ".prettierrc",
+    "test-storybooks",
+    "*.yml",
+    "*.yaml",
+    "*.md",
+    "*.mdx",
+    "!docs/_snippets/**"
+  ],
+  "overrides": [
+    {
+      "files": ["docs/_snippets/**"],
+      "options": {
+        "trailingComma": "all"
+      }
+    },
+    {
+      "files": ["*.md", "*.mdx"],
+      "options": {
+        "importOrderSeparation": false,
+        "importOrderSortSpecifiers": false
+      }
+    },
+    {
+      "files": ["*.component.html"],
+      "options": {
+        "parser": "angular"
+      }
+    },
+    {
+      "files": ["**/frameworks/angular/src/**/*.ts", "**/frameworks/angular/template/**/*.ts"],
+      "options": {
+        "parser": "babel-ts"
+      }
+    }
+  ]
+}

.serena/memories/project_overview.md

@@ -15,7 +15,7 @@ Current version: 10.2.x (as of March 2026)
 - **Monorepo Tool**: NX (with `--no-cloud` flag required to avoid NX Cloud login issues)
 - **Test Runner**: Vitest (primary), Playwright (E2E)
 - **Linting**: ESLint 8
-- **Formatting**: Prettier 3.7+
+- **Formatting**: Oxfmt
 - **Bundlers**: Vite 7, Webpack 5, esbuild
 - **UI Libraries**: React 18, react-aria (use specific submodules, not root imports)
 - **Build System**: Custom build via `jiti ./scripts/build/build-package.ts`

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "dbaeumer.vscode-eslint",
     "EditorConfig.EditorConfig",
     "unifiedjs.vscode-mdx",
-    "yzhang.markdown-all-in-one"
+    "yzhang.markdown-all-in-one",
+    "oxc.oxc-vscode"
   ]
-}
+}

.vscode/settings.json

@@ -1,30 +1,25 @@
 {
-  "[javascript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.formatOnSave": true
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-    "editor.formatOnSave": true
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode",
     "editor.formatOnSave": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.oxc": "explicit"
   },
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
-  "eslint.format.enable": true,
   "eslint.options": {
     "cache": true,
     "cacheLocation": ".cache/eslint",
-    "extensions": [".js", ".jsx", ".mjs", ".json", ".ts", ".tsx"]
+    "extensions": [
+      ".js",
+      ".jsx",
+      ".mjs",
+      ".json",
+      ".ts",
+      ".tsx"
+    ]
   },
   "eslint.useESLintClass": true,
   "eslint.validate": [
@@ -35,14 +30,17 @@
     "typescript",
     "typescriptreact"
   ],
-  "eslint.workingDirectories": ["./code", "./scripts"],
+  "eslint.workingDirectories": [
+    "./code",
+    "./scripts"
+  ],
   "files.associations": {
-    "*.js": "javascriptreact"
+    "*.js": "javascriptreact",
+    ".oxfmtrc.json": "json"
   },
   "javascript.preferences.importModuleSpecifier": "relative",
   "javascript.preferences.quoteStyle": "single",
   "js/ts.implicitProjectConfig.target": "ESNext",
-  "prettier.ignorePath": "./code/.prettierignore",
   "storyExplorer.storybookConfigDir": "./code/.storybook",
   "typescript.format.enable": false,
   "typescript.preferences.importModuleSpecifier": "relative",
@@ -52,4 +50,6 @@
   "typescript.tsdk": "./typescript/lib",
   "vitest.workspaceConfig": "./code/vitest.workspace.ts",
   "vitest.rootConfig": "./code/vitest.workspace.ts",
-}
+  "oxc.fmt.configPath": ".oxfmtrc.json",
+  "oxc.enable.oxlint": false,
+}

AGENTS.md

@@ -234,7 +234,7 @@ When writing tests:
 
 After changing files:
 
-1. Format with `yarn prettier --write <file>`
+1. Format with `cd code && oxfmt`
 2. Lint with `yarn --cwd code lint:js:cmd <file-relative-to-code-folder> --fix` or `cd code && yarn lint:js:cmd <file-relative-to-code-folder>`
 3. Run relevant tests before submitting a PR
 
@@ -243,6 +243,8 @@ Use Storybook loggers instead of raw `console.*` in normal code paths:
 - Server-side: `storybook/internal/node-logger`
 - Client-side: `storybook/internal/client-logger`
 
+The pre-commit hook automatically detects AI agents (via `std-env`) and switches from check-only to write mode, so formatting is auto-fixed when agents commit.
+
 Avoid `console.log`, `console.warn`, and `console.error` unless the file is isolated enough that importing the logger is not reasonable.
 
 ## Troubleshooting

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 10.3.4
+
+- Addon-a11y: Clear status transition timer on unmount to prevent test flake - [#34203](https://github.com/storybookjs/storybook/pull/34203), thanks @mixelburg!
+- Bug: Skip re-processing already transformed config files for CSF factories - [#34273](https://github.com/storybookjs/storybook/pull/34273), thanks @huang-julien!
+- Builder-Vite: Use djb2 hash to prevent variable name collisions in builder-vite - [#34274](https://github.com/storybookjs/storybook/pull/34274), thanks @chida09!
+- CLI: Prompt for init crash reports - [#34316](https://github.com/storybookjs/storybook/pull/34316), thanks @JReinhold!
+- CSF4: Fix duplicate preview loading issue in Vitest - [#34361](https://github.com/storybookjs/storybook/pull/34361), thanks @valentinpalkovic!
+- Core: Fix WebSocket connection for StackBlitz/WebContainers - [#34281](https://github.com/storybookjs/storybook/pull/34281), thanks @ghengeveld!
+- React-Docgen: Try .tsx fallback when resolving .js ESM imports in docgen resolvers - [#34393](https://github.com/storybookjs/storybook/pull/34393), thanks @mixelburg!
+- React-Vite: Upgrade @joshwooding/vite-plugin-react-docgen-typescript to 0.7.0 - [#34335](https://github.com/storybookjs/storybook/pull/34335), thanks @beeswhacks!
+
 ## 10.3.3
 
 - Addon-Vitest: Streamline vite(st) config detection across init and postinstall - [#34193](https://github.com/storybookjs/storybook/pull/34193), thanks @valentinpalkovic!

CONTRIBUTING.md

@@ -86,7 +86,7 @@ Here's a highlight of notable directories and files:
 │   ├── package.json
 │   ├── playwright.config.ts
 │   ├── presets                  # Preset packages
-│   ├── prettier.config.mjs
+│   ├── .oxfmtrc.json
 │   ├── renderers                # Storybook renderers for different frameworks
 │   ├── sandbox                  # Sandboxes for Bug Reproductions or experimentation
 │   ├── tsconfig.json
@@ -117,7 +117,7 @@ Here's a highlight of notable directories and files:
 │   └── writing-tests
 ├── node_modules
 ├── package.json                      # Root of the yarn monorepo
-├── prettier.config.mjs
+├── .oxfmtrc.json
 ├── scripts                           # Build and Helper Scripts
 ├── test-storybooks
 │   ├── ember-cli

code/addons/a11y/src/components/A11yContext.tsx

@@ -1,5 +1,13 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   STORY_CHANGED,
@@ -140,9 +148,22 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
   }, [setState, storyId]);
 
   const handleToggleHighlight = useCallback(() => {
-    setState((prev) => ({ ...prev, ui: { ...prev.ui, highlighted: !prev.ui.highlighted } }));
+    setState((prev) => ({
+      ...prev,
+      ui: { ...prev.ui, highlighted: !prev.ui.highlighted },
+    }));
   }, [setState]);
 
+  const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (statusTimerRef.current !== null) {
+        clearTimeout(statusTimerRef.current);
+      }
+    };
+  }, []);
+
   const [selectedItems, setSelectedItems] = useState<Map<string, string>>(() => {
     const initialValue = new Map();
     // Check if the a11ySelection param is a valid format before parsing it
@@ -202,7 +223,11 @@ export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
       if (storyId === id) {
         setState((prev) => ({ ...prev, status: 'ran', results: axeResults }));
 
-        setTimeout(() => {
+        if (statusTimerRef.current !== null) {
+          clearTimeout(statusTimerRef.current);
+        }
+        statusTimerRef.current = setTimeout(() => {
+          statusTimerRef.current = null;
           setState((prev) => {
             if (prev.status === 'ran') {
               return { ...prev, status: 'ready' };

code/addons/docs/docs/frameworks/WEB_COMPONENTS.md

@@ -14,7 +14,7 @@
   ```js
   import { setCustomElementsManifest } from '@storybook/web-components';
   import customElements from '../custom-elements.json';
-  
+
   setCustomElementsManifest(customElements);
   ```
 

code/addons/vitest/src/vitest-plugin/index.ts

@@ -303,22 +303,16 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
       finalOptions.includeStories = includeStories;
       const projectId = oneWayHash(finalOptions.configDir);
 
-      const previewOrConfigFile = loadPreviewOrConfigFile({ configDir: finalOptions.configDir });
-      const previewConfig = previewOrConfigFile ? await readConfig(previewOrConfigFile) : undefined;
-      const isCSF4 = previewConfig ? isCsfFactoryPreview(previewConfig) : false;
-
       const areProjectAnnotationRequired = await requiresProjectAnnotations(
         nonMutableInputConfig.test,
-        finalOptions,
-        isCSF4
+        finalOptions
       );
 
       const internalSetupFiles = (
         [
           '@storybook/addon-vitest/internal/setup-file',
           areProjectAnnotationRequired &&
             '@storybook/addon-vitest/internal/setup-file-with-project-annotations',
-          isCSF4 && previewOrConfigFile,
         ].filter(Boolean) as string[]
       ).map((filePath) => fileURLToPath(import.meta.resolve(filePath)));
 

code/addons/vitest/src/vitest-plugin/utils.ts

@@ -20,8 +20,7 @@ const logBoxOnce = (message: string) => {
 
 export async function requiresProjectAnnotations(
   testConfig: ViteUserConfig['test'] | undefined,
-  finalOptions: InternalOptions,
-  isCSF4: boolean
+  finalOptions: InternalOptions
 ) {
   const setupFiles = Array.isArray(testConfig?.setupFiles)
     ? testConfig.setupFiles
@@ -58,8 +57,6 @@ export async function requiresProjectAnnotations(
       You can safely remove the "setProjectAnnotations" call from your setup file, or remove the file entirely if you don't have custom code there.
     `);
 
-    return false;
-  } else if (isCSF4) {
     return false;
   }