Merge branch 'develop'

Author: icelam

.eslintrc

@@ -23,27 +23,40 @@
   "rules": {
     "no-param-reassign": "off",
     "comma-dangle": ["error", "never"],
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "optionalDependencies": false
-      }
-    ],
-    "import/extensions": [
-      "error",
-      {
-        "js": "never",
-        "ts": "never",
-      }
-    ]
+    "import/no-extraneous-dependencies": ["error", {
+      "optionalDependencies": false
+    }],
+    "import/extensions": ["error", {
+      "js": "never",
+      "ts": "never",
+    }]
   },
   "overrides": [
     {
-      "files": ["scripts/*.js", "test/**/*.js"],
+      "plugins": ["jest"],
+      "files": ["__tests__/**/*.test.js", "__tests__/**/*.test.ts"],
+      "settings": {
+        "import/resolver": {
+          "node": {
+            "extensions": [".js", ".json", ".ts"]
+          }
+        }
+      },
+      "extends": [
+        "eslint:recommended",
+        "airbnb-base",
+        "plugin:jest/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+      ],
       "env": { "node": true },
       "rules": {
         "@typescript-eslint/no-var-requires": ["off"],
-        "no-console": ["off"]
+        "no-console": ["off"],
+        "import/extensions": ["error", {
+          "js": "never",
+          "ts": "never",
+        }]
       }
     }
   ]

.github/workflows/ci.yml

@@ -34,7 +34,7 @@ jobs:
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-node${{ matrix.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
       - name: Install webpack-cli
@@ -43,12 +43,9 @@ jobs:
       - name: Install dependencies
         run: |
           yarn install --frozen-lockfile
-      - name: List webpack version
-        run: |
-          yarn list --depth=0
       - name: Build package
         run: |
           yarn build
       - name: Test
         run: |
-          webpack --config test/cases/v4/simple/webpack.config.js
+          yarn test:ci

.gitignore

@@ -5,4 +5,4 @@ yarn-debug.log*
 yarn-error.log*
 
 /dist
-/test/**/*/dist
+/__tests__/**/*/dist

.npmignore

@@ -12,6 +12,7 @@ yarn-error.log
 yarn.lock
 .github
 lgtm.yml
-/test
+/__tests__
 .husky
 /scripts
+jest.config.js

__tests__/HtmlInlineScriptPlugin.test.ts

@@ -0,0 +1,74 @@
+import fs from 'fs';
+import path from 'path';
+import webpack from 'webpack';
+import simpleConfig from './cases/simple/webpack.config';
+import multipleInstanceConfig from './cases/multiple-instance/webpack.config';
+
+describe('HtmlInlineScriptPlugin', () => {
+  it('should build simple webpack config without error', async () => {
+    const webpackPromise = new Promise((resolve) => {
+      const compiler = webpack(simpleConfig);
+
+      compiler.run((error, stats) => {
+        expect(error).toBeNull();
+
+        const statsErrors = stats?.compilation.errors;
+        expect(statsErrors?.length).toBe(0);
+
+        const result = fs.readFileSync(
+          path.join(__dirname, 'cases/simple/dist/index.html'),
+          'utf8',
+        );
+
+        const expected = fs.readFileSync(
+          path.join(__dirname, 'cases/simple/expected/index.html'),
+          'utf8',
+        );
+        expect(result).toBe(expected);
+        resolve(true);
+      });
+    });
+
+    await webpackPromise;
+  });
+
+  it('should build webpack config having multiple HTML webpack plugin instance without error', async () => {
+    const webpackPromise = new Promise((resolve) => {
+      const compiler = webpack(multipleInstanceConfig);
+
+      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/multiple-instance/dist/index.html'),
+          'utf8',
+        );
+
+        const expected1 = fs.readFileSync(
+          path.join(__dirname, 'cases/multiple-instance/expected/index.html'),
+          'utf8',
+        );
+
+        expect(result1).toBe(expected1);
+
+        const result2 = fs.readFileSync(
+          path.join(__dirname, 'cases/multiple-instance/dist/page2.html'),
+          'utf8',
+        );
+
+        const expected2 = fs.readFileSync(
+          path.join(__dirname, 'cases/multiple-instance/expected/page2.html'),
+          'utf8',
+        );
+
+        expect(result2).toBe(expected2);
+        resolve(true);
+      });
+    });
+
+    await webpackPromise;
+  });
+});

