html-webpack-plugin 5.5.3 → 5.6.0

package/lib/cached-child-compiler.js

@@ -21,41 +21,40 @@
     });
  * ```
  */
+'use strict';
 
 // Import types
-/** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
-/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
-/** @typedef {{hash: string, entry: any, content: string }} ChildCompilationResultEntry */
-/** @typedef {import("./file-watcher-api").Snapshot} Snapshot */
+/** @typedef {import("webpack").Compiler} Compiler */
+/** @typedef {import("webpack").Compilation} Compilation */
+/** @typedef {import("webpack/lib/FileSystemInfo").Snapshot} Snapshot */
+/** @typedef {import("./child-compiler").ChildCompilationTemplateResult} ChildCompilationTemplateResult */
 /** @typedef {{fileDependencies: string[], contextDependencies: string[], missingDependencies: string[]}} FileDependencies */
 /** @typedef {{
   dependencies: FileDependencies,
-  compiledEntries: {[entryName: string]: ChildCompilationResultEntry}
+  compiledEntries: {[entryName: string]: ChildCompilationTemplateResult}
 } | {
   dependencies: FileDependencies,
   error: Error
 }} ChildCompilationResult */
-'use strict';
 
 const { HtmlWebpackChildCompiler } = require('./child-compiler');
-const fileWatcherApi = require('./file-watcher-api');
 
 /**
  * This plugin is a singleton for performance reasons.
  * To keep track if a plugin does already exist for the compiler they are cached
  * in this map
- * @type {WeakMap<WebpackCompiler, PersistentChildCompilerSingletonPlugin>}}
+ * @type {WeakMap<Compiler, PersistentChildCompilerSingletonPlugin>}}
  */
 const compilerMap = new WeakMap();
 
 class CachedChildCompilation {
   /**
-   * @param {WebpackCompiler} compiler
+   * @param {Compiler} compiler
    */
   constructor (compiler) {
     /**
      * @private
-     * @type {WebpackCompiler}
+     * @type {Compiler}
      */
     this.compiler = compiler;
     // Create a singleton instance for the compiler
@@ -97,7 +96,7 @@ class CachedChildCompilation {
    * @param {string} entry
    * @returns {
       | { mainCompilationHash: string, error: Error }
-      | { mainCompilationHash: string, compiledEntry: ChildCompilationResultEntry }
+      | { mainCompilationHash: string, compiledEntry: ChildCompilationTemplateResult }
     }
    */
   getCompilationEntryResult (entry) {
@@ -114,6 +113,61 @@ class CachedChildCompilation {
 }
 
 class PersistentChildCompilerSingletonPlugin {
+  /**
+   *
+   * @param {{fileDependencies: string[], contextDependencies: string[], missingDependencies: string[]}} fileDependencies
+   * @param {Compilation} mainCompilation
+   * @param {number} startTime
+   */
+  static createSnapshot (fileDependencies, mainCompilation, startTime) {
+    return new Promise((resolve, reject) => {
+      mainCompilation.fileSystemInfo.createSnapshot(
+        startTime,
+        fileDependencies.fileDependencies,
+        fileDependencies.contextDependencies,
+        fileDependencies.missingDependencies,
+        // @ts-ignore
+        null,
+        (err, snapshot) => {
+          if (err) {
+            return reject(err);
+          }
+          resolve(snapshot);
+        }
+      );
+    });
+  }
+
+  /**
+   * Returns true if the files inside this snapshot
+   * have not been changed
+   *
+   * @param {Snapshot} snapshot
+   * @param {Compilation} mainCompilation
+   * @returns {Promise<boolean | undefined>}
+   */
+  static isSnapshotValid (snapshot, mainCompilation) {
+    return new Promise((resolve, reject) => {
+      mainCompilation.fileSystemInfo.checkSnapshotValid(
+        snapshot,
+        (err, isValid) => {
+          if (err) {
+            reject(err);
+          }
+          resolve(isValid);
+        }
+      );
+    });
+  }
+
+  static watchFiles (mainCompilation, fileDependencies) {
+    Object.keys(fileDependencies).forEach((depencyTypes) => {
+      fileDependencies[depencyTypes].forEach(fileDependency => {
+        mainCompilation[depencyTypes].add(fileDependency);
+      });
+    });
+  }
+
   constructor () {
     /**
      * @private
@@ -158,7 +212,7 @@ class PersistentChildCompilerSingletonPlugin {
 
   /**
    * apply is called by the webpack main compiler during the start phase
-   * @param {WebpackCompiler} compiler
+   * @param {Compiler} compiler
    */
   apply (compiler) {
     /** @type Promise<ChildCompilationResult> */
@@ -174,8 +228,9 @@ class PersistentChildCompilerSingletonPlugin {
      * The main compilation hash which will only be updated
      * if the childCompiler changes
      */
+    /** @type {string} */
     let mainCompilationHashOfLastChildRecompile = '';
-    /** @typedef{Snapshot|undefined} */
+    /** @type {Snapshot | undefined} */
     let previousFileSystemSnapshot;
     let compilationStartTime = new Date().getTime();
 
@@ -216,7 +271,7 @@ class PersistentChildCompilerSingletonPlugin {
           // this might possibly cause bugs if files were changed inbetween
           // compilation start and snapshot creation
           compiledEntriesPromise.then((childCompilationResult) => {
-            return fileWatcherApi.createSnapshot(childCompilationResult.dependencies, mainCompilation, compilationStartTime);
+            return PersistentChildCompilerSingletonPlugin.createSnapshot(childCompilationResult.dependencies, mainCompilation, compilationStartTime);
           }).then((snapshot) => {
             previousFileSystemSnapshot = snapshot;
           });
@@ -234,6 +289,7 @@ class PersistentChildCompilerSingletonPlugin {
                   childCompilationResult.dependencies
                 );
               });
+            // @ts-ignore
             handleCompilationDonePromise.then(() => callback(null, chunks, modules), callback);
           }
         );
@@ -253,7 +309,7 @@ class PersistentChildCompilerSingletonPlugin {
               ([childCompilationResult, didRecompile]) => {
                 // Update hash and snapshot if childCompilation changed
                 if (didRecompile) {
-                  mainCompilationHashOfLastChildRecompile = mainCompilation.hash;
+                  mainCompilationHashOfLastChildRecompile = /** @type {string} */ (mainCompilation.hash);
                 }
                 this.compilationState = {
                   isCompiling: false,
@@ -309,8 +365,8 @@ class PersistentChildCompilerSingletonPlugin {
    * Verify that the cache is still valid
    * @private
    * @param {Snapshot | undefined} snapshot
-   * @param {WebpackCompilation} mainCompilation
-   * @returns {Promise<boolean>}
+   * @param {Compilation} mainCompilation
+   * @returns {Promise<boolean | undefined>}
    */
   isCacheValid (snapshot, mainCompilation) {
     if (!this.compilationState.isVerifyingCache) {
@@ -328,14 +384,15 @@ class PersistentChildCompilerSingletonPlugin {
     if (!snapshot) {
       return Promise.resolve(false);
     }
-    return fileWatcherApi.isSnapShotValid(snapshot, mainCompilation);
+
+    return PersistentChildCompilerSingletonPlugin.isSnapshotValid(snapshot, mainCompilation);
   }
 
   /**
    * Start to compile all templates
    *
    * @private
-   * @param {WebpackCompilation} mainCompilation
+   * @param {Compilation} mainCompilation
    * @param {string[]} entries
    * @returns {Promise<ChildCompilationResult>}
    */
@@ -366,11 +423,11 @@ class PersistentChildCompilerSingletonPlugin {
 
   /**
    * @private
-   * @param {WebpackCompilation} mainCompilation
+   * @param {Compilation} mainCompilation
    * @param {FileDependencies} files
    */
   watchFiles (mainCompilation, files) {
-    fileWatcherApi.watchFiles(mainCompilation, files);
+    PersistentChildCompilerSingletonPlugin.watchFiles(mainCompilation, files);
   }
 }
 

package/lib/child-compiler.js

@@ -1,7 +1,4 @@
 // @ts-check
-/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
-/** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
-/** @typedef {import("webpack/lib/Chunk.js")} WebpackChunk */
 'use strict';
 
 /**
@@ -12,7 +9,10 @@
  *
  */
 
-let instanceId = 0;
+/** @typedef {import("webpack").Chunk} Chunk */
+/** @typedef {import("webpack").sources.Source} Source */
+/** @typedef {{hash: string, entry: Chunk, content: string, assets: {[name: string]: { source: Source, info: import("webpack").AssetInfo }}}} ChildCompilationTemplateResult */
+
 /**
  * The HtmlWebpackChildCompiler is a helper to allow reusing one childCompiler
  * for multiple HtmlWebpackPlugin instances to improve the compilation performance.
@@ -23,24 +23,16 @@ class HtmlWebpackChildCompiler {
    * @param {string[]} templates
    */
   constructor (templates) {
-    /** Id for this ChildCompiler */
-    this.id = instanceId++;
     /**
      * @type {string[]} templateIds
      * The template array will allow us to keep track which input generated which output
      */
     this.templates = templates;
-    /**
-     * @type {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
-     */
+    /** @type {Promise<{[templatePath: string]: ChildCompilationTemplateResult}>} */
     this.compilationPromise; // eslint-disable-line
-    /**
-     * @type {number}
-     */
+    /** @type {number | undefined} */
     this.compilationStartedTimestamp; // eslint-disable-line
-    /**
-     * @type {number}
-     */
+    /** @type {number | undefined} */
     this.compilationEndedTimestamp; // eslint-disable-line
     /**
      * All file dependencies of the child compiler
@@ -51,6 +43,7 @@ class HtmlWebpackChildCompiler {
 
   /**
    * Returns true if the childCompiler is currently compiling
+   *
    * @returns {boolean}
    */
   isCompiling () {
@@ -59,6 +52,8 @@ class HtmlWebpackChildCompiler {
 
   /**
    * Returns true if the childCompiler is done compiling
+   *
+   * @returns {boolean}
    */
   didCompile () {
     return this.compilationEndedTimestamp !== undefined;
@@ -69,7 +64,7 @@ class HtmlWebpackChildCompiler {
    * once it is started no more templates can be added
    *
    * @param {import('webpack').Compilation} mainCompilation
-   * @returns {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
+   * @returns {Promise<{[templatePath: string]: ChildCompilationTemplateResult}>}
    */
   compileTemplates (mainCompilation) {
     const webpack = mainCompilation.compiler.webpack;
@@ -112,12 +107,12 @@ class HtmlWebpackChildCompiler {
     childCompiler.context = mainCompilation.compiler.context;
 
     // Generate output file names
-    const temporaryTemplateNames = this.templates.map((template, index) => `__child-HtmlWebpackPlugin_${index}-${this.id}`);
+    const temporaryTemplateNames = this.templates.map((template, index) => `__child-HtmlWebpackPlugin_${index}-${template}`);
 
     // Add all templates
     this.templates.forEach((template, index) => {
-      new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
-      new EntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
+      new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${template}`).apply(childCompiler);
+      new EntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${template}`).apply(childCompiler);
     });
 
     // The templates are compiled and executed by NodeJS - similar to server side rendering
@@ -125,12 +120,17 @@ class HtmlWebpackChildCompiler {
     // The following config enables relative URL support for the child compiler
     childCompiler.options.module = { ...childCompiler.options.module };
     childCompiler.options.module.parser = { ...childCompiler.options.module.parser };
-    childCompiler.options.module.parser.javascript = { ...childCompiler.options.module.parser.javascript,
-      url: 'relative' };
+    childCompiler.options.module.parser.javascript = {
+      ...childCompiler.options.module.parser.javascript,
+      url: 'relative'
+    };
 
     this.compilationStartedTimestamp = new Date().getTime();
+    /** @type {Promise<{[templatePath: string]: ChildCompilationTemplateResult}>} */
     this.compilationPromise = new Promise((resolve, reject) => {
+      /** @type {Source[]} */
       const extractedAssets = [];
+
       childCompiler.hooks.thisCompilation.tap('HtmlWebpackPlugin', (compilation) => {
         compilation.hooks.processAssets.tap(
           {
@@ -141,6 +141,7 @@ class HtmlWebpackChildCompiler {
             temporaryTemplateNames.forEach((temporaryTemplateName) => {
               if (assets[temporaryTemplateName]) {
                 extractedAssets.push(assets[temporaryTemplateName]);
+
                 compilation.deleteAsset(temporaryTemplateName);
               }
             });
@@ -150,13 +151,16 @@ class HtmlWebpackChildCompiler {
 
       childCompiler.runAsChild((err, entries, childCompilation) => {
         // Extract templates
+        // TODO fine a better way to store entries and results, to avoid duplicate chunks and assets
         const compiledTemplates = entries
           ? extractedAssets.map((asset) => asset.source())
           : [];
+
         // Extract file dependencies
         if (entries && childCompilation) {
           this.fileDependencies = { fileDependencies: Array.from(childCompilation.fileDependencies), contextDependencies: Array.from(childCompilation.contextDependencies), missingDependencies: Array.from(childCompilation.missingDependencies) };
         }
+
         // Reject the promise if the childCompilation contains error
         if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
           const errorDetails = childCompilation.errors.map(error => {
@@ -166,33 +170,50 @@ class HtmlWebpackChildCompiler {
             }
             return message;
           }).join('\n');
+
           reject(new Error('Child compilation failed:\n' + errorDetails));
+
           return;
         }
+
         // Reject if the error object contains errors
         if (err) {
           reject(err);
           return;
         }
+
         if (!childCompilation || !entries) {
           reject(new Error('Empty child compilation'));
           return;
         }
+
         /**
-         * @type {{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}}
+         * @type {{[templatePath: string]: ChildCompilationTemplateResult}}
          */
         const result = {};
+
+        /** @type {{[name: string]: { source: Source, info: import("webpack").AssetInfo }}} */
+        const assets = {};
+
+        for (const asset of childCompilation.getAssets()) {
+          assets[asset.name] = { source: asset.source, info: asset.info };
+        }
+
         compiledTemplates.forEach((templateSource, entryIndex) => {
           // The compiledTemplates are generated from the entries added in
           // the addTemplate function.
-          // Therefore the array index of this.templates should be the as entryIndex.
+          // Therefore, the array index of this.templates should be the as entryIndex.
           result[this.templates[entryIndex]] = {
-            content: templateSource,
+            // TODO, can we have Buffer here?
+            content: /** @type {string} */ (templateSource),
             hash: childCompilation.hash || 'XXXX',
-            entry: entries[entryIndex]
+            entry: entries[entryIndex],
+            assets
           };
         });
+
         this.compilationEndedTimestamp = new Date().getTime();
+
         resolve(result);
       });
     });

package/lib/chunksorter.js

@@ -1,25 +1,26 @@
 // @ts-check
-/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
 'use strict';
 
+/** @typedef {import("webpack").Compilation} Compilation */
+
 /**
- * @type {{[sortmode: string] : (entryPointNames: Array<string>, compilation, htmlWebpackPluginOptions) => Array<string> }}
+ * @type {{[sortmode: string] : (entryPointNames: Array<string>, compilation: Compilation, htmlWebpackPluginOptions: any) => Array<string> }}
  * This file contains different sort methods for the entry chunks names
  */
 module.exports = {};
 
 /**
  * Performs identity mapping (no-sort).
- * @param  {Array} chunks the chunks to sort
- * @return {Array} The sorted chunks
+ * @param  {Array<string>} chunks the chunks to sort
+ * @return {Array<string>} The sorted chunks
  */
 module.exports.none = chunks => chunks;
 
 /**
  * Sort manually by the chunks
- * @param  {string[]} entryPointNames the chunks to sort
- * @param  {WebpackCompilation} compilation the webpack compilation
- * @param  htmlWebpackPluginOptions the plugin options
+ * @param {string[]} entryPointNames the chunks to sort
+ * @param {Compilation} compilation the webpack compilation
+ * @param {any} htmlWebpackPluginOptions the plugin options
  * @return {string[]} The sorted chunks
  */
 module.exports.manual = (entryPointNames, compilation, htmlWebpackPluginOptions) => {

package/lib/hooks.js

@@ -1,12 +1,12 @@
 // @ts-check
-/** @typedef {import("../typings").Hooks} HtmlWebpackPluginHooks */
 'use strict';
 /**
  * This file provides access to all public htmlWebpackPlugin hooks
  */
 
-/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
+/** @typedef {import("webpack").Compilation} WebpackCompilation */
 /** @typedef {import("../index.js")} HtmlWebpackPlugin */
+/** @typedef {import("../typings").Hooks} HtmlWebpackPluginHooks */
 
 const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "5.5.3",
+  "version": "5.6.0",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
@@ -56,8 +56,17 @@
     "tapable": "^2.0.0"
   },
   "peerDependencies": {
+    "@rspack/core": "0.x || 1.x",
     "webpack": "^5.20.0"
   },
+  "peerDependenciesMeta": {
+    "@rspack/core": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
   "keywords": [
     "webpack",
     "plugin",

package/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
      */
@@ -143,7 +143,7 @@ declare namespace HtmlWebpackPlugin {
     templateParameters?:
       | false // Pass an empty object to the template function
       | ((
-          compilation: any,
+          compilation: Compilation,
           assets: {
             publicPath: string;
             js: Array<string>;
@@ -186,7 +186,7 @@ declare namespace HtmlWebpackPlugin {
    * Please keep in mind that the `templateParameter` options allows to change them
    */
   interface TemplateParameter {
-    compilation: any;
+    compilation: Compilation;
     htmlWebpackPlugin: {
       tags: {
         headTags: HtmlTagObject[];

package/lib/file-watcher-api.js

@@ -1,71 +0,0 @@
-// @ts-check
-/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
-/** @typedef {import("webpack/lib/FileSystemInfo").Snapshot} Snapshot */
-'use strict';
-
-/**
- *
- * @param {{fileDependencies: string[], contextDependencies: string[], missingDependencies: string[]}} fileDependencies
- * @param {WebpackCompilation} mainCompilation
- * @param {number} startTime
- */
-function createSnapshot (fileDependencies, mainCompilation, startTime) {
-  return new Promise((resolve, reject) => {
-    mainCompilation.fileSystemInfo.createSnapshot(
-      startTime,
-      fileDependencies.fileDependencies,
-      fileDependencies.contextDependencies,
-      fileDependencies.missingDependencies,
-      null,
-      (err, snapshot) => {
-        if (err) {
-          return reject(err);
-        }
-        resolve(snapshot);
-      }
-    );
-  });
-}
-
-/**
- * Returns true if the files inside this snapshot
- * have not been changed
- *
- * @param {Snapshot} snapshot
- * @param {WebpackCompilation} mainCompilation
- * @returns {Promise<boolean>}
- */
-function isSnapShotValid (snapshot, mainCompilation) {
-  return new Promise((resolve, reject) => {
-    mainCompilation.fileSystemInfo.checkSnapshotValid(
-      snapshot,
-      (err, isValid) => {
-        if (err) {
-          reject(err);
-        }
-        resolve(isValid);
-      }
-    );
-  });
-}
-
-/**
- * Ensure that the files keep watched for changes
- * and will trigger a recompile
- *
- * @param {WebpackCompilation} mainCompilation
- * @param {{fileDependencies: string[], contextDependencies: string[], missingDependencies: string[]}} fileDependencies
- */
-function watchFiles (mainCompilation, fileDependencies) {
-  Object.keys(fileDependencies).forEach((depencyTypes) => {
-    fileDependencies[depencyTypes].forEach(fileDependency => {
-      mainCompilation[depencyTypes].add(fileDependency);
-    });
-  });
-}
-
-module.exports = {
-  createSnapshot,
-  isSnapShotValid,
-  watchFiles
-};