├── .gitignore ├── LICENSE ├── README.md ├── index.js ├── package.json └── renovate.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | /.idea/ 106 | /yarn.lock 107 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Module Federation 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # external-remotes-plugin 2 | 3 | **Host webpack.config** 4 | ```js 5 | const config = { 6 | ...otherConfigs 7 | plugins: [ 8 | new ModuleFederationPlugin({ 9 | name: "app1", 10 | remotes: { 11 | app2: "app2@[window.app2Url]/remoteEntry.js" 12 | } 13 | }). 14 | new ExternalTemplateRemotesPlugin(), 15 | ] 16 | } 17 | ``` 18 | 19 | or 20 | 21 | ```js 22 | plugins: [ 23 | new ModuleFederationPlugin({ 24 | name: 'my-app', 25 | remotes: { 26 | 'my-remote-1': 'my-remote-1@[window.remote-1-domain]/remoteEntry.js?[getRandomString()]', 27 | ... 28 | }, 29 | shared: {...} 30 | }), 31 | new ExternalTemplateRemotesPlugin(), //no parameter, 32 | ] 33 | ``` 34 | 35 | **Host (app1) source somewhere before loading main entry file** 36 | ```js 37 | window.app2Url = "//localhost:3002"; // Whatever the url/logic to determine your remote module is 38 | 39 | import("./bootstrap"); 40 | ``` 41 | 42 | Working example is also available in this PR: https://github.com/module-federation/module-federation-examples/pull/557. 43 | 44 | **Update:** the PR was merged a example can be found under [advanced-api/dynamic-remotes-synchronous-imports](https://github.com/module-federation/module-federation-examples/tree/d5cf265c2d4fd040797cbae806badd8267ad5b8f/advanced-api/dynamic-remotes-synchronous-imports) 45 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * ExternalTemplateRemotesPlugin 3 | * License: MIT (https://mit-license.org/) 4 | */ 5 | 6 | const extractUrlAndGlobal = require('webpack/lib/util/extractUrlAndGlobal'); 7 | const { RawSource } = require('webpack-sources'); 8 | 9 | const PLUGIN_NAME = 'ExternalTemplateRemotesPlugin'; 10 | 11 | class ExternalTemplateRemotesPlugin { 12 | apply(compiler) { 13 | compiler.hooks.make.tap(PLUGIN_NAME, compilation => { 14 | const scriptExternalModules = []; 15 | 16 | compilation.hooks.buildModule.tap(PLUGIN_NAME, module => { 17 | if (module.constructor.name === 'ExternalModule' && module.externalType === 'script') { 18 | scriptExternalModules.push(module); 19 | } 20 | }); 21 | 22 | compilation.hooks.afterCodeGeneration.tap(PLUGIN_NAME, function() { 23 | scriptExternalModules.map(module => { 24 | const urlTemplate = extractUrlAndGlobal(module.request)[0]; 25 | const urlExpression = toExpression(urlTemplate); 26 | const sourceMap = compilation.codeGenerationResults.get(module).sources; 27 | const rawSource = sourceMap.get('javascript'); 28 | sourceMap.set( 29 | 'javascript', 30 | new RawSource(rawSource.source().replace(`"${urlTemplate}"`, urlExpression)) 31 | ); 32 | }); 33 | }); 34 | }); 35 | } 36 | } 37 | 38 | function toExpression(templateUrl) { 39 | const result = []; 40 | const current = []; 41 | let isExpression = false; 42 | let invalid = false; 43 | for (const c of templateUrl) { 44 | if (c === '[') { 45 | if (isExpression) { 46 | invalid = true; 47 | break; 48 | } 49 | isExpression = true; 50 | if (current.length) { 51 | result.push(`"${current.join('')}"`); 52 | current.length = 0; 53 | } 54 | } else if (c === ']') { 55 | if (!isExpression) { 56 | invalid = true; 57 | break; 58 | } 59 | isExpression = false; 60 | if (current.length) { 61 | result.push(`${current.join('')}`); 62 | current.length = 0; 63 | } 64 | current.length = 0; 65 | } else { 66 | current.push(c); 67 | } 68 | } 69 | if (isExpression || invalid) { 70 | throw new Error(`Invalid template URL "${templateUrl}"`); 71 | } 72 | if (current.length) { 73 | result.push(`"${current.join('')}"`); 74 | } 75 | return result.join(' + '); 76 | } 77 | 78 | module.exports = ExternalTemplateRemotesPlugin; 79 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "external-remotes-plugin", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "repository": "git@github.com:module-federation/external-remotes-plugin.git", 6 | "author": "Zack Jackson ", 7 | "license": "MIT", 8 | "dependencies": { 9 | "webpack-sources": "^2.2.0" 10 | }, 11 | "peerDependencies": { 12 | "webpack": "^5" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | --------------------------------------------------------------------------------