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

refactor(plugin/css-extract): use typescript for css-extract-hmr #7245

Merged
merged 16 commits into from
Jul 24, 2024
Merged

refactor(plugin/css-extract): use typescript for css-extract-hmr #7245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift click to select a range
1a9dc31
refactor: change css extract hmr to ts and esm
wxiaoyun Jul 20, 2024
5f2e8fc
Revert "refactor: change ansiHTML to ts and esm"
wxiaoyun Jul 20, 2024
8746d88
refactor: wip
wxiaoyun Jul 20, 2024
59da3c8
refactor: remove jsdoc
wxiaoyun Jul 20, 2024
58d31f2
fix: update snapshot
wxiaoyun Jul 21, 2024
dd2ad2c
fix: remove ts ignore
wxiaoyun Jul 21, 2024
197ae7f
fix: update test snapshot
wxiaoyun Jul 21, 2024
4ad4d27
chore: update snapshot
wxiaoyun Jul 21, 2024
d9428cc
chore: update snapshot
wxiaoyun Jul 21, 2024
13ad48e
refactor: move normalize-url fn
wxiaoyun Jul 22, 2024
83746de
fix: remmove normalize url
wxiaoyun Jul 24, 2024
6635232
revert: revert change after rebase
wxiaoyun Jul 24, 2024
d2cb092
fix: remmove normalize url
wxiaoyun Jul 24, 2024
10e2a96
chore: update
SoonIter Jul 24, 2024
27c4205
chore: update
SoonIter Jul 24, 2024
91e469d
chore: update snapshot
SoonIter Jul 24, 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
4 changes: 2 additions & 2 deletions ...ages/rspack-test-tools/tests/hotCases/css/recovery-cacheable/__snapshots__/web/2.snap.txt
View file
Open in desktop
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
Open in desktop
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
Loading