feat: adding support for webpack externals (#115)

* feat: working on externals support

* feat: working on externals support

* feat: adding support for webpack externals

externals rewrites the externalModule and makes its module.id equal to the dependency request.

* chore: updating demos

removing yarn links and adding externals configs for testing

* refactor: removing unused plugin options

removing multiple plugin options

* build: clear previous build before compile

* docs: removing unused options from docs

* refactor: remove commented out code

* docs: Updating readme with externals section

* fix: normalizing externals config

* v2.2.0-beta.0

* style: linting

* refactor: rename demo site folders

* style: linting

README.md

@@ -26,7 +26,7 @@
  <img src="docs/webpack-external-import.png" width="40%" alt="webpack-external-import" />
 </p>
 
-> This project has been proposed for implementation into the Webpack core (with some rewrites and refactors). Track the progress and share the issue for wider exposure if you are interested in seeing this become part of Webpack. I believe a system like this would offer great benefits for the JavaSciprt community. Fingers crossed!  https://github.com/webpack/webpack/issues/10352
+> This project has been proposed for implementation into the Webpack core (with some rewrites and refactors). Track the progress and share the issue for wider exposure if you are interested in seeing this become part of Webpack. I believe a system like this would offer great benefits for the JavaSciprt community. Fingers crossed! https://github.com/webpack/webpack/issues/10352
 
 ```shell
 $ yarn add webpack-external-import
@@ -55,7 +55,7 @@ yarn add webpack-external-import
 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. 
+If you want to read me about what this tool does.
 
 Read the following:
 
@@ -203,8 +203,8 @@ const URLImportPlugin = require("webpack-external-import/webpack");
 
 Pretend we have two separate apps that each have their _independent_ build. We want to share a module from one of our apps with the other.
 
-To do this, you must add an `externalize` object to `package.json`.
-The `externalize` object tells the plugin to make the module accessible through a predictable name.
+To do this, you must add an `interleave` object to `package.json`.
+The `interleave` object tells the plugin to make the module accessible through a predictable name.
 
 For example:
 
@@ -229,12 +229,43 @@ __webpack_require__
 This ensures a easy way for other consumers, teams, engineers to look up what another project or team is willing
 to allow for interleaving
 
+## Working with Webpack Externals
+
+Its important to follow the instructions below if you are planning to use Webpack externals.
+This plugin must be installed on all builds - it is intended that the build creating providing external is built by this plugin.
+Externals work best in scenarios where the "host" app should supplying dependencies to an interleaved one.
+
+**Providing Externals**
+To support webpack externals, you will need to use `provideExternals` to specify externals
+
+**Note:** you must use `provideExternals` **instead** of the webpack `externals` option.
+
+```js
+new URLImportPlugin({
+  provideExternals: {
+    react: "React"
+  }
+});
+```
+
+**Consuming Externals**
+To consume externals, you will need to use `useExternals` to inform webpack that the interleaved app should use the module specified by `provideExternals`
+
+```js
+new URLImportPlugin({
+  useExternals: {
+    react: "React"
+  }
+});
+```
+
 ## Full Example
 
-WEBSITE-ONE
-app.js
+**WEBSITE-ONE**
 
 ```js
+// app.js
+
 import React, { Component } from "react";
 import { ExternalComponent } from "webpack-external-import";
 import HelloWorld from "./components/goodbye-world";
@@ -299,17 +330,14 @@ Promise.all([
 });
 ```
 
-WEBSITE-TWO:
-package.json
+**WEBSITE-TWO**
 
 ```json
+// package.json
+
 {
   "name": "website-two",
   "version": "0.0.0-development",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/faceyspacey/remixx.git"
-  },
   "author": "Zack Jackson <[email protected]> (https://github.com/ScriptedAlchemy)",
   "interleave": {
     "src/components/Title/index.js": "TitleComponentWithCSSFile",
@@ -322,47 +350,19 @@ package.json
 ## API:
 
 ```js
-// Website Two -  webpack.config.js
-
 module.exports = {
-  output: {
-    publicPath
-  },
-  plugins: [
-    new URLImportPlugin({
-      manifestName: "website-two",
-      fileName: "importManifest.js",
-      basePath: ``,
-      publicPath: `//localhost:3002/`,
-      transformExtensions: /^(gz|map)$/i,
-      writeToFileEmit: false,
-      filter: null,
-      debug: true,
-      map: null,
-      generate: null,
-      sort: null
-    })
-  ]
-};
-
-// Website One webpack.config.js
-module.exports = {
-  output: {
-    publicPath
-  },
   plugins: [
     new URLImportPlugin({
       manifestName: "website-one",
       fileName: "importManifest.js",
       basePath: ``,
       publicPath: `//localhost:3001/`,
-      transformExtensions: /^(gz|map)$/i,
       writeToFileEmit: false,
       seed: null,
       filter: null,
       debug: true,
-      map: null,
-      generate: null
+      useExternals: {},
+      provideExternals: {}
     })
   ]
 };
