fix: apply the encoding specified in the query to the data URL of an SVG for files imported in JS, #154

Author: webdiscus

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
-## 4.19.0-beta.0
+## 4.19.0-beta.3
+
+- fix: apply the encoding specified in the query to the data URL of an SVG for files imported in JS
+  ```js
+  import svg from './icons.svg?inline=base64'; // <= use exactly this encoding, independ how is specified anywhere global
+  ```
+
+## 4.19.0-beta.0 - 4.19.0-beta.2
 
 ### 🔥 BREAKING CHANGES by inlining SVG only
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.19.0-beta.2",
+  "version": "4.19.0-beta.3",
   "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",
@@ -150,7 +150,7 @@
   },
   "dependencies": {
     "@types/html-minifier-terser": "^7.0.2",
-    "ansis": "3.16.0",
+    "ansis": "4.0.0-beta.1",
     "enhanced-resolve": ">=5.7.0",
     "eta": "^3.5.0",
     "html-minifier-terser": "^7.2.0"

package.json

@@ -135,6 +135,26 @@ const isLinkScript = (attrs) => {
   return false;
 };
 
+/**
+ * Parse tag attributes in a tag string.
+ *
+ * The string must contains only tag string with attributes, e.g.:
+ * `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16px' height='16px'>`
+ *
+ * @param {string} string
+ * @returns {Object<key: string, value: string>} The parsed attributes as the object key:value.
+ */
+const parseTagAttributes = (string) => {
+  const matches = string.matchAll(/(\S+)=["'](.+?)["']/gm);
+  let attrs = {};
+
+  for (const [, key, val] of matches) {
+    attrs[key] = val;
+  }
+
+  return attrs;
+};
+
 class HtmlParser {
   /**
    * Parse values of tag attributes.
@@ -523,4 +543,4 @@ class HtmlParser {
   }
 }
 
-module.exports = { HtmlParser, comparePos };
+module.exports = { HtmlParser, comparePos, parseTagAttributes };

src/Common/HtmlParser.js

@@ -736,9 +736,10 @@ class AssetCompiler {
         let encoding = 'base64'; // default encoding for all resources
         let hasInlineQuery = getQueryParam(resource, 'inline') != null;
         let isInlineSvg = false;
+        let svgOptions;
 
         if (this.assetInline.isSvgFile(resource)) {
-          const svgOptions = this.pluginOption.getInlineSvgOptions(resource, createData);
+          svgOptions = this.pluginOption.getInlineSvgOptions(resource, createData);
 
           isInlineSvg = svgOptions != null;
           encoding = svgOptions?.encoding;
@@ -747,7 +748,7 @@ class AssetCompiler {
         // query `?inline`
         if (hasInlineQuery || isInlineSvg) {
           this.setAssetModuleTypeInline(createData);
-          this.setAssetModuleEncoding(createData, encoding);
+          this.setAssetModuleEncoding(createData, encoding, hasInlineQuery, svgOptions);
         }
       }
 
@@ -816,8 +817,10 @@ class AssetCompiler {
    *
    * @param {Object} module
    * @param {'base64' | false} encoding
+   * @param {boolean} hasInlineQuery
+   * @param {Object | null} svgOptions
    */
-  setAssetModuleEncoding(module, encoding) {
+  setAssetModuleEncoding(module, encoding, hasInlineQuery, svgOptions) {
     if (this.IS_WEBPACK_VERSION_LOWER_5_96_0) {
       // TODO: refactor into Exceptions
       throw new Error(`\nThe support for the \`?inline\` query for assets is available since Webpack >= 5.96.`);
@@ -832,15 +835,38 @@ class AssetCompiler {
     const publicPath = module.generator.publicPath;
     const outputPath = module.generator.outputPath;
     const emit = module.generator.emit;
+    const issuer = module.resourceResolveData?.context?.issuer;
+    const isIssuerScript = this.pluginOption.isScript(issuer || '');
     let dataUrlOptions;
 
     if (dataUrlOptionsType === 'function') {
       dataUrlOptions = moduleDataUrlOptions;
+      if (isIssuerScript) {
+        dataUrlOptions = (...args) => {
+          // extra processes SVG loaded in a JS file, because it will not be processed in renderManifest
+          let res = moduleDataUrlOptions(...args);
+          let normalized = this.assetInline.normalizeEncoding(res, svgOptions);
+
+          // TODO: research why is called double (perhaps the JS file (issuer) is called double)
+          // console.log(
+          //   ' ====> INJECTION: ',
+          //   { isIssuerScript, resource: module.resource, svgOptions, normalized },
+          //   res,
+          //   args
+          // );
+
+          return normalized.dataUrl;
+        };
+      } else {
+        dataUrlOptions = moduleDataUrlOptions;
+      }
     } else {
       dataUrlOptions = dataUrlOptionsType === 'object' ? { ...moduleDataUrlOptions } : {};
       dataUrlOptions.encoding = assetEncoding;
     }
 
+    //console.log('*** saveData: ', { resource: module.resource, encoding, dataUrlOptions }, '\n');
+
     module.generator = new AssetGenerator(moduleGraph, dataUrlOptions, filename, publicPath, outputPath, emit);
   }
 
@@ -1040,7 +1066,11 @@ class AssetCompiler {
    *
    * @param {Object} module The Webpack module.
    */
-  afterBuildModule(module) {}
+  afterBuildModule(module) {
+    // if (module.resource.includes('&js')) {
+    //   console.log('*** afterBuildModule: ', module);
+    // }
+  }
 
   /**
    * @param {Array<Object>} result
@@ -1107,34 +1137,38 @@ class AssetCompiler {
         moduleType = buildInfo.dataUrl === true ? ASSET_MODULE_TYPE_INLINE : ASSET_MODULE_TYPE_RESOURCE;
       }
 
-      if (this.assetInline.isSvgFile(resource) && this.pluginOption.isInlineSvg(resource)) {
-        this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType);
-      }
-
-      switch (moduleType) {
-        case JAVASCRIPT_MODULE_TYPE_AUTO:
-          const assetModule = this.createAssetModule(entry, chunk, module);
+      let svgOption = null;
 
-          if (assetModule == null) continue;
-          if (assetModule === false) return;
-
-          assetModules.add(assetModule);
-          break;
-        case ASSET_MODULE_TYPE_RESOURCE:
-          // resource required in the template or in the CSS via url()
-          this.assetResource.saveData(module);
-          break;
-        case ASSET_MODULE_TYPE_INLINE:
-          this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType);
-          break;
-        case ASSET_MODULE_TYPE_SOURCE:
-          // support the source type for SVG only
-          if (this.assetInline.isSvgFile(resource)) {
+      // TODO: refactor
+      if (this.assetInline.isSvgFile(resource) && this.pluginOption.isInlineSvg(resource)) {
+        svgOption = this.pluginOption.getInlineSvgOptions(resource, module);
+        this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType, svgOption);
+      } else {
+        switch (moduleType) {
+          case JAVASCRIPT_MODULE_TYPE_AUTO:
+            const assetModule = this.createAssetModule(entry, chunk, module);
+
+            if (assetModule == null) continue;
+            if (assetModule === false) return;
+
+            assetModules.add(assetModule);
+            break;
+          case ASSET_MODULE_TYPE_RESOURCE:
+            // resource required in the template or in the CSS via url()
+            this.assetResource.saveData(module);
+            break;
+          case ASSET_MODULE_TYPE_INLINE:
             this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType);
-          }
-          break;
-        default:
-        // do nothing
+            break;
+          case ASSET_MODULE_TYPE_SOURCE:
+            // support the source type for SVG only
+            if (this.assetInline.isSvgFile(resource)) {
+              this.assetInline.saveData(entry, chunk, module, codeGenerationResults, moduleType);
+            }
+            break;
+          default:
+          // do nothing
+        }
       }
     }