diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js index ad2b8ff65954..0f293afbb70d 100644 --- a/examples/cra-kitchen-sink/.storybook/main.js +++ b/examples/cra-kitchen-sink/.storybook/main.js @@ -1,3 +1,5 @@ +const path = require('path'); + module.exports = { stories: ['../src/stories/**/*.stories.@(js|mdx)'], logLevel: 'debug', @@ -17,4 +19,13 @@ module.exports = { '@storybook/addon-a11y', '@storybook/addon-jest', ], + 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 28aa21a1a447..b7817d75cd05 100644 --- a/examples/cra-react15/.storybook/main.js +++ b/examples/cra-react15/.storybook/main.js @@ -1,3 +1,5 @@ +const path = require('path'); + module.exports = { stories: ['../src/stories/welcome.stories', '../src/stories/**/button.stories.js'], logLevel: 'debug', @@ -6,4 +8,13 @@ module.exports = { '@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 e37b60047c8e..d230a76eb43e 100644 --- a/examples/cra-ts-essentials/.storybook/main.js +++ b/examples/cra-ts-essentials/.storybook/main.js @@ -1,3 +1,5 @@ +const path = require('path'); + module.exports = { stories: ['../src/**/*.stories.tsx'], logLevel: 'debug', @@ -10,4 +12,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 ba05306d0623..132ad47c445c 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 = { @@ -27,4 +29,15 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-a11y', ], + 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, '..', '..', '..')); + } + }); + return config; + }, }; diff --git a/lib/core/package.json b/lib/core/package.json index 6fb1aab7c6a6..1330530eb32b 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..04b5b7eb70c5 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'; @@ -139,7 +140,6 @@ export default async ({ alias: { ...themingPaths, ...uiPaths, - semver: require.resolve('@storybook/semver'), }, plugins: [ // Transparently resolve packages via PnP when needed; noop otherwise @@ -158,6 +158,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..dd4dc1caa825 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,30 @@ import { toRequireContextString } from './to-require-context'; import { useBaseTsSupport } from '../config/useBaseTsSupport'; const reactPaths = {}; + +const storybookPaths = [ + 'addons', + 'addons', + 'api', + 'channels', + 'channel-postmessage', + 'components', + 'core-events', + 'router', + 'theming', + 'semver', + 'client-api', + 'client-logger', +].reduce( + (acc, sbPackage) => ({ + ...acc, + [`@storybook/${sbPackage}`]: path.dirname( + resolveFrom(__dirname, `@storybook/${sbPackage}/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')); @@ -64,13 +90,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, @@ -159,8 +180,8 @@ 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, ...reactPaths, }, @@ -177,17 +198,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,