Experimentation

.github/workflows/canary-release-pr.yml

@@ -1,5 +1,5 @@
 name: Publish canary release of PR
-run-name: "Canary release: PR #${{ inputs.pr }}, triggered by ${{ github.triggering_actor }}"
+run-name: "Canary release: PR #${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }}, triggered by ${{ github.triggering_actor }}"
 
 on:
   workflow_dispatch:
@@ -8,13 +8,15 @@ on:
         description: "Pull request number to create a canary release for"
         required: true
         type: number
+  pull_request:
+    types: [opened, synchronize, reopened]
 
 env:
   PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
   PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
 
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.inputs.pr }}
+  group: ${{ github.workflow }}-${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }}
   cancel-in-progress: true
 
 permissions:
@@ -25,6 +27,7 @@ jobs:
     name: Release canary version
     runs-on: ubuntu-latest
     environment: release
+    if: github.event_name == 'workflow_dispatch' || github.head_ref == 'sb10/esm-only'
     steps:
       - name: Fail if triggering actor is not administrator
         uses: prince-chrismc/[email protected]
@@ -36,7 +39,8 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
         run: |
-          PR_INFO=$(gh pr view ${{ inputs.pr }} --repo ${{ github.repository }} --json isCrossRepository,headRefOid,headRefName,headRepository,headRepositoryOwner --jq '{isFork: .isCrossRepository, owner: .headRepositoryOwner.login, repoName: .headRepository.name, branch: .headRefName, sha: .headRefOid}')
+          PR_NUMBER=${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }}
+          PR_INFO=$(gh pr view $PR_NUMBER --repo ${{ github.repository }} --json isCrossRepository,headRefOid,headRefName,headRepository,headRepositoryOwner --jq '{isFork: .isCrossRepository, owner: .headRepositoryOwner.login, repoName: .headRepository.name, branch: .headRefName, sha: .headRefOid}')
           echo $PR_INFO
           # Loop through each key-value pair in PR_INFO and set as step output
           for key in $(echo "$PR_INFO" | jq -r 'keys[]'); do
@@ -78,7 +82,8 @@ jobs:
         id: version
         working-directory: scripts
         run: |
-          yarn release:version --exact 0.0.0-pr-${{ inputs.pr }}-sha-${{ steps.info.outputs.shortSha }} --verbose
+          PR_NUMBER=${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }}
+          yarn release:version --exact 0.0.0-pr-$PR_NUMBER-sha-${{ steps.info.outputs.shortSha }} --verbose
 
       - name: Publish v${{ steps.version.outputs.next-version }}
         env:
@@ -91,7 +96,7 @@ jobs:
         uses: mcky/[email protected]
         with:
           githubToken: ${{ secrets.GH_TOKEN }}
-          prNumber: ${{ inputs.pr }}
+          prNumber: ${{ github.event_name == 'workflow_dispatch' && inputs.pr || '' }}
           find: "CANARY_RELEASE_SECTION"
           isHtmlCommentTag: true
           replace: |
@@ -111,14 +116,15 @@ jobs:
 
             To request a new release of this pull request, mention the `@storybookjs/core` team.
 
-            _core team members can create a new canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=${{ inputs.pr }}`_
+            _core team members can create a new canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }}`_
             </details>
 
       - name: Create failing comment on PR
         if: failure()
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
         run: |
-          gh pr comment ${{ inputs.pr }}\
+          PR_NUMBER=${{ github.event_name == 'workflow_dispatch' && inputs.pr || github.event.pull_request.number }}
+          gh pr comment $PR_NUMBER\
             --repo "${{github.repository }}"\
             --body "Failed to publish canary version of this pull request, triggered by @${{ github.triggering_actor }}. See the failed workflow run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"

.github/workflows/tests-unit.yml

@@ -13,8 +13,6 @@ env:
 jobs:
   build:
     name: Core Unit Tests, windows-latest
-    strategy:
-      fail-fast: false
     runs-on: windows-11-arm
     steps:
       - uses: actions/checkout@v4
@@ -24,6 +22,10 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
+          cache: 'yarn'
+          cache-dependency-path: |
+            code/yarn.lock
+            scripts/yarn.lock
 
       - name: install scripts
         run: |

.nvmrc

@@ -1,2 +1,2 @@
-22.13.1
+22.16.0
 

MIGRATION.md

@@ -1,5 +1,9 @@
 <h1>Migration</h1>
 
