feat: new option for defining HTML templates the plugin should process

.nvmrc

@@ -1 +1 @@
-12.16.1
+12.22.0

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

README.md

@@ -18,51 +18,114 @@ Inspired by [react-dev-utils](https://github.com/facebook/create-react-app/blob/
 ### Webpack5
 
 #### NPM
+
 ```bash
 npm i html-inline-script-webpack-plugin -D
 ```
+
 #### Yarn
+
 ```bash
 yarn add html-inline-script-webpack-plugin -D
 ```
 
 ### Webpack4
 
 #### NPM
+
 ```bash
 npm i html-inline-script-webpack-plugin@^1 -D
 ```
+
 #### Yarn
+
 ```bash
 yarn add html-inline-script-webpack-plugin@^1 -D
 ```
 
 ## Usage
+
 By default, the plugin will convert all the external script files to inline script block.
+
+```js
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
+
+module.exports = {
+  plugins: [new HtmlWebpackPlugin(), new HtmlInlineScriptPlugin()],
+};
+```
+
+## Options
+
+Below are lists of options supported by this plugin:
+
+| Name               | Description                                                                                                                                                                                                                                                                             | Type     |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| scriptMatchPattern | List of script files that should be processed and inject as inline script. This will be filtered using the output file name.                                                                                                                                                     | RegExp[] |
+| htmlMatchPattern   | List of HTML template files that should be processed by this plugin. Useful when you have multiple `html-webpack-plugin` initialized. This will be filtered using the [`options?.filename`](https://github.com/jantimon/html-webpack-plugin#options) provided by `html-webpack-plugin`. | RegExp[] |
+
+Here are some examples illustrating how to use these options:
+
+##### Process only script files that have file name start with `runtime~` and `app~`
+
 ```js
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
 
 module.exports = {
   plugins: [
     new HtmlWebpackPlugin(),
-    new HtmlInlineScriptPlugin(),
-  ]
-}
+    new HtmlInlineScriptPlugin({
+      scriptMatchPattern: [/runtime~.+[.]js$/, /app~.+[.]js$/],
+    }),
+  ],
+};
 ```
 
-To limit the scope of the plugin, specify lists of files you wish to convert in regular expressions:
+##### Process any script files but only have them inlined in `index.html`
+
 ```js
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
 
 module.exports = {
   plugins: [
-    new HtmlWebpackPlugin(),
-    new HtmlInlineScriptPlugin([
-      /runtime~.+[.]js$/,
-      /app~.+[.]js$/
-    ]),
-  ]
-}
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'static/index.webos.html',
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'page2.html',
+      template: 'page2.html',
+    }),
+    new HtmlInlineScriptPlugin({
+      htmlMatchPattern: [/index.html$/],
+    }),
+  ],
+};
+```
+
+##### Process script files that have file name start with `runtime~` and `app~` and inject only to `index.html`
+
+```js
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'static/index.webos.html',
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'page2.html',
+      template: 'page2.html',
+    }),
+    new HtmlInlineScriptPlugin({
+      scriptMatchPattern: [/runtime~.+[.]js$/, /app~.+[.]js$/],
+      htmlMatchPattern: [/index.html$/],
+    }),
+  ],
+};
 ```

__tests__/HtmlInlineScriptPlugin.test.ts

@@ -1,11 +1,17 @@
 import fs from 'fs';
 import path from 'path';
 import webpack from 'webpack';
+
+import Self from '../dist';
+
 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';
+import ignoreScriptsConfig from './cases/ignore-scripts/webpack.config';
+import ignoreHtmlsConfig from './cases/ignore-htmls/webpack.config';
+import ignoreScriptsAndHtmlsConfig from './cases/ignore-scripts-and-htmls/webpack.config';
 
 describe('HtmlInlineScriptPlugin', () => {
   it('should build simple webpack config without error', async () => {
@@ -195,4 +201,135 @@ describe('HtmlInlineScriptPlugin', () => {
 
     await webpackPromise;
   });
+
+  it('should respect plugin options on script matching pattern', async () => {
+    const webpackPromise = new Promise((resolve) => {
+      const compiler = webpack(ignoreScriptsConfig);
+
+      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/ignore-scripts/dist/index.html'),
+          'utf8',
+        );
+
+        const expected1 = fs.readFileSync(
+          path.join(__dirname, 'cases/ignore-scripts/expected/index.html'),
+          'utf8',
+        );
+
+        expect(result1).toBe(expected1);
+
+        const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/ignore-scripts/expected/'));
+        const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/ignore-scripts/dist/'));
+        expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
+
+        resolve(true);
+      });
+    });
+
+    await webpackPromise;
+  });
+
+  it('should respect plugin options on html template matching pattern', async () => {
+    const webpackPromise = new Promise((resolve) => {
+      const compiler = webpack(ignoreHtmlsConfig);
+
+      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/ignore-htmls/dist/index.html'),
+          'utf8',
+        );
+
+        const expected1 = fs.readFileSync(
+          path.join(__dirname, 'cases/ignore-htmls/expected/index.html'),
+          'utf8',
+        );
+
+        expect(result1).toBe(expected1);
+
+        const result2 = fs.readFileSync(
+          path.join(__dirname, 'cases/ignore-htmls/dist/page2.html'),
+          'utf8',
+        );
+
+        const expected2 = fs.readFileSync(
+          path.join(__dirname, 'cases/ignore-htmls/expected/page2.html'),
+          'utf8',
+        );
+
+        expect(result2).toBe(expected2);
+
+        const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/ignore-htmls/expected/'));
+        const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/ignore-htmls/dist/'));
+        expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
+
+        resolve(true);
+      });
+    });
+
+    await webpackPromise;
+  });
+
+  it('should respect plugin options on both script matching pattern and html template matching pattern', async () => {
+    const webpackPromise = new Promise((resolve) => {
+      const compiler = webpack(ignoreScriptsAndHtmlsConfig);
+
+      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/ignore-scripts-and-htmls/dist/index.html'),
+          'utf8',
+        );
+
+        const expected1 = fs.readFileSync(
+          path.join(__dirname, 'cases/ignore-scripts-and-htmls/expected/index.html'),
+          'utf8',
+        );
+
+        expect(result1).toBe(expected1);
+
+        const result2 = fs.readFileSync(
+          path.join(__dirname, 'cases/ignore-scripts-and-htmls/dist/page2.html'),
+          'utf8',
+        );
+
+        const expected2 = fs.readFileSync(
+          path.join(__dirname, 'cases/ignore-scripts-and-htmls/expected/page2.html'),
+          'utf8',
+        );
+
+        expect(result2).toBe(expected2);
+
+        const expectedFileList = fs.readdirSync(path.join(__dirname, 'cases/ignore-scripts-and-htmls/expected/'));
+        const generatedFileList = fs.readdirSync(path.join(__dirname, 'cases/ignore-scripts-and-htmls/dist/'));
+        expect(expectedFileList.sort()).toEqual(generatedFileList.sort());
+
+        resolve(true);
+      });
+    });
+
+    await webpackPromise;
+  });
+
+  it('should build throw error if options passed to plugin is old options format', async () => {
+    const initializedPlugin = () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-new
+      new Self([/runtime~.+[.]js$/, /app~.+[.]js$/] as any);
+    };
+    expect(initializedPlugin).toThrow();
+  });
 });

