fix: issue if used multiple config and cache filesystem

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change log
 
+## 4.4.1 (2024-11-05)
+
+- fix: if used multiple config and cache `filesystem`, occurs the error 'PersistentCache is already registered'
+- test: add test for multiple config when used cache `filesystem`
+
 ## 4.4.0 (2024-11-04)
 
 - feat: add `context` loader option to resolve assets w/o leading `/` in a directory outer your project:

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <img height="200" src="https://raw.githubusercontent.com/webdiscus/html-bundler-webpack-plugin/master/images/plugin-logo.png">
+    <img height="200" src="images/plugin-logo.png">
     <h1 align="center">
         <a href="https://github.com/webdiscus/html-bundler-webpack-plugin">HTML Bundler Plugin for Webpack</a>
     </h1>
@@ -56,7 +56,7 @@ See [full list of features](#features).
 ## HTML template as entry point
 
 <center>
-  <img width="830" style="max-width: 100%;" src="https://raw.githubusercontent.com/webdiscus/html-bundler-webpack-plugin/master/images/assets-graph.png" alt="assets graph">
+  <img width="830" style="max-width: 100%;" src="images/assets-graph.png" alt="assets graph">
 </center>
 
 The **HTML Bundler** generates static HTML or [template function](#template-in-js) from [various templates](#template-engine) containing source files of scripts, styles, images, fonts and other resources, similar to how it works in [Vite](https://vitejs.dev/guide/#index-html-and-project-root).
@@ -190,7 +190,7 @@ The plugin resolves references in the HTML template and adds them to the Webpack
 Webpack will automatically process the source files, and the plugin replaces the references with their output filenames in the generated HTML.
 See [how the plugin works under the hood](#plugin-hooks-and-callbacks).
 
-<img width="830" style="max-width: 100%;" src="https://raw.githubusercontent.com/webdiscus/html-bundler-webpack-plugin/master/images/workflow.png">
+<img width="830" style="max-width: 100%;" src="images/workflow.png">
 
 ## ❓Question / Feature Request / Bug
 
@@ -911,7 +911,7 @@ Using hooks you can create your own plugin.
 
 _How the plugin works under the hood._
 <center>
-  <img width="765" style="max-width: 100%;" src="https://raw.githubusercontent.com/webdiscus/html-bundler-webpack-plugin/master/images/hooks.png" alt="HTMLBundlerPlugin hooks & callbacks">
+  <img width="765" style="max-width: 100%;" src="images/hooks.png" alt="HTMLBundlerPlugin hooks & callbacks">
 </center>
 
 ### How to use hooks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "HTML Bundler Plugin for Webpack renders HTML templates containing source files of scripts, styles, images. Supports template engines: Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",
@@ -17,6 +17,7 @@
     "eta",
     "pug",
     "pugjs",
+    "tempura",
     "twig",
     "twigjs",
     "integrity",

src/Plugin/AssetCompiler.js

@@ -22,7 +22,7 @@ const { baseUri, urlPathPrefix, cssLoaderName } = require('../Loader/Utils');
 const { findRootIssuer } = require('../Common/CompilationHelpers');
 const { isDir } = require('../Common/FileUtils');
 const { parseVersion, compareVersions } = require('../Common/Helpers');
-const createPersistentCache = require('./createPersistentCache');
+const createPersistentCache = require('./createPersistentCache')();
 
 const CssExtractModule = require('./Modules/CssExtractModule');
 const Option = require('./Option');

src/Plugin/createPersistentCache.js

@@ -1,35 +1,39 @@
 const makeSerializable = require('webpack/lib/util/makeSerializable');
 
-const classCache = new WeakMap();
+const createPersistentCache = () => {
+  const memorizedCache = new WeakMap();
+  let cacheIndex = 0;
 
-/* istanbul ignore next: test it manual using `cache.type` as `filesystem` after 2nd run the same project */
-const createPersistentCache = (instance) => {
-  if (classCache.has(instance)) {
-    return classCache.get(instance);
-  }
+  return (instance) => {
+    if (memorizedCache.has(instance)) {
+      return memorizedCache.get(instance);
+    }
 
-  class PersistentCache {
-    instance = instance;
+    class PersistentCache {
+      instance = instance;
 
-    static getData(instance = {}) {
-      return new PersistentCache(instance);
-    }
+      static getData(instance = {}) {
+        return new PersistentCache(instance);
+      }
 
-    constructor() {}
+      constructor() {}
 
-    serialize(context) {
-      this.instance.serialize(context);
-    }
+      serialize(context) {
+        this.instance.serialize(context);
+      }
 
-    deserialize(context) {
-      this.instance.deserialize(context);
+      deserialize(context) {
+        this.instance.deserialize(context);
+      }
     }
-  }
 
-  makeSerializable(PersistentCache, __filename, 'PersistentCache');
-  classCache.set(instance, PersistentCache);
+    // the cache index is needed for multiple configuration
+    makeSerializable(PersistentCache, __filename, `PersistentCache_${cacheIndex}`);
+    memorizedCache.set(instance, PersistentCache);
+    cacheIndex++;
 
-  return PersistentCache;
+    return PersistentCache;
+  };
 };
 
 module.exports = createPersistentCache;

test/cases/cache-filesystem-js/webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
 
   output: {
     path: path.join(__dirname, 'dist/'),
-    clean: true,
+    clean: false,
   },
 
   plugins: [

test/cases/cache-filesystem-multi-config/expected/about.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <head>
+    <title>About</title>
+  </head>
+  <body>
+    <h1>About</h1>
+  </body>
+</html>

test/cases/cache-filesystem-multi-config/expected/e7d4ced06af282ab4474.png

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Home</title>
+    <script src="index.js" defer></script>
+  </head>
+  <body>
+    <h1>Home</h1>
+    <img src="e7d4ced06af282ab4474.png" alt="iphone" />
+  </body>
+</html>