fix: delete only script files which has been processed by plugin

.eslintignore

@@ -1 +1,4 @@
 README.md
+__tests__/cases/**/dist
+__tests__/cases/**/expected
+dist

.eslintrc

@@ -3,6 +3,10 @@
   "plugins": [
     "@typescript-eslint"
   ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
   "extends": [
     "eslint:recommended",
     "airbnb-base",

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-18.04
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [12.x, 14.x, 16.x]
     env:
       HUSKY: 0
     steps:

__tests__/HtmlInlineScriptPlugin.test.ts

@@ -3,6 +3,9 @@ import path from 'path';
 import webpack from 'webpack';
 import simpleConfig from './cases/simple/webpack.config';
 import multipleInstanceConfig from './cases/multiple-instance/webpack.config';
+import jsWithImportConfig from './cases/js-with-import/webpack.config';
+import webWorkerConfig from './cases/web-worker/webpack.config';
+import inlineWebWorkerConfig from './cases/inline-web-worker/webpack.config';
 
 describe('HtmlInlineScriptPlugin', () => {
   it('should build simple webpack config without error', async () => {
@@ -25,6 +28,11 @@ describe('HtmlInlineScriptPlugin', () => {
           'utf8',
         );
         expect(result).toBe(expected);
+
+        const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/simple/expected/'));
+        const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/simple/dist/'));
+        expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
+
         resolve(true);
       });
     });
@@ -65,6 +73,122 @@ describe('HtmlInlineScriptPlugin', () => {
         );
 
         expect(result2).toBe(expected2);
+
+        const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/multiple-instance/expected/'));
+        const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/multiple-instance/dist/'));
+        expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
+
+        resolve(true);
+      });
+    });
+
+    await webpackPromise;
+  });
+
+  it('should build webpack config having JS file with import without error', async () => {
+    const webpackPromise = new Promise((resolve) => {
+      const compiler = webpack(jsWithImportConfig);
+
+      compiler.run((error, stats) => {
+        expect(error).toBeNull();
+
+        const statsErrors = stats?.compilation.errors;
+        expect(statsErrors?.length).toBe(0);
+
+        const result1 = fs.readFileSync(
+          path.join(__dirname, 'cases/js-with-import/dist/index.html'),
+          'utf8',
+        );
+
+        const expected1 = fs.readFileSync(
+          path.join(__dirname, 'cases/js-with-import/expected/index.html'),
+          'utf8',
+        );
+
+        expect(result1).toBe(expected1);
+
+        const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/js-with-import/expected/'));
+        const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/js-with-import/dist/'));
+        expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
+
+        resolve(true);
+      });
+    });
+
+    await webpackPromise;
+  });
+
+  it('should build webpack config having web worker without error', async () => {
+    const webpackPromise = new Promise((resolve) => {
+      const compiler = webpack(webWorkerConfig);
+
+      compiler.run((error, stats) => {
+        expect(error).toBeNull();
+
+        const statsErrors = stats?.compilation.errors;
+        expect(statsErrors?.length).toBe(0);
+
+        const result1 = fs.readFileSync(
+          path.join(__dirname, 'cases/web-worker/dist/index.html'),
+          'utf8',
+        );
+
+        const expected1 = fs.readFileSync(
+          path.join(__dirname, 'cases/web-worker/expected/index.html'),
+          'utf8',
+        );
+
+        expect(result1).toBe(expected1);
+
+        const result2 = fs.readFileSync(
+          path.join(__dirname, 'cases/web-worker/dist/test.worker.js'),
+          'utf8',
+        );
+
+        const expected2 = fs.readFileSync(
+          path.join(__dirname, 'cases/web-worker/expected/test.worker.js'),
+          'utf8',
+        );
+
+        expect(result2).toBe(expected2);
+
+        const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/web-worker/expected/'));
+        const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/web-worker/dist/'));
+        expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
+
+        resolve(true);
+      });
+    });
+
+    await webpackPromise;
+  });
+
+  it('should build webpack config having inline web worker without error', async () => {
+    const webpackPromise = new Promise((resolve) => {
+      const compiler = webpack(inlineWebWorkerConfig);
+
+      compiler.run((error, stats) => {
+        expect(error).toBeNull();
+
+        const statsErrors = stats?.compilation.errors;
+        expect(statsErrors?.length).toBe(0);
+
+        const result1 = fs.readFileSync(
+          path.join(__dirname, 'cases/inline-web-worker/dist/index.html'),
+          'utf8',
+        );
+
+        const expected1 = fs.readFileSync(
+          path.join(__dirname, 'cases/inline-web-worker/expected/index.html'),
+          'utf8',
+        );
+
+        expect(result1).toBe(expected1);
+
+        const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/inline-web-worker/expected/'));
+        const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/inline-web-worker/dist/'));
+        expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
+
         resolve(true);
       });
     });

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

@@ -0,0 +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

@@ -0,0 +1,15 @@
+<!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>
+  </body>
+</html>

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

@@ -0,0 +1,34 @@
+// This file will be loaded as raw text as configured via webpack and raw-loader
+import workerSource from './worker';
+
+const blob = new Blob([
+  workerSource
+]);
+
+const blobURL = window.URL.createObjectURL(blob);
+
+const worker = new Worker(blobURL);
+
+let result;
+
+worker.onmessage = function (event) {
+  if (!result) {
+    result = document.createElement('div');
+    result.setAttribute('id', 'result');
+
+    document.body.append(result);
+  }
+
+  const record = document.createElement('pre');
+  record.innerHTML = JSON.stringify(event.data);
+
+  result.append(record);
+};
+
+window.addEventListener('load', () => {
+  const button = document.getElementById('button');
+
+  button.addEventListener('click', () => {
+    worker.postMessage({ postMessage: true });
+  });
+});

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

@@ -0,0 +1,7 @@
+onmessage = function (event) {
+  const workerResult = { timestamp: Date.now(), ...event.data };
+
+  workerResult.onmessage = true;
+
+  postMessage(workerResult);
+};

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

@@ -0,0 +1,31 @@
+import path from 'path';
+import type { Configuration } from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import Self from '../../../dist';
+
+const config: Configuration = {
+  mode: 'production',
+  entry: path.join(__dirname, './fixtures/index.js'),
+  output: {
+    path: path.join(__dirname, './dist'),
+    filename: '[name].js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './fixtures/index.html')
+    }),
+    new Self()
+  ],
+  module: {
+    rules: [
+      {
+        test: /worker\.js$/,
+        use: {
+          loader: 'raw-loader'
+        }
+      }
+    ]
+  }
+};
+
+export default config;

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

