Core: Add sbmodern package export, drop modern to chrome 79+

psyfry · May 17, 2021 · 74863b7 · 74863b7
1 parent 5ceb87e
commit 74863b7
Show file tree

Hide file tree

Showing 39 changed files with 77 additions and 35 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -15,7 +15,10 @@ const withTests = {
 // type BabelMode = 'cjs' | 'esm' | 'modern';
 
 const modules = process.env.BABEL_MODE === 'cjs' ? 'auto' : false;
-const targets = process.env.BABEL_MODE === 'modern' ? { chrome: '80' } : 'defaults';
+
+// FIXME: optional chaining introduced in chrome 80, not supported by wepback4
+// https://github.com/webpack/webpack/issues/10227#issuecomment-642734920
+const targets = process.env.BABEL_MODE === 'modern' ? { chrome: '79' } : 'defaults';
 
 module.exports = {
   ignore: [

diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -82,6 +82,7 @@
     "access": "public"
   },
   "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -79,6 +79,7 @@
     "access": "public"
   },
   "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Actions",
     "unsupportedFrameworks": [

diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
@@ -77,6 +77,7 @@
     "access": "public"
   },
   "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

diff --git a/addons/docs/package.json b/addons/docs/package.json
@@ -195,6 +195,7 @@
     "access": "public"
   },
   "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",

diff --git a/addons/essentials/package.json b/addons/essentials/package.json
@@ -91,5 +91,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/addons/jest/package.json b/addons/jest/package.json
@@ -77,6 +77,7 @@
     "access": "public"
   },
   "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Jest",
     "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",

diff --git a/addons/links/package.json b/addons/links/package.json
@@ -73,6 +73,7 @@
     "access": "public"
   },
   "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Links",
     "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",

diff --git a/addons/storysource/package.json b/addons/storysource/package.json
@@ -76,6 +76,7 @@
     "access": "public"
   },
   "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Storysource",
     "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",

