fix: allow multiple runtime instances to receive HMR updates

This commit is contained in:
GuilleX7 2025-05-20 03:27:46 +02:00
parent b4b35413f0
commit 74161a0ef4
6 changed files with 71 additions and 3 deletions

View File

@ -338,11 +338,10 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule {
]),
"}",
"",
`${globalObject}[${JSON.stringify(
hotUpdateGlobal
)}] = ${runtimeTemplate.basicFunction(
`var hmrGlobalJsonpLoader = ${runtimeTemplate.basicFunction(
"chunkId, moreModules, runtime",
[
"if (!currentUpdate) return;",
"for(var moduleId in moreModules) {",
Template.indent([
`if(${RuntimeGlobals.hasOwnProperty}(moreModules, moduleId)) {`,
@ -362,6 +361,18 @@ class JsonpChunkLoadingRuntimeModule extends RuntimeModule {
"}"
]
)};`,
`var oldHmrGlobalJsonpLoader = ${globalObject}[${JSON.stringify(
hotUpdateGlobal
)}] || (${runtimeTemplate.basicFunction("", [])});`,
`${globalObject}[${JSON.stringify(
hotUpdateGlobal
)}] = ${runtimeTemplate.basicFunction(
"chunkId, moreModules, runtime",
[
`oldHmrGlobalJsonpLoader(chunkId, moreModules, runtime);`,
`hmrGlobalJsonpLoader(chunkId, moreModules, runtime);`
]
)};`,
"",
Template.getFunctionContent(
require("../hmr/JavascriptHotModuleReplacement.runtime.js")

View File

@ -0,0 +1,10 @@
import { value } from './value.js';
const div = document.createElement('div');
div.innerHTML = value
document.body.appendChild(div);
module.hot.accept('./value.js', () => {
const newValue = require('./value.js').value;
div.innerHTML = newValue;
})

View File

@ -0,0 +1 @@
export const value = 1;

View File

@ -0,0 +1,17 @@
const path = require("path");
/** @type import('webpack').Configuration */
module.exports = {
mode: "development",
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
devServer: {
port: 8000,
headers: {
"Access-Control-Allow-Origin": "*"
}
}
};

View File

@ -0,0 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<body>
<script src="index.js"></script>
</body>
</html>

View File

@ -0,0 +1,23 @@
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
if (url.endsWith('.mjs')) {
script.type = 'module'
}
script.onerror = (error) => {
document.body.removeChild(script)
reject(error)
}
script.onload = () => {
resolve()
document.body.removeChild(script)
}
document.body.append(script)
})
}
loadScript('http://localhost:8000/bundle.js').then(() => loadScript('http://localhost:8000/bundle.js'))