experimental 4.18.0-beta.1, #147

Author: webdiscus

.prettierignore

@@ -1,4 +1,5 @@
 # Ignore all HTML files in test directory:
 test/cases/**/*.html
 test/cases/**/*.hbs
+test/cases/**/*.eta
 *.md

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 4.18.0-beta.1 (2025-02-03)
+
+- feat: revert improvement of the `sources[].filter()` function introduced in beta.0, it returns a boolean or void only
+- feat: remove the the `sources[].postprocess()` function, introduced in beta.0
+- feat: add the experimental `router` plugin option.
+
+## 4.18.0-beta.0 (2025-02-01)
+
+- feat: the loader option `loaderOptions.sources` in now available directly in plugin options.
+- feat: auto resolve source path in a.href and replaces it with output filename regards the publicPath
+- feat: improve the `sources[].filter()` function, it can now return a string to modify the original value
+- feat: add the `sources[].postprocess()` function, called after resolving output filenames\
+   **NOTE:** `postprocess` works only for `a.href` contained any `*.html` file
+- fix: does not resolve an attribute containing a specific link, e.g. `whatsapp://send?abid=1234567890&text=Hello`
+
 ## 4.17.0 (2025-01-29)
 
 - feat: pick up the `srcset` and `sizes` attributes for image preload, #149
@@ -61,7 +76,7 @@
 
 ## 4.12.1 (2025-01-12)
 
-- fix: incorrect output of preload tag if "crossorigin: true", #139
+- fix: incorrect output of preload tag if `crossorigin: true`, #139
 - fix: if `as=font` is used in preload and the `crossorigin` is not defined,
        it will be added automatically, because the `crossorigin` is mandatory for `font` type
 
@@ -110,7 +125,7 @@
 
 ## 4.10.4 (2024-12-18)
 
-fix: fail rebuild after changed css file if no html entry defined, #132
+- fix: fail rebuild after changed css file if no html entry defined, #132
 
 ## 4.10.3 (2024-12-13)
 
@@ -140,7 +155,7 @@ fix: fail rebuild after changed css file if no html entry defined, #132
 
 ## 4.9.0 (2024-12-07)
 
-- feat: using serve/watch, after a partial file is modified all entry point templates will be rebuilt, #127.\
+- feat: rebuilt all entry point templates by serve/watch, after a partial file is modified, #127.\
   **The problem:**
   Webpack doesn't know which partials are used in which templates, so Webpack can't rebuild the main template (entrypoint) where a partial has changed. 
 

README.md

