feat: 4.19.0-beta.0

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 4.19.0-beta.0
+
+### BREAKING CHANGES by inlining SVG only
+
+- Inline `<img src="icon.svg">`:
+  - OLD: replaces `<img>` with `<svg>` tag
+  - NEW: inlines SVG as escaped data URL
+- Encoding of data URL:
+  - OLD: defaults, escaped URL (`#%` chars only), e.g. `data:image/svg+xml,<svg>...</svg>`
+  - NEW: defaults, base64 encoded, e.g. `data:image/svg+xml;base64,iVBO` or full escaped URL, e.g. `data:image/svg+xml,%3Csvg%20` regards `generator.dataUrl.encoding` option
+
+## 4.18.2 release (2025-02-20)
+
+- fix: the output SVG should contain the changes made in generator.dataUrl()
+- docs: add information about preload priority to readme
+
 ## 4.18.0 release (2025-02-03)
 
 - chore: bump the version for release

README.md

@@ -2705,9 +2705,11 @@ The descriptions of the properties:
   - `sound.oga` as `audio/ogg`
   - `sound.weba` as `audio/webm`
   - etc.
-- `attributes` - an object with additional custom attributes like `crossorigin` `media` etc.,\
-  e.g. `attributes: { crossorigin: true }`, `attributes: { media: '(max-width: 900px)' }`.\
-  Defaults `{}`.
+- `attributes` - an object with additional custom attributes like `crossorigin` `media` etc. Defaults `{}`.\
+  For example:
+    - `attributes: { crossorigin: true }`
+    - `attributes: { media: '(max-width: 900px)' }`
+    - `attributes: { fetchpriority: 'high' }`
 
 > [!NOTE]
 > 
