Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: avoid reloading all csses when hot load #1090

Merged
merged 3 commits into from
Apr 16, 2024
+1,786 −18
Merged

fix: avoid reloading all csses when hot load #1090

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9bfc65e
fix: avoid reload all css when hot load
yiminghe Mar 20, 2024
ace213e
fix: types
alexander-akait Apr 16, 2024
fc80832
Merge branch 'master' into optimize-locals
alexander-akait Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 24 additions & 14 deletions src/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,22 +44,31 @@
* @returns {string}
*/
function hotLoader(content, context) {
const accept = context.locals
? ""
: "module.hot.accept(undefined, cssReload);";
Copy link
Member

@alexander-akait alexander-akait Mar 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why you change it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

self accept is enough, it will update when dispose: https://webpack.js.org/api/hot-module-replacement/


const localsJsonString = JSON.stringify(JSON.stringify(context.locals));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why double JSON.stringify? Just typo?

Copy link
Contributor Author

@yiminghe yiminghe Mar 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note the interpolation:

`const localsJsonString = ${localsJsonString};`

string comparation is faster

return `${content}
if(module.hot) {
// ${Date.now()}
var cssReload = require(${stringifyRequest(
context.loaderContext,
path.join(__dirname, "hmr/hotModuleReplacement.js")
)})(module.id, ${JSON.stringify({
...context.options,
locals: !!context.locals,
})});
module.hot.dispose(cssReload);
${accept}
(function() {
var localsJsonString = ${localsJsonString};
// ${Date.now()}
var cssReload = require(${stringifyRequest(
context.loaderContext,
path.join(__dirname, "hmr/hotModuleReplacement.js")
)})(module.id, ${JSON.stringify(context.options)});
// only invalidate when locals change
if (
module.hot.data &&
module.hot.data.value &&
module.hot.data.value !== localsJsonString
) {
module.hot.invalidate();
} else {
module.hot.accept();
}
module.hot.dispose(function(data) {
data.value = localsJsonString;
cssReload();
});
})();
}
`;
}
Expand Down Expand Up @@ -554,3 +563,4 @@

module.exports = loader;
module.exports.pitch = pitch;
module.exports.hotLoaderForTest = hotLoader;

Check warning on line 566 in src/loader.js

View check run for this annotation

Codecov / codecov/patch

src/loader.js#L566 

Added line #L566 was not covered by tests
26 changes: 26 additions & 0 deletions test/HMR.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
/* eslint-disable no-console */

import hotModuleReplacement from "../src/hmr/hotModuleReplacement";
import { hotLoaderForTest as hotLoader } from "../src/loader";

function getLoadEvent() {
const event = document.createEvent("Event");
Expand Down Expand Up @@ -361,4 +362,29 @@ describe("HMR", () => {
done();
}, 100);
});

it("hotLoader works for non-locals", () => {
const o = Date.now;
Date.now = () => 1;
const code = hotLoader("//content;", {
loaderContext: {
context: __dirname,
},
});
Date.now = o;
expect(code).toMatchSnapshot();
});

it("hotLoader works for locals", () => {
const o = Date.now;
Date.now = () => 1;
const code = hotLoader("//content;", {
loaderContext: {
context: __dirname,
},
locals: { foo: "bar" },
});
Date.now = o;
expect(code).toMatchSnapshot();
});
});
52 changes: 52 additions & 0 deletions test/__snapshots__/HMR.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,57 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`HMR hotLoader works for locals 1`] = `
"//content;
if(module.hot) {
(function() {
var localsJsonString = \\"{\\\\\\"foo\\\\\\":\\\\\\"bar\\\\\\"}\\";
// 1
var cssReload = require(\\"../src/hmr/hotModuleReplacement.js\\")(module.id, undefined);
// only invalidate when locals change
if (
module.hot.data &&
module.hot.data.value &&
module.hot.data.value !== localsJsonString
) {
module.hot.invalidate();
} else {
module.hot.accept();
}
module.hot.dispose(function(data) {
data.value = localsJsonString;
cssReload();
});
})();
}
"
`;

exports[`HMR hotLoader works for non-locals 1`] = `
"//content;
if(module.hot) {
(function() {
var localsJsonString = undefined;
// 1
var cssReload = require(\\"../src/hmr/hotModuleReplacement.js\\")(module.id, undefined);
// only invalidate when locals change
if (
module.hot.data &&
module.hot.data.value &&
module.hot.data.value !== localsJsonString
) {
module.hot.invalidate();
} else {
module.hot.accept();
}
module.hot.dispose(function(data) {
data.value = localsJsonString;
cssReload();
});
})();
}
"
`;

exports[`HMR should handle error event 1`] = `"[HMR] css reload %s"`;

exports[`HMR should handle error event 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
Expand Down
7 changes: 7 additions & 0 deletions test/cases/hmr-locals/expected/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*!************************************************************************************************!*\
!*** css ../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./index.css ***!
\************************************************************************************************/
.VoofDB21D_QzDbRdwMiY {
color: red;
}

Loading
Loading