Skip to content

Commit

Permalink
refactor(plugin/css-extract): use typescript for css-extract-hmr (#7245)
Browse files Browse the repository at this point in the history 
* refactor: change css extract hmr to ts and esm

* Revert "refactor: change ansiHTML to ts and esm"

This reverts commit e9ba349.

* refactor: wip

* refactor: remove jsdoc

* fix: update snapshot

* fix: remove ts ignore

* fix: update test snapshot

* chore: update snapshot

* chore: update snapshot

* refactor: move normalize-url fn

* fix: remmove normalize url

* revert: revert change after rebase

* fix: remmove normalize url

* chore: update

* chore: update

* chore: update snapshot

---------

Co-authored-by: sunyiteng <[email protected]>
  • Loading branch information
@wxiaoyun @SoonIter
wxiaoyun and SoonIter authored Jul 24, 2024
1 parent f48b59f commit fc0e208
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 306 deletions.
4 changes: 2 additions & 2 deletions ...ages/rspack-test-tools/tests/hotCases/css/recovery-cacheable/__snapshots__/web/2.snap.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
## Asset Files
- Bundle: bundle.js
- Manifest: main.LAST_HASH.hot-update.json, size: 28
- Update: main.LAST_HASH.hot-update.js, size: 830
- Update: main.LAST_HASH.hot-update.js, size: 858

## Manifest

Expand Down Expand Up @@ -37,7 +37,7 @@ __webpack_require__.r(__webpack_exports__);
// extracted by css-extract-rspack-plugin

if(true) {
var cssReload = __webpack_require__(/*! ../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js */ "../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
var cssReload = (__webpack_require__(/*! ../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js */ "../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js")/* .cssReload */.cssReload)(module.id, {"locals":false});
module.hot.dispose(cssReload);
module.hot.accept(undefined, function(__WEBPACK_OUTDATED_DEPENDENCIES__) {
(cssReload)(__WEBPACK_OUTDATED_DEPENDENCIES__); }.bind(this));
Expand Down
132 changes: 37 additions & 95 deletions packages/rspack-test-tools/tests/hotCases/css/recovery/__snapshots__/web/2.snap.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
## Asset Files
- Bundle: bundle.js
- Manifest: main.LAST_HASH.hot-update.json, size: 28
- Update: main.LAST_HASH.hot-update.js, size: 7865
- Update: main.LAST_HASH.hot-update.js, size: 6945

## Manifest

Expand All @@ -24,7 +24,7 @@

#### Changed Modules
- ../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js
- ../../../../../rspack/dist/builtin-plugin/css-extract/hmr/normalize-url.js
- ../../../../../rspack/dist/builtin-plugin/css-extract/hmr/normalizeUrl.js
- ./index.css?8047

#### Changed Runtime Modules
Expand All @@ -34,49 +34,33 @@
```js
"use strict";
self["webpackHotUpdate"]('main', {
"../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js": (function (module, __unused_webpack_exports, __webpack_require__) {
"../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js": (function (__unused_webpack_module, exports, __webpack_require__) {

/* eslint-env browser */
/*
eslint-disable
no-console,
func-names
*/
/** @typedef {any} TODO */
const normalizeUrl = __webpack_require__(/*! ./normalize-url */ "../../../../../rspack/dist/builtin-plugin/css-extract/hmr/normalize-url.js");
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.cssReload = void 0;
const normalizeUrl_1 = __webpack_require__(/*! ./normalizeUrl */ "../../../../../rspack/dist/builtin-plugin/css-extract/hmr/normalizeUrl.js");
const srcByModuleId = Object.create(null);
const noDocument = typeof document === "undefined";
const { forEach } = Array.prototype;
/**
* @param {function} fn
* @param {number} time
* @returns {(function(): void)|*}
*/
function debounce(fn, time) {
let timeout = 0;
return function () {
// @ts-ignore
const self = this;
// eslint-disable-next-line prefer-rest-params
const args = arguments;
const functionCall = function functionCall() {
return fn.apply(self, args);
};
clearTimeout(timeout);
// @ts-ignore
timeout = setTimeout(functionCall, time);
};
}
function noop() { }
/**
* @param {TODO} moduleId
* @returns {TODO}
*/
function getCurrentScriptUrl(moduleId) {
let src = srcByModuleId[moduleId];
if (!src) {
if (document.currentScript) {
({ src } = /** @type {HTMLScriptElement} */ (document.currentScript));
({ src } = document.currentScript);
}
else {
const scripts = document.getElementsByTagName("script");
Expand All @@ -87,10 +71,6 @@ function getCurrentScriptUrl(moduleId) {
}
srcByModuleId[moduleId] = src;
}
/**
* @param {string} fileMap
* @returns {null | string[]}
*/
return function (fileMap) {
if (!src) {
return null;
Expand All @@ -105,23 +85,18 @@ function getCurrentScriptUrl(moduleId) {
}
return fileMap.split(",").map(mapRule => {
const reg = new RegExp(`${filename}/.js$`, "g");
return normalizeUrl(src.replace(reg, `${mapRule.replace(/{fileName}/g, filename)}.css`));
return (0, normalizeUrl_1.normalizeUrl)(src.replace(reg, `${mapRule.replace(/{fileName}/g, filename)}.css`));
});
};
}
/**
* @param {TODO} el
* @param {string} [url]
*/
function updateCss(el, url) {
if (!url) {
if (!el.href) {
return;
}
// eslint-disable-next-line
url = el.href.split("?")[0];
}
if (!isUrlRequest(/** @type {string} */ (url))) {
if (!isUrlRequest(url)) {
return;
}
if (el.isLoaded === false) {
Expand All @@ -132,7 +107,6 @@ function updateCss(el, url) {
if (!url || !(url.indexOf(".css") > -1)) {
return;
}
// eslint-disable-next-line no-param-reassign
el.visited = true;
const newEl = el.cloneNode();
newEl.isLoaded = false;
Expand All @@ -141,48 +115,33 @@ function updateCss(el, url) {
return;
}
newEl.isLoaded = true;
el.parentNode.removeChild(el);
el.parentNode?.removeChild(el);
});
newEl.addEventListener("error", () => {
if (newEl.isLoaded) {
return;
}
newEl.isLoaded = true;
el.parentNode.removeChild(el);
el.parentNode?.removeChild(el);
});
newEl.href = `${url}?${Date.now()}`;
if (el.nextSibling) {
el.parentNode.insertBefore(newEl, el.nextSibling);
el.parentNode?.insertBefore(newEl, el.nextSibling);
}
else {
el.parentNode.appendChild(newEl);
el.parentNode?.appendChild(newEl);
}
}
/**
* @param {string} href
* @param {TODO} src
* @returns {TODO}
*/
function getReloadUrl(href, src) {
let ret;
// eslint-disable-next-line no-param-reassign
href = normalizeUrl(href);
src.some(
/**
* @param {string} url
*/
// eslint-disable-next-line array-callback-return
url => {
let ret = "";
href = (0, normalizeUrl_1.normalizeUrl)(href);
src.some(url => {
if (href.indexOf(src) > -1) {
ret = url;
}
});
return ret;
}
/**
* @param {string} [src]
* @returns {boolean}
*/
function reloadStyle(src) {
if (!src) {
return false;
Expand Down Expand Up @@ -216,10 +175,6 @@ function reloadAll() {
updateCss(el);
});
}
/**
* @param {string} url
* @returns {boolean}
*/
function isUrlRequest(url) {
// An URL is not an request if
// It is not http or https
Expand All @@ -228,12 +183,7 @@ function isUrlRequest(url) {
}
return true;
}
/**
* @param {TODO} moduleId
* @param {TODO} options
* @returns {TODO}
*/
module.exports = function (moduleId, options) {
function cssReload(moduleId, options) {
if (noDocument) {
console.log("no window.document found, will not HMR CSS");
return noop;
Expand All @@ -248,27 +198,33 @@ module.exports = function (moduleId, options) {
return;
}
if (reloaded) {
console.log("[HMR] css reload %s", src.join(" "));
console.log("[HMR] css reload %s", src?.join(" "));
}
else {
console.log("[HMR] Reload all css");
reloadAll();
}
}
return debounce(update, 50);
};
}
exports.cssReload = cssReload;


}),
"../../../../../rspack/dist/builtin-plugin/css-extract/hmr/normalize-url.js": (function (module) {
"../../../../../rspack/dist/builtin-plugin/css-extract/hmr/normalizeUrl.js": (function (__unused_webpack_module, exports) {

/* eslint-disable */
/**
* @param {string[]} pathComponents
* @returns {string}
*/
function normalizeUrl(pathComponents) {
return pathComponents
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.normalizeUrl = void 0;
function normalizeUrl(urlString) {
urlString = urlString.trim();
if (/^data:/i.test(urlString)) {
return urlString;
}
var protocol = urlString.indexOf("//") !== -1 ? urlString.split("//")[0] + "//" : "";
var components = urlString.replace(new RegExp(protocol, "i"), "").split("/");
var host = components[0].toLowerCase().replace(//.$/, "");
components[0] = "";
var path = components
.reduce(function (accumulator, item) {
switch (item) {
case "..":
Expand All @@ -280,25 +236,11 @@ function normalizeUrl(pathComponents) {
accumulator.push(item);
}
return accumulator;
}, /** @type {string[]} */ ([]))
}, [])
.join("/");
}
/**
* @param {string} urlString
* @returns {string}
*/
module.exports = function (urlString) {
urlString = urlString.trim();
if (/^data:/i.test(urlString)) {
return urlString;
}
var protocol = urlString.indexOf("//") !== -1 ? urlString.split("//")[0] + "//" : "";
var components = urlString.replace(new RegExp(protocol, "i"), "").split("/");
var host = components[0].toLowerCase().replace(//.$/, "");
components[0] = "";
var path = normalizeUrl(components);
return protocol + host + path;
};
}
exports.normalizeUrl = normalizeUrl;


}),
Expand All @@ -307,7 +249,7 @@ __webpack_require__.r(__webpack_exports__);
// extracted by css-extract-rspack-plugin

if(true) {
var cssReload = __webpack_require__(/*! ../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js */ "../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js")(module.id, {"locals":false});
var cssReload = (__webpack_require__(/*! ../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js */ "../../../../../rspack/dist/builtin-plugin/css-extract/hmr/hotModuleReplacement.js")/* .cssReload */.cssReload)(module.id, {"locals":false});
module.hot.dispose(cssReload);
module.hot.accept(undefined, function(__WEBPACK_OUTDATED_DEPENDENCIES__) {
(cssReload)(__WEBPACK_OUTDATED_DEPENDENCIES__); }.bind(this));
Expand Down
Loading

2 comments on commit fc0e208

@rspack-bot
Copy link

Choose a reason for hiding this comment

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

📝 Ran ecosystem CI: Open

suite result
modernjs ❌ failure
_selftest ✅ success
nx ❌ failure
rspress ✅ success
rsbuild ❌ failure
examples ✅ success

@rspack-bot
Copy link

Choose a reason for hiding this comment

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

📝 Benchmark detail: Open

Name Base (2024-07-24 5392167) Current Change
10000_development-mode + exec 2.26 s ± 28 ms 2.25 s ± 19 ms -0.30 %
10000_development-mode_hmr + exec 691 ms ± 6.4 ms 691 ms ± 5.1 ms +0.03 %
10000_production-mode + exec 2.87 s ± 22 ms 2.74 s ± 108 ms -4.68 %
arco-pro_development-mode + exec 1.93 s ± 62 ms 1.91 s ± 83 ms -0.98 %
arco-pro_development-mode_hmr + exec 433 ms ± 1.7 ms 434 ms ± 2.3 ms +0.22 %
arco-pro_production-mode + exec 3.5 s ± 66 ms 3.46 s ± 84 ms -1.24 %
threejs_development-mode_10x + exec 1.75 s ± 23 ms 1.77 s ± 12 ms +1.04 %
threejs_development-mode_10x_hmr + exec 856 ms ± 5.1 ms 866 ms ± 5.2 ms +1.20 %
threejs_production-mode_10x + exec 5.74 s ± 44 ms 5.71 s ± 30 ms -0.38 %

Please sign in to comment.