@@ -64,7 +64,7 @@ Additionally, CSS extracted from styles imported in JS can be injected into HTML
 - Generates the [integrity](#option-integrity) attribute in the `link` and `script` tags.
 - Generates the [favicons](#favicons-bundler-plugin) of different sizes for various platforms.
 - You can create custom plugins using the provided [Plugin Hooks](#plugin-hooks-and-callbacks).
-- Over 600 [tests](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/test) for various use cases.
+- Over 700 [tests](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/test) for various use cases.
 
 See [full list of features](#features).
 
@@ -3275,7 +3275,7 @@ type Sources =
         parsedValue: Array<string>;
         attributes: { [attributeName: string]: string };
         resourcePath: string;
-      }) => boolean | undefined;
+      }) => boolean | void;
     }>;
 ```
 
@@ -3362,7 +3362,7 @@ Examples of using argument properties:
     if (attribute === 'src') return false;
     if (value.endsWith('.webp')) return false;
     if ('srcset' in attributes && attributes['srcset'] === '') return false;
-    if (resourcePath.indexOf('example')) return false;
+    if (resourcePath.includes('example')) return false;
     // otherwise return 'true' or nothing (undefined) to allow the processing
   },
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.17.0",
+  "version": "4.18.0-beta.1",
   "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/Common/Helpers.js

@@ -19,17 +19,23 @@ const pathToPosix = (value) => value.replace(/\\/g, '/');
 const isFunction = (value) => typeof value === 'function';
 
 /**
+ * Whether the request is a URL.
+ *
+ * Matches:
+ *  - https://example.com/img.png
+ *  - http://example.com/img.png
+ *  - ftp://example.com/img.png
+ *  - whatsapp://send?abid=1234567890&text=Hello
+ *  - something://example.com/img.png
+ *  - //img.png
+ *
+ * But not matches:
+ *  - /img.png
+ *
  * @param {string} request
  * @return {boolean}
  */
-const isUrl = (request) => {
-  return (
-    request.startsWith('//') ||
-    request.startsWith('https://') ||
-    request.startsWith('http://') ||
-    request.startsWith('ftp://')
-  );
-};
+const isUrl = (request) => /^(?:[a-z]+:)?\/\//.test(request);
 
 /**
  * Find a webpack plugin by instance name.
@@ -97,6 +103,22 @@ const addQueryParam = (request, name, value) => {
   return file + '?' + urlParams.toString();
 };
 
+/**
+ * Split an URL to two parts, keeping ? or # in the second part.
+ *
+ * @param {string} url
+ * @return {[string, string]}
+ */
+const splitUrl = (url) => {
+  const match = url.match(/[\?#]/);
+
+  if (!match) return [url, ''];
+
+  const index = match.index;
+
+  return [url.slice(0, index), url.slice(index)];
+};
+
 /**
  * Delete form the request a query parameter.
  *
@@ -150,6 +172,22 @@ const deepMerge = (a, b) => {
   return result;
 };
 
+/**
+ * Whether at least one regular expression in a giving array matches the value.
+ *
+ * @param {string} value
+ * @param {Array<RegExp>} expressions
+ * @return {boolean}
+ */
+const testRegExpArray = (value, expressions) => {
+  if (value == null) return false;
+
+  // if is an URL, get it w/o a query
+  const [file] = value.split(/[\?#]/, 1);
+
+  return expressions.some((regexp) => regexp.test(file));
+};
+
 /**
  * Returns an indent detected in the content.
  *
@@ -237,10 +275,12 @@ module.exports = {
   parseQuery: (request) => parseRequest(request).query,
   getQueryParam,
   addQueryParam,
+  splitUrl,
   deleteQueryParam,
   getFixedUrlWithParams,
   deepMerge,
   detectIndent,
+  testRegExpArray,
   outToConsole,
   parseVersion,
   compareVersions,

src/Common/HtmlParser.js

@@ -173,21 +173,30 @@ class HtmlParser {
         const attrValue = attrs[attrName];
         const attrData = attrsData[attrName];
         const parsedAttr = this.parseAttributeValue(attrName, attrValue, attrData);
-        let res = true;
+        let resolvedValue = true;
 
         if (filter) {
           const { parsedValue } = parsedAttr;
-          res =
-            filter({ tag, attribute: attrName, value: attrValue, parsedValue, attributes: attrs, resourcePath }) !==
-            false;
+          resolvedValue = filter({
+            tag,
+            attribute: attrName,
+            value: attrValue,
+            parsedValue,
+            attributes: attrs,
+            resourcePath,
+          });
         }
 
-        if (res === true) {
+        if (resolvedValue !== false) {
           if (parsedAttr.attrs) {
             parsedAttrs.push(...parsedAttr.attrs);
           } else {
             parsedAttrs.push(parsedAttr);
           }
+
+          if (typeof resolvedValue === 'string') {
+            parsedAttr.resolvedValue = resolvedValue;
+          }
         }
       }
 

src/Loader/Loader.js

@@ -4,6 +4,7 @@ const Render = require('./Modes/Render');
 class Loader {
   /** @type {Render|Compile} */
   compiler = null;
+  loaderOption = null;
 
   constructor() {}
 
@@ -16,17 +17,14 @@ class Loader {
    */
   init(loaderContext, { pluginCompiler, loaderOption, resolver, collection }) {
     const { hot } = loaderContext;
-    const { preprocessorMode, esModule, self: useSelf } = loaderOption.get();
 
+    this.loaderOption = loaderOption;
     this.compiler = this.factory({
-      preprocessor: loaderOption.getPreprocessorModule(),
-      preprocessorMode,
-      esModule,
-      useSelf,
-      hot,
       pluginCompiler,
-      collection,
+      loaderOption,
       resolver,
+      collection,
+      hot,
     });
   }
 
@@ -35,23 +33,24 @@ class Loader {
    *
    * Note: default mode is `render`
    *
+   * @param {Option} loaderOption The loader option instance.
    * @param {{}} preprocessor The preprocessor option.
-   * @param {string} preprocessorMode The loader mode: compile or render.
-   * @param {boolean} esModule
-   * @param {boolean} useSelf Whether the `self` option is true.
-   * @param {boolean} hot Whether the `hot` option of the `devServer` is enabled to page live reload.
    * @param {Compiler} pluginCompiler
-   * @param {Collection} collection
    * @param {Resolver} resolver
+   * @param {Collection} collection
+   * @param {boolean} hot Whether the `hot` option of the `devServer` is enabled to page live reload.
+   *
    * @return {Render|Compile}
    */
-  factory({ preprocessor, preprocessorMode, esModule, useSelf, hot, pluginCompiler, collection, resolver }) {
+  factory({ pluginCompiler, loaderOption, resolver, collection, hot }) {
+    const { preprocessorMode } = loaderOption.get();
+
     switch (preprocessorMode) {
       case 'compile':
-        return new Compile({ preprocessor, esModule, hot, pluginCompiler, collection, resolver });
+        return new Compile({ loaderOption, pluginCompiler, collection, resolver, hot });
       case 'render':
       default:
-        return new Render({ preprocessor, esModule, hot, pluginCompiler, collection, resolver });
+        return new Render({ loaderOption, pluginCompiler, collection, resolver, hot });
     }
   }
 

src/Loader/Modes/Compile.js

@@ -9,18 +9,14 @@ const { errorToHtml } = require('../Messages/Exeptions');
 class Compile extends PreprocessorModeAbstract {
   enclosingQuotes = `'`;
   isExport = false;
