From ff7477e3fd735b8b5f8668b1a94ff1e346989141 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 21 Aug 2023 08:41:35 +0200 Subject: [PATCH 1/2] Revert "Maintenance: Revert "WebpackBuilder: Remove need for `react` as peerDependency"" --- code/builders/builder-webpack5/package.json | 14 +--------- .../src/preview/iframe-webpack.config.ts | 26 +++++++++++++------ code/yarn.lock | 15 ++--------- 3 files changed, 21 insertions(+), 34 deletions(-) diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 9d31c809a045..be1dedb5a660 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -56,23 +56,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.22.9", - "@storybook/addons": "workspace:*", + "@babel/core": "^7.22.0", "@storybook/channels": "workspace:*", - "@storybook/client-api": "workspace:*", "@storybook/client-logger": "workspace:*", - "@storybook/components": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/global": "^5.0.0", - "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/router": "workspace:*", - "@storybook/store": "workspace:*", - "@storybook/theming": "workspace:*", "@swc/core": "^1.3.49", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", @@ -110,10 +102,6 @@ "slash": "^5.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "peerDependenciesMeta": { "typescript": { "optional": true diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index c99a1df1da81..704d8fe2b98b 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -36,19 +36,29 @@ const storybookPaths: Record = { `@storybook/components` )}/dist/experimental`, ...[ - // these packages are not pre-bundled because of react dependencies + // these packages are not pre-bundled because of react dependencies. + // these are not dependencies of the builder anymore, thus resolving them can fail. + // we should remove the aliases in 8.0, I'm not sure why they are here in the first place. 'components', 'global', 'manager-api', 'router', 'theming', - ].reduce( - (acc, sbPackage) => ({ - ...acc, - [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`), - }), - {} - ), + ].reduce((acc, sbPackage) => { + let packagePath; + try { + packagePath = getAbsolutePath(`@storybook/${sbPackage}`); + } catch (e) { + // ignore + } + if (packagePath) { + return { + ...acc, + [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`), + }; + } + return acc; + }, {}), // deprecated, remove in 8.0 [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`), }; diff --git a/code/yarn.lock b/code/yarn.lock index a576cddaf7a5..88afaae488c0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -453,7 +453,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.0, @babel/core@npm:^7.22.1, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": version: 7.22.9 resolution: "@babel/core@npm:7.22.9" dependencies: @@ -6466,23 +6466,15 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/builder-webpack5@workspace:builders/builder-webpack5" dependencies: - "@babel/core": ^7.22.9 - "@storybook/addons": "workspace:*" + "@babel/core": ^7.22.0 "@storybook/channels": "workspace:*" - "@storybook/client-api": "workspace:*" "@storybook/client-logger": "workspace:*" - "@storybook/components": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/global": ^5.0.0 - "@storybook/manager-api": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" - "@storybook/router": "workspace:*" - "@storybook/store": "workspace:*" - "@storybook/theming": "workspace:*" "@swc/core": ^1.3.49 "@types/node": ^16.0.0 "@types/pretty-hrtime": ^1.0.0 @@ -6517,9 +6509,6 @@ __metadata: webpack-dev-middleware: ^6.1.1 webpack-hot-middleware: ^2.25.1 webpack-virtual-modules: ^0.5.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: typescript: optional: true From 78c2d88695e7fd1b4cc91b7c7c3136e0da2a506f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 21 Aug 2023 09:22:31 +0200 Subject: [PATCH 2/2] refactor --- .../src/preview/iframe-webpack.config.ts | 64 ++++++++++--------- 1 file changed, 34 insertions(+), 30 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 704d8fe2b98b..513b3c36849d 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -29,38 +29,42 @@ import { createBabelLoader, createSWCLoader } from './loaders'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; +const maybeGetAbsolutePath = (input: I): I | false => { + try { + return getAbsolutePath(input); + } catch (e) { + return false; + } +}; +const managerAPIPath = maybeGetAbsolutePath(`@storybook/manager-api`); +const componentsPath = maybeGetAbsolutePath(`@storybook/components`); +const componentsExperimentalPath = componentsPath ? `${componentsPath}/dist/experimental` : false; +const globalPath = maybeGetAbsolutePath(`@storybook/global`); +const routerPath = maybeGetAbsolutePath(`@storybook/router`); +const themingPath = maybeGetAbsolutePath(`@storybook/theming`); + +// these packages are not pre-bundled because of react dependencies. +// these are not dependencies of the builder anymore, thus resolving them can fail. +// we should remove the aliases in 8.0, I'm not sure why they are here in the first place. const storybookPaths: Record = { - // this is a temporary hack to get webpack to alias this correctly - [`@storybook/components/experimental`]: `${getAbsolutePath( - `@storybook/components` - )}/dist/experimental`, - ...[ - // these packages are not pre-bundled because of react dependencies. - // these are not dependencies of the builder anymore, thus resolving them can fail. - // we should remove the aliases in 8.0, I'm not sure why they are here in the first place. - 'components', - 'global', - 'manager-api', - 'router', - 'theming', - ].reduce((acc, sbPackage) => { - let packagePath; - try { - packagePath = getAbsolutePath(`@storybook/${sbPackage}`); - } catch (e) { - // ignore - } - if (packagePath) { - return { - ...acc, - [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`), - }; - } - return acc; - }, {}), - // deprecated, remove in 8.0 - [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`), + ...(managerAPIPath + ? { + // deprecated, remove in 8.0 + [`@storybook/api`]: managerAPIPath, + [`@storybook/manager-api`]: managerAPIPath, + } + : {}), + ...(componentsPath + ? { + // this is a temporary hack to get webpack to alias this correctly + [`@storybook/components/experimental`]: componentsExperimentalPath as any, + [`@storybook/components`]: componentsPath, + } + : {}), + ...(globalPath ? { [`@storybook/global`]: globalPath } : {}), + ...(routerPath ? { [`@storybook/router`]: routerPath } : {}), + ...(themingPath ? { [`@storybook/theming`]: themingPath } : {}), }; export default async (