@@ -413,19 +413,20 @@ Default: `src`
 
 Test resource path to see if plugin should apply transformations
 
-### `options.generate`
+### `options.useExternals`
 
-Type: `Function(Object, FileDescriptor): Object`<br>
-Default: `(seed, files) => files.reduce((manifest, {name, path}) => ({...manifest, [name]: path}), seed)`
+Type: `Object`<br>
+Default: `{}`
 
-Create the manifest. It can return anything as long as it's serializable by `JSON.stringify`. [FileDescriptor typings](#filedescriptor)
+Informs the webpack treat the following dependencies as externals.
+Works the same way externals does.
 
-### `options.serialize`
+### `options.provideExternals`
 
-Type: `Function(Object): string`<br>
-Default: `(manifest) => JSON.stringify(manifest, null, 2)`
+Type: `Object`<br>
+Default: `{}`
 
-Output manifest file in a different format then json (i.e., yaml).
+Informs webpack to provide the dependencies listed in the object to other apps using `useExternals`
 
 ### **ExternalComponent**
 

manual/package.json

@@ -3,7 +3,8 @@
   "workspaces": [
     "website1",
     "website2",
-    "website3"
+    "website3",
+    "website4"
   ],
   "name": "external-import-demo",
   "version": "0.0.0-development",

manual/webpack/webpackConfigFactory.js

@@ -37,14 +37,9 @@ module.exports = (siteId, options) => {
           fileName: "importManifest.js",
           basePath: ``,
           publicPath: `//localhost:300${siteId}/`,
-          transformExtensions: /^(gz|map)$/i,
           writeToFileEmit: false,
-          seed: null,
           filter: null,
           debug: true,
-          map: null,
-          generate: null,
-          sort: null
         }),
         new HtmlWebpackPlugin({
           template: templatePath,

manual/website2/package.json

@@ -8,9 +8,9 @@
   "author": "Zack Jackson <[email protected]> (https://github.com/ScriptedAlchemy)",
   "license": "GPL-3.0-only",
   "scripts": {
-    "manual:prod": "cd ../../ && yarn link  && cd manual/website2 && yarn link  webpack-external-import && cross-env NODE_ENV=production webpack && cp serve.json dist/serve.json && serve dist -l 3002",
-    "manual:dev": "cd ../../ && yarn link  && cd manual/website2 && yarn link  webpack-external-import && cross-env NODE_ENV=development node  ../node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "manual:debug": "cd ../../ && yarn link  && cd manual/website2 && yarn link  webpack-external-import && cross-env NODE_ENV=development node --inspect ../node_modules/webpack-dev-server/bin/webpack-dev-server.js"
+    "manual:prod": "cd ../../ && cd manual/website2 && cross-env NODE_ENV=production webpack && cp serve.json dist/serve.json && serve dist -l 3002",
+    "manual:dev": "cd ../../ && cd manual/website2 && cross-env NODE_ENV=development node  node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "manual:debug": "cd ../../ && cd manual/website2 && cross-env NODE_ENV=production node --inspect node_modules/webpack-dev-server/bin/webpack-dev-server.js"
   },
   "interleave": {
     "src/components/Title/index.js": "TitleComponent",

manual/website3/package.json

@@ -8,9 +8,9 @@
   "author": "Zack Jackson <[email protected]> (https://github.com/ScriptedAlchemy)",
   "license": "GPL-3.0-only",
   "scripts": {
-    "manual:prod": "cd ../../ && yarn link  && cd manual/website3 && yarn link  webpack-external-import && cross-env NODE_ENV=production webpack && cp serve.json dist/serve.json && serve dist -l 3003",
-    "manual:dev": "cd ../../ && yarn link && cd manual/website3 && yarn link webpack-external-import && cross-env NODE_ENV=development node ../node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "manual:debug": "cd ../../ && yarn link && cd manual/website3 && yarn link webpack-external-import && cross-env NODE_ENV=development node ../node_modules/webpack-dev-server/bin/webpack-dev-server.js"
+    "manual:prod": "cd ../../ && cd manual/website3 && cross-env NODE_ENV=production webpack && cp serve.json dist/serve.json && serve dist -l 3003",
+    "manual:dev": "cd ../../ && cd manual/website3 && cross-env NODE_ENV=development node node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "manual:debug": "cd ../../ && cd manual/website3 && cross-env NODE_ENV=development node node_modules/webpack-dev-server/bin/webpack-dev-server.js"
   },
   "interleave": {
     "src/components/Title/index.js": "TitleComponentWithCSSFile",

manual/website3/webpack.config.js

@@ -1,4 +1,3 @@
-const webpack = require("webpack");
 const ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
 const configFactory = require("../webpack/webpackConfigFactory");
 

manual/website4/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

manual/website4/README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

manual/website4/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "website4",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}