@@ -3009,6 +3011,39 @@ The generated HTML contains the preload tags exactly in the order of `preload` o
 </html>
 ```
 
+#### Preload priority
+
+The `fetchpriority` attribute helps optimize resource loading by prioritizing critical assets and deferring less important ones.
+
+**Available values:**
+
+- `auto` (default) – The browser determines the priority automatically.
+- `high` – The resource is fetched with high priority.
+- `low` – The resource is fetched with lower priority.
+
+Using `fetchpriority` is especially beneficial for improving **Core Web Vitals**, 
+particularly **Largest Contentful Paint (LCP)**, by ensuring essential resources load as quickly as possible.
+
+**Example:** Preloading an LCP image with high priority
+
+```js
+preload: [
+  {
+    test: /lcp-image\.webp/i,
+    attributes: {
+      as: 'image',
+      fetchpriority: 'high',
+    },
+  },
+],
+```
+
+**More info:**
+
+- [Fetch priority](https://web.dev/articles/fetch-priority)
+- [Optimize Largest Contentful Paint](https://web.dev/articles/optimize-lcp)
+
+
 #### [↑ back to contents](#contents)
 
 <a id="option-minify" name="option-minify"></a>

README.npm.md

@@ -0,0 +1,66 @@
+<div align="center">
+    <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><br>
+        <sub>All-in-one Web Bundler</sub><br>
+    </h1>
+</div>
+
+[![npm](https://img.shields.io/npm/v/html-bundler-webpack-plugin?logo=npm&color=brightgreen 'npm package')](https://www.npmjs.com/package/html-bundler-webpack-plugin 'download npm package')
+[![node](https://img.shields.io/node/v/html-bundler-webpack-plugin)](https://nodejs.org)
+[![node](https://img.shields.io/github/package-json/dependency-version/webdiscus/html-bundler-webpack-plugin/peer/webpack)](https://webpack.js.org)
+[![Test](https://github.com/webdiscus/html-bundler-webpack-plugin/actions/workflows/test.yml/badge.svg)](https://github.com/webdiscus/html-bundler-webpack-plugin/actions/workflows/test.yml)
+[![codecov](https://codecov.io/gh/webdiscus/html-bundler-webpack-plugin/branch/master/graph/badge.svg?token=Q6YMEN536M)](https://codecov.io/gh/webdiscus/html-bundler-webpack-plugin)
+[![node](https://img.shields.io/npm/dm/html-bundler-webpack-plugin)](https://www.npmjs.com/package/html-bundler-webpack-plugin)
+
+> This plugin is all you need to generate a complete single- or multi-page website from your source assets.
+
+The plugin automates the processing of source files such as JS/TS, SCSS, images and other assets referenced in an HTML or template file.
+This plugin will generate an HTML file containing all the necessary links to JS, CSS, images and other resources.
+
+## Why use the HTML Bundler Plugin?
+
+This plugin is a powerful alternative to [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) and a replacement for many [plugins and loaders](#list-of-plugins).
+
+The HTML Bundler Plugin works a bit differently than `html-webpack-plugin`. 
+It doesn't just inject JavaScript and CSS into an HTML.
+Instead, it resolves all the source files of the assets referenced directly in the template 
+and ensures the generated HTML contains the correct output URLs of resources after Webpack processes them.
+Additionally, CSS extracted from styles imported in JS can be injected into HTML as a `<link>` tag or as an inlined CSS.
+
+---
+
+<h3 align="center">
+📋 <a href="https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#contents">Table of Contents</a> 🚀<a href="https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#install">Install and Quick Start</a> 🖼 <a href="https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#usage-examples">Usage examples</a>
+</h3>
+
+---
+
+## 💡 Highlights
+
+- An [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-entry) is any HTML template. **Start from HTML**, not from JS.
+- **Automatically** processes templates found in the [entry directory](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-entry-path).
+- Build-in support for [template engines](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#template-engine): [Eta](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#using-template-eta), [EJS](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#using-template-ejs), [Handlebars](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#using-template-handlebars), [Nunjucks](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#using-template-nunjucks), [Pug](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#using-template-pug), [Tempura](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#using-template-tempura), [TwigJS](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#using-template-twig), [LiquidJS](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#using-template-liquidjs).
+- Build-in support for **Markdown** `*.md` files in templates, see [Markdown demo](https://stackblitz.com/edit/markdown-to-html-webpack?file=webpack.config.js) in browser.
+- **Source files** of [`script`](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-js) and [`style`](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-css) can be specified directly in HTML:
+  - `<link href="./style.scss" rel="stylesheet">`\
+  No longer need to define source style files in Webpack entry or import styles in JavaScript.
+  - `<script src="./app.ts" defer="defer"></script>`\
+  No longer need to define source JavaScript files in Webpack entry.
+- **Resolves** [source files](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#loader-option-sources) of assets in [attributes](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#loader-option-sources-default) such as `href` `src` `srcset` using **relative path** or **alias**:
+  - `<link href="../images/favicon.svg" type="image/svg" rel=icon />`
+  - `<img src="@images/pic.png" srcset="@images/pic400.png 1x, @images/pic800.png 2x" />`\
+  Source files will be resolved, processed and auto-replaced with correct URLs in the generated HTML.
+- **Resolves** [route URLs](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-router) in `a.href`, useful for navigation in multi-pages.
+- **Inlines** [JS](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#recipe-inline-js), [CSS](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#recipe-inline-css) and [Images](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#recipe-inline-image) into HTML. See [how to inline all resources](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#recipe-inline-all-assets-to-html) into single HTML file.
+- Supports the [HMR for CSS](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-css-hot) to update CSS in browser without a full reload.
+- Watches for changes in the [data file](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-entry-data) linked to the template in the plugin option.
+- Generates the [preload](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-preload) tags for fonts, images, video, scripts, styles.
+- Generates the [integrity](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#option-integrity) attribute in the `link` and `script` tags.
+- Generates the [favicons](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#favicons-bundler-plugin) of different sizes for various platforms.
+- You can create custom plugins using the provided [Plugin Hooks](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#plugin-hooks-and-callbacks).
+- Over 700 [tests](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/test) for various use cases.
+
+---
+
+📖 See [full documentation on GitHub](https://github.com/webdiscus/html-bundler-webpack-plugin).

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.18.0",
+  "version": "4.19.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",
@@ -62,6 +62,10 @@
     "test:unitQueryParser": "jest --detectOpenHandles --collectCoverage --config ./test/jest.config.js --runTestsByPath ./test/unit.queryParser.test.js",
     "test:verbose": "jest --detectOpenHandles --config ./test/jest.config.js --runTestsByPath ./test/verbose.test.js",
     "test:verbose-update": "jest --detectOpenHandles --updateSnapshot --config ./test/jest.config.js --runTestsByPath ./test/verbose.test.js",
+    "use:npmReadme": "mv 'README.md' 'README.git.md' && mv 'README.npm.md' 'README.md'",
+    "use:gitReadme": "mv 'README.md' 'README.npm.md' && mv 'README.git.md' 'README.md'",
+    "prepublishOnly": "run-s use:npmReadme",
+    "postpublish": "npm run use:gitReadme",
     "publish:public": "npm publish --access public",
     "publish:beta": "npm publish --tag beta"
   },
@@ -146,7 +150,7 @@
   },
   "dependencies": {
     "@types/html-minifier-terser": "^7.0.2",
-    "ansis": "3.9.0",
+    "ansis": "3.16.0",
     "enhanced-resolve": ">=5.7.0",
     "eta": "^3.5.0",
     "html-minifier-terser": "^7.2.0"
@@ -181,6 +185,7 @@
     "jest": "^29.7.0",
     "liquidjs": "^10.18.0",
     "markdown-it": "^14.1.0",
+    "mini-svg-data-uri": "^1.4.4",
     "mustache": "^4.2.0",
     "normalize.css": "^8.0.1",
     "nunjucks": "^3.2.4",

package.json

@@ -73,7 +73,21 @@ const getFileExtension = (resource, win = isWin) => {
 };
 
 /**
- * Get the query parameter the request.
+ * Whether the request contains the query parameter.
+ *
+ * @param {string} request
+ * @param {string} name
+ * @return {boolean}
+ */
+const hasQueryParam = (request, name) => {
+  const [, query] = request.split('?', 2);
+  const urlParams = new URLSearchParams(query);
+
+  return urlParams.get(name) != null;
+};
+
+/**
+ * Get the query parameter from the request.
  *
  * @param {string} request
  * @param {string} name
@@ -86,6 +100,19 @@ const getQueryParam = (request, name) => {
   return urlParams.get(name);
 };
 
+/**
+ * Get all query parameters from the request.
+ *
+ * @param {string} request
+ * @return {URLSearchParams|null}
+ */
+const getQueryParams = (request) => {
+  const queryString = request.split('?')[1];
+  if (!queryString) return null;
+
+  return new URLSearchParams(queryString);
+};
+
 /**
  * Add to the request a query parameter.
  *
@@ -164,10 +191,23 @@ const getFixedUrlWithParams = (request) => {
 const deepMerge = (a, b) => {
   const result = {};
   for (const key of new Set([...Object.keys(a), ...Object.keys(b)])) {
-    result[key] =
-      a[key]?.constructor === Object && b[key]?.constructor === Object
-        ? deepMerge(a[key], b[key])
-        : structuredClone(b[key] !== undefined ? b[key] : a[key]);
+    const aValue = a[key];
+    const bValue = b[key];
+
+    if (aValue?.constructor === Object && bValue?.constructor === Object) {
+      result[key] = deepMerge(aValue, bValue);
+    } else if (typeof bValue === 'function') {
+      // keep functions as-is
+      result[key] = bValue;
+    } else {
+      try {
+        result[key] = structuredClone(bValue !== undefined ? bValue : aValue);
+      } catch (err) {
+        console.warn(`Skipping cloning for key "${key}" due to:`, err);
+        // use original reference
+        result[key] = bValue !== undefined ? bValue : aValue;
+      }
+    }
   }
   return result;
 };
@@ -273,7 +313,9 @@ module.exports = {
   pathToPosix,
   getFileExtension,
   parseQuery: (request) => parseRequest(request).query,
+  hasQueryParam,
   getQueryParam,
+  getQueryParams,
   addQueryParam,
   splitUrl,
   deleteQueryParam,

src/Common/Helpers.js

@@ -33,8 +33,6 @@ class PreprocessorModeAbstract {
     const preprocessor = loaderOption.getPreprocessorModule();
     const { esModule } = loaderOption.get();
 
-    //console.log('collection: ', collection);
-
     this.exportCode = esModule ? 'export default ' : 'module.exports=';
     this.preprocessor = preprocessor || {};
     this.loaderOption = loaderOption;