fix: avoid reloading all csses when hot load #1090

yiminghe · 2024-03-20T09:52:18Z

This PR contains a:

Motivation / Use-Case

only refresh page when locals change, otherwise accept and hot load
avoid reloading all csses

Breaking Changes

Additional Info

Fixes #692

linux-foundation-easycla · 2024-03-20T09:52:22Z

The committers listed above are authorized under a signed CLA.

✅ login: yiminghe / name: yiminghe (9bfc65e)
✅ login: alexander-akait / name: Alexander Akait (ace213e, fc80832)

alexander-akait · 2024-03-20T09:56:25Z

src/loader.js

    ? ""
-    : "module.hot.accept(undefined, cssReload);";


Why you change it?

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

alexander-akait

We need a test case, please add

yiminghe · 2024-03-21T04:39:48Z

We need a test case, please add

test cases updated

alexander-akait · 2024-03-27T13:47:07Z

src/loader.js

      // ${Date.now()}
-      var cssReload = require(${stringifyRequest(
+      const cssReload = require(${stringifyRequest(


Don't use const, it will be in the browser and break old browsers

alexander-akait · 2024-03-27T13:48:35Z

src/loader.js

-    ? ""
-    : "module.hot.accept(undefined, cssReload);";
-
+  const localsJsonString = JSON.stringify(JSON.stringify(context.locals));


Why double JSON.stringify? Just typo?

note the interpolation:

`const localsJsonString = ${localsJsonString};`

string comparation is faster

codecov · 2024-03-27T13:48:37Z

Codecov Report

Attention: Patch coverage is 50.00000% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 92.00%. Comparing base (c7ff30d) to head (9bfc65e).
Report is 7 commits behind head on master.

❗ Current head 9bfc65e differs from pull request most recent head fc80832. Consider uploading reports for the commit fc80832 to get more accurate results

Files	Patch %	Lines
src/loader.js	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1090      +/-   ##
==========================================
+ Coverage   90.61%   92.00%   +1.38%     
==========================================
  Files           5        5              
  Lines         895      900       +5     
  Branches      255      258       +3     
==========================================
+ Hits          811      828      +17     
+ Misses         74       67       -7     
+ Partials       10        5       -5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

alexander-akait · 2024-03-27T13:49:27Z

test/cases/hmr/expected/main.js

+      module.hot.dispose(function(data) {
+        data.value = localsJsonString;
+        cssReload();
+      });


We have a special test directory for HMR, will be great to add a test case there, I know your code works fine, but we should ensure about it

what do you mean? I have added cases inside cases folder (hmr, hmr-locals)

Sorry for delay, just put a test case here https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/test/HMR.test.js

Sorry for delay, just put a test case here https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/test/HMR.test.js

done

alexander-akait

Let's do small improvements and I am fine with it

alexander-akait · 2024-03-27T13:50:17Z

For fixing tests for OLD API just use OLD_API=1 npm run test:only

alexander-akait · 2024-03-27T13:50:25Z

Thank you for your PR

yiminghe · 2024-03-28T03:34:22Z

For fixing tests for OLD API just use OLD_API=1 npm run test:only

passed

alexander-akait · 2024-04-08T18:15:31Z

@yiminghe We have:

var cssReload = require("/home/runner/work/mini-css-extract-plugin/mini-css-extract-plugin/src/hmr/hotModuleReplacement.js")(module.id, undefined);

As you can see it is an absolute path, let's use it from here https://github.com/webpack-contrib/css-loader/blob/master/src/utils.js#L15 (maybe we already have the same util here)

yiminghe · 2024-04-09T03:50:25Z

@yiminghe We have:
var cssReload = require("/home/runner/work/mini-css-extract-plugin/mini-css-extract-plugin/src/hmr/hotModuleReplacement.js")(module.id, undefined);
As you can see it is an absolute path, let's use it from here https://github.com/webpack-contrib/css-loader/blob/master/src/utils.js#L15 (maybe we already have the same util here)

updated

yiminghe force-pushed the optimize-locals branch from cfd1040 to d8230d3 Compare March 20, 2024 09:53

alexander-akait reviewed Mar 20, 2024

View reviewed changes

yiminghe changed the title ~~fix: avoid reload all css when hot load~~ fix: avoid reloading all csses when hot load Mar 20, 2024

yiminghe force-pushed the optimize-locals branch 4 times, most recently from ea2c589 to bff1a98 Compare March 21, 2024 04:39

yiminghe force-pushed the optimize-locals branch from bff1a98 to 3695ac6 Compare March 21, 2024 04:41

alexander-akait reviewed Mar 27, 2024

View reviewed changes

alexander-akait requested changes Mar 27, 2024

View reviewed changes

yiminghe force-pushed the optimize-locals branch from 3695ac6 to e9bf629 Compare March 28, 2024 03:32

yiminghe force-pushed the optimize-locals branch from e9bf629 to 977c990 Compare April 3, 2024 03:47

fix: avoid reload all css when hot load

9bfc65e

yiminghe force-pushed the optimize-locals branch from 977c990 to 9bfc65e Compare April 9, 2024 03:49

alexander-akait previously approved these changes Apr 9, 2024

View reviewed changes

fix: types

ace213e

alexander-akait dismissed their stale review via ace213e April 16, 2024 13:49

Merge branch 'master' into optimize-locals

fc80832

alexander-akait merged commit 1a56673 into webpack-contrib:master Apr 16, 2024
14 of 33 checks passed

yiminghe deleted the optimize-locals branch April 17, 2024 03:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: avoid reloading all csses when hot load #1090

fix: avoid reloading all csses when hot load #1090

yiminghe commented Mar 20, 2024 •

edited by alexander-akait

linux-foundation-easycla bot commented Mar 20, 2024 •

edited

alexander-akait Mar 20, 2024 •

edited

yiminghe Mar 20, 2024

alexander-akait left a comment

yiminghe commented Mar 21, 2024

alexander-akait Mar 27, 2024

alexander-akait Mar 27, 2024

yiminghe Mar 28, 2024 •

edited

codecov bot commented Mar 27, 2024 •

edited

alexander-akait Mar 27, 2024

yiminghe Mar 28, 2024

alexander-akait Apr 2, 2024

yiminghe Apr 3, 2024

alexander-akait left a comment

alexander-akait commented Mar 27, 2024

alexander-akait commented Mar 27, 2024

yiminghe commented Mar 28, 2024

alexander-akait commented Apr 8, 2024 •

edited

yiminghe commented Apr 9, 2024

fix: avoid reloading all csses when hot load #1090

fix: avoid reloading all csses when hot load #1090

Conversation

yiminghe commented Mar 20, 2024 • edited by alexander-akait

Motivation / Use-Case

Breaking Changes

Additional Info

linux-foundation-easycla bot commented Mar 20, 2024 • edited

alexander-akait Mar 20, 2024 • edited

Choose a reason for hiding this comment

yiminghe Mar 20, 2024

Choose a reason for hiding this comment

alexander-akait left a comment

Choose a reason for hiding this comment

yiminghe commented Mar 21, 2024

alexander-akait Mar 27, 2024

Choose a reason for hiding this comment

alexander-akait Mar 27, 2024

Choose a reason for hiding this comment

yiminghe Mar 28, 2024 • edited

Choose a reason for hiding this comment

codecov bot commented Mar 27, 2024 • edited

Codecov Report

alexander-akait Mar 27, 2024

Choose a reason for hiding this comment

yiminghe Mar 28, 2024

Choose a reason for hiding this comment

alexander-akait Apr 2, 2024

Choose a reason for hiding this comment

yiminghe Apr 3, 2024

Choose a reason for hiding this comment

alexander-akait left a comment

Choose a reason for hiding this comment

alexander-akait commented Mar 27, 2024

alexander-akait commented Mar 27, 2024

yiminghe commented Mar 28, 2024

alexander-akait commented Apr 8, 2024 • edited

yiminghe commented Apr 9, 2024

yiminghe commented Mar 20, 2024 •

edited by alexander-akait

linux-foundation-easycla bot commented Mar 20, 2024 •

edited

alexander-akait Mar 20, 2024 •

edited

yiminghe Mar 28, 2024 •

edited

codecov bot commented Mar 27, 2024 •

edited

alexander-akait commented Apr 8, 2024 •

edited