-  collection = null;
-  pluginCompiler = null;
 
   /**
    * @param {PreprocessorModeProperties} props
    */
   constructor(props) {
     super(props);
 
-    this.isExport = typeof props.preprocessor.export === 'function';
-    this.collection = props.collection;
-    this.pluginCompiler = props.pluginCompiler;
+    this.isExport = typeof this.preprocessor.export === 'function';
   }
 
   /**

src/Loader/Modes/PreprocessorModeAbstract.js

@@ -4,30 +4,41 @@ const { isUrl } = require('../../Common/Helpers');
 /**
  * @typedef {Object} PreprocessorModeProperties
  *
- * @property{{}} preprocessor
- * @property {boolean} esModule
- * @property {boolean} hot
+ * @property {Option} loaderOption The loader option instance.
+ * @property {Compiler} pluginCompiler
  * @property {Collection} collection
+ * @property {Resolver} resolver
+ * @property {boolean} hot
  */
 
 /**
  * Base Preprocessor Mode class with abstract methods.
  */
 class PreprocessorModeAbstract {
+  pluginCompiler = null;
+  loaderOption = null;
   preprocessor = null;
   collection = null;
   resolver = null;
+  exportCode = '';
 
   /**
-   * @param {{}} preprocessor
-   * @param {boolean} esModule
-   * @param {boolean} hot
+   * @param {Option} loaderOption The loader option instance.
    * @param {Collection} collection
+   * @param {Compiler} pluginCompiler
    * @param {Resolver} resolver
+   * @param {boolean} hot
    */
-  constructor({ preprocessor, esModule, hot, collection, resolver }) {
+  constructor({ loaderOption, pluginCompiler, collection, resolver, hot }) {
+    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;
+    this.pluginCompiler = pluginCompiler;
     this.collection = collection;
     this.resolver = resolver;
     this.hot = hot === true;
@@ -85,7 +96,15 @@ class PreprocessorModeAbstract {
     } else {
       resolvedFile = this.resolver.resolve(file, issuer);
 
-      if (isUrl(resolvedFile)) {
+      let isEntryFile = this.loaderOption.isEntry(resolvedFile);
+      let isRouteFile = this.loaderOption.isRoute(resolvedFile);
+      let isRequestUrl = isUrl(resolvedFile);
+
+      if (isRouteFile && !isRequestUrl) {
+        this.collection.saveInnerRoute(resolvedFile, issuer);
+      }
+
+      if (isEntryFile || isRouteFile || isRequestUrl) {
         return {
           resolvedFile,
           requireExpression: resolvedFile,

src/Loader/Modes/Render.js

@@ -7,17 +7,11 @@ const { errorToHtml } = require('../Messages/Exeptions');
  * Render into HTML and export as a JS module.
  */
 class Render extends PreprocessorModeAbstract {
-  collection = null;
-  pluginCompiler = null;
-
   /**
    * @param {PreprocessorModeProperties} props
    */
   constructor(props) {
     super(props);
-
-    this.collection = props.collection;
-    this.pluginCompiler = props.pluginCompiler;
   }
 
   /**