From d42a85bf77ec62d0fd15b6381a25664d13e625ea Mon Sep 17 00:00:00 2001 From: Zack Jackson Date: Tue, 11 Feb 2020 17:11:01 -0800 Subject: [PATCH] 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 | 101 +++++++++--------- manual/package.json | 3 +- manual/webpack/webpackConfigFactory.js | 5 - manual/website2/package.json | 6 +- manual/website3/package.json | 6 +- manual/website3/webpack.config.js | 1 - manual/website4/.gitignore | 23 +++++ manual/website4/README.md | 68 ++++++++++++ manual/website4/package.json | 34 ++++++ manual/website4/public/favicon.ico | Bin 0 -> 3150 bytes manual/website4/public/index.html | 43 ++++++++ manual/website4/public/logo192.png | Bin 0 -> 5347 bytes manual/website4/public/logo512.png | Bin 0 -> 9664 bytes manual/website4/public/manifest.json | 25 +++++ manual/website4/public/robots.txt | 3 + manual/website4/src/App.css | 38 +++++++ manual/website4/src/App.js | 26 +++++ manual/website4/src/App.test.js | 9 ++ manual/website4/src/index.css | 13 +++ manual/website4/src/index.js | 12 +++ manual/website4/src/logo.svg | 7 ++ manual/website4/src/serviceWorker.js | 137 +++++++++++++++++++++++++ manual/website4/src/setupTests.js | 5 + package.json | 5 +- src/webpack/ExternalModuleFactory.js | 111 ++++++++++++++++++++ src/webpack/index.js | 92 +++++++++-------- 26 files changed, 663 insertions(+), 110 deletions(-) create mode 100644 manual/website4/.gitignore create mode 100644 manual/website4/README.md create mode 100644 manual/website4/package.json create mode 100644 manual/website4/public/favicon.ico create mode 100644 manual/website4/public/index.html create mode 100644 manual/website4/public/logo192.png create mode 100644 manual/website4/public/logo512.png create mode 100644 manual/website4/public/manifest.json create mode 100644 manual/website4/public/robots.txt create mode 100644 manual/website4/src/App.css create mode 100644 manual/website4/src/App.js create mode 100644 manual/website4/src/App.test.js create mode 100644 manual/website4/src/index.css create mode 100644 manual/website4/src/index.js create mode 100644 manual/website4/src/logo.svg create mode 100644 manual/website4/src/serviceWorker.js create mode 100644 manual/website4/src/setupTests.js create mode 100644 src/webpack/ExternalModuleFactory.js diff --git a/README.md b/README.md index a9b576dc..4215f277 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ webpack-external-import

