@teambit/react 0.0.623 → 0.0.630

package/webpack/webpack.config.base.prod.ts

@@ -2,78 +2,96 @@ import WorkboxWebpackPlugin from 'workbox-webpack-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { Configuration } from 'webpack';
-import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
+import { getExternals } from './get-externals';
+import { getExposedRules } from './get-exposed-rules';
+// import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 // eslint-disable-next-line complexity
-export default function (): Configuration {
-  return {
-    optimization: {
-      minimize: true,
-      minimizer: [
-        // This is only used in production mode
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              // We want terser to parse ecma 8 code. However, we don't want it
-              // to apply any minification steps that turns valid ecma 5 code
-              // into invalid ecma 5 code. This is why the 'compress' and 'output'
-              // sections only apply transformations that are ecma 5 safe
-              // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebook/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-              // Disabled because of an issue with Terser breaking valid code:
-              // https://github.com/facebook/create-react-app/issues/5250
-              // Pending further investigation:
-              // https://github.com/terser-js/terser/issues/120
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
+export default function (externalizePeer: boolean, peers: string[], dev?: boolean): Configuration {
+  const externals = externalizePeer ? (getExternals(peers) as any) : undefined;
+  const exposedRules = externalizePeer ? undefined : getExposedRules(peers);
+
+  const module = externalizePeer
+    ? undefined
+    : {
+        rules: exposedRules,
+      };
+
+  const optimization = dev
+    ? undefined
+    : {
+        minimize: true,
+        minimizer: [
+          // This is only used in production mode
+          new TerserPlugin({
+            extractComments: false,
+            terserOptions: {
+              parse: {
+                // We want terser to parse ecma 8 code. However, we don't want it
+                // to apply any minification steps that turns valid ecma 5 code
+                // into invalid ecma 5 code. This is why the 'compress' and 'output'
+                // sections only apply transformations that are ecma 5 safe
+                // https://github.com/facebook/create-react-app/pull/4234
+                ecma: 8,
+              },
+              compress: {
+                ecma: 5,
+                warnings: false,
+                // Disabled because of an issue with Uglify breaking seemingly valid code:
+                // https://github.com/facebook/create-react-app/issues/2376
+                // Pending further investigation:
+                // https://github.com/mishoo/UglifyJS2/issues/2011
+                comparisons: false,
+                // Disabled because of an issue with Terser breaking valid code:
+                // https://github.com/facebook/create-react-app/issues/5250
+                // Pending further investigation:
+                // https://github.com/terser-js/terser/issues/120
+                inline: 2,
+              },
+              mangle: {
+                safari10: true,
+              },
+              output: {
+                ecma: 5,
+                comments: false,
+                // Turned on because emoji and regex is not minified properly using default
+                // https://github.com/facebook/create-react-app/issues/2488
+                ascii_only: true,
+              },
             },
-            output: {
-              ecma: 5,
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
+          }),
+          new CssMinimizerPlugin({
+            minimizerOptions: {
+              preset: [
+                'default',
+                {
+                  minifyFontValues: { removeQuotes: false },
+                },
+              ],
             },
-          },
-        }),
-        new CssMinimizerPlugin({
-          minimizerOptions: {
-            preset: [
-              'default',
-              {
-                minifyFontValues: { removeQuotes: false },
-              },
-            ],
-          },
-        }),
-      ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
+          }),
+        ],
+        // Automatically split vendor and commons
+        // https://twitter.com/wSokra/status/969633336732905474
+        // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+        // splitChunks: {
+        // chunks: 'all',
         // name: false,
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      // https://github.com/facebook/create-react-app/issues/5358
-      runtimeChunk: {
-        name: (entrypoint) => `runtime-${entrypoint.name}`,
-      },
-    },
+        // },
+        // Keep the runtime chunk separated to enable long term caching
+        // https://twitter.com/wSokra/status/969679223278505985
+        // https://github.com/facebook/create-react-app/issues/5358
+        // runtimeChunk: {
+        // name: (entrypoint) => `runtime-${entrypoint.name}`,
+        // },
+      };
+
+  return {
+    module,
+    externals,
+    optimization,
 
     plugins: [
       // Generate an asset manifest file with the following content:
@@ -81,23 +99,23 @@ export default function (): Configuration {
       //   output file so that tools can pick it up without having to parse
       //   `index.html`
       //   can be used to reconstruct the HTML if necessary
-      new WebpackManifestPlugin({
-        fileName: 'asset-manifest.json',
-        publicPath: 'public',
-        generate: (seed, files, entrypoints) => {
-          const manifestFiles = files.reduce((manifest, file) => {
-            manifest[file.name] = file.path;
-            return manifest;
-          }, seed);
-          const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
+      // new WebpackManifestPlugin({
+      //   fileName: 'asset-manifest.json',
+      //   publicPath: 'public',
+      //   generate: (seed, files, entrypoints) => {
+      //     const manifestFiles = files.reduce((manifest, file) => {
+      //       manifest[file.name] = file.path;
+      //       return manifest;
+      //     }, seed);
+      //     const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
 
-          // @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276
-          return {
-            files: manifestFiles,
-            entrypoints: entrypointFiles,
-          } as Record<string, string>;
-        },
-      }),
+      //     // @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276
+      //     return {
+      //       files: manifestFiles,
+      //       entrypoints: entrypointFiles,
+      //     } as Record<string, string>;
+      //   },
+      // }),
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the webpack build.
       new WorkboxWebpackPlugin.GenerateSW({

package/webpack/webpack.config.base.ts

@@ -57,6 +57,8 @@ export default function (isEnvProduction = false): Configuration {
   // const env = getClientEnvironment(publicUrlOrPath.slice(0, -1));
 
   return {
+    // TODO: make the dev tool according to shouldUseSourceMap and isEnvProduction
+    // devtool: 'inline-source-map',
     resolve: {
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
@@ -72,12 +74,8 @@ export default function (isEnvProduction = false): Configuration {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         // TODO: @uri please remember to remove after publishing evangelist and base-ui
-        react: require.resolve('react'),
-        '@teambit/mdx.ui.mdx-scope-context': require.resolve('@teambit/mdx.ui.mdx-scope-context'),
-        'react-dom/server': require.resolve('react-dom/server'),
-        'react-dom': require.resolve('react-dom'),
-        '@mdx-js/react': require.resolve('@mdx-js/react'),
 
+        'react-dom/server': require.resolve('react-dom/server'),
         // Allows for better profiling with ReactDevTools
         ...(isEnvProductionProfile && {
           'react-dom$': 'react-dom/profiling',