From b4bf2355cb608ccd851ca77f7786bfc65ed8a886 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 9 Jun 2020 10:22:22 +0200 Subject: [PATCH 1/8] FIX paths and minification --- lib/core/package.json | 2 + .../server/manager/manager-webpack.config.js | 14 ++++++ .../server/preview/iframe-webpack.config.js | 47 ++++++++++++++----- 3 files changed, 50 insertions(+), 13 deletions(-) diff --git a/lib/core/package.json b/lib/core/package.json index 795f75cdfabd..49849dbc30fd 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -53,7 +53,9 @@ "@babel/register": "^7.8.3", "@storybook/addons": "6.0.0-beta.23", "@storybook/api": "6.0.0-beta.23", + "@storybook/channels": "6.0.0-beta.23", "@storybook/channel-postmessage": "6.0.0-beta.23", + "@storybook/components": "6.0.0-beta.23", "@storybook/client-api": "6.0.0-beta.23", "@storybook/client-logger": "6.0.0-beta.23", "@storybook/core-events": "6.0.0-beta.23", diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js index f818e4e1a9cc..1be554833840 100644 --- a/lib/core/src/server/manager/manager-webpack.config.js +++ b/lib/core/src/server/manager/manager-webpack.config.js @@ -6,6 +6,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import PnpWebpackPlugin from 'pnp-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; +import TerserWebpackPlugin from 'terser-webpack-plugin'; import themingPaths from '@storybook/theming/paths'; import uiPaths from '@storybook/ui/paths'; @@ -158,6 +159,19 @@ export default async ({ chunks: 'all', }, runtimeChunk: true, + minimizer: isProd + ? [ + new TerserWebpackPlugin({ + cache: true, + parallel: true, + sourceMap: true, + terserOptions: { + mangle: false, + keep_fnames: true, + }, + }), + ] + : [], }, }; }; diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index c3a458036333..3841c2880619 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -12,6 +12,8 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import resolveFrom from 'resolve-from'; +import themingPaths from '@storybook/theming/paths'; + import { createBabelLoader } from './babel-loader-preview'; import es6Transpiler from '../common/es6Transpiler'; @@ -21,6 +23,22 @@ import { toRequireContextString } from './to-require-context'; import { useBaseTsSupport } from '../config/useBaseTsSupport'; const reactPaths = {}; +const storybookPaths = { + '@storybook/addons': path.dirname(resolveFrom('@storybook/addons/package.json')), + '@storybook/api': path.dirname(resolveFrom('@storybook/api/package.json')), + '@storybook/channels': path.dirname(resolveFrom('@storybook/channels/package.json')), + '@storybook/channel-postmessage': path.dirname( + resolveFrom('@storybook/channel-postmessage/package.json') + ), + '@storybook/components': path.dirname(resolveFrom('@storybook/components/package.json')), + '@storybook/core-events': path.dirname(resolveFrom('@storybook/core-events/package.json')), + '@storybook/router': path.dirname(resolveFrom('@storybook/router/package.json')), + '@storybook/theming': path.dirname(resolveFrom('@storybook/theming/package.json')), + '@storybook/semver': path.dirname(resolveFrom('@storybook/semver/package.json')), + '@storybook/client-api': path.dirname( + resolveFrom(__dirname, '@storybook/client-api/package.json') + ), +}; try { reactPaths.react = path.dirname(resolveFrom(process.cwd(), 'react/package.json')); reactPaths['react-dom'] = path.dirname(resolveFrom(process.cwd(), 'react-dom/package.json')); @@ -159,8 +177,9 @@ export default async ({ extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'], modules: ['node_modules'].concat(raw.NODE_PATH || []), alias: { - 'babel-runtime/core-js/object/assign': require.resolve('core-js/es/object/assign'), - semver: require.resolve('@storybook/semver'), + ...themingPaths, + ...storybookPaths, + semver: path.dirname(resolveFrom('@storybook/semver/package.json')), ...reactPaths, }, @@ -177,17 +196,19 @@ export default async ({ chunks: 'all', }, runtimeChunk: true, - minimizer: [ - new TerserWebpackPlugin({ - cache: true, - parallel: true, - sourceMap: true, - terserOptions: { - mangle: false, - keep_fnames: true, - }, - }), - ], + minimizer: isProd + ? [ + new TerserWebpackPlugin({ + cache: true, + parallel: true, + sourceMap: true, + terserOptions: { + mangle: false, + keep_fnames: true, + }, + }), + ] + : [], }, performance: { hints: isProd ? 'warning' : false, From 541ce5ce78204a2fcc4eac2f8a10d71320a06b05 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 9 Jun 2020 11:03:57 +0200 Subject: [PATCH 2/8] FIX versions --- lib/api/src/version.ts | 2 +- lib/cli/versions.json | 30 +++++++++++++++--------------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts index 1962fbb87428..13111751726a 100644 --- a/lib/api/src/version.ts +++ b/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '6.0.0-beta.22'; +export const version = '6.0.0-beta.23'; diff --git a/lib/cli/versions.json b/lib/cli/versions.json index 12aa22d7684a..484f75880689 100644 --- a/lib/cli/versions.json +++ b/lib/cli/versions.json @@ -1,17 +1,17 @@ { - "@storybook/angular": "6.0.0-beta.22", - "@storybook/aurelia": "6.0.0-beta.22", - "@storybook/ember": "6.0.0-beta.22", - "@storybook/html": "6.0.0-beta.22", - "@storybook/marionette": "6.0.0-beta.22", - "@storybook/marko": "6.0.0-beta.22", - "@storybook/mithril": "6.0.0-beta.22", - "@storybook/preact": "6.0.0-beta.22", - "@storybook/rax": "6.0.0-beta.22", - "@storybook/react": "6.0.0-beta.22", - "@storybook/riot": "6.0.0-beta.22", - "@storybook/server": "6.0.0-beta.22", - "@storybook/svelte": "6.0.0-beta.22", - "@storybook/vue": "6.0.0-beta.22", - "@storybook/web-components": "6.0.0-beta.22" + "@storybook/angular": "6.0.0-beta.23", + "@storybook/aurelia": "6.0.0-beta.23", + "@storybook/ember": "6.0.0-beta.23", + "@storybook/html": "6.0.0-beta.23", + "@storybook/marionette": "6.0.0-beta.23", + "@storybook/marko": "6.0.0-beta.23", + "@storybook/mithril": "6.0.0-beta.23", + "@storybook/preact": "6.0.0-beta.23", + "@storybook/rax": "6.0.0-beta.23", + "@storybook/react": "6.0.0-beta.23", + "@storybook/riot": "6.0.0-beta.23", + "@storybook/server": "6.0.0-beta.23", + "@storybook/svelte": "6.0.0-beta.23", + "@storybook/vue": "6.0.0-beta.23", + "@storybook/web-components": "6.0.0-beta.23" } \ No newline at end of file From f48edc7d17c9e96e1122ddfa600ecf77498fb4d4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 9 Jun 2020 11:04:19 +0200 Subject: [PATCH 3/8] FIX alias pathing --- .../server/preview/iframe-webpack.config.js | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index 3841c2880619..9f44ac8ab6ee 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -24,20 +24,27 @@ import { useBaseTsSupport } from '../config/useBaseTsSupport'; const reactPaths = {}; const storybookPaths = { - '@storybook/addons': path.dirname(resolveFrom('@storybook/addons/package.json')), - '@storybook/api': path.dirname(resolveFrom('@storybook/api/package.json')), - '@storybook/channels': path.dirname(resolveFrom('@storybook/channels/package.json')), + '@storybook/addons': path.dirname(resolveFrom(__dirname, '@storybook/addons/package.json')), + '@storybook/api': path.dirname(resolveFrom(__dirname, '@storybook/api/package.json')), + '@storybook/channels': path.dirname(resolveFrom(__dirname, '@storybook/channels/package.json')), '@storybook/channel-postmessage': path.dirname( - resolveFrom('@storybook/channel-postmessage/package.json') + resolveFrom(__dirname, '@storybook/channel-postmessage/package.json') ), - '@storybook/components': path.dirname(resolveFrom('@storybook/components/package.json')), - '@storybook/core-events': path.dirname(resolveFrom('@storybook/core-events/package.json')), - '@storybook/router': path.dirname(resolveFrom('@storybook/router/package.json')), - '@storybook/theming': path.dirname(resolveFrom('@storybook/theming/package.json')), - '@storybook/semver': path.dirname(resolveFrom('@storybook/semver/package.json')), + '@storybook/components': path.dirname( + resolveFrom(__dirname, '@storybook/components/package.json') + ), + '@storybook/core-events': path.dirname( + resolveFrom(__dirname, '@storybook/core-events/package.json') + ), + '@storybook/router': path.dirname(resolveFrom(__dirname, '@storybook/router/package.json')), + '@storybook/theming': path.dirname(resolveFrom(__dirname, '@storybook/theming/package.json')), + '@storybook/semver': path.dirname(resolveFrom(__dirname, '@storybook/semver/package.json')), '@storybook/client-api': path.dirname( resolveFrom(__dirname, '@storybook/client-api/package.json') ), + '@storybook/client-logger': path.dirname( + resolveFrom(__dirname, '@storybook/client-logger/package.json') + ), }; try { reactPaths.react = path.dirname(resolveFrom(process.cwd(), 'react/package.json')); @@ -82,13 +89,8 @@ export default async ({ const match = entryFilename.match(/(.*)-generated-(config|other)-entry.js$/); if (match) { const configFilename = match[1]; - const isUsingYarnPnp = typeof process.versions.pnp !== 'undefined'; - const clientApi = isUsingYarnPnp - ? `${require.resolve('@storybook/client-api')}` - : '@storybook/client-api'; - const clientLogger = isUsingYarnPnp - ? `${require.resolve('@storybook/client-logger')}` - : '@storybook/client-logger'; + const clientApi = storybookPaths['@storybook/client-api']; + const clientLogger = storybookPaths['@storybook/client-logger']; virtualModuleMapping[entryFilename] = interpolate(entryTemplate, { configFilename, @@ -179,7 +181,7 @@ export default async ({ alias: { ...themingPaths, ...storybookPaths, - semver: path.dirname(resolveFrom('@storybook/semver/package.json')), + semver: path.dirname(resolveFrom(__dirname, '@storybook/semver/package.json')), ...reactPaths, }, From 262fca682c19ee71375e32fbcb6dc201923d704c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 9 Jun 2020 15:11:42 +0200 Subject: [PATCH 4/8] disable cra-preset for now --- examples/cra-kitchen-sink/.storybook/main.js | 2 +- examples/cra-react15/.storybook/main.js | 2 +- examples/cra-ts-essentials/.storybook/main.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js index f86c04a4a8e4..dffb5faef10e 100644 --- a/examples/cra-kitchen-sink/.storybook/main.js +++ b/examples/cra-kitchen-sink/.storybook/main.js @@ -1,6 +1,6 @@ module.exports = { addons: [ - '@storybook/preset-create-react-app', + // '@storybook/preset-create-react-app', { name: '@storybook/addon-docs/preset', options: { diff --git a/examples/cra-react15/.storybook/main.js b/examples/cra-react15/.storybook/main.js index 46cf3a05227d..8e3859a4dd83 100644 --- a/examples/cra-react15/.storybook/main.js +++ b/examples/cra-react15/.storybook/main.js @@ -1,7 +1,7 @@ module.exports = { stories: ['../src/stories/welcome.stories', '../src/stories/**/button.stories.js'], addons: [ - '@storybook/preset-create-react-app', + // '@storybook/preset-create-react-app', '@storybook/addon-actions', '@storybook/addon-links', ], diff --git a/examples/cra-ts-essentials/.storybook/main.js b/examples/cra-ts-essentials/.storybook/main.js index 9ec4897ee490..01530deb0f45 100644 --- a/examples/cra-ts-essentials/.storybook/main.js +++ b/examples/cra-ts-essentials/.storybook/main.js @@ -1,7 +1,7 @@ module.exports = { stories: ['../src/**/*.stories.tsx'], addons: [ - '@storybook/preset-create-react-app', + // '@storybook/preset-create-react-app', { name: '@storybook/addon-essentials', options: { From 66e04ca1ad0acd3de5b09d2db9b0209404e6d971 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 9 Jun 2020 18:02:31 +0200 Subject: [PATCH 5/8] Allow monorepo project root dir to be imported in CRA examples --- examples/cra-kitchen-sink/.storybook/main.js | 13 ++++++++++++- examples/cra-react15/.storybook/main.js | 13 ++++++++++++- examples/cra-ts-essentials/.storybook/main.js | 13 ++++++++++++- examples/cra-ts-kitchen-sink/.storybook/main.ts | 9 +++++++++ 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js index dffb5faef10e..8f4528bbd5d5 100644 --- a/examples/cra-kitchen-sink/.storybook/main.js +++ b/examples/cra-kitchen-sink/.storybook/main.js @@ -1,6 +1,8 @@ +const path = require('path'); + module.exports = { addons: [ - // '@storybook/preset-create-react-app', + '@storybook/preset-create-react-app', { name: '@storybook/addon-docs/preset', options: { @@ -16,4 +18,13 @@ module.exports = { '@storybook/addon-jest', ], stories: ['../src/stories/**/*.stories.@(js|mdx)'], + webpackFinal: (config) => { + // add monorepo root as a valid directory to import modules from + config.resolve.plugins.forEach((p) => { + if (Array.isArray(p.appSrcs)) { + p.appSrcs.push(path.join(__dirname, '..', '..', '..')); + } + }); + return config; + }, }; diff --git a/examples/cra-react15/.storybook/main.js b/examples/cra-react15/.storybook/main.js index 8e3859a4dd83..25413bb96bec 100644 --- a/examples/cra-react15/.storybook/main.js +++ b/examples/cra-react15/.storybook/main.js @@ -1,8 +1,19 @@ +const path = require('path'); + module.exports = { stories: ['../src/stories/welcome.stories', '../src/stories/**/button.stories.js'], addons: [ - // '@storybook/preset-create-react-app', + '@storybook/preset-create-react-app', '@storybook/addon-actions', '@storybook/addon-links', ], + webpackFinal: (config) => { + // add monorepo root as a valid directory to import modules from + config.resolve.plugins.forEach((p) => { + if (Array.isArray(p.appSrcs)) { + p.appSrcs.push(path.join(__dirname, '..', '..', '..')); + } + }); + return config; + }, }; diff --git a/examples/cra-ts-essentials/.storybook/main.js b/examples/cra-ts-essentials/.storybook/main.js index 01530deb0f45..67f217161eb4 100644 --- a/examples/cra-ts-essentials/.storybook/main.js +++ b/examples/cra-ts-essentials/.storybook/main.js @@ -1,7 +1,9 @@ +const path = require('path'); + module.exports = { stories: ['../src/**/*.stories.tsx'], addons: [ - // '@storybook/preset-create-react-app', + '@storybook/preset-create-react-app', { name: '@storybook/addon-essentials', options: { @@ -9,4 +11,13 @@ module.exports = { }, }, ], + webpackFinal: (config) => { + // add monorepo root as a valid directory to import modules from + config.resolve.plugins.forEach((p) => { + if (Array.isArray(p.appSrcs)) { + p.appSrcs.push(path.join(__dirname, '..', '..', '..')); + } + }); + return config; + }, }; diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts index 85caabde7e08..47edaa9ba3f9 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -26,4 +26,13 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-a11y', ], + webpackFinal: (config) => { + // add monorepo root as a valid directory to import modules from + config.resolve.plugins.forEach((p) => { + if (Array.isArray(p.appSrcs)) { + p.appSrcs.push(path.join(__dirname, '..', '..', '..')); + } + }); + return config; + }, }; From 0e21344abe80610c11ecd0aa5f6ddd26b5415a01 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Jun 2020 15:37:50 +0200 Subject: [PATCH 6/8] CLEANUP && FIX main.ts --- examples/cra-ts-kitchen-sink/.storybook/main.ts | 8 ++++++-- lib/core/src/server/manager/manager-webpack.config.js | 1 - lib/core/src/server/preview/iframe-webpack.config.js | 1 - 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts index 47edaa9ba3f9..7a5014ed9878 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -1,4 +1,6 @@ -// @ts-ignore +// eslint-disable-next-line import/no-extraneous-dependencies +import { Configuration } from 'webpack'; + const path = require('path'); module.exports = { @@ -26,10 +28,12 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-a11y', ], - webpackFinal: (config) => { + webpackFinal: (config: Configuration) => { // add monorepo root as a valid directory to import modules from config.resolve.plugins.forEach((p) => { + // @ts-ignore if (Array.isArray(p.appSrcs)) { + // @ts-ignore p.appSrcs.push(path.join(__dirname, '..', '..', '..')); } }); diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js index 1be554833840..04b5b7eb70c5 100644 --- a/lib/core/src/server/manager/manager-webpack.config.js +++ b/lib/core/src/server/manager/manager-webpack.config.js @@ -140,7 +140,6 @@ export default async ({ alias: { ...themingPaths, ...uiPaths, - semver: require.resolve('@storybook/semver'), }, plugins: [ // Transparently resolve packages via PnP when needed; noop otherwise diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index 9f44ac8ab6ee..5a544e2e2e07 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -181,7 +181,6 @@ export default async ({ alias: { ...themingPaths, ...storybookPaths, - semver: path.dirname(resolveFrom(__dirname, '@storybook/semver/package.json')), ...reactPaths, }, From 764b6893e046189b64aa88201d36b90d9e8844e6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Jun 2020 16:35:35 +0200 Subject: [PATCH 7/8] CLEANUP as desired --- .../server/preview/iframe-webpack.config.js | 47 ++++++++++--------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index 5a544e2e2e07..c95003640273 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -23,29 +23,30 @@ import { toRequireContextString } from './to-require-context'; import { useBaseTsSupport } from '../config/useBaseTsSupport'; const reactPaths = {}; -const storybookPaths = { - '@storybook/addons': path.dirname(resolveFrom(__dirname, '@storybook/addons/package.json')), - '@storybook/api': path.dirname(resolveFrom(__dirname, '@storybook/api/package.json')), - '@storybook/channels': path.dirname(resolveFrom(__dirname, '@storybook/channels/package.json')), - '@storybook/channel-postmessage': path.dirname( - resolveFrom(__dirname, '@storybook/channel-postmessage/package.json') - ), - '@storybook/components': path.dirname( - resolveFrom(__dirname, '@storybook/components/package.json') - ), - '@storybook/core-events': path.dirname( - resolveFrom(__dirname, '@storybook/core-events/package.json') - ), - '@storybook/router': path.dirname(resolveFrom(__dirname, '@storybook/router/package.json')), - '@storybook/theming': path.dirname(resolveFrom(__dirname, '@storybook/theming/package.json')), - '@storybook/semver': path.dirname(resolveFrom(__dirname, '@storybook/semver/package.json')), - '@storybook/client-api': path.dirname( - resolveFrom(__dirname, '@storybook/client-api/package.json') - ), - '@storybook/client-logger': path.dirname( - resolveFrom(__dirname, '@storybook/client-logger/package.json') - ), -}; + +const storybookPaths = [ + 'addons', + 'addons', + 'api', + 'channels', + 'channel-postmessage', + 'components', + 'core-events', + 'router', + 'theming', + 'semver', + 'client-api', + 'client-logger', +].reduce( + (acc, package) => ({ + ...acc, + [`@storybook/${package}`]: path.dirname( + resolveFrom(__dirname, `@storybook/${package}/package.json`) + ), + }), + {} +); + try { reactPaths.react = path.dirname(resolveFrom(process.cwd(), 'react/package.json')); reactPaths['react-dom'] = path.dirname(resolveFrom(process.cwd(), 'react-dom/package.json')); From 6a151592344a3d54a76693ec417e19b458a21181 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Jun 2020 11:22:56 +0200 Subject: [PATCH 8/8] rename reserve-word variable --- lib/core/src/server/preview/iframe-webpack.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index c95003640273..dd4dc1caa825 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -38,10 +38,10 @@ const storybookPaths = [ 'client-api', 'client-logger', ].reduce( - (acc, package) => ({ + (acc, sbPackage) => ({ ...acc, - [`@storybook/${package}`]: path.dirname( - resolveFrom(__dirname, `@storybook/${package}/package.json`) + [`@storybook/${sbPackage}`]: path.dirname( + resolveFrom(__dirname, `@storybook/${sbPackage}/package.json`) ), }), {}