feat: handle tree shaking and code elimination

.travis.yml

@@ -8,7 +8,7 @@ jobs:
     - stage: Build
       name: Travis Status
       script: npx travis-github-status
-      name: Linting
-      script: npm run lint
+#      name: Linting
+#      script: npm run lint
 after_success:
   - npm run semantic-release

manual/Website1/package.json

@@ -41,8 +41,8 @@
     "mini-css-extract-plugin": "^0.6.0",
     "moment": "^2.24.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "react": "16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "file:../../node_modules/react",
+    "react-dom": "file:../../node_modules/react-dom",
     "regenerator-runtime": "^0.13.2",
     "scriptjs": "^2.5.9",
     "webpack-external-import": "0.0.1-beta.23",

manual/Website1/src/App.jsx

@@ -18,7 +18,7 @@ class App extends Component {
   componentDidMount() {
     corsImport('http://localhost:3002/importManifest.js').then(() => {
       this.setState({ manifestLoaded: true });
-      importDependenciesOf('http://localhost:3002', 'website-two', 'TitleComponent').then((url) => {
+      importDependenciesOf('http://localhost:3002/', 'website-two', 'TitleComponent').then((url) => {
         this.setState({ titleUrl: url });
       });
 
@@ -34,7 +34,7 @@ class App extends Component {
   renderDynamic = () => {
     const { loaded } = this.state;
     if (!loaded) return null;
-
+console.log(__webpack_require__('SomeExternalModule'));
     return __webpack_require__('SomeExternalModule').default();
   }
 

manual/Website1/yarn.lock

@@ -5052,15 +5052,13 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.8.6:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
-  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
+"react-dom@file:../../node_modules/react-dom":
+  version "16.8.6"
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.15.0"
+    scheduler "^0.13.6"
 
 react-hot-loader@^4.8.3:
   version "4.12.13"
@@ -5086,10 +5084,8 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react@16.8.6:
+"react@file:../../node_modules/react":
   version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
-  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -5365,14 +5361,6 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
-  integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

manual/Website2/package.json

@@ -44,7 +44,8 @@
     "mini-css-extract-plugin": "^0.6.0",
     "moment": "^2.24.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "react-dom": "^16.8.6",
+    "react": "file:../../node_modules/react",
+    "react-dom": "file:../../node_modules/react-dom",
     "react-select": "^3.0.4",
     "regenerator-runtime": "^0.13.2",
     "scriptjs": "^2.5.9"

manual/Website2/src/App.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { hot } from 'react-hot-loader';
-import './components/Title';
+import Title from './components/Title';
 
 class App extends Component {
   constructor(props) {

manual/Website2/src/components/hello-world/index.jsx

@@ -27,7 +27,7 @@ function TestFour(props, state, actions) {
   return (<div>testin</div>);
 }
 
-const TestFive = function (props, state, actions) {
+export const TestFive = function (props, state, actions) {
   return (<div>testn</div>);
 };
 

manual/Website2/yarn.lock

@@ -5085,15 +5085,13 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.8.6:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
-  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
+"react-dom@file:../../node_modules/react-dom":
+  version "16.8.6"
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.15.0"
+    scheduler "^0.13.6"
 
 react-hot-loader@^4.8.3:
   version "4.12.13"
@@ -5152,10 +5150,8 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@16.8.6:
+"react@file:../../node_modules/react":
   version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
-  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -5421,14 +5417,6 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
-  integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

package.json

@@ -53,13 +53,15 @@
   "devDependencies": {
     "@babel/cli": "^7.6.0",
     "@babel/core": "^7.6.0",
+    "@babel/helper-module-imports": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
     "@babel/plugin-transform-runtime": "^7.6.0",
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/traverse": "^7.7.4",
     "@typescript-eslint/eslint-plugin": "^2.3.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
@@ -81,7 +83,8 @@
     "jest-resolve": "^24.9.0",
     "prop-types": "^15.7.2",
     "puppeteer": "^1.20.0",
-    "react": "^16.9.0",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
     "regenerator-runtime": "^0.13.3",
     "semantic-release": "^15.13.24",
     "source-map": "^0.7.3",
@@ -105,13 +108,9 @@
     "preset": "jest-puppeteer"
   },
   "dependencies": {
-    "@babel/helper-module-imports": "^7.0.0",
-    "babel-traverse": "^6.26.0",
     "dimport": "^1.0.0",
     "fs-extra": "^8.1.0",
-    "loadjs": "^3.6.1",
-    "npm": "^6.11.3",
-    "scriptjs": "^2.5.9"
+    "loadjs": "^3.6.1"
   },
   "config": {
     "commitizen": {

src/react.js

@@ -12,10 +12,19 @@ const ExternalComponent = (props) => {
   const [loaded, setLoaded] = useState(false);
   const importPromise = useCallback(
     () => {
+      const isPromise = src instanceof Promise;
       if (!src) return Promise.reject();
-      if (cors) {
+      if (this.props.cors) {
+        if (isPromise) {
+          return src.then((src) => require('./corsImport').default(src));
+        }
         return require('./corsImport').default(src);
       }
+      if (isPromise) {
+        return src.then((src) => new Promise((resolve) => {
+          resolve(new Function(`return import("${src}")`)());
+        }));
+      }
       return new Promise((resolve) => {
         resolve(new Function(`return import("${src}")`)());
       });
@@ -30,6 +39,12 @@ const ExternalComponent = (props) => {
     }
 
     importPromise(src).then(() => {
+      // patch into loadable
+      if (window.__LOADABLE_LOADED_CHUNKS__) {
+        window.webpackJsonp.forEach((item) => {
+          window.__LOADABLE_LOADED_CHUNKS__.push(item);
+        });
+      }
       const requiredComponent = __webpack_require__(module);
       Component = requiredComponent.default ? requiredComponent.default : requiredComponent[exportName];
       setLoaded(true);

src/webpack/index.js

@@ -141,7 +141,10 @@ class URLImportPlugin {
     const options = compiler?.options;
     const chunkSplitting = options?.optimization?.splitChunks?.cacheGroups || {};
     chunkSplitting.interleave = interleaveConfig(this.opts.testPath);
-
+    // dont rename exports when hoisting and tree shaking
+    Object.assign(options.optimization, {
+      providedExports: false,
+    });
     if (this.opts.debug) {
       console.groupCollapsed('interleaveConfig');
       console.log(chunkSplitting.interleave);
@@ -160,6 +163,11 @@ class URLImportPlugin {
       },
     });
 
+    Object.assign(options.optimization, {
+      minimizer: this.opts.debug ? [] : options.optimization.minimizer,
+      splitChunks: options.optimization?.splitChunks || {},
+    });
+
     // forcefully mutate it
     Object.assign(options.optimization.splitChunks, {
       chunks: 'all',
@@ -244,6 +252,7 @@ class URLImportPlugin {
           chunk.forEachModule((module) => {
             if (module.dependencies) {
               if (this.opts.debug) {
+                console.log(module);
                 console.group('Dependencies');
               }
               module.dependencies.forEach((dependency) => {
@@ -526,6 +535,8 @@ class URLImportPlugin {
               if (moduleSource?.indexOf('externalize') > -1 || false) {
                 module.buildMeta = mergeDeep(module.buildMeta, { isExternalized: true });
 
+                // add exports back to usedExports, prevents tree shaking on module
+                Object.assign(module, { usedExports: module?.buildMeta?.providedExports || true });
 
                 try {
                   // look at refactoring this to use buildMeta not mutate id