From 0808c82eb98972a98b87f921f1214d332e95e578 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B3=A2=E6=AF=94=E5=B0=8F=E9=87=91=E5=88=9A?= <2890636389@qq.com> Date: Mon, 2 Dec 2024 13:59:53 +0800 Subject: [PATCH] fix: exception caused by duplicate registration of functions with the same name (#19) Co-authored-by: bobihuang --- client/intercept.js | 2 +- .../__snapshots__/web/0.snap.txt | 12 + .../__snapshots__/web/1.snap.txt | 479 ++++++++++++++++++ .../__snapshots__/web/2.snap.txt | 212 ++++++++ .../jsx/with-same-name-component/app.jsx | 16 + .../jsx/with-same-name-component/child-a.jsx | 17 + .../jsx/with-same-name-component/child-b.jsx | 13 + .../jsx/with-same-name-component/index.jsx | 39 ++ .../with-same-name-component/rspack.config.js | 57 +++ .../same-name-component.jsx | 3 + 10 files changed, 849 insertions(+), 1 deletion(-) create mode 100644 test/hotCases/jsx/with-same-name-component/__snapshots__/web/0.snap.txt create mode 100644 test/hotCases/jsx/with-same-name-component/__snapshots__/web/1.snap.txt create mode 100644 test/hotCases/jsx/with-same-name-component/__snapshots__/web/2.snap.txt create mode 100644 test/hotCases/jsx/with-same-name-component/app.jsx create mode 100644 test/hotCases/jsx/with-same-name-component/child-a.jsx create mode 100644 test/hotCases/jsx/with-same-name-component/child-b.jsx create mode 100644 test/hotCases/jsx/with-same-name-component/index.jsx create mode 100644 test/hotCases/jsx/with-same-name-component/rspack.config.js create mode 100644 test/hotCases/jsx/with-same-name-component/same-name-component.jsx diff --git a/client/intercept.js b/client/intercept.js index 7e1a6bc..47593a2 100644 --- a/client/intercept.js +++ b/client/intercept.js @@ -34,7 +34,7 @@ __webpack_require__.i.push(function (options) { self.__PREFRESH__.register(type, currentModuleId + ' ' + id); }; }; - reg(); + reg(moduleObject.id); try { originalFactory.call(this, moduleObject, moduleExports, webpackRequire); } finally { diff --git a/test/hotCases/jsx/with-same-name-component/__snapshots__/web/0.snap.txt b/test/hotCases/jsx/with-same-name-component/__snapshots__/web/0.snap.txt new file mode 100644 index 0000000..298def5 --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/__snapshots__/web/0.snap.txt @@ -0,0 +1,12 @@ +# Case with-same-name-component: Step 0 + +## Changed Files + + +## Asset Files +- Bundle: bundle.js + +## Manifest + + +## Update \ No newline at end of file diff --git a/test/hotCases/jsx/with-same-name-component/__snapshots__/web/1.snap.txt b/test/hotCases/jsx/with-same-name-component/__snapshots__/web/1.snap.txt new file mode 100644 index 0000000..6c82194 --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/__snapshots__/web/1.snap.txt @@ -0,0 +1,479 @@ +# Case with-same-name-component: Step 1 + +## Changed Files +- app.jsx +- child-a.jsx +- child-b.jsx +- same-name-component.jsx + +## Asset Files +- Bundle: bundle.js +- Manifest: main.LAST_HASH.hot-update.json, size: 28 +- Update: main.LAST_HASH.hot-update.js, size: 15936 + +## Manifest + +### main.LAST_HASH.hot-update.json + +```json +{"c":["main"],"r":[],"m":[]} +``` + + +## Update + + +### main.LAST_HASH.hot-update.js + +#### Changed Modules +- ./app.jsx +- ./child-a.jsx +- ./child-b.jsx +- ./same-name-component.jsx + +#### Changed Runtime Modules +- webpack/runtime/get_full_hash + +#### Changed Content +```js +"use strict"; +self["webpackHotUpdate"]('main', { +"./app.jsx": (function (module, __webpack_exports__, __webpack_require__) { +__webpack_require__.r(__webpack_exports__); +__webpack_require__.d(__webpack_exports__, { + App: function() { return App; } +}); +/* ESM import */var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "../../../../node_modules/.pnpm/preact@10.24.3/node_modules/preact/compat/jsx-dev-runtime.js"); +/* ESM import */var _child_a__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./child-a */ "./child-a.jsx"); +/* ESM import */var _child_b__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./child-b */ "./child-b.jsx"); +/* module decorator */ module = __webpack_require__.hmd(module); +/* provided dependency */ var __prefresh_utils__ = __webpack_require__(/*! ../../../../client/prefresh.js */ "../../../../client/prefresh.js")["default"]; + + + +function App() { + return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("div", { + children: [ + /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(_child_a__WEBPACK_IMPORTED_MODULE_1__.ChildA, {}, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/app.jsx", + lineNumber: 7, + columnNumber: 7 + }, this), + /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(_child_b__WEBPACK_IMPORTED_MODULE_2__.ChildB, {}, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/app.jsx", + lineNumber: 8, + columnNumber: 7 + }, this) + ] + }, void 0, true, { + fileName: "/test/hotCases/jsx/with-same-name-component/app.jsx", + lineNumber: 6, + columnNumber: 5 + }, this); +} +_c = App; +var _c; +$RefreshReg$(_c, "App"); + +/** + * The following code is modified based on + * //https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/packages/webpack/src/loader/runtime.js + * + * MIT Licensed + * Author JoviDeCroock + * Copyright (c) 2021-Present Preact Team + * https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/LICENSE + */ + +const isPrefreshComponent = __prefresh_utils__.shouldBind(module); + +// `@vanilla-extract/webpack` does some custom preprocessing where +// `module.hot` is partially replaced. This leads to our injected +// code being executed although it shouldn't be: +// +// Intermediate result: +// +// if (true) { // <- inlined by intermediate compile step +// const previousHotModuleExports = module.hot.data && ... +// // Crash happens here ---^ +// +// It crashes at that line because some intermediate compiler isn't +// running in hot mode, but the overall guard condition was compiled +// down to being truthy. By moving `module.hot` outside of the +// condition of the if-statement, it will be left as is. +const moduleHot = module.hot; + +if (moduleHot) { + const currentExports = __prefresh_utils__.getExports(module); + const previousHotModuleExports = + moduleHot.data && moduleHot.data.moduleExports; + + __prefresh_utils__.registerExports(currentExports, module.id); + + if (isPrefreshComponent) { + if (previousHotModuleExports) { + try { + __prefresh_utils__.flush(); + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.clearRuntimeErrors + ) { + __prefresh_errors__.clearRuntimeErrors(); + } + } catch (e) { + // Only available in newer webpack versions. + if (moduleHot.invalidate) { + moduleHot.invalidate(); + } else { + self.location.reload(); + } + } + } + + moduleHot.dispose(data => { + data.moduleExports = __prefresh_utils__.getExports(module); + }); + + moduleHot.accept(function errorRecovery() { + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.handleRuntimeError + ) { + __prefresh_errors__.handleRuntimeError(error); + } + + __webpack_require__.c[module.id].hot.accept(errorRecovery); + }); + } +} + +}), +"./child-a.jsx": (function (module, __webpack_exports__, __webpack_require__) { +__webpack_require__.r(__webpack_exports__); +__webpack_require__.d(__webpack_exports__, { + ChildA: function() { return ChildA; } +}); +/* ESM import */var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "../../../../node_modules/.pnpm/preact@10.24.3/node_modules/preact/compat/jsx-dev-runtime.js"); +/* module decorator */ module = __webpack_require__.hmd(module); +/* provided dependency */ var __prefresh_utils__ = __webpack_require__(/*! ../../../../client/prefresh.js */ "../../../../client/prefresh.js")["default"]; + +function SameNameComponent() { + return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("span", { + children: "same name component in component-a" + }, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/child-a.jsx", + lineNumber: 2, + columnNumber: 10 + }, this); +} +_c = SameNameComponent; +function ChildA() { + return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("span", { + className: "component-a", + children: /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(SameNameComponent, {}, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/child-a.jsx", + lineNumber: 6, + columnNumber: 41 + }, this) + }, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/child-a.jsx", + lineNumber: 6, + columnNumber: 11 + }, this); +} +_c1 = ChildA; +var _c, _c1; +$RefreshReg$(_c, "SameNameComponent"); +$RefreshReg$(_c1, "ChildA"); + +/** + * The following code is modified based on + * //https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/packages/webpack/src/loader/runtime.js + * + * MIT Licensed + * Author JoviDeCroock + * Copyright (c) 2021-Present Preact Team + * https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/LICENSE + */ + +const isPrefreshComponent = __prefresh_utils__.shouldBind(module); + +// `@vanilla-extract/webpack` does some custom preprocessing where +// `module.hot` is partially replaced. This leads to our injected +// code being executed although it shouldn't be: +// +// Intermediate result: +// +// if (true) { // <- inlined by intermediate compile step +// const previousHotModuleExports = module.hot.data && ... +// // Crash happens here ---^ +// +// It crashes at that line because some intermediate compiler isn't +// running in hot mode, but the overall guard condition was compiled +// down to being truthy. By moving `module.hot` outside of the +// condition of the if-statement, it will be left as is. +const moduleHot = module.hot; + +if (moduleHot) { + const currentExports = __prefresh_utils__.getExports(module); + const previousHotModuleExports = + moduleHot.data && moduleHot.data.moduleExports; + + __prefresh_utils__.registerExports(currentExports, module.id); + + if (isPrefreshComponent) { + if (previousHotModuleExports) { + try { + __prefresh_utils__.flush(); + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.clearRuntimeErrors + ) { + __prefresh_errors__.clearRuntimeErrors(); + } + } catch (e) { + // Only available in newer webpack versions. + if (moduleHot.invalidate) { + moduleHot.invalidate(); + } else { + self.location.reload(); + } + } + } + + moduleHot.dispose(data => { + data.moduleExports = __prefresh_utils__.getExports(module); + }); + + moduleHot.accept(function errorRecovery() { + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.handleRuntimeError + ) { + __prefresh_errors__.handleRuntimeError(error); + } + + __webpack_require__.c[module.id].hot.accept(errorRecovery); + }); + } +} + +}), +"./child-b.jsx": (function (module, __webpack_exports__, __webpack_require__) { +__webpack_require__.r(__webpack_exports__); +__webpack_require__.d(__webpack_exports__, { + ChildB: function() { return ChildB; } +}); +/* ESM import */var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "../../../../node_modules/.pnpm/preact@10.24.3/node_modules/preact/compat/jsx-dev-runtime.js"); +/* ESM import */var _same_name_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./same-name-component */ "./same-name-component.jsx"); +/* module decorator */ module = __webpack_require__.hmd(module); +/* provided dependency */ var __prefresh_utils__ = __webpack_require__(/*! ../../../../client/prefresh.js */ "../../../../client/prefresh.js")["default"]; + + +function ChildB() { + return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("span", { + className: "component-b", + children: /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(_same_name_component__WEBPACK_IMPORTED_MODULE_1__.SameNameComponent, {}, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/child-b.jsx", + lineNumber: 4, + columnNumber: 41 + }, this) + }, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/child-b.jsx", + lineNumber: 4, + columnNumber: 11 + }, this); +} +_c = ChildB; +var _c; +$RefreshReg$(_c, "ChildB"); + +/** + * The following code is modified based on + * //https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/packages/webpack/src/loader/runtime.js + * + * MIT Licensed + * Author JoviDeCroock + * Copyright (c) 2021-Present Preact Team + * https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/LICENSE + */ + +const isPrefreshComponent = __prefresh_utils__.shouldBind(module); + +// `@vanilla-extract/webpack` does some custom preprocessing where +// `module.hot` is partially replaced. This leads to our injected +// code being executed although it shouldn't be: +// +// Intermediate result: +// +// if (true) { // <- inlined by intermediate compile step +// const previousHotModuleExports = module.hot.data && ... +// // Crash happens here ---^ +// +// It crashes at that line because some intermediate compiler isn't +// running in hot mode, but the overall guard condition was compiled +// down to being truthy. By moving `module.hot` outside of the +// condition of the if-statement, it will be left as is. +const moduleHot = module.hot; + +if (moduleHot) { + const currentExports = __prefresh_utils__.getExports(module); + const previousHotModuleExports = + moduleHot.data && moduleHot.data.moduleExports; + + __prefresh_utils__.registerExports(currentExports, module.id); + + if (isPrefreshComponent) { + if (previousHotModuleExports) { + try { + __prefresh_utils__.flush(); + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.clearRuntimeErrors + ) { + __prefresh_errors__.clearRuntimeErrors(); + } + } catch (e) { + // Only available in newer webpack versions. + if (moduleHot.invalidate) { + moduleHot.invalidate(); + } else { + self.location.reload(); + } + } + } + + moduleHot.dispose(data => { + data.moduleExports = __prefresh_utils__.getExports(module); + }); + + moduleHot.accept(function errorRecovery() { + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.handleRuntimeError + ) { + __prefresh_errors__.handleRuntimeError(error); + } + + __webpack_require__.c[module.id].hot.accept(errorRecovery); + }); + } +} + +}), +"./same-name-component.jsx": (function (module, __webpack_exports__, __webpack_require__) { +__webpack_require__.r(__webpack_exports__); +__webpack_require__.d(__webpack_exports__, { + SameNameComponent: function() { return SameNameComponent; } +}); +/* ESM import */var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "../../../../node_modules/.pnpm/preact@10.24.3/node_modules/preact/compat/jsx-dev-runtime.js"); +/* module decorator */ module = __webpack_require__.hmd(module); +/* provided dependency */ var __prefresh_utils__ = __webpack_require__(/*! ../../../../client/prefresh.js */ "../../../../client/prefresh.js")["default"]; + +function SameNameComponent() { + return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("span", { + children: "same name component in component-b" + }, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/same-name-component.jsx", + lineNumber: 2, + columnNumber: 10 + }, this); +} +_c = SameNameComponent; +var _c; +$RefreshReg$(_c, "SameNameComponent"); + +/** + * The following code is modified based on + * //https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/packages/webpack/src/loader/runtime.js + * + * MIT Licensed + * Author JoviDeCroock + * Copyright (c) 2021-Present Preact Team + * https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/LICENSE + */ + +const isPrefreshComponent = __prefresh_utils__.shouldBind(module); + +// `@vanilla-extract/webpack` does some custom preprocessing where +// `module.hot` is partially replaced. This leads to our injected +// code being executed although it shouldn't be: +// +// Intermediate result: +// +// if (true) { // <- inlined by intermediate compile step +// const previousHotModuleExports = module.hot.data && ... +// // Crash happens here ---^ +// +// It crashes at that line because some intermediate compiler isn't +// running in hot mode, but the overall guard condition was compiled +// down to being truthy. By moving `module.hot` outside of the +// condition of the if-statement, it will be left as is. +const moduleHot = module.hot; + +if (moduleHot) { + const currentExports = __prefresh_utils__.getExports(module); + const previousHotModuleExports = + moduleHot.data && moduleHot.data.moduleExports; + + __prefresh_utils__.registerExports(currentExports, module.id); + + if (isPrefreshComponent) { + if (previousHotModuleExports) { + try { + __prefresh_utils__.flush(); + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.clearRuntimeErrors + ) { + __prefresh_errors__.clearRuntimeErrors(); + } + } catch (e) { + // Only available in newer webpack versions. + if (moduleHot.invalidate) { + moduleHot.invalidate(); + } else { + self.location.reload(); + } + } + } + + moduleHot.dispose(data => { + data.moduleExports = __prefresh_utils__.getExports(module); + }); + + moduleHot.accept(function errorRecovery() { + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.handleRuntimeError + ) { + __prefresh_errors__.handleRuntimeError(error); + } + + __webpack_require__.c[module.id].hot.accept(errorRecovery); + }); + } +} + +}), + +},function(__webpack_require__) { +// webpack/runtime/get_full_hash +(() => { +__webpack_require__.h = function () { + return "CURRENT_HASH"; +}; + +})(); + +} +); +``` \ No newline at end of file diff --git a/test/hotCases/jsx/with-same-name-component/__snapshots__/web/2.snap.txt b/test/hotCases/jsx/with-same-name-component/__snapshots__/web/2.snap.txt new file mode 100644 index 0000000..97244d8 --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/__snapshots__/web/2.snap.txt @@ -0,0 +1,212 @@ +# Case with-same-name-component: Step 2 + +## Changed Files +- child-a.jsx +- child-b.jsx + +## Asset Files +- Bundle: bundle.js +- Manifest: main.LAST_HASH.hot-update.json, size: 28 +- Update: main.LAST_HASH.hot-update.js, size: 4380 + +## Manifest + +### main.LAST_HASH.hot-update.json + +```json +{"c":["main"],"r":[],"m":[]} +``` + + +## Update + + +### main.LAST_HASH.hot-update.js + +#### Changed Modules +- ./child-a.jsx + +#### Changed Runtime Modules +- webpack/runtime/get_full_hash + +#### Changed Content +```js +"use strict"; +self["webpackHotUpdate"]('main', { +"./child-a.jsx": (function (module, __webpack_exports__, __webpack_require__) { +__webpack_require__.r(__webpack_exports__); +__webpack_require__.d(__webpack_exports__, { + ChildA: function() { return ChildA; } +}); +/* ESM import */var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-dev-runtime */ "../../../../node_modules/.pnpm/preact@10.24.3/node_modules/preact/compat/jsx-dev-runtime.js"); +/* module decorator */ module = __webpack_require__.hmd(module); +/* provided dependency */ var __prefresh_utils__ = __webpack_require__(/*! ../../../../client/prefresh.js */ "../../../../client/prefresh.js")["default"]; + +function SameNameComponent() { + return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("span", { + children: "same name component in component-a" + }, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/child-a.jsx", + lineNumber: 2, + columnNumber: 10 + }, this); +} +_c = SameNameComponent; +function ChildA() { + return /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)("span", { + className: "component-a", + children: [ + 'change ', + /*#__PURE__*/ (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(SameNameComponent, {}, void 0, false, { + fileName: "/test/hotCases/jsx/with-same-name-component/child-a.jsx", + lineNumber: 6, + columnNumber: 52 + }, this) + ] + }, void 0, true, { + fileName: "/test/hotCases/jsx/with-same-name-component/child-a.jsx", + lineNumber: 6, + columnNumber: 11 + }, this); +} +_c1 = ChildA; +var _c, _c1; +$RefreshReg$(_c, "SameNameComponent"); +$RefreshReg$(_c1, "ChildA"); + +/** + * The following code is modified based on + * //https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/packages/webpack/src/loader/runtime.js + * + * MIT Licensed + * Author JoviDeCroock + * Copyright (c) 2021-Present Preact Team + * https://github.com/preactjs/prefresh/blob/018f5cc907629b82ffb201c32e948efe4b40098a/LICENSE + */ + +const isPrefreshComponent = __prefresh_utils__.shouldBind(module); + +// `@vanilla-extract/webpack` does some custom preprocessing where +// `module.hot` is partially replaced. This leads to our injected +// code being executed although it shouldn't be: +// +// Intermediate result: +// +// if (true) { // <- inlined by intermediate compile step +// const previousHotModuleExports = module.hot.data && ... +// // Crash happens here ---^ +// +// It crashes at that line because some intermediate compiler isn't +// running in hot mode, but the overall guard condition was compiled +// down to being truthy. By moving `module.hot` outside of the +// condition of the if-statement, it will be left as is. +const moduleHot = module.hot; + +if (moduleHot) { + const currentExports = __prefresh_utils__.getExports(module); + const previousHotModuleExports = + moduleHot.data && moduleHot.data.moduleExports; + + __prefresh_utils__.registerExports(currentExports, module.id); + + if (isPrefreshComponent) { + if (previousHotModuleExports) { + try { + __prefresh_utils__.flush(); + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.clearRuntimeErrors + ) { + __prefresh_errors__.clearRuntimeErrors(); + } + } catch (e) { + // Only available in newer webpack versions. + if (moduleHot.invalidate) { + moduleHot.invalidate(); + } else { + self.location.reload(); + } + } + } + + moduleHot.dispose(data => { + data.moduleExports = __prefresh_utils__.getExports(module); + }); + + moduleHot.accept(function errorRecovery() { + if ( + typeof __prefresh_errors__ !== 'undefined' && + __prefresh_errors__ && + __prefresh_errors__.handleRuntimeError + ) { + __prefresh_errors__.handleRuntimeError(error); + } + + __webpack_require__.c[module.id].hot.accept(errorRecovery); + }); + } +} + +}), + +},function(__webpack_require__) { +// webpack/runtime/get_full_hash +(() => { +__webpack_require__.h = function () { + return "CURRENT_HASH"; +}; + +})(); + +} +); +``` + + + + +## Runtime +### Status + +```txt +check => prepare => dispose => apply => idle +``` + + + +### JavaScript + +#### Outdated + +Outdated Modules: +- ./app.jsx +- ./child-a.jsx +- ./child-b.jsx +- ./same-name-component.jsx + + +Outdated Dependencies: +```json +{} +``` + +#### Updated + +Updated Modules: +- ./app.jsx +- ./child-a.jsx +- ./child-b.jsx +- ./same-name-component.jsx + +Updated Runtime: +- `__webpack_require__.h` + + +#### Callback + +Accepted Callback: + + +Disposed Callback: +- ./app.jsx \ No newline at end of file diff --git a/test/hotCases/jsx/with-same-name-component/app.jsx b/test/hotCases/jsx/with-same-name-component/app.jsx new file mode 100644 index 0000000..c2ff3c1 --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/app.jsx @@ -0,0 +1,16 @@ +export function App() { + return (
no child
); +} + +--- +import { ChildA } from './child-a' +import { ChildB } from './child-b' + +export function App() { + return ( +
+ + +
+ ); +} diff --git a/test/hotCases/jsx/with-same-name-component/child-a.jsx b/test/hotCases/jsx/with-same-name-component/child-a.jsx new file mode 100644 index 0000000..91ae5e3 --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/child-a.jsx @@ -0,0 +1,17 @@ +throw new Error("should not been imported"); +--- +function SameNameComponent() { + return same name component in component-a; +} + +export function ChildA() { + return (); +} +--- +function SameNameComponent() { + return same name component in component-a; +} + +export function ChildA() { + return ({'change '}); +} diff --git a/test/hotCases/jsx/with-same-name-component/child-b.jsx b/test/hotCases/jsx/with-same-name-component/child-b.jsx new file mode 100644 index 0000000..c69a00a --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/child-b.jsx @@ -0,0 +1,13 @@ +throw new Error("should not been imported"); +--- +import { SameNameComponent } from './same-name-component'; + +export function ChildB() { + return (); +} +--- +import { SameNameComponent } from './same-name-component'; + +export function ChildB() { + return (); +} diff --git a/test/hotCases/jsx/with-same-name-component/index.jsx b/test/hotCases/jsx/with-same-name-component/index.jsx new file mode 100644 index 0000000..21daab5 --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/index.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import update from '../../update'; +import { App } from './app'; + +const container = document.createElement('div'); +container.id = 'root'; +document.body.appendChild(container); +const root = ReactDOM.createRoot(container); +root.render( +
+ +
, +); + +it('should rerender when children change', (done) => { + expect(container.querySelector('span').textContent).toBe('no child'); + NEXT( + update(done, true, () => { + expect(container.querySelector('.component-a').textContent).toBe('same name component in component-a'); + expect(container.querySelector('.component-b').textContent).toBe('same name component in component-b'); + NEXT( + update(done, true, () => { + expect(container.querySelector('.component-a').textContent).toBe( + 'change same name component in component-a', + ); + expect(container.querySelector('.component-b').textContent).toBe( + 'same name component in component-b', + ); + done(); + }), + ); + }), + ); +}); + +if (module.hot) { + module.hot.accept('./app'); +} diff --git a/test/hotCases/jsx/with-same-name-component/rspack.config.js b/test/hotCases/jsx/with-same-name-component/rspack.config.js new file mode 100644 index 0000000..d3253ad --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/rspack.config.js @@ -0,0 +1,57 @@ +const ReactRefreshRspackPlugin = require('../../../..'); + +/** @type {import('@rspack/core').Configuration} */ +module.exports = { + context: __dirname, + entry: './index.jsx', + resolve: { + extensions: ['...', '.ts', '.tsx', '.jsx'], + alias: { + react: 'preact/compat', + 'react-dom/test-utils': 'preact/test-utils', + 'react-dom': 'preact/compat', // Must be below test-utils + 'react/jsx-runtime': 'preact/jsx-runtime', + }, + }, + module: { + rules: [ + { + test: /\.jsx?$/, + exclude: [/node_modules/], + use: { + loader: 'builtin:swc-loader', + options: { + jsc: { + experimental: { + plugins: [ + [ + '@swc/plugin-prefresh', // enable prefresh specific transformation + {}, + ], + ], + }, + parser: { + syntax: 'ecmascript', + jsx: true, + }, + externalHelpers: true, + preserveAllComments: false, + transform: { + react: { + runtime: 'automatic', + pragma: 'h', + pragmaFrag: 'Fragment', + throwIfNamespace: true, + useBuiltins: false, + refresh: true, // enable react hooks hmr compatiblity + }, + }, + }, + }, + }, + type: 'javascript/auto', + }, + ], + }, + plugins: [new ReactRefreshRspackPlugin()], +}; diff --git a/test/hotCases/jsx/with-same-name-component/same-name-component.jsx b/test/hotCases/jsx/with-same-name-component/same-name-component.jsx new file mode 100644 index 0000000..8cbb1a7 --- /dev/null +++ b/test/hotCases/jsx/with-same-name-component/same-name-component.jsx @@ -0,0 +1,3 @@ +export function SameNameComponent() { + return same name component in component-b; +}