Merge pull request #18502 from ddalpange/support-cjs

Webpack: Support .cjs extension
storybookjs · Jun 29, 2022 · 7eef5f0 · 7eef5f0
2 parents 008b542 + 37cd0c2
commit 7eef5f0
Show file tree

Hide file tree

Showing 22 changed files with 24 additions and 778 deletions.
diff --git a/app/react/src/server/framework-preset-react-docs.test.ts b/app/react/src/server/framework-preset-react-docs.test.ts
@@ -32,7 +32,7 @@ describe('framework-preset-react-docgen', () => {
         presets: ['env', 'foo-preset'],
         overrides: [
           {
-            test: /\.(mjs|tsx?|jsx?)$/,
+            test: /\.(cjs|mjs|tsx?|jsx?)$/,
             plugins: [
               [
                 babelPluginReactDocgenPath,

diff --git a/app/react/src/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts
@@ -21,7 +21,7 @@ export async function babel(config: TransformOptions, options: Options) {
     overrides: [
       ...(config?.overrides || []),
       {
-        test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+        test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
         plugins: [
           [
             require.resolve('babel-plugin-react-docgen'),

diff --git a/lib/builder-webpack4/src/preview/babel-loader-preview.ts b/lib/builder-webpack4/src/preview/babel-loader-preview.ts
@@ -2,7 +2,7 @@ import { getProjectRoot } from '@storybook/core-common';
 import { useBaseTsSupport } from './useBaseTsSupport';
 
 export const createBabelLoader = (options: any, framework: string) => ({
-  test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+  test: useBaseTsSupport(framework) ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
   use: [
     {
       loader: require.resolve('babel-loader'),

diff --git a/lib/builder-webpack5/src/preview/babel-loader-preview.ts b/lib/builder-webpack5/src/preview/babel-loader-preview.ts
@@ -10,7 +10,7 @@ export const useBaseTsSupport = (framework: string) => {
 };
 
 export const createBabelLoader = (options: any, framework: string) => ({
-  test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+  test: useBaseTsSupport(framework) ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
   use: [
     {
       loader: require.resolve('babel-loader'),

diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
@@ -40,7 +40,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",

diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
@@ -1,262 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cra-ts-essentials manager dev 1`] = `
-Object {
-  "entry": Array [
-    "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
-    "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
-    "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/docs/manager.js",
-    "ROOT/addons/controls/manager.js",
-    "ROOT/addons/actions/manager.js",
-    "ROOT/addons/backgrounds/manager.js",
-    "ROOT/addons/toolbars/manager.js",
-    "ROOT/addons/measure/manager.js",
-    "ROOT/addons/outline/manager.js",
-  ],
-  "keys": Array [
-    "name",
-    "mode",
-    "bail",
-    "devtool",
-    "entry",
-    "output",
-    "watchOptions",
-    "plugins",
-    "module",
-    "resolve",
-    "resolveLoader",
-    "recordsPath",
-    "performance",
-    "optimization",
-  ],
-  "module": Object {
-    "rules": Array [
-      Object {
-        "exclude": Array [
-          "NODE_MODULES/",
-          "/dist/",
-        ],
-        "include": Array [
-          "ROOT",
-        ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "babelrc": false,
-              "configFile": false,
-              "plugins": Array [
-                "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
-                  Object {
-                    "legacy": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
-                "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "useBuiltIns": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
-                "NODE_MODULES/babel-plugin-macros/dist/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
-                Array [
-                  "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
-                  Object {
-                    "absoluteImports": "NODE_MODULES/core-js/index.js",
-                    "method": "usage-global",
-                    "version": "*",
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-template-literals/lib/index.js",
-              ],
-              "presets": Array [
-                Array [
-                  "NODE_MODULES/@babel/preset-env/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "shippedProposals": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/preset-typescript/lib/index.js",
-                "NODE_MODULES/@babel/preset-react/lib/index.js",
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-      Object {
-        "include": [Function],
-        "test": "/\\\\.js$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "plugins": Array [
-                "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
-                  Object {
-                    "legacy": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
-                "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "useBuiltIns": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
-                "NODE_MODULES/babel-plugin-macros/dist/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
-                Array [
-                  "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
-                  Object {
-                    "absoluteImports": "NODE_MODULES/core-js/index.js",
-                    "method": "usage-global",
-                    "version": "*",
-                  },
-                ],
-              ],
-              "presets": Array [
-                Array [
-                  "NODE_MODULES/@babel/preset-env/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "modules": false,
-                    "shippedProposals": true,
-                    "targets": "defaults",
-                  },
-                ],
-                "NODE_MODULES/@babel/preset-react/lib/index.js",
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-      Object {
-        "test": "/\\\\.css$/",
-        "use": Array [
-          "NODE_MODULES/style-loader/dist/cjs.js",
-          Object {
-            "loader": "NODE_MODULES/css-loader/dist/cjs.js",
-            "options": Object {
-              "importLoaders": 1,
-            },
-          },
-        ],
-      },
-      Object {
-        "loader": "NODE_MODULES/file-loader/dist/cjs.js",
-        "options": Object {
-          "name": "static/media/[path][name].[ext]",
-        },
-        "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/",
-      },
-      Object {
-        "loader": "NODE_MODULES/url-loader/dist/cjs.js",
-        "options": Object {
-          "limit": 10000,
-          "name": "static/media/[path][name].[ext]",
-        },
-        "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/",
-      },
-      Object {
-        "include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
-        "test": "/\\\\.js$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "presets": Array [
-                Array [
-                  "@babel/preset-env",
-                  Object {
-                    "targets": Object {
-                      "ie": "11",
-                    },
-                  },
-                  "storybook-addon-ie11",
-                ],
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-    ],
-  },
-  "plugins": Array [
-    "VirtualModulesPlugin",
-    "HtmlWebpackPlugin",
-    "CaseSensitivePathsPlugin",
-    "DefinePlugin",
-  ],
-}
-`;
-
 exports[`cra-ts-essentials manager prod 1`] = `
 Object {
   "entry": Array [
@@ -297,7 +40,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",

diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
@@ -360,7 +360,7 @@ Object {
                       },
                     ],
                   ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
+                  "test": "/\\\\.(cjs|mjs|jsx?)$/",
                 },
               ],
               "plugins": Array [
@@ -410,7 +410,7 @@ Object {
                       },
                     ],
                   ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
+                  "test": "/\\\\.(cjs|mjs|jsx?)$/",
                 },
               ],
               "plugins": Array [