Core: Remove CJS bundles, only ship ESM

.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/check-actor-permissions-action@v2.0.4
@@ -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/find-and-replace-pull-request-body@v1.1.6-mcky
         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,12 @@
 <h1>Migration</h1>
 
+- [From version 9.x to 10.0.0](#from-version-9x-to-1000)
+  - [Core Changes](#core-changes)
+    - [Local addons must be fully resolved](#local-addons-must-be-fully-resolved)
+    - [The `.storybook/main.*`-file must be valid ESM](#the-storybookmain-file-must-be-valid-esm)
+    - [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)
+    - [`core.builder` configuration must be a fully resolved path](#corebuilder-configuration-must-be-a-fully-resolved-path)
 - [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 +104,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 +484,102 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 9.x to 10.0.0
+
+### Core Changes
+
+#### Local addons must be fully resolved
+
+In Storybook 9 it was possible to do reference local addons by a relative path, like so:
+
+```ts
+// main.ts
+
+export default {
+  addons: ["./my-addon.ts"],
+};
+```
+
+In Storybook 10 this relative path, should be fully resolved, like so:
+
+```ts
+// main.ts
+
+export default {
+  addons: [import.meta.resolve("./my-addon.ts")],
+};
+```
+
+#### The `.storybook/main.*`-file must be valid ESM
+
+Storybook will load the `.storybook/main.*` file as an ESM file.
+Thus CJS constants (`require`, `__dirname`, `__filename`) will not be defined.
+
+You can define these constants yourself, like so:
+
+```ts
+import { createRequire } from "node:module";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const require = createRequire(import.meta.url);
+```
+
+A `main.ts` file that's CJS is no longer supported.
+
+#### 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.
+
+#### `core.builder` configuration must be a fully resolved path
+
+> [!NOTE]  
+> In the majority of cases, this is only relevant for authors of Storybook framework packages, as regular users very rarely set the `core.builder` property manually.
+
+When setting the `core.builder` or `core.builder.name` option in the main configuration, it must now be a fully resolved path to a builder's entry point, instead of just to the builder package's root directory.
+
+In a preset:
+
+```diff
+import { dirname, join } from 'node:path';
+
+const getAbsolutePath = (input) =>
+  dirname(require.resolve(join(input, 'package.json')));
+
+export const core = {
+-  builder: getAbsolutePath('@storybook/builder-vite'),
+-  // 👆 results in eg. `/absolute/path/node_modules/@storybook/builder-vite
++  builder: import.meta.resolve('@storybook/builder-vite'),
++  // 👆 results in eg. `/absolute/path/node_modules/@storybook/builder-vite/index.js
+  renderer: getAbsolutePath('@storybook/react'),
+};
+```
+
 ## From version 8.x to 9.0.0
 
 ### Core Changes and Removals

code/.storybook/bench/bench.stories.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react-vite';
+
+import { safeMetafileArg } from '../../../scripts/bench/safe-args';
+
+// @ts-expect-error - TS doesn't know about import.meta.glob from Vite
+const allMetafiles = import.meta.glob(['../../bench/esbuild-metafiles/**/*.json'], {
+  import: 'default',
+});
+
+export default {
+  title: 'Bench',
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: { disableSnapshot: true },
+  },
+  args: {
+    // default to the core/node.json metafile
+    metafile: safeMetafileArg(
+      Object.keys(allMetafiles).find((path) => path.includes('/core/node.json'))!
+    ),
+  },
+  argTypes: {
+    metafile: {
+      options: Object.keys(allMetafiles).map(safeMetafileArg).sort(),
+      mapping: Object.fromEntries(
+        Object.keys(allMetafiles).map((path) => [safeMetafileArg(path), path])
+      ),
+      control: {
+        type: 'select',
+        labels: Object.fromEntries(
+          Object.keys(allMetafiles).map((path) => {
+            const [, dirname, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!;
+
+            // most metafile directories are named exactly like their package name within the @storybook scope
+            let packageName = '@storybook/' + dirname;
+
+            // but some are not, so we need to map them to the correct package name
+            switch (dirname) {
+              case 'core': {
+                packageName = 'storybook';
+                break;
+              }
+              case 'eslint-plugin':
+                packageName = 'eslint-plugin-storybook';
+                break;
+              case 'create-storybook':
+              case 'storybook-addon-pseudo-states':
+                packageName = dirname;
+            }
+
+            return [safeMetafileArg(path), `${packageName} - ${subEntry}`];
+          })
+        ),
+      },
+    },
+  },
+  beforeEach: async ({ args }) => {
+    if (!args.metafile) {
+      globalThis.metafile = undefined;
+      return;
+    }
+    const metafile = await allMetafiles[args.metafile]();
+    // this is read by the bundle-analyzer iframe via parent.metafile, in bundle-analyzer/index.js
+    globalThis.metafile = JSON.stringify(metafile);
+  },
+  render: (args) => {
+    return (
+      <iframe
+        src="/bundle-analyzer/index.html"
+        style={{ border: 'none', width: '100%', height: '100vh' }}
+        key={args.metafile} // force re-render on args change
+      />
+    );
+  },
+} satisfies Meta;
+
+export const ESBuildAnalyzer = {
+  name: 'ESBuild Metafiles',
+};