feat: Recursive tree-shake support (#111)

* feat: Tree shaking support
Basic implementation working

* chore: moved demo to static serve
fix: addressed issues with missing chunks
chore: preparing codebase for queue groups in require extension

* fix: stable parallel chunk resolution
improving resolution tactics
updated style resolution
remove useless chunk registration checks

* refactor: moving code back into webpack template scope

* refactor: removing old code

* refactor: decouple loader scripts from the main bundle

* docs: adding comments

* fix: adding error handling for CSS

* fix: fixed error handling on CSS and JS promises

* perf: split chunks into 50kb fragments

* refactor: cleanup unused code
removing old template code
removing old functions

* style: linting interleaveFn

* fix: use yarn workspaces on demo

* feat: resolve and return required module
No longer need to use a webpack_require inside another promise.
You can now just use `__webpack_require__.interleaved()`

* build: fixing rogue prod build

* chore: remove encryption

* style: fixing various linting issues

* refactor: deleting old template files

* docs: updating readme with fixed require chains

you now no longer need to __webpack_require__ inside require.interleaved

* ci: running multiple scripts in the build stage

* docs: update license to BSD-3

* refactor: removing old files

removing and .npmignore'ing files and folders

* refactor: removing old files

removing and .npmignore'ing files and folders

* ci: improve build speed

Author: ScriptedAlchemy

.npmignore

@@ -3,4 +3,10 @@ test
 .idea
 .travis.yml
 secure-src
-.nodecipherrc
+.nodecipherrc
+.gitignore
+.travis.yml
+yarn.lock
+renovate.json
+src
+test

.travis.yml

@@ -1,19 +1,19 @@
 language: node_js
 node_js:
   - 10
+before_install: rm -rf manual
 install: yarn --ignore-engines # ignore engines to test node 6, otherwise it fails on engine check
 cache: yarn
 jobs:
   include:
-    - stage: Build
-      name: Travis Status
-      script: yarn travis-github-status
-    - stage: Linting
-      name: ESlint
-      script: npm run lint
+    - stage: Verify
+      script:
+        - yarn travis-github-status
+        - yarn lint
     - stage: Release
+      if: branch = master
       deploy:
         provider: script
         skip_cleanup: true
         script:
-          - yarn semantic-release
+          - yarn semantic-release

LICENSE

@@ -47,14 +47,19 @@ npm install webpack-external-import --save
 ```sh
 yarn add webpack-external-import
 ```
+
 ### Version 2.0!
-Major rewrite which has taken the original concept and built it directly into webpack runtime. 
-If you want to read me about what this tool does. 
 
+Major rewrite which has taken the original concept and built it directly into webpack runtime.
+A big achievement in this release is **tree-shaking support**
+
+If you want to read me about what this tool does. 
 
 Read the following:
+
 - https://link.medium.com/L5zHiwylI3
 - working on more use cases and writing about V2
+
 ## Getting Started
 
 1.  Add `webpack-external-import/webpack` to your webpack plugins:
@@ -131,11 +136,12 @@ Below is an example of interleaving a module from `website-2`
 ```js
 // import a chunk from another website build with webpack-external-import
 
-__webpack_require__.interleaved("website-2/ValidationRules").then(() => {
-  const validationRules = __webpack_require__("ValidationRules");
-  // proceed to use as a you would with a normal require statement
-  validationRules.validateObject(someObject);
-});
+__webpack_require__
+  .interleaved("website-2/ValidationRules")
+  .then(validationRules => {
+    // proceed to use as a you would with a normal require statement
+    validationRules.validateObject(someObject);
+  });
 ```
 
 ### With JSX
@@ -149,9 +155,9 @@ class SomeComponent extends Component {
     return (
       <div>
         <ExternalComponent
-          interleave={__webpack_require__
-            .interleaved("website-2/TitleComponent")
-            .then(() => __webpack_require__("TitleComponent"))}
+          interleave={__webpack_require__.interleaved(
+            "website-2/TitleComponent"
+          )}
           export="Title"
           title="Some Heading"
         />
@@ -215,7 +221,7 @@ For example:
 // website-one App.js
 __webpack_require__
   .interleaved("website-3/TitleComponentWithCSSFile")
-  .then(() => __webpack_require__("TitleComponentWithCSSFile"));
+  .then(TitleComponentWithCSSFile => <TitleComponentWithCSSFile />);
 ```
 
 This ensures a easy way for other consumers, teams, engineers to look up what another project or team is willing
@@ -245,7 +251,9 @@ class App extends Component {
   componentDidMount() {
     __webpack_require__
       .interleaved("website-3/TitleComponentWithCSSFile")
-      .then(() => __webpack_require__("TitleComponentWithCSSFile"));
+      .then(TitleComponentWithCSSFile =>
+        console.log(TitleComponentWithCSSFile)
+      );
   }
 
   renderDynamic = () => {
@@ -260,18 +268,18 @@ class App extends Component {
         <HelloWorld />
 
         <ExternalComponent
-          interleave={__webpack_require__
-            .interleaved("website-2/TitleComponent")
-            .then(() => __webpack_require__("TitleComponent"))}
+          interleave={__webpack_require__.interleaved(
+            "website-2/TitleComponent"
+          )}
           export="Title"
           module="TitleComponent"
           title="Some Heading"
         />
 
         <ExternalComponent
-          interleave={__webpack_require__
-            .interleaved("website-3/TitleComponentWithCSSFile")
-            .then(() => __webpack_require__("TitleComponentWithCSSFile"))}
+          interleave={__webpack_require__.interleaved(
+            "website-3/TitleComponentWithCSSFile"
+          )}
           export="Title"
           title="Title Component With CSS File Import"
         />
@@ -326,7 +334,6 @@ module.exports = {
       publicPath: `//localhost:3002/`,
       transformExtensions: /^(gz|map)$/i,
       writeToFileEmit: false,
-      seed: null,
       filter: null,
       debug: true,
       map: null,
@@ -353,8 +360,7 @@ module.exports = {
       filter: null,
       debug: true,
       map: null,
-      generate: null,
-      sort: null
+      generate: null
     })
   ]
 };
