{"dist":{"shasum":"282a3a1e00a3c9b6e396e8f4363a7aae8196a867","tarball":"https://registry.npmjs.org/webpack-external-import/-/webpack-external-import-2.2.0-beta.0.tgz","fileCount":40,"integrity":"sha512-Z6k5oTSmT/91FSiNhWGei4DyQ5VRqSBThwUnHMtplIgRoGWIP4g01gUYUZn5G53tY+9o0fLMB13HIhUky13Ypg==","signatures":[{"sig":"MEUCIDUGx747zy2wYjR2Fp/g4FXEbLaMLMsAgSOnmgJrKCsuAiEAy6j8t4yH1p26cAncBLbumOabaiKxxmd7KaAWlQMVyVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":102732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQLroCRA9TVsSAnZWagAAt0cQAIlQN0gUGwlmFdGzXf7Z\nYNBrHokIG1I1D4gIdqfCd0+wICX55ryAHcczFtg1rZUDbtTRV3eo/+BnPaFL\nGzNA7tsN3fGJ+5gggMsHcV+NaJ/E5LyJTgYqQZCq39Or2AYCd/5o3ed98ToW\n8/sW2mdoXV+Im8lyKld8iDmtsb2i75mRrUgftf54y7PfBnm2hFSW4BjA0d7E\nMaTx1xUTZLBhFm+seXLPNLRQBknOrvYTrwrVHE9vBL2vCjZwGlnoKWkr3QPV\nLyqwqFuydDE8Fkt2bPtVzAhE1/a/HfLq4qaCpjWryUBNINUQK5EZVxLPIcZa\nFzDaa5nqdD7C2kUzqK2qtl/sYIejQWqCpnkeaZghZSOC4ad/mGTCGiZIaGkZ\nmfoYJIMa2TPRUft21vTIBV/PwkmRSQSk3U1TYoa0BdT1Z3+igHhtuqZuAd99\neaB1DQgwXJTMuCwNvV9v/d1Lt2dldFh9tNyaLmGuV4Gbgcnpd0aKDoNgymA1\nt7RFdC4jP1jSG2mEv0obSGcargFy0BHklJVnD97TaaxCxTYVbtzhKlntn7/Q\nvhOmxTuVf2RuMNXY3p2kAkbw3YB2o/AurxloYIhYmLc58adXlJdOnSsZSb0V\nyNtEZ20Akx8Jsujj3rwDALesEH4SRgrE8JrodusKfoQI8FVgNCRI5hdNYXzV\ndSqi\r\n=87la\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"preset":"jest-puppeteer"},"name":"webpack-external-import","babel":{"env":{"production":{"plugins":["transform-remove-console"]}},"plugins":["@babel/plugin-proposal-optional-chaining"],"presets":["@babel/preset-env","@babel/preset-react"]},"author":{"url":"https://github.com/ScriptedAlchemy","name":"Zack Jackson","email":"zack@ScriptedAlchemy.com"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"# Webpack External Import\n\n> **import() other chunks and modules from third parties, or other webpack builds themselves! At runtime!**\n\n

\n \n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n \n \"Version\"\n \n\n \n \"Downloads\"\n \n\n \n \"License\"\n \n \n \n \"License\"\n \n

\n\n

\n \"webpack-external-import\"\n

\n\n> 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\n\n```shell\n$ yarn add webpack-external-import\n```\n\n_This project is under active development_\n\n\\*\\*To jump to the _development_ section [click here](#development)\n\n# Installation\n\n### npm\n\n```sh\nnpm install webpack-external-import --save\n```\n\n### Yarn\n\n```sh\nyarn add webpack-external-import\n```\n\n### Version 2.0!\n\nMajor rewrite which has taken the original concept and built it directly into webpack runtime.\nA big achievement in this release is **tree-shaking support**\n\nIf you want to read me about what this tool does.\n\nRead the following:\n\n- https://link.medium.com/L5zHiwylI3\n- working on more use cases and writing about V2\n\n## Getting Started\n\n1. Add `webpack-external-import/webpack` to your webpack plugins:\n\n```js\n// techblog.webpack.config.js\nconst URLImportPlugin = require(\"webpack-external-import/webpack\");\n{\n plugins: [\n new URLImportPlugin({\n manifestName: \"website-one\"\n })\n ];\n}\n\n// otherblog.webpack.config\nconst URLImportPlugin = require(\"webpack-external-import/webpack\");\n{\n plugins: [\n new URLImportPlugin({\n manifestName: \"website-two\"\n })\n ];\n}\n```\n\n2. If you are interleaving webpack bundles, load their manifests somewhere\n\n```js\n// index.js\nimport { corsImport } from \"webpack-external-import\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App.jsx\";\n\n// using Date.now() for cache busting the file. It should only less than 2kb\ncorsImport(`http://localhost:3002/importManifest.js?${Date.now()}`).then(() => {\n ReactDOM.render(, document.getElementById(\"app\"));\n});\n\n// you could also use native imports\n\nimport(\n /* webpackIgnore:true */ `http://localhost:3002/importManifest.js?${Date.now()}`\n).then(() => {\n ReactDOM.render(, document.getElementById(\"app\"));\n});\n```\n\n## Usage\n\nThis plugin works with any Webpack driven application\n\n#### Vanilla JS\n\nThis assumes a import manifest was loaded somewhere else in the application already.\n\nIf you have not imported manifest then wrap your function in another promise:\n\n```js\ncorsImport(\"http://localhost:3002/importManifest.js\").then(() => {\n someFunction();\n});\n```\n\nAs long as the `importManifest` was loaded - this is how it would be used\n`__webpack_require_.interleaved()` expects a module to contain both the module.id and the namespace\n\nThis allows external-import to know where to interleave from.\n`__webpack_require_.interleaved([namespace]/[module.id])`\n\nBelow is an example of interleaving a module from `website-2`\n\n```js\n// import a chunk from another website build with webpack-external-import\n\n__webpack_require__\n .interleaved(\"website-2/ValidationRules\")\n .then(validationRules => {\n // proceed to use as a you would with a normal require statement\n validationRules.validateObject(someObject);\n });\n```\n\n### With JSX\n\n`ExternalComponent` exists for ease of use with React Components and is as SFC using React.Hooks\n\n```js\nimport { ExternalComponent } from \"webpack-external-import\";\nclass SomeComponent extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n```\n\n## What is the use of `webpack-external-import` ?\n\n- **Load components over the wire** - Pull in components at runtime.\n- **Build leaner micro-frontends (MFE)** -\n Micro-frontends can share bundle chunks and resources with each other while remaining self-contained, removing needless code duplication.\n- **Split a large, multi-team app into separate deployable chunks while keeping it as one SPA** - Large apps can be split into separate feature bundles that can be deployed independently, reducing deployment bottlenecks.\n- **Manage common js/vendor files automatically.** - Instead of dealing with peer dependencies, externals, or anything else, you can load the dependency from a remote source.\n- **LOSA Style frontend architecture** - Run multiple apps on a single page.\n- **FOSA Style frontend orchestration** - Powerful frontend orchestration, self-organizing application architecture. Many builds act as one\n\n### Advanced Setup - Injecting Webpack modules from another build\n\nUse the webpack plugin to inject webpack modules from another build into your build.\n\n_**Important**: Make sure manifestName_ is unique per webpack build.\nIf you have multiple builds, they all need to have a unique manifestName\n\n**webpack.config.js**\n\n```js\nconst URLImportPlugin = require(\"webpack-external-import/webpack\");\n{\n plugins: [\n new URLImportPlugin({\n manifestName: \"website-one\"\n })\n ];\n}\n```\n\n## Mark Files for interleaving\n\nPretend 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.\n\nTo do this, you must add an `interleave` object to `package.json`.\nThe `interleave` object tells the plugin to make the module accessible through a predictable name.\n\nFor example:\n\n```json\n// wbsite-two package.json\n{\n \"name\": \"some-package-name\",\n \"interleave\": {\n \"src/components/Title/index.js\": \"TitleComponent\",\n \"src/components/hello-world/index.js\": \"SomeExternalModule\"\n }\n}\n```\n\n```js\n// website-one App.js\n__webpack_require__\n .interleaved(\"website-3/TitleComponentWithCSSFile\")\n .then(TitleComponentWithCSSFile => );\n```\n\nThis ensures a easy way for other consumers, teams, engineers to look up what another project or team is willing\nto allow for interleaving\n\n## Working with Webpack Externals\n\nIts important to follow the instructions below if you are planning to use Webpack externals.\nThis plugin must be installed on all builds - it is intended that the build creating providing external is built by this plugin.\nExternals work best in scenarios where the \"host\" app should supplying dependencies to an interleaved one.\n\n**Providing Externals**\nTo support webpack externals, you will need to use `provideExternals` to specify externals\n\n**Note:** you must use `provideExternals` **instead** of the webpack `externals` option.\n\n```js\nnew URLImportPlugin({\n provideExternals: {\n react: \"React\"\n }\n});\n```\n\n**Consuming Externals**\nTo consume externals, you will need to use `useExternals` to inform webpack that the interleaved app should use the module specified by `provideExternals`\n\n```js\nnew URLImportPlugin({\n useExternals: {\n react: \"React\"\n }\n});\n```\n\n## Full Example\n\n**WEBSITE-ONE**\n\n```js\n// app.js\n\nimport React, { Component } from \"react\";\nimport { ExternalComponent } from \"webpack-external-import\";\nimport HelloWorld from \"./components/goodbye-world\";\nimport \"react-select\";\n\nclass App extends Component {\n constructor(props) {\n super(props);\n this.state = {\n titleUrl: null,\n manifestLoaded: false,\n loaded: false\n };\n }\n\n componentDidMount() {\n __webpack_require__\n .interleaved(\"website-3/TitleComponentWithCSSFile\")\n .then(TitleComponentWithCSSFile =>\n console.log(TitleComponentWithCSSFile)\n );\n }\n\n renderDynamic = () => {\n const { loaded } = this.state;\n if (!loaded) return null;\n return __webpack_require__(\"SomeExternalModule\").default();\n };\n\n render() {\n return (\n
\n \n\n \n\n \n {this.renderDynamic()}\n
\n );\n }\n}\n\nPromise.all([\n corsImport(`http://localhost:3002/importManifest.js?${Date.now()}`),\n corsImport(`http://localhost:3003/importManifest.js?${Date.now()}`)\n]).then(() => {\n ReactDOM.render(, document.getElementById(\"app\"));\n});\n```\n\n**WEBSITE-TWO**\n\n```json\n// package.json\n\n{\n \"name\": \"website-two\",\n \"version\": \"0.0.0-development\",\n \"author\": \"Zack Jackson (https://github.com/ScriptedAlchemy)\",\n \"interleave\": {\n \"src/components/Title/index.js\": \"TitleComponentWithCSSFile\",\n \"src/components/Title/style.css\": \"TitleComponentWithCSSFileCSS\",\n \"src/components/hello-world/index.js\": \"SomeExternalModule\"\n }\n}\n```\n\n## API:\n\n```js\nmodule.exports = {\n plugins: [\n new URLImportPlugin({\n manifestName: \"website-one\",\n fileName: \"importManifest.js\",\n basePath: ``,\n publicPath: `//localhost:3001/`,\n writeToFileEmit: false,\n seed: null,\n filter: null,\n debug: true,\n useExternals: {},\n provideExternals: {}\n })\n ]\n};\n```\n\n### `options.fileName`\n\nType: `String`
\nDefault: `manifest.json`\n\nThe manifest filename in your output directory.\n\n### `options.publicPath`\n\nType: `String`\nDefault: `output.publicPath`\n\nA path prefix that will be added to values of the manifest.\n\n### `options.basePath`\n\nType: `String`\n\nA path prefix for all keys. Useful for including your output path in the manifest.\n\n### `options.writeToFileEmit`\n\nType: `Boolean`
\nDefault: `false`\n\nIf set to `true` will emit to build folder and memory in combination with `webpack-dev-server`\n\n### `options.seed`\n\nType: `Object`
\nDefault: `{}`\n\nA cache of key/value pairs to used to seed the manifest. This may include a set of [custom key/value](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json) pairs to include in your manifest or may be used to combine manifests across compilations in [multi-compiler mode](https://github.com/webpack/webpack/tree/master/examples/multi-compiler). To combine manifests, pass a shared seed object to each compiler's ManifestPlugin instance.\n\n### `options.filter`\n\nType: `Function(FileDescriptor): Boolean`\n\n### `options.test`\n\nType: `Function(Object, FileDescriptor): Object`
\nDefault: `src`\n\nTest resource path to see if plugin should apply transformations\n\n### `options.useExternals`\n\nType: `Object`
\nDefault: `{}`\n\nInforms the webpack treat the following dependencies as externals.\nWorks the same way externals does.\n\n### `options.provideExternals`\n\nType: `Object`
\nDefault: `{}`\n\nInforms webpack to provide the dependencies listed in the object to other apps using `useExternals`\n\n### **ExternalComponent**\n\nReact Component\n\n#### **Props**:\n\n**`src`: string** - a url to a javascript file, note it will need to be built by another webpack build running this plugin\n\n**`interleave`: function** - the `__webpack_require__.interleave()` function, which will return a module\n\n**`export`: string** - The named export to use as a component from the module being imported\n\n### The entry manifest\n\nEach webpack build using the webpack plugin emits a manifest file to the build output directory.\n\nThe manifest allows you to find a chunk that you want, even if the name has been hashed.\n\nBelow is an example of using the manifest.\n\nIn this file, I am importing code from another website/build. My application is loading website two's manifest, which is automatically added to `window.entryManifest` under the `manifestName` I set in the webpack plugin. After that, I'm importing a chunk from website-two, in this case - the chunk is code-split.\n\n```js\ncomponentDidMount() {\n corsImport('http://localhost:3002/importManifest.js').then(() => {\n const Title = __webpack_require__\n .interleaved(\"website-two/TitleComponent\")\n\n Title.then(console.log) // => Module {default: ()=>{}, Title: ()=>{}}\n });\n}\n```\n\n## DEMO\n\nHow to start using the demo\nIn the _root directory_, run the following\n\n1. run `yarn install`\n2. run `yarn demo` from the root directory\n3. browse to [localhost:3001](http://localhost:3001) and you will see components from two other websites\n\nThis command will install, all dependencies, build the source for the plugin, install the demo dependencies, run all builds and start serving\n\n## Development & Debugging\n\nHow to start the demo in debug mode, using node --inspect and connecting to a chrome debugger\n\n> This is mainly for debugging the webpack plugin\n\nIn the root directory, run the following\n\n1. `yarn install`\n2. `yarn demo:debug` from the root directory\n3. browse to [localhost:3001](http://localhost:3001)\n\n**Note:** _[localhost:3001](http://localhost:3001) is the \"consumer app, while the other is the provider app\". Both apps work independently and you should check both of them out (they are extremely basic)_\n\nOpen chrome dev tools and you should see the box highlighted below appear, click on it to connect to the webpack debugger\n![GitHub Logo](/docs/inspect.png)\n\n### Logging\n\nThe default compilation removes console log statements via `babel-plugin-transform-remove-console`, which is run when `BABEL_ENV=production` (default). To compile a version with logging enabled, run `yarn compile` directly.\n","license":"BSD-3-Clause","scripts":{"demo":"cd manual; yarn && cd ../; concurrently \"yarn compile\" \"yarn demo:one\" \"yarn demo:two\" \"yarn demo:three\"","jest":"NODE_ENV=test jest","lint":"eslint --ext .js,.ts,.tsx src --fix","test":"yarn lint","commit":"npx git-cz","compile":"rm -rf webpack index.js corsImport.js react.js polyfill.js; babel src -d .","jest:ci":"cross-env NODE_ENV=development jest","prepare":"BABEL_ENV=production yarn compile","demo:one":"cd manual/website1; yarn manual:dev","demo:two":"cd manual/website2; yarn manual:dev","demo:fast":"yarn compile && yarn demo:one:fast | yarn demo:two:fast","demo:prod":"cd manual; yarn && cd ../; concurrently \"yarn kill-ports\" \"yarn compile\" \"yarn demo:one:prod\" \"yarn demo:two:prod\" \"yarn demo:three:prod \"","demo:debug":"cd manual; yarn && cd ../; concurrently \"yarn kill-ports\" \"yarn compile\" \"yarn demo:one\" \"yarn demo:two:debug\" \"yarn demo:three\"","demo:three":"cd manual/website3; yarn manual:dev","kill-ports":"lsof -ti:3001 | xargs kill -9; lsof -ti:3002 | xargs kill -9; lsof -ti:3003 | xargs kill -9","demo:one:prod":"cd manual/website1; yarn && yarn manual:prod","demo:two:prod":"cd manual/website2; yarn && yarn manual:prod","demo:one:debug":"cd manual/website1; yarn && yarn manual:debug","demo:two:debug":"cd manual/website2; yarn && yarn manual:debug","demo:three:prod":"cd manual/website3; yarn && yarn manual:prod","demo:three:debug":"cd manual/website3; yarn && yarn manual:debug","semantic-release":"semantic-release"},"_npmUser":{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"},"keywords":["import url","dynamic imports url","over the wire","import() url","external url import","script injection","webpack import url","webpack","manifest","dynamic dll plugin","dll plugin","runtime"],"repository":{"url":"https://github.com/ScriptedAlchemy/webpack-external-import.git","type":"git"},"description":"dynamic import() external urls!","directories":{},"licenseText":"BSD 3-Clause License\n---------------\n\nCopyright © 2018 Zackary Jackson All rights reserved.\nCopyright © 2018 ScriptedAlchemy LLC All rights reserved.\n\nRedistribution and use in source and binary forms, with or without modification,\nare permitted provided that the following conditions are met:\n* Redistributions of source code must retain the above copyright notice, this\n list of conditions and the following disclaimer.\n* Redistributions in binary form must reproduce the above copyright notice, this\n list of conditions and the following disclaimer in the documentation and/or\n other materials provided with the distribution.\n* Neither the name of “ScriptedAlchemy” nor the names of its contributors may be used to\n endorse or promote products derived from this software without specific prior\n written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND\nANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\nWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR\nANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\nLOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON\nANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS\nSOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n","maintainers":[{"name":"zackljackson","email":"zackary.l.jackson@gmail.com"}],"dependencies":{"mem":"^6.0.1","assert":"^2.0.0","loadjs":"^4.2.0","pkg-up":"^3.1.0","dimport":"^1.0.0","fs-extra":"^8.1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"25.1.0","react":"16.8.6","eslint":"6.8.0","marked":"0.8.0","webpack":"4.41.5","flow-bin":"0.117.0","prettier":"1.19.1","cross-env":"7.0.0","puppeteer":"1.20.0","react-dom":"16.8.6","@babel/cli":"7.7.7","babel-core":"7.0.0-bridge.0","commitizen":"4.0.3","paralleljs":"^0.2.1","prop-types":"15.7.2","source-map":"0.7.3","@babel/core":"7.7.7","babel-watch":"7.0.0","node-cipher":"6.3.3","webpack-cli":"3.3.10","babel-eslint":"10.0.3","babel-loader":"8.0.6","concurrently":"5.1.0","jest-resolve":"25.1.0","schema-utils":"2.6.1","jest-haste-map":"25.1.0","jest-puppeteer":"4.4.0","@babel/traverse":"7.7.4","semantic-release":"17.0.1","@babel/preset-env":"7.7.7","webpack-dev-server":"3.10.1","@babel/preset-react":"7.7.4","eslint-plugin-react":"7.17.0","html-webpack-plugin":"3.2.0","regenerator-runtime":"0.13.3","eslint-config-airbnb":"18.0.1","eslint-plugin-import":"2.19.1","travis-github-status":"1.6.3","eslint-config-prettier":"6.10.0","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-prettier":"3.1.2","cz-conventional-changelog":"3.1.0","eslint-plugin-react-hooks":"^2.3.0","@babel/helper-module-imports":"7.7.4","@babel/plugin-transform-runtime":"7.7.6","@babel/plugin-transform-react-jsx":"7.7.7","@babel/plugin-syntax-dynamic-import":"7.7.4","babel-plugin-transform-remove-console":"^6.9.4","@babel/plugin-proposal-class-properties":"7.7.4","@babel/plugin-proposal-optional-chaining":"7.7.5"},"peerDependencies":{"webpack":"^4.40.2"},"_npmOperationalInternal":{"tmp":"tmp/webpack-external-import_2.2.0-beta.0_1581300455951_0.0106395724610433","host":"s3://npm-registry-packages"},"_id":"webpack-external-import@2.2.0-beta.0","version":"2.2.0-beta.0"}