Skip to content

Commit 1700774

Browse files
ScriptedAlchemyScriptedAlchemy
committed
test: added hmr test case
updating js hash and adding hmr test cases
1 parent c2207af commit 1700774

16 files changed

+4512
-5819
lines changed

‎package-lock.json

+3,880-5,755
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+13-13
Original file line numberDiff line numberDiff line change
@@ -56,27 +56,27 @@
5656
"babel-jest": "^22.2.2",
5757
"babel-plugin-transform-object-rest-spread": "^6.26.0",
5858
"babel-polyfill": "^6.26.0",
59-
"babel-preset-env": "^1.6.1",
59+
"babel-preset-env": "^1.7.0",
6060
"conventional-github-releaser": "^2.0.2",
61-
"cross-env": "^5.1.3",
62-
"css-loader": "^0.28.10",
61+
"cross-env": "^5.2.0",
62+
"css-loader": "^2.1.0",
6363
"del": "^3.0.0",
6464
"del-cli": "^1.1.0",
6565
"eslint": "^4.17.0",
66-
"eslint-plugin-import": "^2.8.0",
67-
"eslint-plugin-prettier": "^2.6.0",
68-
"file-loader": "^1.1.11",
69-
"husky": "^0.14.3",
66+
"eslint-plugin-import": "^2.15.0",
67+
"eslint-plugin-prettier": "^3.0.1",
68+
"file-loader": "^3.0.1",
69+
"husky": "^1.3.1",
7070
"jest": "^22.2.2",
7171
"lint-staged": "^6.1.0",
7272
"memory-fs": "^0.4.1",
7373
"pre-commit": "^1.2.2",
74-
"prettier": "^1.11.1",
75-
"standard-version": "^4.3.0",
76-
"webpack": "^4.14.0",
77-
"webpack-cli": "^2.0.13",
78-
"webpack-defaults": "^2.3.0",
79-
"webpack-dev-server": "^3.1.1"
74+
"prettier": "^1.16.1",
75+
"standard-version": "^4.4.0",
76+
"webpack": "^4.29.0",
77+
"webpack-cli": "^3.2.1",
78+
"webpack-defaults": "^3.0.0",
79+
"webpack-dev-server": "^3.1.14"
8080
},
8181
"keywords": [
8282
"webpack"

‎src/hmr/.eslintrc.js

-23
This file was deleted.

‎src/hmr/hotModuleReplacement.js

+44-28
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,48 @@
1-
const normalizeUrl = require('normalize-url');
1+
/* global document, window */
2+
/* eslint func-names: 0 */
3+
/* eslint no-var: 0 */
4+
/* eslint vars-on-top: 0 */
5+
/* eslint prefer-arrow-func: 0 */
6+
/* eslint prefer-rest-params: 0 */
7+
/* eslint prefer-arrow-callback: 0 */
28

3-
const srcByModuleId = Object.create(null);
9+
var normalizeUrl = require('normalize-url');
410

5-
const noDocument = typeof document === 'undefined';
11+
var srcByModuleId = Object.create(null);
12+
13+
var noDocument = typeof document === 'undefined';
14+
15+
var forEach = Array.prototype.forEach;
616

717
function debounce(fn, time) {
8-
let timeout;
18+
var timeout = 0;
919

1020
// eslint-disable-next-line func-names
1121
return function() {
12-
const functionCall = () => fn.apply(this, arguments);
22+
var self = this;
23+
var args = arguments;
24+
25+
// eslint-disable-next-line prefer-rest-params
26+
var functionCall = function functionCall() {
27+
return fn.apply(self, args);
28+
};
1329

1430
clearTimeout(timeout);
1531
timeout = setTimeout(functionCall, time);
1632
};
1733
}
1834

19-
const forEach = Array.prototype.forEach;
20-
2135
function noop() {}
2236

2337
function getCurrentScriptUrl(moduleId) {
24-
let src = srcByModuleId[moduleId];
38+
var src = srcByModuleId[moduleId];
2539

2640
if (!src) {
2741
if (document.currentScript) {
2842
src = document.currentScript.src;
2943
} else {
30-
const scripts = document.getElementsByTagName('script');
31-
const lastScriptTag = scripts[scripts.length - 1];
44+
var scripts = document.getElementsByTagName('script');
45+
var lastScriptTag = scripts[scripts.length - 1];
3246

3347
if (lastScriptTag) {
3448
src = lastScriptTag.src;
@@ -41,16 +55,16 @@ function getCurrentScriptUrl(moduleId) {
4155
if (!src) {
4256
return null;
4357
}
44-
const splitResult = src.split(/([^\\/]+)\.js$/);
45-
const filename = splitResult && splitResult[1];
58+
var splitResult = src.split(/([^\\/]+)\.js$/);
59+
var filename = splitResult && splitResult[1];
4660
if (!filename) {
4761
return [src.replace('.js', '.css')];
4862
}
4963
if (!fileMap) {
5064
return [src.replace('.js', '.css')];
5165
}
52-
return fileMap.split(',').map(mapRule => {
53-
const reg = new RegExp(`${filename}\\.js$`, 'g');
66+
return fileMap.split(',').map(function(mapRule) {
67+
var reg = new RegExp(`${filename}\\.js$`, 'g');
5468
return normalizeUrl(
5569
src.replace(reg, `${mapRule.replace(/{fileName}/g, filename)}.css`),
5670
{ stripWWW: false }
@@ -71,16 +85,16 @@ function updateCss(el, url) {
7185
if (!url || !(url.indexOf('.css') > -1)) return;
7286

7387
el.visited = true;
74-
const newEl = el.cloneNode();
88+
var newEl = el.cloneNode(); // eslint-disable-line vars-on-top
7589

7690
newEl.isLoaded = false;
7791

78-
newEl.addEventListener('load', () => {
92+
newEl.addEventListener('load', function() {
7993
newEl.isLoaded = true;
8094
el.parentNode.removeChild(el);
8195
});
8296

83-
newEl.addEventListener('error', () => {
97+
newEl.addEventListener('error', function() {
8498
newEl.isLoaded = true;
8599
el.parentNode.removeChild(el);
86100
});
@@ -90,10 +104,10 @@ function updateCss(el, url) {
90104
}
91105

92106
function getReloadUrl(href, src) {
107+
var ret;
93108
href = normalizeUrl(href, { stripWWW: false });
94-
let ret;
95109
// eslint-disable-next-line array-callback-return
96-
src.some(url => {
110+
src.some(function(url) {
97111
if (href.indexOf(src) > -1) {
98112
ret = url;
99113
}
@@ -102,13 +116,14 @@ function getReloadUrl(href, src) {
102116
}
103117

104118
function reloadStyle(src) {
105-
const elements = document.querySelectorAll('link');
106-
let loaded = false;
119+
var elements = document.querySelectorAll('link');
120+
var loaded = false;
121+
122+
forEach.call(elements, function(el) {
123+
var url = getReloadUrl(el.href, src);
107124

108-
forEach.call(elements, el => {
109125
if (el.visited === true) return;
110126

111-
const url = getReloadUrl(el.href, src);
112127
if (url) {
113128
updateCss(el, url);
114129
loaded = true;
@@ -119,8 +134,8 @@ function reloadStyle(src) {
119134
}
120135

121136
function reloadAll() {
122-
const elements = document.querySelectorAll('link');
123-
forEach.call(elements, el => {
137+
var elements = document.querySelectorAll('link');
138+
forEach.call(elements, function(el) {
124139
if (el.visited === true) return;
125140
updateCss(el);
126141
});
@@ -131,11 +146,12 @@ module.exports = function(moduleId, options) {
131146
return noop;
132147
}
133148

134-
const getScriptSrc = getCurrentScriptUrl(moduleId);
149+
// eslint-disable-next-line vars-on-top
150+
var getScriptSrc = getCurrentScriptUrl(moduleId);
135151

136152
function update() {
137-
const src = getScriptSrc(options.filename);
138-
const reloaded = reloadStyle(src);
153+
var src = getScriptSrc(options.filename);
154+
var reloaded = reloadStyle(src);
139155
if (reloaded && !options.reloadAll) {
140156
console.log('[HMR] css reload %s', src.join(' '));
141157
} else {

‎test/cases/hmr/a.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
body { background: red; }

‎test/cases/hmr/b.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.b { background: red; }
2+
3+
@import url("https://some/external/css");
4+
5+
.b { color: yellow; }

‎test/cases/hmr/c.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.c { background: red; }
2+
@import './a.css';
3+
@import url("https://some/other/external/css");
4+
5+
.c { color: yellow; }

‎test/cases/hmr/expected/main.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import url(https://some/other/external/css);
2+
@import url(https://some/external/css);
3+
body { background: red; }
4+
5+
.c { background: red; }
6+
7+
.c { color: yellow; }
8+
9+
.b { background: red; }
10+
11+
.b { color: yellow; }
12+
13+
14+

‎test/cases/hmr/index.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import './c.css';
2+
@import './b.css';

‎test/cases/hmr/webpack.config.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const Self = require('../../../');
2+
3+
module.exports = {
4+
entry: './index.css',
5+
module: {
6+
rules: [
7+
{
8+
test: /\.css$/,
9+
use: [
10+
{
11+
loader: Self.loader,
12+
options: {
13+
hmr: true,
14+
modules: true,
15+
reloadAll: true
16+
},
17+
},
18+
'css-loader',
19+
],
20+
},
21+
],
22+
},
23+
plugins: [
24+
new Self({
25+
filename: '[name].css',
26+
}),
27+
],
28+
};

0 commit comments

Comments
 (0)