@@ -405,18 +411,6 @@ Default: `src`
 
 Test resource path to see if plugin should apply transformations
 
-### `options.map`
-
-Type: `Function(FileDescriptor): FileDescriptor`
-
-Modify files details before the manifest is created. [FileDescriptor typings](#filedescriptor)
-
-### `options.sort`
-
-Type: `Function(FileDescriptor): number`
-
-Sort files before they are passed to `generate`. [FileDescriptor typings](#filedescriptor)
-
 ### `options.generate`
 
 Type: `Function(Object, FileDescriptor): Object`<br>
@@ -458,9 +452,8 @@ componentDidMount() {
   corsImport('http://localhost:3002/importManifest.js').then(() => {
       const Title = __webpack_require__
         .interleaved("website-two/TitleComponent")
-        .then(() => __webpack_require__("TitleComponent"))
 
-        console.log(Title) // => Module {default: ()=>{}, Title: ()=>{}}
+        Title.then(console.log) // => Module {default: ()=>{}, Title: ()=>{}}
   });
 }
 ```

README.md

@@ -7,7 +7,7 @@
   },
   "author": "Zack Jackson <[email protected]> (https://github.com/ScriptedAlchemy)",
   "scripts": {
-    "manual:prod": "cross-env NODE_ENV=production node node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "manual:prod": "cross-env NODE_ENV=production webpack && cp serve.json  dist/serve.json && serve dist -l 3001",
     "manual:dev": "cross-env NODE_ENV=development node node_modules/webpack-dev-server/bin/webpack-dev-server.js"
   },
   "devDependencies": {
@@ -33,15 +33,20 @@
     "crc-32": "^1.2.0",
     "cross-env": "^7.0.0",
     "html-webpack-plugin": "^4.0.0-beta.8",
+    "lodash": "^4.17.15",
+    "lodash-es": "^4.17.15",
     "mini-css-extract-plugin": "^0.9.0",
+    "mobx": "^5.15.4",
     "moment": "^2.24.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "react-select": "3.0.4",
     "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",
-    "webpack-external-import": "*",
+    "serve": "^11.3.0",
+    "tiny-mobx-form": "^0.8.3",
+    "webpack-external-import": "file:../../",
     "webpack-merge": "^4.2.1"
   }
 }

decrypt.js

@@ -0,0 +1,17 @@
+{
+  "headers": [
+    {
+      "source": "**/*.@(jpg|jpeg|gif|png|txt|css)",
+      "headers": [
+        {
+          "key": "Access-Control-Allow-Origin",
+          "value": "*"
+        },
+        {
+          "key": "Access-Control-Allow-Headers",
+          "value": "Origin, X-Requested-With, Content-Type, Accept, Range"
+        }
+      ]
+    }
+  ]
+}

encrypt.js

@@ -1,9 +1,8 @@
 import React, { Component } from "react";
-import {
-  ExternalComponent,
-} from "webpack-external-import";
+import { ExternalComponent } from "webpack-external-import";
 import HelloWorld from "./components/goodbye-world";
 import "react-select";
+import { Form } from "tiny-mobx-form";
 
 class App extends Component {
   constructor(props) {
@@ -13,31 +12,40 @@ class App extends Component {
       manifestLoaded: false,
       loaded: false
     };
-  }
 
-  componentDidMount() {
-    __webpack_require__
-      .interleaved("website-3/TitleComponentWithCSSFile")
-      .then(() => __webpack_require__("TitleComponentWithCSSFile"))
+    console.log("Tree Shake Form", Form);
   }
 
+  // componentDidMount() {
+  //   setTimeout(() => {
+  //     console.log("Tree Shake Form", Form);
+  //   }, 3000);
+  //   __webpack_require__
+  //     .interleaved("website-2/TitleComponent")
+  //     .then(() => __webpack_require__("TitleComponent"));
+  //
+  //   __webpack_require__
+  //     .interleaved("website-3/TitleComponentWithCSSFile")
+  //     .then(() => __webpack_require__("TitleComponentWithCSSFile"));
+  // }
+
   render() {
     return (
       <div>
         <HelloWorld />
 
         <ExternalComponent
-          interleave={__webpack_require__
-            .interleaved("website-2/TitleComponent")
-            .then(() => __webpack_require__("TitleComponent"))}
+          interleave={__webpack_require__.interleaved(
+            "website-2/TitleComponent"
+          )}
           export="Title"
           title="Some Heading"
         />
 
         <ExternalComponent
-          interleave={__webpack_require__
-            .interleaved("website-3/TitleComponentWithCSSFile")
-            .then(() => __webpack_require__("TitleComponentWithCSSFile"))}
+          interleave={__webpack_require__.interleaved(
+            "website-3/TitleComponentWithCSSFile"
+          )}
           export="Title"
           title="Title Component With CSS File Import"
         />