diff --git a/lib/api/package.json b/lib/api/package.json
@@ -72,5 +72,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/builder-webpack4/package.json b/lib/builder-webpack4/package.json
@@ -132,5 +132,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
@@ -63,6 +63,7 @@ export default async ({
   frameworkPath,
   presets,
   typescriptOptions,
+  modern,
 }: Options & Record<string, any>): Promise<Configuration> => {
   const logLevel = await presets.apply('logLevel', undefined);
   const frameworkOptions = await presets.apply(`${framework}Options`, {});
@@ -194,7 +195,7 @@ export default async ({
     resolve: {
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
-      mainFields: ['browser', 'module', 'main'],
+      mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
       alias: {
         ...themingPaths,
         ...storybookPaths,

diff --git a/lib/builder-webpack5/package.json b/lib/builder-webpack5/package.json
@@ -118,5 +118,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -58,6 +58,7 @@ export default async ({
   frameworkPath,
   presets,
   typescriptOptions,
+  modern,
 }: Options & Record<string, any>): Promise<Configuration> => {
   const envs = await presets.apply<Record<string, string>>('env');
   const logLevel = await presets.apply('logLevel', undefined);
@@ -190,7 +191,7 @@ export default async ({
     resolve: {
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
-      mainFields: ['browser', 'module', 'main'],
+      mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
       alias: {
         ...themingPaths,
         ...storybookPaths,

diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
@@ -51,5 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
@@ -48,5 +48,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/channels/package.json b/lib/channels/package.json
@@ -47,5 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
@@ -66,5 +66,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
@@ -46,5 +46,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
@@ -60,5 +60,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/components/package.json b/lib/components/package.json
@@ -76,5 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-client/package.json b/lib/core-client/package.json
@@ -70,5 +70,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-common/package.json b/lib/core-common/package.json
@@ -107,5 +107,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts
@@ -144,6 +144,7 @@ export interface CLIOptions {
   debugWebpack?: boolean;
   webpackStatsJson?: string | boolean;
   outputDir?: string;
+  modern?: boolean;
 }
 
 export interface BuilderOptions {

diff --git a/lib/core-events/package.json b/lib/core-events/package.json
@@ -45,5 +45,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-server/package.json b/lib/core-server/package.json
@@ -125,5 +125,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/core-server/src/cli/dev.ts b/lib/core-server/src/cli/dev.ts
@@ -48,6 +48,7 @@ export async function getDevCli(packageJson: {
       'Disables the default storybook preview and lets your use your own'
     )
     .option('--docs', 'Build a documentation-only site using addon-docs')
+    .option('--modern', 'Use modern browser modules')
     .parse(process.argv);
 
   logger.setLevel(program.loglevel);

diff --git a/lib/core-server/src/cli/prod.ts b/lib/core-server/src/cli/prod.ts
@@ -16,6 +16,7 @@ export interface ProdCliOptions {
   debugWebpack?: boolean;
   previewUrl?: string;
   docs?: boolean;
+  modern?: boolean;
 }
 
 export function getProdCli(packageJson: {
@@ -42,6 +43,7 @@ export function getProdCli(packageJson: {
       'Disables the default storybook preview and lets your use your own'
     )
     .option('--docs', 'Build a documentation-only site using addon-docs')
+    .option('--modern', 'Use modern browser modules')
     .parse(process.argv);
 
   logger.setLevel(program.loglevel);

diff --git a/lib/core-server/src/manager/manager-webpack.config.ts b/lib/core-server/src/manager/manager-webpack.config.ts
@@ -35,6 +35,7 @@ export default async ({
   versionCheck,
   releaseNotesData,
   presets,
+  modern,
 }: Options & ManagerWebpackOptions): Promise<Configuration> => {
   const envs = await presets.apply<Record<string, string>>('env');
   const logLevel = await presets.apply('logLevel', undefined);
@@ -153,7 +154,7 @@ export default async ({
     resolve: {
       extensions: ['.mjs', '.js', '.jsx', '.json', '.cjs', '.ts', '.tsx'],
       modules: ['node_modules'].concat(envs.NODE_PATH || []),
-      mainFields: ['browser', 'module', 'main'],
+      mainFields: [modern ? 'sbmodern' : null, 'browser', 'module', 'main'].filter(Boolean),
       alias: {
         ...themingPaths,
         ...uiPaths,

diff --git a/lib/core-server/src/presets/common-preset.ts b/lib/core-server/src/presets/common-preset.ts
@@ -38,10 +38,11 @@ export const previewMainTemplate = () => getPreviewMainTemplate();
 
 export const managerMainTemplate = () => getManagerMainTemplate();
 
-export const previewEntries = () => [
-  require.resolve('../globals/polyfills'),
-  require.resolve('../globals/globals'),
-];
+export const previewEntries = (entries: any[] = [], options: { modern?: boolean }) => {
+  if (!options.modern) entries.push(require.resolve('../globals/polyfills'));
+  entries.push(require.resolve('../globals/globals'));
+  return entries;
+};
 
 export const typescript = () => ({
   check: false,

diff --git a/lib/core-server/src/presets/manager-preset.ts b/lib/core-server/src/presets/manager-preset.ts
@@ -11,10 +11,10 @@ export async function managerWebpack(
 
 export async function managerEntries(
   installedAddons: string[],
-  options: { managerEntry: string; configDir: string }
+  options: { managerEntry: string; configDir: string; modern?: boolean }
 ): Promise<string[]> {
   const { managerEntry = '@storybook/core-client/dist/esm/manager' } = options;
-  const entries = [require.resolve('../globals/polyfills')];
+  const entries = options.modern ? [] : [require.resolve('../globals/polyfills')];
 
   if (installedAddons && installedAddons.length) {
     entries.push(...installedAddons);

diff --git a/lib/core/package.json b/lib/core/package.json
@@ -59,5 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
@@ -52,5 +52,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json
@@ -51,5 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/router/package.json b/lib/router/package.json
@@ -58,5 +58,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
@@ -59,5 +59,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/theming/package.json b/lib/theming/package.json
@@ -60,5 +60,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/lib/ui/package.json b/lib/ui/package.json
@@ -87,5 +87,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241"
+  "gitHead": "2f7423e38558228c3b5b09a3afc5047ac3523241",
+  "sbmodern": "dist/modern/index.js"
 }
diff --git a/scripts/utils/compile-babel.js b/scripts/utils/compile-babel.js
@@ -93,9 +93,11 @@ async function babelify(options = {}) {
       run({ watch, dir: './dist/modern', silent, errorCallback }),
     ]);
   } else {
-    await run({ dir: './dist/cjs', silent, errorCallback });
-    await run({ dir: './dist/esm', silent, errorCallback });
-    await run({ dir: './dist/modern', silent, errorCallback });
+    await Promise.all([
+      run({ dir: './dist/cjs', silent, errorCallback }),
+      run({ dir: './dist/esm', silent, errorCallback }),
+      run({ dir: './dist/modern', silent, errorCallback }),
+    ]);
   }
 }