__tests__/cases/ignore-htmls/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">console.log("Hello world");</script><script defer="defer">console.log("Page 2");</script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>

__tests__/cases/ignore-htmls/expected/index.js

@@ -0,0 +1 @@
+console.log("Hello world");

__tests__/cases/ignore-htmls/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><script defer="defer" src="index.js"></script><script defer="defer" src="page2.js"></script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>

__tests__/cases/ignore-htmls/expected/page2.js

@@ -0,0 +1 @@
+console.log("Page 2");

__tests__/cases/ignore-htmls/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/ignore-htmls/fixtures/index.js

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

__tests__/cases/ignore-htmls/fixtures/page2.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/ignore-htmls/fixtures/page2.js

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

__tests__/cases/ignore-htmls/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: {
+    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({
+      htmlMatchPattern: [/index.html$/]
+    })
+  ]
+};
+
+export default config;

__tests__/cases/ignore-scripts-and-htmls/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">console.log("Hello world");</script><script defer="defer" src="page2.js"></script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>

__tests__/cases/ignore-scripts-and-htmls/expected/index.js

@@ -0,0 +1 @@
+console.log("Hello world");

__tests__/cases/ignore-scripts-and-htmls/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><script defer="defer" src="index.js"></script><script defer="defer" src="page2.js"></script></head><body><p>This is minimal code to demonstrate webpack usage</p></body></html>

__tests__/cases/ignore-scripts-and-htmls/expected/page2.js

@@ -0,0 +1 @@
+console.log("Page 2");

__tests__/cases/ignore-scripts-and-htmls/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>