@teambit/react 0.0.621 → 0.0.629

package/dist/webpack/webpack.config.base.prod.js

@@ -41,103 +41,124 @@ function _terserWebpackPlugin() {
   return data;
 }
 
-function _webpackManifestPlugin() {
-  const data = require("webpack-manifest-plugin");
+function _getExternals() {
+  const data = require("./get-externals");
 
-  _webpackManifestPlugin = function () {
+  _getExternals = function () {
     return data;
   };
 
   return data;
 }
 
+function _getExposedRules() {
+  const data = require("./get-exposed-rules");
+
+  _getExposedRules = function () {
+    return data;
+  };
+
+  return data;
+}
+
+// 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
-function _default() {
-  return {
-    optimization: {
-      minimize: true,
-      minimizer: [// This is only used in production mode
-      new (_terserWebpackPlugin().default)({
-        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
-          }
-        }
-      }), new (_cssMinimizerWebpackPlugin().default)({
-        minimizerOptions: {
-          preset: ['default', {
-            minifyFontValues: {
-              removeQuotes: false
-            }
-          }]
+function _default(externalizePeer, peers, dev) {
+  const externals = externalizePeer ? (0, _getExternals().getExternals)(peers) : undefined;
+  const exposedRules = externalizePeer ? undefined : (0, _getExposedRules().getExposedRules)(peers);
+  const module = externalizePeer ? undefined : {
+    rules: exposedRules
+  };
+  const optimization = dev ? undefined : {
+    minimize: true,
+    minimizer: [// This is only used in production mode
+    new (_terserWebpackPlugin().default)({
+      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
         }
-      })],
-      // 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}`
       }
-    },
+    }), new (_cssMinimizerWebpackPlugin().default)({
+      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',
+    // 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}`,
+    // },
+
+  };
+  return {
+    module,
+    externals,
+    optimization,
     plugins: [// Generate an asset manifest file with the following content:
     // - "files" key: Mapping of all asset filenames to their corresponding
     //   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().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
-        };
-      }
-    }), // Generate a service worker script that will precache, and keep up to date,
+    // 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>;
+    //   },
+    // }),
+    // 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().default.GenerateSW)({
       clientsClaim: true,

package/dist/webpack/webpack.config.base.prod.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack.config.base.prod.ts"],"names":["optimization","minimize","minimizer","TerserPlugin","terserOptions","parse","ecma","compress","warnings","comparisons","inline","mangle","safari10","output","comments","ascii_only","CssMinimizerPlugin","minimizerOptions","preset","minifyFontValues","removeQuotes","splitChunks","chunks","runtimeChunk","name","entrypoint","plugins","WebpackManifestPlugin","fileName","publicPath","generate","seed","files","entrypoints","manifestFiles","reduce","manifest","file","path","entrypointFiles","main","filter","endsWith","WorkboxWebpackPlugin","GenerateSW","clientsClaim","exclude","navigateFallback","navigateFallbackDenylist","RegExp","Boolean","performance"],"mappings":"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","sourcesContent":["import WorkboxWebpackPlugin from 'workbox-webpack-plugin';\nimport CssMinimizerPlugin from 'css-minimizer-webpack-plugin';\nimport TerserPlugin from 'terser-webpack-plugin';\nimport { Configuration } from 'webpack';\nimport { WebpackManifestPlugin } from 'webpack-manifest-plugin';\n\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\n// eslint-disable-next-line complexity\nexport default function (): Configuration {\n  return {\n    optimization: {\n      minimize: true,\n      minimizer: [\n        // This is only used in production mode\n        new TerserPlugin({\n          terserOptions: {\n            parse: {\n              // We want terser to parse ecma 8 code. However, we don't want it\n              // to apply any minification steps that turns valid ecma 5 code\n              // into invalid ecma 5 code. This is why the 'compress' and 'output'\n              // sections only apply transformations that are ecma 5 safe\n              // https://github.com/facebook/create-react-app/pull/4234\n              ecma: 8,\n            },\n            compress: {\n              ecma: 5,\n              warnings: false,\n              // Disabled because of an issue with Uglify breaking seemingly valid code:\n              // https://github.com/facebook/create-react-app/issues/2376\n              // Pending further investigation:\n              // https://github.com/mishoo/UglifyJS2/issues/2011\n              comparisons: false,\n              // Disabled because of an issue with Terser breaking valid code:\n              // https://github.com/facebook/create-react-app/issues/5250\n              // Pending further investigation:\n              // https://github.com/terser-js/terser/issues/120\n              inline: 2,\n            },\n            mangle: {\n              safari10: true,\n            },\n            output: {\n              ecma: 5,\n              comments: false,\n              // Turned on because emoji and regex is not minified properly using default\n              // https://github.com/facebook/create-react-app/issues/2488\n              ascii_only: true,\n            },\n          },\n        }),\n        new CssMinimizerPlugin({\n          minimizerOptions: {\n            preset: [\n              'default',\n              {\n                minifyFontValues: { removeQuotes: false },\n              },\n            ],\n          },\n        }),\n      ],\n      // Automatically split vendor and commons\n      // https://twitter.com/wSokra/status/969633336732905474\n      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366\n      splitChunks: {\n        chunks: 'all',\n        // name: false,\n      },\n      // Keep the runtime chunk separated to enable long term caching\n      // https://twitter.com/wSokra/status/969679223278505985\n      // https://github.com/facebook/create-react-app/issues/5358\n      runtimeChunk: {\n        name: (entrypoint) => `runtime-${entrypoint.name}`,\n      },\n    },\n\n    plugins: [\n      // Generate an asset manifest file with the following content:\n      // - \"files\" key: Mapping of all asset filenames to their corresponding\n      //   output file so that tools can pick it up without having to parse\n      //   `index.html`\n      //   can be used to reconstruct the HTML if necessary\n      new WebpackManifestPlugin({\n        fileName: 'asset-manifest.json',\n        publicPath: 'public',\n        generate: (seed, files, entrypoints) => {\n          const manifestFiles = files.reduce((manifest, file) => {\n            manifest[file.name] = file.path;\n            return manifest;\n          }, seed);\n          const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));\n\n          // @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276\n          return {\n            files: manifestFiles,\n            entrypoints: entrypointFiles,\n          } as Record<string, string>;\n        },\n      }),\n      // Generate a service worker script that will precache, and keep up to date,\n      // the HTML & assets that are part of the webpack build.\n      new WorkboxWebpackPlugin.GenerateSW({\n        clientsClaim: true,\n        exclude: [/\\.map$/, /asset-manifest\\.json$/],\n        // importWorkboxFrom: 'cdn',\n        navigateFallback: 'public/index.html',\n        navigateFallbackDenylist: [\n          // Exclude URLs starting with /_, as they're likely an API call\n          new RegExp('^/_'),\n          // Exclude any URLs whose last part seems to be a file extension\n          // as they're likely a resource and not a SPA route.\n          // URLs containing a \"?\" character won't be blacklisted as they're likely\n          // a route with query params (e.g. auth callbacks).\n          new RegExp('/[^/?]+\\\\.[^/]+$'),\n        ],\n      }),\n    ].filter(Boolean),\n    // Turn off performance processing because we utilize\n    // our own hints via the FileSizeReporter\n    performance: false,\n  };\n}\n"]}
+{"version":3,"sources":["webpack.config.base.prod.ts"],"names":["externalizePeer","peers","dev","externals","undefined","exposedRules","module","rules","optimization","minimize","minimizer","TerserPlugin","extractComments","terserOptions","parse","ecma","compress","warnings","comparisons","inline","mangle","safari10","output","comments","ascii_only","CssMinimizerPlugin","minimizerOptions","preset","minifyFontValues","removeQuotes","plugins","WorkboxWebpackPlugin","GenerateSW","clientsClaim","exclude","navigateFallback","navigateFallbackDenylist","RegExp","filter","Boolean","performance"],"mappings":";;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAEA;AACA;AACA;AACe,kBAAUA,eAAV,EAAoCC,KAApC,EAAqDC,GAArD,EAAmF;AAChG,QAAMC,SAAS,GAAGH,eAAe,GAAI,kCAAaC,KAAb,CAAJ,GAAkCG,SAAnE;AACA,QAAMC,YAAY,GAAGL,eAAe,GAAGI,SAAH,GAAe,wCAAgBH,KAAhB,CAAnD;AAEA,QAAMK,MAAM,GAAGN,eAAe,GAC1BI,SAD0B,GAE1B;AACEG,IAAAA,KAAK,EAAEF;AADT,GAFJ;AAMA,QAAMG,YAAY,GAAGN,GAAG,GACpBE,SADoB,GAEpB;AACEK,IAAAA,QAAQ,EAAE,IADZ;AAEEC,IAAAA,SAAS,EAAE,CACT;AACA,SAAIC,8BAAJ,EAAiB;AACfC,MAAAA,eAAe,EAAE,KADF;AAEfC,MAAAA,aAAa,EAAE;AACbC,QAAAA,KAAK,EAAE;AACL;AACA;AACA;AACA;AACA;AACAC,UAAAA,IAAI,EAAE;AAND,SADM;AASbC,QAAAA,QAAQ,EAAE;AACRD,UAAAA,IAAI,EAAE,CADE;AAERE,UAAAA,QAAQ,EAAE,KAFF;AAGR;AACA;AACA;AACA;AACAC,UAAAA,WAAW,EAAE,KAPL;AAQR;AACA;AACA;AACA;AACAC,UAAAA,MAAM,EAAE;AAZA,SATG;AAuBbC,QAAAA,MAAM,EAAE;AACNC,UAAAA,QAAQ,EAAE;AADJ,SAvBK;AA0BbC,QAAAA,MAAM,EAAE;AACNP,UAAAA,IAAI,EAAE,CADA;AAENQ,UAAAA,QAAQ,EAAE,KAFJ;AAGN;AACA;AACAC,UAAAA,UAAU,EAAE;AALN;AA1BK;AAFA,KAAjB,CAFS,EAuCT,KAAIC,oCAAJ,EAAuB;AACrBC,MAAAA,gBAAgB,EAAE;AAChBC,QAAAA,MAAM,EAAE,CACN,SADM,EAEN;AACEC,UAAAA,gBAAgB,EAAE;AAAEC,YAAAA,YAAY,EAAE;AAAhB;AADpB,SAFM;AADQ;AADG,KAAvB,CAvCS,CAFb,CAoDE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAhEF,GAFJ;AAqEA,SAAO;AACLvB,IAAAA,MADK;AAELH,IAAAA,SAFK;AAGLK,IAAAA,YAHK;AAKLsB,IAAAA,OAAO,EAAE,CACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAIC,gCAAqBC,UAAzB,EAAoC;AAClCC,MAAAA,YAAY,EAAE,IADoB;AAElCC,MAAAA,OAAO,EAAE,CAAC,QAAD,EAAW,uBAAX,CAFyB;AAGlC;AACAC,MAAAA,gBAAgB,EAAE,mBAJgB;AAKlCC,MAAAA,wBAAwB,EAAE,CACxB;AACA,UAAIC,MAAJ,CAAW,KAAX,CAFwB,EAGxB;AACA;AACA;AACA;AACA,UAAIA,MAAJ,CAAW,kBAAX,CAPwB;AALQ,KAApC,CAzBO,EAwCPC,MAxCO,CAwCAC,OAxCA,CALJ;AA8CL;AACA;AACAC,IAAAA,WAAW,EAAE;AAhDR,GAAP;AAkDD","sourcesContent":["import WorkboxWebpackPlugin from 'workbox-webpack-plugin';\nimport CssMinimizerPlugin from 'css-minimizer-webpack-plugin';\nimport TerserPlugin from 'terser-webpack-plugin';\nimport { Configuration } from 'webpack';\nimport { getExternals } from './get-externals';\nimport { getExposedRules } from './get-exposed-rules';\n// import { WebpackManifestPlugin } from 'webpack-manifest-plugin';\n\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\n// eslint-disable-next-line complexity\nexport default function (externalizePeer: boolean, peers: string[], dev?: boolean): Configuration {\n  const externals = externalizePeer ? (getExternals(peers) as any) : undefined;\n  const exposedRules = externalizePeer ? undefined : getExposedRules(peers);\n\n  const module = externalizePeer\n    ? undefined\n    : {\n        rules: exposedRules,\n      };\n\n  const optimization = dev\n    ? undefined\n    : {\n        minimize: true,\n        minimizer: [\n          // This is only used in production mode\n          new TerserPlugin({\n            extractComments: false,\n            terserOptions: {\n              parse: {\n                // We want terser to parse ecma 8 code. However, we don't want it\n                // to apply any minification steps that turns valid ecma 5 code\n                // into invalid ecma 5 code. This is why the 'compress' and 'output'\n                // sections only apply transformations that are ecma 5 safe\n                // https://github.com/facebook/create-react-app/pull/4234\n                ecma: 8,\n              },\n              compress: {\n                ecma: 5,\n                warnings: false,\n                // Disabled because of an issue with Uglify breaking seemingly valid code:\n                // https://github.com/facebook/create-react-app/issues/2376\n                // Pending further investigation:\n                // https://github.com/mishoo/UglifyJS2/issues/2011\n                comparisons: false,\n                // Disabled because of an issue with Terser breaking valid code:\n                // https://github.com/facebook/create-react-app/issues/5250\n                // Pending further investigation:\n                // https://github.com/terser-js/terser/issues/120\n                inline: 2,\n              },\n              mangle: {\n                safari10: true,\n              },\n              output: {\n                ecma: 5,\n                comments: false,\n                // Turned on because emoji and regex is not minified properly using default\n                // https://github.com/facebook/create-react-app/issues/2488\n                ascii_only: true,\n              },\n            },\n          }),\n          new CssMinimizerPlugin({\n            minimizerOptions: {\n              preset: [\n                'default',\n                {\n                  minifyFontValues: { removeQuotes: false },\n                },\n              ],\n            },\n          }),\n        ],\n        // Automatically split vendor and commons\n        // https://twitter.com/wSokra/status/969633336732905474\n        // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366\n        // splitChunks: {\n        // chunks: 'all',\n        // name: false,\n        // },\n        // Keep the runtime chunk separated to enable long term caching\n        // https://twitter.com/wSokra/status/969679223278505985\n        // https://github.com/facebook/create-react-app/issues/5358\n        // runtimeChunk: {\n        // name: (entrypoint) => `runtime-${entrypoint.name}`,\n        // },\n      };\n\n  return {\n    module,\n    externals,\n    optimization,\n\n    plugins: [\n      // Generate an asset manifest file with the following content:\n      // - \"files\" key: Mapping of all asset filenames to their corresponding\n      //   output file so that tools can pick it up without having to parse\n      //   `index.html`\n      //   can be used to reconstruct the HTML if necessary\n      // new WebpackManifestPlugin({\n      //   fileName: 'asset-manifest.json',\n      //   publicPath: 'public',\n      //   generate: (seed, files, entrypoints) => {\n      //     const manifestFiles = files.reduce((manifest, file) => {\n      //       manifest[file.name] = file.path;\n      //       return manifest;\n      //     }, seed);\n      //     const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));\n\n      //     // @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276\n      //     return {\n      //       files: manifestFiles,\n      //       entrypoints: entrypointFiles,\n      //     } as Record<string, string>;\n      //   },\n      // }),\n      // Generate a service worker script that will precache, and keep up to date,\n      // the HTML & assets that are part of the webpack build.\n      new WorkboxWebpackPlugin.GenerateSW({\n        clientsClaim: true,\n        exclude: [/\\.map$/, /asset-manifest\\.json$/],\n        // importWorkboxFrom: 'cdn',\n        navigateFallback: 'public/index.html',\n        navigateFallbackDenylist: [\n          // Exclude URLs starting with /_, as they're likely an API call\n          new RegExp('^/_'),\n          // Exclude any URLs whose last part seems to be a file extension\n          // as they're likely a resource and not a SPA route.\n          // URLs containing a \"?\" character won't be blacklisted as they're likely\n          // a route with query params (e.g. auth callbacks).\n          new RegExp('/[^/?]+\\\\.[^/]+$'),\n        ],\n      }),\n    ].filter(Boolean),\n    // Turn off performance processing because we utilize\n    // our own hints via the FileSizeReporter\n    performance: false,\n  };\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.621",
+  "version": "0.0.629",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.621"
+    "version": "0.0.629"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
@@ -30,12 +30,12 @@
     "babel-plugin-transform-typescript-metadata": "0.3.1",
     "babel-preset-jest": "26.6.2",
     "@babel/preset-typescript": "7.12.17",
+    "expose-loader": "3.1.0",
     "postcss-preset-env": "6.7.0",
     "react-error-overlay": "6.0.9",
     "strip-ansi": "6.0.0",
     "css-minimizer-webpack-plugin": "3.0.2",
     "terser-webpack-plugin": "5.2.0",
-    "webpack-manifest-plugin": "4.0.2",
     "webpack": "5.51.1",
     "workbox-webpack-plugin": "6.2.4",
     "mini-css-extract-plugin": "2.2.2",
@@ -79,47 +79,49 @@
     "@teambit/react.instructions.react.adding-compositions": "0.0.6",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/design.ui.pages.standalone-not-found-page": "0.0.355",
-    "@teambit/preview": "0.0.621",
+    "@teambit/preview": "0.0.629",
     "@teambit/react.ui.error-fallback": "0.0.109",
     "@teambit/react.ui.loader-fallback": "0.0.88",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.162",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/builder": "0.0.621",
-    "@teambit/bundler": "0.0.621",
-    "@teambit/compiler": "0.0.621",
-    "@teambit/component.modules.component-url": "0.0.119",
-    "@teambit/component": "0.0.621",
-    "@teambit/envs": "0.0.621",
-    "@teambit/eslint": "0.0.621",
-    "@teambit/formatter": "0.0.172",
-    "@teambit/jest": "0.0.621",
-    "@teambit/linter": "0.0.621",
-    "@teambit/pkg": "0.0.621",
-    "@teambit/prettier": "0.0.172",
+    "@teambit/builder": "0.0.629",
+    "@teambit/bundler": "0.0.629",
+    "@teambit/compiler": "0.0.629",
+    "@teambit/component.modules.component-url": "0.0.121",
+    "@teambit/component": "0.0.629",
+    "@teambit/envs": "0.0.629",
+    "@teambit/eslint": "0.0.629",
+    "@teambit/formatter": "0.0.180",
+    "@teambit/jest": "0.0.629",
+    "@teambit/linter": "0.0.629",
+    "@teambit/pkg": "0.0.629",
+    "@teambit/prettier": "0.0.180",
     "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.20",
-    "@teambit/schema": "0.0.621",
-    "@teambit/tester": "0.0.621",
-    "@teambit/typescript": "0.0.621",
-    "@teambit/webpack": "0.0.621",
-    "@teambit/workspace": "0.0.621",
-    "@teambit/application": "0.0.263",
-    "@teambit/cli": "0.0.427",
-    "@teambit/dependency-resolver": "0.0.621",
-    "@teambit/generator": "0.0.621",
-    "@teambit/graphql": "0.0.621",
-    "@teambit/react.ui.highlighter-provider": "0.0.180",
-    "@teambit/compositions": "0.0.621",
-    "@teambit/ui": "0.0.621",
-    "@teambit/react.eslint-config-bit-react": "0.0.504",
+    "@teambit/schema": "0.0.629",
+    "@teambit/tester": "0.0.629",
+    "@teambit/typescript": "0.0.629",
+    "@teambit/webpack": "0.0.629",
+    "@teambit/workspace": "0.0.629",
+    "@teambit/application": "0.0.271",
+    "@teambit/cli": "0.0.433",
+    "@teambit/dependency-resolver": "0.0.629",
+    "@teambit/generator": "0.0.629",
+    "@teambit/graphql": "0.0.629",
+    "@teambit/react.ui.highlighter-provider": "0.0.182",
+    "@teambit/compositions": "0.0.629",
+    "@teambit/ui": "0.0.629",
+    "@teambit/react.eslint-config-bit-react": "0.0.510",
+    "@teambit/webpack.modules.generate-expose-loaders": "0.0.2",
+    "@teambit/webpack.modules.generate-externals": "0.0.2",
+    "@teambit/webpack.modules.config-mutator": "0.0.136",
     "@teambit/mdx.modules.mdx-loader": "0.0.488",
-    "@teambit/react.babel.bit-react-transformer": "0.0.496",
+    "@teambit/react.babel.bit-react-transformer": "0.0.498",
     "@teambit/webpack.modules.generate-style-loaders": "0.0.102",
     "@teambit/webpack.modules.style-regexps": "0.0.131",
-    "@teambit/component-id": "0.0.398",
-    "@teambit/isolator": "0.0.621",
+    "@teambit/component-id": "0.0.400",
     "@teambit/toolbox.network.get-port": "0.0.112",
-    "@teambit/config": "0.0.439"
+    "@teambit/config": "0.0.445"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -137,7 +139,7 @@
     "@teambit/react.aspect-docs.react": "0.0.131"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.206",
+    "@teambit/legacy": "1.0.209",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -199,7 +201,7 @@
         "@types/jest": "^26.0.0"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.206",
+        "@teambit/legacy": "1.0.209",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/templates/react-app/files/app-root.ts

@@ -3,8 +3,14 @@ import { ComponentContext } from '@teambit/generator';
 export function appRootFile({ namePascalCase: Name }: ComponentContext) {
   return `import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { ${Name}App } from './app';
 
-ReactDOM.render(<${Name}App />, document.getElementById('root'));
+ReactDOM.render((
+  <BrowserRouter>
+    <${Name}App />
+  </BrowserRouter>
+), document.getElementById('root'));
+
 `;
 }

package/templates/react-app/files/compositions.ts

@@ -5,7 +5,7 @@ export function compositionsFile({ namePascalCase: Name }: ComponentContext) {
 import { ${Name}App } from './app';
 
 export const ${Name}Basic = () => {
-  return <${Name}App></${Name}App>;
+  return <${Name}App />;
 };
 `;
 }

package/templates/workspace-common/files/workspace-config.ts

@@ -54,7 +54,7 @@ export async function workspaceConfig({ name, defaultScope }: WorkspaceContext)
       /**
        * configures components with namespaces 'envs' and 'aspects' to use the default Aspect development environment.
       */
-      "{envs/**}, {aspects/**}": {
+      "{envs/**}, {aspects/**}, {apps/**}": {
         "teambit.harmony/aspect": {}
       }
     }`),

package/webpack/get-exposed-rules.ts

@@ -0,0 +1,12 @@
+import camelcase from 'camelcase';
+import 'expose-loader';
+import { generateExposeLoaders } from '@teambit/webpack.modules.generate-expose-loaders';
+
+export function getExposedRules(peers: string[]) {
+  const loaderPath = require.resolve('expose-loader');
+  const depsEntries = peers.map((peer) => ({
+    path: require.resolve(peer),
+    globalName: camelcase(peer.replace('@', '').replace('/', '-'), { pascalCase: true }),
+  }));
+  return generateExposeLoaders(depsEntries, { loaderPath });
+}

package/webpack/get-externals.ts

@@ -0,0 +1,8 @@
+import camelcase from 'camelcase';
+import { generateExternals } from '@teambit/webpack.modules.generate-externals';
+
+export function getExternals(deps: string[]) {
+  return generateExternals(deps, {
+    transformName: (depName) => camelcase(depName.replace('@', '').replace('/', '-'), { pascalCase: true }),
+  });
+}

package/webpack/html.ts

@@ -0,0 +1,22 @@
+/** html template for Previews (docs, compositions, etc) */
+export function html(title: string) {
+  return `
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>${title}</title>
+      <script>
+      // Allow to use react dev-tools inside the examples
+      try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}
+      </script>
+      <!-- minimal css resets -->
+      <style> html { height: 100%; } body { margin: 0; height: 100%; } #root { height: 100%; } </style>
+    </head>
+    <body>
+      <div id="root"></div>
+    </body>
+  </html>
+  `;
+}

package/webpack/index.ts

@@ -0,0 +1 @@
+export { html } from './html';

package/webpack/transformers.ts

@@ -0,0 +1,12 @@
+import { WebpackConfigMutator } from '@teambit/webpack.modules.config-mutator';
+
+export function generateAddAliasesFromPeersTransformer(peers: string[]) {
+  const peerAliases = peers.reduce((acc, peerName) => {
+    acc[peerName] = require.resolve(peerName);
+    return acc;
+  }, {});
+  return (config: WebpackConfigMutator): WebpackConfigMutator => {
+    config.addAliases(peerAliases);
+    return config;
+  };
+}