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

Author: icelam

.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

@@ -16,7 +16,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><script defer="defer">(()=>{"use strict";var e={433:e=>{e.exports="onmessage = function (event) {\n  const workerResult = { timestamp: Date.now(), ...event.data };\n\n  workerResult.onmessage = true;\n\n  postMessage(workerResult);\n};\n"}},t={};function n(s){var o=t[s];if(void 0!==o)return o.exports;var r=t[s]={exports:{}};return e[s](r,r.exports,n),r.exports}(()=>{var e=n(433);const t=new Blob([e]),s=window.URL.createObjectURL(t),o=new Worker(s);let r;o.onmessage=function(e){r||(r=document.createElement("div"),r.setAttribute("id","result"),document.body.append(r));const t=document.createElement("pre");t.innerHTML=JSON.stringify(e.data),r.append(t)},window.addEventListener("load",(()=>{document.getElementById("button").addEventListener("click",(()=>{o.postMessage({postMessage:!0})}))}))})()})();</script></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.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,36 @@
+// This file will be loaded as raw text as configured via webpack and asssets-loader
+// eslint-disable-next-line import/extensions, import/no-unresolved
+import workerSource from './worker.js?raw';
+
+const blob = new Blob([
+  workerSource
+]);
+
+// Obtain a blob URL reference to our worker 'file'.
+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,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',
+    publicPath: './'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './fixtures/index.html')
+    }),
+    new Self()
+  ],
+  module: {
+    rules: [
+      {
+        resourceQuery: /raw/,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - according to assets-loader, it is a proper usage to use 'asset/source'
+        type: 'asset/source'
+      }
+    ]
+  }
+};
+
+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><script defer="defer">(()=>{var e={377:()=>{console.log("Hello world")}},r={};function o(t){var n=r[t];if(void 0!==n)return n.exports;var a=r[t]={exports:{}};return e[t](a,a.exports,o),a.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{"use strict";o(377)})()})();</script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>