feat: add support for the ?inline query by importing SVG file in JS as data URL

Author: webdiscus

CHANGELOG.md

@@ -1,7 +1,15 @@
 # Change log
 
-## 4.11.2 (2025-01-05)
+## 4.12.0-beta.0 (2025-01-06)
 
+- feat: add support for the `?inline` query by importing SVG file in JS as data URL
+  ```js
+  import file from './image.svg'; // import according the matched webpack config, defaults as output filename
+  
+  import file from './image.svg?inline'; // import as UTF-8 data URL
+  import file from './image.svg?inline=utf8'; // import as UTF-8 data URL
+  import file from './image.svg?inline=base64'; // import as base64-encoded data URL
+  ```
 - chore: update dependencies
 - chore: update license to current date
 - docs: add in readme the recipe "How to import SVG in JavaScript"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.11.2",
+  "version": "4.12.0-beta.0",
   "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

@@ -711,8 +711,8 @@ class AssetCompiler {
    */
   afterResolve(resolveData) {
     const { request, contextInfo, dependencyType, createData, _bundlerPluginMeta: meta } = resolveData;
-    const { resource } = createData;
-    const [file] = resource.split('?', 1);
+    const { resource, rawRequest } = createData;
+    const [file, query] = resource.split('?', 2);
     // note: the contextInfo.issuer is the filename w/o a query
     const { issuer } = contextInfo;
 
@@ -724,6 +724,51 @@ class AssetCompiler {
     if (meta.isLoaderImport || meta.isCSSStyleSheet || meta.isDependencyUrl || request.startsWith('data:')) return;
 
     if (issuer) {
+      // TODO: refactor into AssetInline
+      const isSvgFile = this.assetInline.isSvgFile(resource);
+      const isIssuerScript = this.pluginOption.isScript(issuer);
+      //const isInlineSvg = this.assetInline.isInlineSvg(resource, issuer);
+      const urlParams = new URLSearchParams(query);
+      const inlineValue = urlParams.get('inline');
+      const hasQueryInline = inlineValue != null;
+
+      if (isSvgFile && isIssuerScript && hasQueryInline) {
+        if (this.IS_WEBPACK_VERSION_LOWER_5_96_0) {
+          // TODO: refactor into Exceptions
+          throw new Error(`\nThe support for the \`?inline\` query for SVG is available since Webpack >= 5.96.`);
+        }
+
+        const availableValues = ['base64', 'utf8'];
+        if (inlineValue !== '' && !availableValues.includes(inlineValue)) {
+          // TODO: refactor into Exceptions
+          throw new Error(
+            `\nUnsupported \`?inline\` query value ${yellowBright(inlineValue)} in the request ${cyanBright(rawRequest)}\nAvailable values: ${yellowBright(availableValues.join(', '))} or ${yellowBright`undefined`}.`
+          );
+        }
+
+        /** @type {"base64" | false} encoding, false for `utf8`, see /webpack/lib/asset/AssetGenerator.js:encodeDataUri() */
+        const encoding = inlineValue === 'base64' ? 'base64' : false;
+
+        const moduleGraph = this.compilation.moduleGraph;
+        const dataUrlOptions = { encoding };
+        const filename = undefined;
+        const publicPath = undefined;
+        const outputPath = undefined;
+        const emit = false;
+
+        resolveData.createData.generator = new AssetGenerator(
+          moduleGraph,
+          dataUrlOptions,
+          filename,
+          publicPath,
+          outputPath,
+          emit
+        );
+
+        resolveData.createData.type = ASSET_MODULE_TYPE_INLINE;
+        resolveData.createData.parser = new AssetParser(true);
+      }
+
       const isIssuerStyle = this.pluginOption.isStyle(issuer);
       const parentModule = resolveData.dependencies[0]?._parentModule;
       const { isLoaderImport } = parentModule?.resourceResolveData?._bundlerPluginMeta || {};
@@ -852,11 +897,12 @@ class AssetCompiler {
       } else {
         // Webpack >= 5.96
         const moduleGraph = this.compilation.moduleGraph;
-        const dataUrl = undefined;
+        const dataUrlOptions = undefined;
         const publicPath = undefined;
         const outputPath = undefined;
         const emit = true;
-        createData.generator = new AssetGenerator(moduleGraph, dataUrl, filename, publicPath, outputPath, emit);
+
+        createData.generator = new AssetGenerator(moduleGraph, dataUrlOptions, filename, publicPath, outputPath, emit);
       }
 
       createData.parser = new AssetParser(false);

src/Plugin/AssetInline.js

@@ -129,7 +129,7 @@ class AssetInline {
    */
   isSvgFile(request) {
     const [file] = request.split('?', 1);
-    return file.endsWith('.svg');
+    return file.toLowerCase().endsWith('.svg');
   }
 
   /**

test/cases/js-import-image-svg-uri-utf8/expected/img/token.416b7e1d.svg

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <link href="style.css" rel="stylesheet">
+  <script src="main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Import SVG file in JavaScript!</h1>
+  <b>SVG as filename</b>
+  <div id="svg-filename"></div>
+
+  <b>SVG as base64-encoded data URL</b>
+  <div id="svg-base64-data-url"></div>
+
+  <b>SVG as UTF-8 data URL</b>
+  <div id="svg-utf8-data-url"></div>
+</body>
+</html>

test/cases/js-import-image-svg-uri-utf8/expected/index.html

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

test/cases/js-import-image-svg-uri-utf8/expected/main.js

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <link href="./style.css" rel="stylesheet">
+  <script src="./main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Import SVG file in JavaScript!</h1>
+  <b>SVG as filename</b>
+  <div id="svg-filename"></div>
+
+  <b>SVG as base64-encoded data URL</b>
+  <div id="svg-base64-data-url"></div>
+
+  <b>SVG as UTF-8 data URL</b>
+  <div id="svg-utf8-data-url"></div>
+</body>
+</html>

test/cases/js-import-image-svg-uri-utf8/expected/style.css

@@ -0,0 +1,25 @@
+import svgFilename from './token.svg'; // import as output filename
+import svgBase64DataUrl from './token.svg?inline=base64'; // import as base64-encoded data URL
+import svgUtf8DataUrl from './token.svg?inline'; // import as UTF-8 data URL
+import svgUtf8DataUrl2 from './token.svg?inline=utf8'; // import as UTF-8 data URL
+//import svgSource from './token.svg?raw'; // import as source content
+
+// filename
+let img1 = document.createElement('img');
+img1.setAttribute('src', svgFilename);
+document.getElementById('svg-filename').append(img1);
+
+// base64-encoded data URL
+let img2 = document.createElement('img');
+img2.setAttribute('src', svgBase64DataUrl);
+document.getElementById('svg-base64-data-url').append(img2);
+
+// // UTF-8 data URL
+let img3 = document.createElement('img');
+img3.setAttribute('src', svgUtf8DataUrl);
+document.getElementById('svg-utf8-data-url').append(img3);
+
+console.log('>> svgFilename: ', svgFilename);
+console.log('>> svgBase64DataUrl: ', svgBase64DataUrl);
+console.log('>> svgUtf8DataUrl: ', svgUtf8DataUrl);
+console.log('>> svgUtf8DataUrl2: ', svgUtf8DataUrl2);