feat: if ?inline query is not specified, dataURL is a result of generator.dataUrl() function

Author: webdiscus

.github/workflows/test.yml

@@ -19,6 +19,7 @@ jobs:
         node-version: [18, 20, 22]
 
     runs-on: ${{ matrix.os }}
+    name: integration - Node ${{ matrix.node-version }} on ${{ matrix.os }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.19.0-beta.5
+
+- feat: if ?inline query is not specified, dataURL is a result of generator.dataUrl() function.
+  The encoding can be specified using a query value (`base64` or `escape`).
+
 ## 4.19.0-beta.4
 
 - feat: display a warning when used `embed` URL query for SVG files in JS or CSS

README.md

@@ -69,6 +69,9 @@ Additionally, CSS extracted from styles imported in JS can be injected into HTML
 
 See [full list of features](#features).
 
+> [!IMPORTANT]
+> If this plugin makes your work easier, you might like to star ⭐ it.
+
 ## HTML template as entry point
 
 <center>
@@ -179,13 +182,6 @@ See full list of all [plugin options](#toc-plugin-options).
 > [!TIP]
 > To resolve route URLs in `a.href` for navigation across multiple pages, you can enable the [router](#option-router) option.
 
----
-> 🦖 **Mozilla** already uses this plugin to build static HTML files for the [Mozilla AI GUIDE](https://github.com/mozilla/ai-guide) site.
-> 
-> The plugin has been actively developed for more than 2 years, and since 2023 it is open source.\
-> Please support this project by giving it a star ⭐.
----
-
 
 ## ❤️ Sponsors & Patrons
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.18.1",
+  "version": "4.19.0-beta.5",
   "description": "Generates complete single-page or multi-page website from source assets. Build-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",

src/Plugin/AssetCompiler.js

@@ -435,6 +435,16 @@ class AssetCompiler {
       // TODO: collect errors
     });
 
+    // TODO: avoid random index order
+    // compilation.hooks.beforeChunkIds.tap(pluginName, (chunks) => {
+    //   for (const chunk of chunks) {
+    //     if (chunk.name.startsWith('script')) {
+    //       // TODO: sort chinks by index and rename chunk.name, chunk.runtime according index
+    //       console.log(chunks);
+    //     }
+    //   }
+    // });
+
     // called after the succeedModule hook but right before the execution of a loader
     normalModuleHooks.loader.tap(pluginName, this.beforeLoader);
 
@@ -548,6 +558,7 @@ class AssetCompiler {
       return;
     }
 
+    // 2. Invalidate a JavaScript file loaded in an entry template.
     // 2. Invalidate a JavaScript file loaded in an entry template.
 
     if (actionType && isScript) {
@@ -742,11 +753,13 @@ class AssetCompiler {
         if (this.assetInline.isSvgFile(resource)) {
           svgOptions = this.pluginOption.getInlineSvgOptions(resource, createData);
 
+          //console.log('--- afterResolve: ', { issuer, resource, svgOptions });
+
           if (svgOptions?.warning) {
             outputWarning(svgOptions.warning);
           }
 
-          isInlineSvg = svgOptions != null;
+          isInlineSvg = svgOptions.inline;
           encoding = svgOptions?.encoding;
         }
 
@@ -1005,7 +1018,7 @@ class AssetCompiler {
     ].includes(type);
 
     const isSvgFile = this.assetInline.isSvgFile(resource);
-    const isInlineSvg = isSvgFile ? this.pluginOption.getInlineSvgOptions(resource, module) != null : false;
+    const isInlineSvg = isSvgFile && this.pluginOption.getInlineSvgOptions(resource, module).inline;
 
     //console.log('*** isInlineSvg: ', { resource, isSvgFile, isInlineSvg });
 
@@ -1072,11 +1085,7 @@ class AssetCompiler {
    *
    * @param {Object} module The Webpack module.
    */
-  afterBuildModule(module) {
-    // if (module.resource.includes('&js')) {
-    //   console.log('*** afterBuildModule: ', module);
-    // }
-  }
+  afterBuildModule(module) {}
 
   /**
    * @param {Array<Object>} result
@@ -1148,7 +1157,7 @@ class AssetCompiler {
         ? this.pluginOption.getInlineSvgOptions(resource, module)
         : null;
 
-      if (svgOptions !== null) {
+      if (svgOptions?.inline) {
         //console.log('*** renderManifest: ', { resource }, svgOptions);
         this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType, svgOptions);
       } else {

src/Plugin/AssetEntry.js

@@ -597,7 +597,15 @@ class AssetEntry {
    * @return {string} Return the unique entry name.
    */
   addToCompilation({ name, importFile, filenameTemplate, context, issuer }) {
-    name = this.#getUniqueEntryName(name, importFile);
+    //const issuerId = this.getByResource(issuer)?.id;
+
+    if (!name) {
+      name = path.parse(importFile).name;
+    }
+
+    let originalName = name;
+
+    name = this.#getUniqueEntryName(name);
 
     // skip duplicate entries
     if (this.#hasEntry(name, importFile)) {
@@ -624,6 +632,7 @@ class AssetEntry {
     const assetEntryOptions = {
       id: undefined,
       name,
+      originalName,
       filenameTemplate,
       filename: undefined,
       resource: importFile,
@@ -666,14 +675,9 @@ class AssetEntry {
 
   /**
    * @param {string|null} name The entry name.
-   * @param {string} file The source file.
    * @return {string } Return unique entry name.
    */
-  #getUniqueEntryName(name, file) {
-    if (!name) {
-      name = path.parse(file).name;
-    }
-
+  #getUniqueEntryName(name) {
     let uniqueName = name;
     let hasEntry = this.compilation.entries.has(name);
 
@@ -749,7 +753,10 @@ class AssetEntry {
     const { name, id } = assetEntryOptions;
 
     this.entriesByName.set(name, assetEntryOptions);
-    this.entriesById.set(id, assetEntryOptions);
+
+    if (id) {
+      this.entriesById.set(id, assetEntryOptions);
+    }
   }
 
   /**

src/Plugin/Option.js

@@ -651,9 +651,12 @@ class Option {
 
     /** @type {'base64' | false | undefined } webpackModuleEncoding */
     const webpackModuleEncoding = module?.generatorOptions?.dataUrl?.encoding;
+    const isDataUrlFunction = typeof module?.generatorOptions?.dataUrl === 'function';
 
     let result = {
-      encoding: this.svg.inline.encoding,
+      isDataUrlFunction,
+      encoding: null,
+      inline: true,
       embed: this.svg.inline.embed,
     };
 
@@ -683,7 +686,7 @@ class Option {
           break;
         // `?inline=false` - force disables inline
         case 'false':
-          result = null;
+          result.inline = false;
           break;
         // `?inline=embed` - force replaces <img> with <svg>
         case 'embed':
@@ -701,34 +704,23 @@ class Option {
           break;
       }
     } else if (this.options.svg.enabled !== true) {
-      result = null;
+      result.inline = false;
     }
 
-    if (result && result.encoding == null) {
+    if (!isDataUrlFunction && result.encoding == null) {
       // TODO: test this case
       result.encoding = 'base64';
     }
 
     if (isIssuerEntry && embed) {
-      result = { embed: true };
+      // embedded is always inlined, but in HTML only
+      result.embed = true;
+      result.inline = true;
     }
 
     // save detected option into module
     if (meta && !('inlineSvg' in meta)) {
       meta.inlineSvg = result;
-
-      // if (!this.svgOptionCallCounter) {
-      //   this.svgOptionCallCounter = 1;
-      // } else {
-      //   this.svgOptionCallCounter++;
-      // }
-
-      // console.log(
-      //   '*** getInlineSvgOptions: ',
-      //   { issuer, resource, isIssuerEntry, embed, svgOptionCallCounter: this.svgOptionCallCounter, result }
-      //
-      //   // module
-      // );
     }
 
     return result;

src/Plugin/Resolver.js

@@ -274,6 +274,7 @@ class Resolver {
     // if is used the filename like `./main.js`, then the resource is an absolute file
     // if is used the filename like `../js/main.js`, then the resource is null and the rawRequest is an absolute file
     const file = resource || rawRequest;
+
     if (this.pluginOption.js.test.test(file) && this.assetEntry.isEntryResource(issuer.resource)) {
       // occur after rename/delete of a js file when the entry module was already rebuilt
       Snapshot.addMissingFile(issuer.resource, file);