+- [From version 9.x to 10.0.0](#from-version-9x-to-1000)
+  - [Core Changes](#core-changes)
+    - [Node.js 20.19+ or 22.12+ required](#nodejs-2019-or-2212-required)
+    - [Require `tsconfig.json` `moduleResolution` set to value that supports `types` condition](#require-tsconfigjson-moduleresolution-set-to-value-that-supports-types-condition)
 - [From version 8.x to 9.0.0](#from-version-8x-to-900)
   - [Core Changes and Removals](#core-changes-and-removals)
     - [Dropped support for legacy packages](#dropped-support-for-legacy-packages)
@@ -97,7 +101,7 @@
     - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3)
     - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
     - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block)
-  - [Core changes](#core-changes)
+  - [Core changes](#core-changes-1)
     - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed)
     - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5)
     - [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed)
@@ -477,6 +481,37 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 9.x to 10.0.0
+
+### Core Changes
+
+#### Node.js 20.19+ or 22.12+ required
+
+Storybook 10 now requires Node.js version 20.19+ or 22.12+. We require these new ranges so Node.js supports `require(esm)` without a flag.
+
+#### Require `tsconfig.json` `moduleResolution` set to value that supports `types` condition
+
+Storybook 10 has removed all `typesVersions` fields from `package.json` files. This field was previously needed for older TypeScript module resolution strategies that didn't support the `types` condition in package.json exports.
+
+**Required action:** Update your `tsconfig.json` to use a `moduleResolution` that supports the `types` condition:
+
+```json
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler" // or "node16"/"nodenext"
+  }
+}
+```
+
+**Supported values:**
+
+- `"bundler"` (recommended for modern bundler-based projects)
+- `"node16"` or `"nodenext"` (Node.js 16+ module resolution)
+
+**Note:** If you're currently using `moduleResolution: "node"` (the old Node.js 10-style resolution), you'll need to upgrade to one of the supported values above.
+
+This change simplifies our package structure and aligns with modern TypeScript standards. Only TypeScript projects are affected - JavaScript projects require no changes.
+
 ## From version 8.x to 9.0.0
 
 ### Core Changes and Removals

code/.storybook/bench.stories.tsx

@@ -35,10 +35,14 @@ export default {
         labels: Object.fromEntries(
           Object.keys(allMetafiles).map((path) => {
             const [, dirName, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!;
-            const pkgName = PACKAGES_WITHOUT_ORG.includes(dirName)
+            let pkgName = PACKAGES_WITHOUT_ORG.includes(dirName)
               ? dirName
               : `@storybook/${dirName}`;
 
+            if (pkgName === '@storybook/core') {
+              pkgName = 'storybook';
+            }
+
             return [
               safeMetafileArg(path),
               subEntry !== 'metafile' ? `${pkgName} - ${subEntry}` : pkgName,
@@ -66,6 +70,31 @@ export default {
   render: (args, { loaded }) => {
     const { encodedMetafile = '' } = loaded ?? {};
 
+    if (encodedMetafile.length > 2020836) {
+      return (
+        <div style={{ padding: '2rem' }}>
+          <h1>Metafile is too large</h1>
+          <p>
+            The metafile <code>{args.metafile}</code> is <strong>too large</strong> to be displayed
+            in the iframe. This is because we base64-encode the contents of the metafile into the
+            URL of the <code>{'<iframe />'}</code> component, and there's a maximum length of{' '}
+            <code>~2MB</code> for the URL.
+          </p>
+          <p>
+            You can visit the{' '}
+            <a href="https://esbuild.github.io/analyze/" target="_blank" rel="noreferrer">
+              esbuild analyzer website
+            </a>{' '}
+            manually to see the metafile.
+          </p>
+          <p>
+            You will have to find the metafile in the <code>code/bench/esbuild-metafiles</code>{' '}
+            directory and upload it manually.
+          </p>
+        </div>
+      );
+    }
+
     return (
       <iframe
         // esbuild analyzer has a hidden feature to load a base64-encoded metafile from the the URL hash

code/addons/a11y/package.json

@@ -25,35 +25,20 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.js"
     },
     "./preview": {
       "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
+      "default": "./dist/preview.js"
     },
     "./manager": "./dist/manager.js",
-    "./register": "./dist/manager.js",
     "./package.json": "./package.json",
     "./postinstall": "./dist/postinstall.js"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "preview": [
-        "dist/preview.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -62,7 +47,7 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
+    "check": "jiti ../../../scripts/check/check-package.ts",
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
@@ -100,7 +85,7 @@
       "./src/postinstall.ts"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "e6e7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

code/addons/docs/package.json

@@ -70,25 +70,6 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "angular": [
-        "angular/index.d.ts"
-      ],
-      "blocks": [
-        "dist/blocks.d.ts"
-      ],
-      "ember": [
-        "ember/index.d.ts"
-      ],
-      "preview": [
-        "dist/preview.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "angular/**/*",
@@ -106,7 +87,7 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
+    "check": "jiti ../../../scripts/check/check-package.ts",
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
@@ -162,7 +143,7 @@
       "./src/manager.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "e6e7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

code/addons/jest/package.json

@@ -48,7 +48,7 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
+    "check": "jiti ../../../scripts/check/check-package.ts",
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
@@ -76,7 +76,7 @@
       "./src/manager.tsx"
     ]
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "e6e7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Jest",
     "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

code/addons/links/package.json

@@ -43,19 +43,6 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "preview": [
-        "dist/preview.d.ts"
-      ],
-      "react": [
-        "dist/react/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -64,7 +51,7 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
+    "check": "jiti ../../../scripts/check/check-package.ts",
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
@@ -98,7 +85,7 @@
     ],
     "post": "./scripts/fix-preview-api-reference.ts"
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
+  "gitHead": "e6e7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
     "displayName": "Links",
     "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

code/addons/onboarding/package.json

@@ -41,7 +41,7 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
+    "check": "jiti ../../../scripts/check/check-package.ts",
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "devDependencies": {