-> 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 (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`
-Default: `(seed, files) => files.reduce((manifest, {name, path}) => ({...manifest, [name]: path}), seed)` +Type: `Object`
+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`
-Default: `(manifest) => JSON.stringify(manifest, null, 2)` +Type: `Object`
+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** diff --git a/manual/package.json b/manual/package.json index ec034f61..fee84b8f 100644 --- a/manual/package.json +++ b/manual/package.json @@ -3,7 +3,8 @@ "workspaces": [ "website1", "website2", - "website3" + "website3", + "website4" ], "name": "external-import-demo", "version": "0.0.0-development", diff --git a/manual/webpack/webpackConfigFactory.js b/manual/webpack/webpackConfigFactory.js index 8483af58..36acc712 100644 --- a/manual/webpack/webpackConfigFactory.js +++ b/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, diff --git a/manual/website2/package.json b/manual/website2/package.json index 4c75d1c9..ea650a5e 100644 --- a/manual/website2/package.json +++ b/manual/website2/package.json @@ -8,9 +8,9 @@ "author": "Zack Jackson (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", diff --git a/manual/website3/package.json b/manual/website3/package.json index b91a1ba5..18ad17f5 100644 --- a/manual/website3/package.json +++ b/manual/website3/package.json @@ -8,9 +8,9 @@ "author": "Zack Jackson (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", diff --git a/manual/website3/webpack.config.js b/manual/website3/webpack.config.js index 4bfbd512..c1e7b559 100755 --- a/manual/website3/webpack.config.js +++ b/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"); diff --git a/manual/website4/.gitignore b/manual/website4/.gitignore new file mode 100644 index 00000000..4d29575d --- /dev/null +++ b/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* diff --git a/manual/website4/README.md b/manual/website4/README.md new file mode 100644 index 00000000..89b278ae --- /dev/null +++ b/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.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `yarn test` + +Launches the test runner in the interactive watch mode.
+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.
+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.
+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 diff --git a/manual/website4/package.json b/manual/website4/package.json new file mode 100644 index 00000000..b82ead1d --- /dev/null +++ b/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" + ] + } +} diff --git a/manual/website4/public/favicon.ico b/manual/website4/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..bcd5dfd67cd0361b78123e95c2dd96031f27f743 GIT binary patch literal 3150 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 MDeX2GIKR{Qf5okjU;qFB literal 0 HcmV?d00001 diff --git a/manual/website4/public/index.html b/manual/website4/public/index.html new file mode 100644 index 00000000..aa069f27 --- /dev/null +++ b/manual/website4/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/manual/website4/public/logo192.png b/manual/website4/public/logo192.png new file mode 100644 index 0000000000000000000000000000000000000000..fc44b0a3796c0e0a64c3d858ca038bd4570465d9 GIT binary patch literal 5347 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 diff --git a/manual/website4/public/manifest.json b/manual/website4/public/manifest.json new file mode 100644 index 00000000..080d6c77 --- /dev/null +++ b/manual/website4/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/manual/website4/public/robots.txt b/manual/website4/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/manual/website4/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/manual/website4/src/App.css b/manual/website4/src/App.css new file mode 100644 index 00000000..74b5e053 --- /dev/null +++ b/manual/website4/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/manual/website4/src/App.js b/manual/website4/src/App.js new file mode 100644 index 00000000..ce9cbd29 --- /dev/null +++ b/manual/website4/src/App.js @@ -0,0 +1,26 @@ +import React from 'react'; +import logo from './logo.svg'; +import './App.css'; + +function App() { + return ( +
+
+ logo +

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+ ); +} + +export default App; diff --git a/manual/website4/src/App.test.js b/manual/website4/src/App.test.js new file mode 100644 index 00000000..4db7ebc2 --- /dev/null +++ b/manual/website4/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/manual/website4/src/index.css b/manual/website4/src/index.css new file mode 100644 index 00000000..ec2585e8 --- /dev/null +++ b/manual/website4/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/manual/website4/src/index.js b/manual/website4/src/index.js new file mode 100644 index 00000000..87d1be55 --- /dev/null +++ b/manual/website4/src/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import * as serviceWorker from './serviceWorker'; + +ReactDOM.render(, document.getElementById('root')); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/manual/website4/src/logo.svg b/manual/website4/src/logo.svg new file mode 100644 index 00000000..6b60c104 --- /dev/null +++ b/manual/website4/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/manual/website4/src/serviceWorker.js b/manual/website4/src/serviceWorker.js new file mode 100644 index 00000000..8703ddb7 --- /dev/null +++ b/manual/website4/src/serviceWorker.js @@ -0,0 +1,137 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl, { + headers: { 'Service-Worker': 'script' } + }) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/manual/website4/src/setupTests.js b/manual/website4/src/setupTests.js new file mode 100644 index 00000000..74b1a275 --- /dev/null +++ b/manual/website4/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; diff --git a/package.json b/package.json index 28136c0c..f7153d25 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,13 @@ "runtime" ], "scripts": { - "compile": "babel src -d .", + "compile": "rm -rf webpack index.js corsImport.js react.js polyfill.js; babel src -d .", "test": "yarn lint", "lint": "eslint --ext .js,.ts,.tsx src --fix", "kill-ports": "lsof -ti:3001 | xargs kill -9; lsof -ti:3002 | xargs kill -9; lsof -ti:3003 | xargs kill -9", "demo:one": "cd manual/website1; yarn manual:dev", "demo:one:prod": "cd manual/website1; yarn && yarn manual:prod", + "demo:one:debug": "cd manual/website1; yarn && yarn manual:debug", "demo:two": "cd manual/website2; yarn manual:dev", "demo:two:prod": "cd manual/website2; yarn && yarn manual:prod", "demo:two:debug": "cd manual/website2; yarn && yarn manual:debug", @@ -46,7 +47,7 @@ "demo": "cd manual; yarn && cd ../; concurrently \"yarn compile\" \"yarn demo:one\" \"yarn demo:two\" \"yarn demo:three\"", "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:fast": "yarn compile && yarn link && yarn demo:one:fast | yarn demo:two:fast", + "demo:fast": "yarn compile && yarn demo:one:fast | yarn demo:two:fast", "prepare": "BABEL_ENV=production yarn compile", "semantic-release": "semantic-release", "commit": "npx git-cz" diff --git a/src/webpack/ExternalModuleFactory.js b/src/webpack/ExternalModuleFactory.js new file mode 100644 index 00000000..b3c619c7 --- /dev/null +++ b/src/webpack/ExternalModuleFactory.js @@ -0,0 +1,111 @@ +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra +*/ + +const ExternalModule = require("webpack/lib/ExternalModule"); + +class ExternalModuleFactoryPlugin { + constructor(type, externals) { + this.type = type; + this.externals = externals; + } + + apply(normalModuleFactory) { + const globalType = this.type; + normalModuleFactory.hooks.factory.tap( + "ExternalModuleFactoryPlugin", + factory => (data, callback) => { + const { context } = data; + const dependency = data.dependencies[0]; + const handleExternal = (value, type, callback) => { + if (typeof type === "function") { + callback = type; + type = undefined; + } + if (value === false) return factory(data, callback); + if (value === true) value = dependency.request; + if (type === undefined && /^[a-z0-9]+ /.test(value)) { + const idx = value.indexOf(" "); + type = value.substr(0, idx); + value = value.substr(idx + 1); + } + const externalModule = new ExternalModule( + value, + type || globalType, + dependency.request + ); + externalModule.id = dependency.userRequest; + callback(null, externalModule); + return true; + }; + + const handleExternals = (externals, callback) => { + if (typeof externals === "string") { + if (externals === dependency.request) { + return handleExternal(dependency.request, callback); + } + } else if (Array.isArray(externals)) { + let i = 0; + const next = () => { + let asyncFlag; + const handleExternalsAndCallback = (err, module) => { + if (err) return callback(err); + if (!module) { + if (asyncFlag) { + asyncFlag = false; + return; + } + return next(); + } + callback(null, module); + }; + + do { + asyncFlag = true; + if (i >= externals.length) return callback(); + handleExternals(externals[i++], handleExternalsAndCallback); + } while (!asyncFlag); + asyncFlag = false; + }; + + next(); + return; + } else if (externals instanceof RegExp) { + if (externals.test(dependency.request)) { + return handleExternal(dependency.request, callback); + } + } else if (typeof externals === "function") { + externals.call( + null, + context, + dependency.request, + (err, value, type) => { + if (err) return callback(err); + if (value !== undefined) { + handleExternal(value, type, callback); + } else { + callback(); + } + } + ); + return; + } else if ( + typeof externals === "object" && + Object.prototype.hasOwnProperty.call(externals, dependency.request) + ) { + return handleExternal(externals[dependency.request], callback); + } + callback(); + }; + + handleExternals(this.externals, (err, module) => { + if (err) return callback(err); + if (!module) return handleExternal(false, callback); + return callback(null, module); + }); + } + ); + } +} +module.exports = ExternalModuleFactoryPlugin; diff --git a/src/webpack/index.js b/src/webpack/index.js index c2bc2cbc..47e0310f 100644 --- a/src/webpack/index.js +++ b/src/webpack/index.js @@ -1,8 +1,9 @@ const path = require("path"); const fse = require("fs-extra"); const createHash = require("webpack/lib/util/createHash"); -// const FunctionModuleTemplatePlugin = require("webpack/lib/FunctionModuleTemplatePlugin"); const fs = require("fs"); +const ExternalModuleFactoryPlugin = require("./ExternalModuleFactory"); +// const FunctionModuleTemplatePlugin = require("webpack/lib/FunctionModuleTemplatePlugin"); const { mergeDeep } = require("./utils"); const { @@ -18,20 +19,15 @@ const { } = require("./chunkSplitting"); const { addLocalVars } = require("./localVars"); const { wrapChunks } = require("./optimizeChunk"); -// use this -// class FunctionModulePlugin { -// apply(compiler) { -// compiler.hooks.compilation.tap("FunctionModulePlugin", compilation => { -// new FunctionModuleTemplatePlugin().apply( -// compilation.moduleTemplates.javascript -// ); -// }); -// } -// } -// will likely remove this emit mapping + const emitCountMap = new Map(); console.clear(); +function getFileType(str) { + const split = str.replace(/\?.*/, "").split("."); + return split.pop(); +} + class URLImportPlugin { constructor(opts) { const debug = @@ -42,7 +38,6 @@ class URLImportPlugin { "URLImportPlugin: You MUST specify a manifestName in your options. Something unique. Like {manifestName: my-special-build}" ); } - this.opts = { publicPath: null, debug: debug || false, @@ -50,38 +45,29 @@ class URLImportPlugin { basePath: "", manifestName: "unknown-project", fileName: "importManifest.js", - transformExtensions: /^(gz|map)$/i, writeToFileEmit: false, seed: null, filter: null, - generate: null, hashDigest: "base64", hashDigestLength: 5, context: null, hashFunction: "md4", - serialize: manifest => - `if(!window.entryManifest) {window.entryManifest = {}}; window.entryManifest["${ - opts.manifestName - }"] = ${JSON.stringify(manifest)}`, ...(opts || {}) }; } - getFileType(str) { - const split = str.replace(/\?.*/, "").split("."); - let ext = split.pop(); - if (this.opts.transformExtensions.test(ext)) { - ext = `${split.pop()}.${ext}`; - } - return ext; - } - apply(compiler) { if (this.opts.debug) { console.group("Webpack Plugin Debugging: webpack-external-import"); console.info("To disable this, set plugin options {debug:false}"); } + const options = compiler?.options; + if (options.externals) { + throw new Error( + "URLImportPlugin: Externals must be applied via the plugin, not via webpack config object. Please see useExternals on the plugin documentation" + ); + } // add to the existing webpack config // adding a new splitChunks cache group called interleave const chunkSplitting = @@ -209,7 +195,7 @@ class URLImportPlugin { chunk.files.reduce((fx, filePath) => { let name = chunk.id ? chunk.id : null; if (name) { - name = `${name}.${this.getFileType(filePath)}`; + name = `${name}.${getFileType(filePath)}`; } else { // For nameless chunks, just map the files directly. name = filePath; @@ -298,20 +284,15 @@ class URLImportPlugin { console.groupEnd(); } - let manifest; - if (this.opts.generate) { - manifest = this.opts.generate(seed, files); - } else { - manifest = files.reduce( - (m, file) => ({ - ...m, - [file.name]: { - path: file.path - } - }), - seed - ); - } + const manifest = files.reduce( + (m, file) => ({ + ...m, + [file.name]: { + path: file.path + } + }), + seed + ); if (this.opts.debug) { console.log("Manifest:", manifest); } @@ -327,8 +308,12 @@ class URLImportPlugin { }, {} ); + const serialize = manifest => + `if(!window.entryManifest) {window.entryManifest = {}}; window.entryManifest["${ + this.opts.manifestName + }"] = ${JSON.stringify(manifest)}`; - const output = this.opts.serialize(cleanedManifest); + const output = serialize(cleanedManifest); if (this.opts.debug) { console.log("Output:", output); } @@ -379,6 +364,16 @@ class URLImportPlugin { compiler.hooks.webpackURLImportPluginAfterEmit = new SyncWaterfallHook([ "manifest" ]); + + compiler.hooks.compile.tap( + "ExternalsPlugin", + ({ normalModuleFactory }) => { + new ExternalModuleFactoryPlugin( + options.output.libraryTarget, + this.opts.useExternals + ).apply(normalModuleFactory); + } + ); compiler.hooks.compilation.tap("URLImportPlugin", compilation => { const { mainTemplate } = compilation; @@ -432,8 +427,15 @@ class URLImportPlugin { const usedIds = new Set(); // creates hashed module IDs based on the contents of the file - works like [contenthash] but for each module compilation.hooks.beforeModuleIds.tap("URLImportPlugin", modules => { + const provideExternals = Object.keys( + this.opts?.provideExternals || {} + ); + // eslint-disable-next-line no-restricted-syntax for (const module of modules) { + if (provideExternals.includes(module.rawRequest)) { + module.id = module.rawRequest; + } if (module.id === null && module.resource) { const hash = createHash(this.opts.hashFunction); @@ -461,7 +463,7 @@ class URLImportPlugin { module.id = hashId.substr(0, len); usedIds.add(module.id); } else if (this.opts.debug) { - console.log("Module with no ID", module); + // console.log("Module with no ID", module); } const externalModule = hasExternalizedModuleViaJson( module.resource