@@ -0,0 +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

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-console
+console.log('Hello world');

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

@@ -0,0 +1,14 @@
+<!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>
+  </body>
+</html>

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

@@ -0,0 +1 @@
+import './app';

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

@@ -0,0 +1,21 @@
+import path from 'path';
+import type { Configuration } from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import Self from '../../../dist';
+
+const config: Configuration = {
+  mode: 'production',
+  entry: path.join(__dirname, './fixtures/index.js'),
+  output: {
+    path: path.join(__dirname, './dist'),
+    filename: '[name].js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './fixtures/index.html')
+    }),
+    new Self()
+  ]
+};
+
+export default config;

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

@@ -0,0 +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/fixtures/index.html

@@ -0,0 +1,15 @@
+<!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>
+  </body>
+</html>

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

@@ -0,0 +1,27 @@
+import Worker from './worker';
+
+const worker = new Worker();
+
+let result;
+
+worker.onmessage = function (event) {
+  if (!result) {
+    result = document.createElement('div');
+    result.setAttribute('id', 'result');
+
+    document.body.append(result);
+  }
+
+  const record = document.createElement('pre');
+  record.innerHTML = JSON.stringify(event.data);
+
+  result.append(record);
+};
+
+window.addEventListener('load', () => {
+  const button = document.getElementById('button');
+
+  button.addEventListener('click', () => {
+    worker.postMessage({ postMessage: true });
+  });
+});

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

@@ -0,0 +1,7 @@
+onmessage = function (event) {
+  const workerResult = { timestamp: Date.now(), ...event.data };
+
+  workerResult.onmessage = true;
+
+  postMessage(workerResult);
+};

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

@@ -0,0 +1,32 @@
+import path from 'path';
+import type { Configuration } from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import Self from '../../../dist';
+
+const config: Configuration = {
+  mode: 'production',
+  entry: path.join(__dirname, './fixtures/index.js'),
+  output: {
+    path: path.join(__dirname, './dist'),
+    filename: '[name].js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './fixtures/index.html')
+    }),
+    new Self()
+  ],
+  module: {
+    rules: [
+      {
+        test: /worker\.js$/,
+        use: {
+          loader: 'worker-loader',
+          options: { filename: 'test.worker.js' }
+        }
+      }
+    ]
+  }
+};
+
+export default config;