__tests__/cases/multiple-instance/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){console.log("Hello world")}]);</script><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=1)}([,function(e,t){console.log("Page 2")}]);</script></body></html>

__tests__/cases/multiple-instance/expected/page2.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){console.log("Hello world")}]);</script><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=1)}([,function(e,t){console.log("Page 2")}]);</script></body></html>

test/cases/v4/simple/index.html renamed to __tests__/cases/multiple-instance/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>

test/cases/v4/simple/index.js renamed to __tests__/cases/multiple-instance/fixtures/index.js

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

__tests__/cases/multiple-instance/fixtures/page2.html

@@ -0,0 +1,29 @@
+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: {
+    index: path.join(__dirname, './fixtures/index.js'),
+    page2: path.join(__dirname, './fixtures/page2.js')
+  },
+  output: {
+    path: path.join(__dirname, './dist'),
+    filename: '[name].js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './fixtures/index.html'),
+      filename: 'index.html'
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, './fixtures/page2.html'),
+      filename: 'page2.html'
+    }),
+    new Self()
+  ]
+};
+
+export default config;

__tests__/cases/multiple-instance/fixtures/page2.js

@@ -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){console.log("Hello world")}]);</script></body></html>

__tests__/cases/multiple-instance/webpack.config.ts

@@ -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/simple/expected/index.html

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

__tests__/cases/simple/fixtures/index.html

@@ -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/simple/fixtures/index.js

@@ -0,0 +1,18 @@
+module.exports = {
+  collectCoverageFrom: ['src/**/*.[tj]s'],
+  testMatch: ['<rootDir>__tests__/**/*.test.[jt]s'],
+  moduleFileExtensions: [
+    'ts',
+    'js',
+    'json'
+  ],
+  transform: {
+    '^.+\\.ts$': 'ts-jest'
+  },
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.json'
+    }
+  },
+  testEnvironment: 'node'
+};

__tests__/cases/simple/webpack.config.ts

@@ -9,7 +9,9 @@
     "prepare": "husky install && install-peers",
     "first-release": "npx standard-version --commit-all --tag-prefix v --first-release",
     "release": "npx standard-version --commit-all --tag-prefix v",
-    "extract-latest-change-log": "node scripts/extractLatestChangeLog.js"
+    "extract-latest-change-log": "node scripts/extractLatestChangeLog.js",
+    "test": "jest --verbose --watchAll --config ./jest.config.js",
+    "test:ci": "yarn test --ci --watchAll=false --runInBand --detectOpenHandles"
   },
   "author": "Ice Lam",
   "repository": {
@@ -33,18 +35,22 @@
     "@commitlint/cli": "^12.0.0",
     "@commitlint/config-conventional": "^12.0.0",
     "@types/html-webpack-plugin": "^3.2.3",
+    "@types/jest": "^26.0.20",
     "@types/webpack": "^4.41.26",
-    "@types/webpack-sources": "^1.4.0",
+    "@types/webpack-sources": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.15.2",
     "eslint": "^7.4.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^24.1.5",
     "husky": "^5.1.2",
     "install-peers-cli": "^2.2.0",
+    "jest": "^26.6.3",
     "lint-staged": "^10.2.11",
     "pinst": "^2.1.6",
     "prettier": "^2.0.5",
+    "ts-jest": "^26.5.3",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {

jest.config.js

@@ -3,6 +3,15 @@ import HtmlInlineScriptPlugin from './HtmlInlineScriptPlugin';
 
 const isHtmlWebpackPluginV4 = 'getHooks' in htmlWebpackPlugin;
 
-module.exports = isHtmlWebpackPluginV4
-  ? HtmlInlineScriptPlugin
-  : null;
+if (!isHtmlWebpackPluginV4) {
+  // eslint-disable-next-line no-console
+  console.error(
+    '\x1b[35m%s \x1b[31m%s\x1b[0m',
+    '[html-inline-script-webpack-plugin]',
+    'Please upgrade your webpack to version 4 to use this plugin.'
+  );
+
+  throw new Error('VERSION_INCOMPATIBLE');
+}
+
+export = HtmlInlineScriptPlugin;