Skip to content

Commit f725bd7

Browse files
icelamicelam
committed
fix: delete only script files which has been processed by plugin
1 parent fdc2dd0 commit f725bd7

File tree

23 files changed

+403
-8
lines changed

23 files changed

+403
-8
lines changed

‎.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
README.md
2+
__tests__/cases/**/dist
3+
__tests__/cases/**/expected
4+
dist

‎.eslintrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
"plugins": [
44
"@typescript-eslint"
55
],
6+
"env": {
7+
"browser": true,
8+
"node": true
9+
},
610
"extends": [
711
"eslint:recommended",
812
"airbnb-base",

‎.github/workflows/ci.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ jobs:
1717
runs-on: ubuntu-18.04
1818
strategy:
1919
matrix:
20-
node-version: [12.x, 14.x]
20+
node-version: [12.x, 14.x, 16.x]
2121
env:
2222
HUSKY: 0
2323
steps:

‎__tests__/HtmlInlineScriptPlugin.test.ts

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import path from 'path';
33
import webpack from 'webpack';
44
import simpleConfig from './cases/simple/webpack.config';
55
import multipleInstanceConfig from './cases/multiple-instance/webpack.config';
6+
import jsWithImportConfig from './cases/js-with-import/webpack.config';
7+
import webWorkerConfig from './cases/web-worker/webpack.config';
8+
import inlineWebWorkerConfig from './cases/inline-web-worker/webpack.config';
69

710
describe('HtmlInlineScriptPlugin', () => {
811
it('should build simple webpack config without error', async () => {
@@ -25,6 +28,11 @@ describe('HtmlInlineScriptPlugin', () => {
2528
'utf8',
2629
);
2730
expect(result).toBe(expected);
31+
32+
const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/simple/expected/'));
33+
const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/simple/dist/'));
34+
expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
35+
2836
resolve(true);
2937
});
3038
});
@@ -65,6 +73,122 @@ describe('HtmlInlineScriptPlugin', () => {
6573
);
6674

6775
expect(result2).toBe(expected2);
76+
77+
const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/multiple-instance/expected/'));
78+
const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/multiple-instance/dist/'));
79+
expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
80+
81+
resolve(true);
82+
});
83+
});
84+
85+
await webpackPromise;
86+
});
87+
88+
it('should build webpack config having JS file with import without error', async () => {
89+
const webpackPromise = new Promise((resolve) => {
90+
const compiler = webpack(jsWithImportConfig);
91+
92+
compiler.run((error, stats) => {
93+
expect(error).toBeNull();
94+
95+
const statsErrors = stats?.compilation.errors;
96+
expect(statsErrors?.length).toBe(0);
97+
98+
const result1 = fs.readFileSync(
99+
path.join(__dirname, 'cases/js-with-import/dist/index.html'),
100+
'utf8',
101+
);
102+
103+
const expected1 = fs.readFileSync(
104+
path.join(__dirname, 'cases/js-with-import/expected/index.html'),
105+
'utf8',
106+
);
107+
108+
expect(result1).toBe(expected1);
109+
110+
const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/js-with-import/expected/'));
111+
const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/js-with-import/dist/'));
112+
expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
113+
114+
resolve(true);
115+
});
116+
});
117+
118+
await webpackPromise;
119+
});
120+
121+
it('should build webpack config having web worker without error', async () => {
122+
const webpackPromise = new Promise((resolve) => {
123+
const compiler = webpack(webWorkerConfig);
124+
125+
compiler.run((error, stats) => {
126+
expect(error).toBeNull();
127+
128+
const statsErrors = stats?.compilation.errors;
129+
expect(statsErrors?.length).toBe(0);
130+
131+
const result1 = fs.readFileSync(
132+
path.join(__dirname, 'cases/web-worker/dist/index.html'),
133+
'utf8',
134+
);
135+
136+
const expected1 = fs.readFileSync(
137+
path.join(__dirname, 'cases/web-worker/expected/index.html'),
138+
'utf8',
139+
);
140+
141+
expect(result1).toBe(expected1);
142+
143+
const result2 = fs.readFileSync(
144+
path.join(__dirname, 'cases/web-worker/dist/test.worker.js'),
145+
'utf8',
146+
);
147+
148+
const expected2 = fs.readFileSync(
149+
path.join(__dirname, 'cases/web-worker/expected/test.worker.js'),
150+
'utf8',
151+
);
152+
153+
expect(result2).toBe(expected2);
154+
155+
const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/web-worker/expected/'));
156+
const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/web-worker/dist/'));
157+
expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
158+
159+
resolve(true);
160+
});
161+
});
162+
163+
await webpackPromise;
164+
});
165+
166+
it('should build webpack config having inline web worker without error', async () => {
167+
const webpackPromise = new Promise((resolve) => {
168+
const compiler = webpack(inlineWebWorkerConfig);
169+
170+
compiler.run((error, stats) => {
171+
expect(error).toBeNull();
172+
173+
const statsErrors = stats?.compilation.errors;
174+
expect(statsErrors?.length).toBe(0);
175+
176+
const result1 = fs.readFileSync(
177+
path.join(__dirname, 'cases/inline-web-worker/dist/index.html'),
178+
'utf8',
179+
);
180+
181+
const expected1 = fs.readFileSync(
182+
path.join(__dirname, 'cases/inline-web-worker/expected/index.html'),
183+
'utf8',
184+
);
185+
186+
expect(result1).toBe(expected1);
187+
188+
const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/inline-web-worker/expected/'));
189+
const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/inline-web-worker/dist/'));
190+
expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
191+
68192
resolve(true);
69193
});
70194
});

‎__tests__/cases/inline-web-worker/expected/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title></head><body><p>This is minimal code to demonstrate webpack usage</p><button id="button">Run Action</button><script>!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);const r=new Blob(["onmessage = function (event) {\n const workerResult = { timestamp: Date.now(), ...event.data };\n\n workerResult.onmessage = true;\n\n postMessage(workerResult);\n};\n"]),o=window.URL.createObjectURL(r),u=new Worker(o);let i;u.onmessage=function(e){i||(i=document.createElement("div"),i.setAttribute("id","result"),document.body.append(i));const t=document.createElement("pre");t.innerHTML=JSON.stringify(e.data),i.append(t)},window.addEventListener("load",()=>{document.getElementById("button").addEventListener("click",()=>{u.postMessage({postMessage:!0})})})}]);</script></body></html>

