feat: Added support type=systemjs-module via the scriptLoading op…

…tion (#1822)
jantimon · Dec 19, 2023 · 7effc30 · 7effc30
1 parent 318cd4d
commit 7effc30
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -98,7 +98,7 @@ declare namespace HtmlWebpackPlugin {
      *
      * @default 'defer'
      */
-    scriptLoading?: "blocking" | "defer" | "module";
+    scriptLoading?: "blocking" | "defer" | "module" | "systemjs-module";
     /**
      * Inject meta tags
      */