From 7effc30df89a6553a20bf7915d97daa067bb4173 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=9D=8F=E4=BA=BA=E6=97=A5=E8=AE=B0?= <badry.lin@gmail.com>
Date: Tue, 19 Dec 2023 22:18:18 +0800
Subject: [PATCH] feat: Added support `type=systemjs-module` via the
 `scriptLoading` option (#1822)

---
 README.md          |  2 +-
 index.js           |  6 ++++--
 spec/basic.spec.js | 14 ++++++++++++++
 typings.d.ts       |  2 +-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 7e6829a0..1a062795 100644
--- a/README.md
+++ b/README.md
@@ -151,7 +151,7 @@ Allowed values are as follows:
 |**`templateParameters`**|`{Boolean\|Object\|Function}`| `false`| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |
 |**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element. Passing `true` will add it to the head/body depending on the `scriptLoading` option. Passing `false` will disable automatic injections. - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
 |**`publicPath`**|`{String\|'auto'}`|`'auto'`|The publicPath used for script and link tags|
-|**`scriptLoading`**|`{'blocking'\|'defer'\|'module'}`|`'defer'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. Setting to `'module'` adds attribute [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html). This also implies "defer", since modules are automatically deferred. |
+|**`scriptLoading`**|`{'blocking'\|'defer'\|'module'\|'systemjs-module'}`|`'defer'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. Setting to `'module'` adds attribute [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html). This also implies "defer", since modules are automatically deferred. |
 |**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
 |**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
 |**`base`**|`{Object\|String\|false}`|`false`|Inject a [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag. E.g. `base: "https://example.com/path/page.html`|
diff --git a/index.js b/index.js
index 2e98833f..dba2d144 100644
--- a/index.js
+++ b/index.js
@@ -78,9 +78,9 @@ class HtmlWebpackPlugin {
       options.template = this.getTemplatePath(this.options.template, compiler.context);
 
       // Assert correct option spelling
-      if (options.scriptLoading !== 'defer' && options.scriptLoading !== 'blocking' && options.scriptLoading !== 'module') {
+      if (options.scriptLoading !== 'defer' && options.scriptLoading !== 'blocking' && options.scriptLoading !== 'module' && options.scriptLoading !== 'systemjs-module') {
         /** @type {Logger} */
-        (this.logger).error('The "scriptLoading" option need to be set to "defer", "blocking" or "module"');
+        (this.logger).error('The "scriptLoading" option need to be set to "defer", "blocking" or "module" or "systemjs-module"');
       }
 
       if (options.inject !== true && options.inject !== false && options.inject !== 'head' && options.inject !== 'body') {
@@ -794,6 +794,8 @@ class HtmlWebpackPlugin {
         attributes.defer = true;
       } else if (this.options.scriptLoading === 'module') {
         attributes.type = 'module';
+      } else if (this.options.scriptLoading === 'systemjs-module') {
+        attributes.type = 'systemjs-module';
       }
 
       attributes.src = src;
diff --git a/spec/basic.spec.js b/spec/basic.spec.js
index 8c725fd9..43084118 100644
--- a/spec/basic.spec.js
+++ b/spec/basic.spec.js
@@ -2572,6 +2572,20 @@ describe('HtmlWebpackPlugin', () => {
     }, [/<script type="module" src="index_bundle.js"><\/script>.+<body>/], null, done);
   });
 
+  it('should allow to inject scripts with a type="systemjs-module" attribute', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      plugins: [new HtmlWebpackPlugin({
+        scriptLoading: 'systemjs-module'
+      })]
+    }, [/<script type="systemjs-module" src="index_bundle.js"><\/script>.+<body>/], null, done);
+  });
+
   it('should allow to inject scripts with a defer="defer" attribute to the body', done => {
     testHtmlPlugin({
       mode: 'production',
diff --git a/typings.d.ts b/typings.d.ts
index f707c108..451a2bfd 100644
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -98,7 +98,7 @@ declare namespace HtmlWebpackPlugin {
      *
      * @default 'defer'
      */
-    scriptLoading?: "blocking" | "defer" | "module";
+    scriptLoading?: "blocking" | "defer" | "module" | "systemjs-module";
     /**
      * Inject meta tags
      */