‎__tests__/cases/inline-web-worker/fixtures/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta name="language" content="English" />
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
9+
<title>webpack test</title>
10+
</head>
11+
<body>
12+
<p>This is minimal code to demonstrate webpack usage</p>
13+
<button id="button">Run Action</button>
14+
</body>
15+
</html>

‎__tests__/cases/inline-web-worker/fixtures/index.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// This file will be loaded as raw text as configured via webpack and raw-loader
2+
import workerSource from './worker';
3+
4+
const blob = new Blob([
5+
workerSource
6+
]);
7+
8+
const blobURL = window.URL.createObjectURL(blob);
9+
10+
const worker = new Worker(blobURL);
11+
12+
let result;
13+
14+
worker.onmessage = function (event) {
15+
if (!result) {
16+
result = document.createElement('div');
17+
result.setAttribute('id', 'result');
18+
19+
document.body.append(result);
20+
}
21+
22+
const record = document.createElement('pre');
23+
record.innerHTML = JSON.stringify(event.data);
24+
25+
result.append(record);
26+
};
27+
28+
window.addEventListener('load', () => {
29+
const button = document.getElementById('button');
30+
31+
button.addEventListener('click', () => {
32+
worker.postMessage({ postMessage: true });
33+
});
34+
});

‎__tests__/cases/inline-web-worker/fixtures/worker.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
onmessage = function (event) {
2+
const workerResult = { timestamp: Date.now(), ...event.data };
3+
4+
workerResult.onmessage = true;
5+
6+
postMessage(workerResult);
7+
};

‎__tests__/cases/inline-web-worker/webpack.config.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import path from 'path';
2+
import type { Configuration } from 'webpack';
3+
import HtmlWebpackPlugin from 'html-webpack-plugin';
4+
import Self from '../../../dist';
5+
6+
const config: Configuration = {
7+
mode: 'production',
8+
entry: path.join(__dirname, './fixtures/index.js'),
9+
output: {
10+
path: path.join(__dirname, './dist'),
11+
filename: '[name].js'
12+
},
13+
plugins: [
14+
new HtmlWebpackPlugin({
15+
template: path.resolve(__dirname, './fixtures/index.html')
16+
}),
17+
new Self()
18+
],
19+
module: {
20+
rules: [
21+
{
22+
test: /worker\.js$/,
23+
use: {
24+
loader: 'raw-loader'
25+
}
26+
}
27+
]
28+
}
29+
};
30+
31+
export default config;

