Release: Patch 7.6.9

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

@@ -1,11 +1,11 @@
 name: Publish canary release of PR
-run-name: 'Canary release: PR #${{ inputs.pr }}, triggered by ${{ github.triggering_actor }}'
+run-name: "Canary release: PR #${{ inputs.pr }}, triggered by ${{ github.triggering_actor }}"
 
 on:
   workflow_dispatch:
     inputs:
       pr:
-        description: 'Pull request number to create a canary release for'
+        description: "Pull request number to create a canary release for"
         required: true
         type: number
 
@@ -58,7 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
       - name: Cache dependencies
         uses: actions/cache@v3
         with:
@@ -91,10 +91,10 @@ jobs:
         with:
           githubToken: ${{ secrets.GH_TOKEN }}
           prNumber: ${{ inputs.pr }}
-          find: 'CANARY_RELEASE_SECTION'
+          find: "CANARY_RELEASE_SECTION"
           isHtmlCommentTag: true
           replace: |
-            This pull request has been released as version [`${{ steps.version.outputs.next-version }}`](https://npmjs.com/package/@storybook/cli/v/${{ steps.version.outputs.next-version }}). Install it by pinning all your Storybook dependencies to that version.
+            This pull request has been released as version `${{ steps.version.outputs.next-version }}`. Try it out in a new sandbox by running `npx storybook@${{ steps.version.outputs.next-version }} sandbox` or in an existing project with `npx storybook@${{ steps.version.outputs.next-version }} upgrade`.
             <details>
             <summary>More information</summary>
 

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 7.6.9
+
+- ConfigFile: Fix export specifiers - [#25590](https://github.com/storybookjs/storybook/pull/25590), thanks [@shilman](https://github.com/shilman)!
+- Webpack5: Make export-order-loader compatible with both esm and cjs - [#25540](https://github.com/storybookjs/storybook/pull/25540), thanks [@mlazari](https://github.com/mlazari)!
+- CLI: Support version specifiers in `init`, `upgrade` and `sandbox` - [#25526](https://github.com/storybookjs/storybook/pull/25526), thanks [@ndelangen](https://github.com/ndelangen), [@jreinhold](https://github.com/jreinhold)!
+
 ## 7.6.8
 
 - Addon-actions: Fix module resolution for react-native - [#25296](https://github.com/storybookjs/storybook/pull/25296), thanks [@dannyhw](https://github.com/dannyhw)!

code/builders/builder-webpack5/package.json

@@ -78,6 +78,7 @@
     "babel-loader": "^9.0.0",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "cjs-module-lexer": "^1.2.3",
     "constants-browserify": "^1.0.0",
     "css-loader": "^6.7.1",
     "es-module-lexer": "^1.4.1",

code/builders/builder-webpack5/src/loaders/export-order-loader.ts

@@ -1,34 +1,58 @@
-import { parse } from 'es-module-lexer';
+import assert from 'node:assert';
+import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer';
+import { parse as parseEs } from 'es-module-lexer';
 import MagicString from 'magic-string';
 import type { LoaderContext } from 'webpack';
 
-export default async function loader(this: LoaderContext<any>, source: string) {
+export default async function loader(
+  this: LoaderContext<any>,
+  source: string,
+  map: any,
+  meta: any
+) {
   const callback = this.async();
 
   try {
-    // Do NOT remove await here. The types are wrong! It has to be awaited,
-    // otherwise it will return a Promise<Promise<...>> when wasm isn't loaded.
-    const [, exports = []] = await parse(source);
+    const magicString = new MagicString(source);
+
+    // Trying to parse as ES module
+    try {
+      // Do NOT remove await here. The types are wrong! It has to be awaited,
+      // otherwise it will return a Promise<Promise<...>> when wasm isn't loaded.
+      const parseResult = await parseEs(source);
+      const namedExportsOrder = (parseResult[1] || [])
+        .map((e) => source.substring(e.s, e.e))
+        .filter((e) => e !== 'default');
+
+      assert(
+        namedExportsOrder.length > 0,
+        'No named exports found. Very likely that this is not a ES module.'
+      );
 
-    const namedExportsOrder = exports.some(
-      (e) => source.substring(e.s, e.e) === '__namedExportsOrder'
-    );
+      magicString.append(
+        `;export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
+      );
+      // Try to parse as CJS module
+    } catch {
+      await initCjsParser();
+      const namedExportsOrder = (parseCjs(source).exports || []).filter(
+        (e: string) => e !== 'default' && e !== '__esModule'
+      );
 
-    if (namedExportsOrder) {
-      return callback(null, source);
+      assert(
+        namedExportsOrder.length > 0,
+        'No named exports found. Very likely that this is not a CJS module.'
+      );
+
+      magicString.append(
+        `;module.exports.__namedExportsOrder = ${JSON.stringify(namedExportsOrder)};`
+      );
     }
 
-    const magicString = new MagicString(source);
-    const orderedExports = exports.filter((e) => source.substring(e.s, e.e) !== 'default');
-    magicString.append(
-      `;export const __namedExportsOrder = ${JSON.stringify(
-        orderedExports.map((e) => source.substring(e.s, e.e))
-      )};`
-    );
-
-    const map = magicString.generateMap({ hires: true });
-    return callback(null, magicString.toString(), map);
+    const generatedMap = magicString.generateMap({ hires: true });
+
+    return callback(null, magicString.toString(), generatedMap, meta);
   } catch (err) {
-    return callback(err as any);
+    return callback(null, source, map, meta);
   }
 }

code/builders/builder-webpack5/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["jest", "node"]
   },
   "include": ["src/**/*"]
 }

code/frameworks/nextjs/README.md

@@ -98,7 +98,7 @@ npx storybook@latest init
 This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
 
 ```bash
-npx storybook@latest upgrade --prerelease
+npx storybook@latest upgrade
 ```
 
 #### Automatic migration

code/frameworks/preact-vite/README.md

@@ -22,7 +22,7 @@ npx storybook@latest init
 This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
 
 ```bash
-npx storybook@latest upgrade --prerelease
+npx storybook@latest upgrade
 ```
 
 #### Manual migration

code/frameworks/sveltekit/README.md

@@ -17,7 +17,6 @@ Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) ann
   - [Mocking links](#mocking-links)
 - [Troubleshooting](#troubleshooting)
   - [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook)
-  - [Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview)
 - [Acknowledgements](#acknowledgements)
 
 ## Supported features
@@ -64,7 +63,7 @@ npx storybook@latest init
 This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
 
 ```bash
-npx storybook@latest upgrade --prerelease
+npx storybook@latest upgrade
 ```
 
 #### Automatic migration

code/lib/cli/package.json

@@ -91,7 +91,6 @@
     "puppeteer-core": "^2.1.1",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.7",
-    "simple-update-notifier": "^2.0.0",
     "strip-json-comments": "^3.0.1",
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0",

code/lib/cli/src/automigrate/fixes/builder-vite.ts

@@ -6,6 +6,7 @@ import { writeConfig } from '@storybook/csf-tools';
 import type { Fix } from '../types';
 import type { PackageJson } from '../../js-package-manager';
 import { updateMainConfig } from '../helpers/mainConfigFile';
+import { getStorybookVersionSpecifier } from '../../helpers';
 
 const logger = console;
 
@@ -68,8 +69,11 @@ export const builderVite: Fix<BuilderViteOptions> = {
 
     logger.info(`✅ Adding '@storybook/builder-vite' as dev dependency`);
     if (!dryRun) {
+      const versionToInstall = getStorybookVersionSpecifier(
+        await packageManager.retrievePackageJson()
+      );
       await packageManager.addDependencies({ installAsDevDependencies: true }, [
-        '@storybook/builder-vite',
+        `@storybook/builder-vite@${versionToInstall}`,
       ]);
     }
 

code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.ts

@@ -20,9 +20,11 @@ export const checkWebpack5Builder = async ({
 
         To upgrade to the latest stable release, run this from your project directory:
 
-        ${chalk.cyan('npx storybook upgrade')}
+        ${chalk.cyan('npx storybook@latest upgrade')}
 
-        Add the ${chalk.cyan('--prerelease')} flag to get the latest prerelease.
+        To upgrade to the latest pre-release, run this from your project directory:
+
+        ${chalk.cyan('npx storybook@next upgrade')}
       `.trim()
     );
     return null;

code/lib/cli/src/generate.ts

@@ -73,16 +73,19 @@ command('babelrc')
   .action(() => generateStorybookBabelConfigInCWD());
 
 command('upgrade')
-  .description('Upgrade your Storybook packages to the latest')
+  .description(`Upgrade your Storybook packages to v${versions.storybook}`)
   .option(
     '--package-manager <npm|pnpm|yarn1|yarn2>',
     'Force package manager for installing dependencies'
   )
   .option('-N --use-npm', 'Use NPM to install dependencies (deprecated)')
   .option('-y --yes', 'Skip prompting the user')
   .option('-n --dry-run', 'Only check for upgrades, do not install')
-  .option('-t --tag <tag>', 'Upgrade to a certain npm dist-tag (e.g. next, prerelease)')
-  .option('-p --prerelease', 'Upgrade to the pre-release packages')
+  .option(
+    '-t --tag <tag>',
+    'Upgrade to a certain npm dist-tag (e.g. next, prerelease) (deprecated)'
+  )
+  .option('-p --prerelease', 'Upgrade to the pre-release packages (deprecated)')
   .option('-s --skip-check', 'Skip postinstall version and automigration checks')
   .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
   .action(async (options: UpgradeOptions) => upgrade(options).catch(() => process.exit(1)));
@@ -153,7 +156,7 @@ command('sandbox [filterValue]')
   .option('-b --branch <branch>', 'Define the branch to download from', 'next')
   .option('--no-init', 'Whether to download a template without an initialized Storybook', false)
   .action((filterValue, options) =>
-    sandbox({ filterValue, ...options }).catch((e) => {
+    sandbox({ filterValue, ...options }, pkg).catch((e) => {
       logger.error(e);
       process.exit(1);
     })

code/lib/cli/src/generators/NEXTJS/index.ts

@@ -9,7 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
     { ...options, builder: CoreBuilder.Webpack5 },
     'react',
     {
-      extraAddons: ['@storybook/addon-onboarding'],
+      extraAddons: ['@storybook/addon-onboarding@^1.0.0'],
     },
     'nextjs'
   );

code/lib/cli/src/generators/REACT/index.ts

@@ -11,7 +11,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(packageManager, npmOptions, options, 'react', {
     extraPackages,
     useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
-    extraAddons: ['@storybook/addon-onboarding'],
+    extraAddons: ['@storybook/addon-onboarding@^1.0.0'],
   });
 };
 

code/lib/cli/src/generators/REACT_NATIVE/index.ts

@@ -30,14 +30,14 @@ const generator = async (
     '@storybook/addon-controls@^6.5.16',
   ];
 
-  const resolvedPackages = await packageManager.getVersionedPackages(packagesToResolve);
+  const versionedPackages = await packageManager.getVersionedPackages(packagesToResolve);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
   const packages = [
     ...babelDependencies,
     ...packagesWithFixedVersion,
-    ...resolvedPackages,
+    ...versionedPackages,
     missingReactDom && reactVersion && `react-dom@${reactVersion}`,
   ].filter(Boolean);
 

code/lib/cli/src/generators/REACT_SCRIPTS/index.ts

@@ -6,7 +6,6 @@ import dedent from 'ts-dedent';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 import { CoreBuilder } from '../../project_types';
-import versions from '../../versions';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
   const monorepoRootPath = path.join(__dirname, '..', '..', '..', '..', '..', '..');
@@ -47,11 +46,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
   // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode
   extraPackages.push('prop-types');
 
-  const version = versions['@storybook/preset-create-react-app'];
-  const extraAddons = [
-    `@storybook/preset-create-react-app@${version}`,
-    '@storybook/addon-onboarding',
-  ];
+  const extraAddons = [`@storybook/preset-create-react-app`, '@storybook/addon-onboarding@^1.0.0'];
 
   await baseGenerator(
     packageManager,

code/lib/cli/src/generators/WEBPACK_REACT/index.ts

@@ -4,7 +4,7 @@ import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(packageManager, npmOptions, options, 'react', {
-    extraAddons: ['@storybook/addon-onboarding'],
+    extraAddons: ['@storybook/addon-onboarding@^1.0.0'],
     useSWC: ({ builder }) => builder === CoreBuilder.Webpack5,
   });
 };

code/lib/cli/src/generators/baseGenerator.ts

@@ -328,8 +328,6 @@ export async function baseGenerator(
   const versionedPackages = await packageManager.getVersionedPackages(packages);
   versionedPackagesSpinner.succeed();
 
-  const depsToInstall = [...versionedPackages];
-
   // Add basic babel config for a select few frameworks that need it, if they do not have a babel config file already
   if (builder !== CoreBuilder.Vite && !skipBabel) {
     const frameworksThatNeedBabelConfig = [
@@ -349,7 +347,7 @@ export async function baseGenerator(
     if (hasNoBabelFile && needsBabelConfig) {
       const isTypescript = language !== SupportedLanguage.JAVASCRIPT;
       const isReact = rendererId === 'react';
-      depsToInstall.push(
+      versionedPackages.push(
         ...getBabelPresets({
           typescript: isTypescript,
           jsx: isReact,
@@ -370,7 +368,7 @@ export async function baseGenerator(
 
       if (hasEslint && !isStorybookPluginInstalled) {
         if (skipPrompts || (await suggestESLintPlugin())) {
-          depsToInstall.push('eslint-plugin-storybook');
+          versionedPackages.push('eslint-plugin-storybook');
           await configureEslintPlugin(eslintConfigFile, packageManager);
         }
       }
@@ -379,12 +377,13 @@ export async function baseGenerator(
     // any failure regarding configuring the eslint plugin should not fail the whole generator
   }
 
-  if (depsToInstall.length > 0) {
+  if (versionedPackages.length > 0) {
     const addDependenciesSpinner = ora({
       indent: 2,
       text: 'Installing Storybook dependencies',
     }).start();
-    await packageManager.addDependencies({ ...npmOptions, packageJson }, depsToInstall);
+
+    await packageManager.addDependencies({ ...npmOptions, packageJson }, versionedPackages);
     addDependenciesSpinner.succeed();
   }