‎__tests__/cases/js-with-import/expected/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title></head><body><p>This is minimal code to demonstrate webpack usage</p><script>!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);r(1)},function(e,t){console.log("Hello world")}]);</script></body></html>

‎__tests__/cases/js-with-import/fixtures/app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// eslint-disable-next-line no-console
2+
console.log('Hello world');

‎__tests__/cases/js-with-import/fixtures/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta name="language" content="English" />
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
9+
<title>webpack test</title>
10+
</head>
11+
<body>
12+
<p>This is minimal code to demonstrate webpack usage</p>
13+
</body>
14+
</html>

‎__tests__/cases/js-with-import/fixtures/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './app';

‎__tests__/cases/js-with-import/webpack.config.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import path from 'path';
2+
import type { Configuration } from 'webpack';
3+
import HtmlWebpackPlugin from 'html-webpack-plugin';
4+
import Self from '../../../dist';
5+
6+
const config: Configuration = {
7+
mode: 'production',
8+
entry: path.join(__dirname, './fixtures/index.js'),
9+
output: {
10+
path: path.join(__dirname, './dist'),
11+
filename: '[name].js'
12+
},
13+
plugins: [
14+
new HtmlWebpackPlugin({
15+
template: path.resolve(__dirname, './fixtures/index.html')
16+
}),
17+
new Self()
18+
]
19+
};
20+
21+
export default config;

‎__tests__/cases/web-worker/expected/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="language" content="English"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/><title>webpack test</title></head><body><p>This is minimal code to demonstrate webpack usage</p><button id="button">Run Action</button><script>!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);const r=new function(){return new Worker(n.p+"test.worker.js")};let o;r.onmessage=function(e){o||(o=document.createElement("div"),o.setAttribute("id","result"),document.body.append(o));const t=document.createElement("pre");t.innerHTML=JSON.stringify(e.data),o.append(t)},window.addEventListener("load",()=>{document.getElementById("button").addEventListener("click",()=>{r.postMessage({postMessage:!0})})})}]);</script></body></html>

‎__tests__/cases/web-worker/expected/test.worker.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎__tests__/cases/web-worker/fixtures/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta name="language" content="English" />
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8+
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
9+
<title>webpack test</title>
10+
</head>
11+
<body>
12+
<p>This is minimal code to demonstrate webpack usage</p>
13+
<button id="button">Run Action</button>
14+
</body>
15+
</html>

‎__tests__/cases/web-worker/fixtures/index.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Worker from './worker';
2+
3+
const worker = new Worker();
4+
5+
let result;
6+
7+
worker.onmessage = function (event) {
8+
if (!result) {
9+
result = document.createElement('div');
10+
result.setAttribute('id', 'result');
11+
12+
document.body.append(result);
13+
}
14+
15+
const record = document.createElement('pre');
16+
record.innerHTML = JSON.stringify(event.data);
17+
18+
result.append(record);
19+
};
20+
21+
window.addEventListener('load', () => {
22+
const button = document.getElementById('button');
23+
24+
button.addEventListener('click', () => {
25+
worker.postMessage({ postMessage: true });
26+
});
27+
});

‎__tests__/cases/web-worker/fixtures/worker.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
onmessage = function (event) {
2+
const workerResult = { timestamp: Date.now(), ...event.data };
3+
4+
workerResult.onmessage = true;
5+
6+
postMessage(workerResult);
7+
};

‎__tests__/cases/web-worker/webpack.config.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import path from 'path';
2+
import type { Configuration } from 'webpack';
3+
import HtmlWebpackPlugin from 'html-webpack-plugin';
4+
import Self from '../../../dist';
5+
6+
const config: Configuration = {
7+
mode: 'production',
8+
entry: path.join(__dirname, './fixtures/index.js'),
9+
output: {
10+
path: path.join(__dirname, './dist'),
11+
filename: '[name].js'
12+
},
13+
plugins: [
14+
new HtmlWebpackPlugin({
15+
template: path.resolve(__dirname, './fixtures/index.html')
16+
}),
17+
new Self()
18+
],
19+
module: {
20+
rules: [
21+
{
22+
test: /worker\.js$/,
23+
use: {
24+
loader: 'worker-loader',
25+
options: { filename: 'test.worker.js' }
26+
}
27+
}
28+
]
29+
}
30+
};
31+
32+
export default config;

0 commit comments

Comments
 (0)