fix: use custom esm loader only by serv/match mode

Author: webdiscus

README.npm.md

@@ -13,30 +13,16 @@
 [![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 creation of complete web pages by processing HTML templates with linked assets. 
+It resolves dependencies, compiles templates, and ensures that the output HTML contains correct output URLs.
 
-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.
+## Install
 
-## Why use the HTML Bundler Plugin?
+```bash
+npm install html-bundler-webpack-plugin --save-dev
+```
 
-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](https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/README.md#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
+## 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 or template**, 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).
@@ -57,8 +43,16 @@ Additionally, CSS extracted from styles imported in JS can be injected into HTML
 - 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.
 
----
+[GitHub](https://github.com/webdiscus/html-bundler-webpack-plugin)
+
+## Documentation
+
+- [Get Started](https://webdiscus.github.io/html-bundler-webpack-plugin/category/getting-started)
+- [Migrating from `html-webpack-plugin`](https://webdiscus.github.io/html-bundler-webpack-plugin/getting-started/migrating-from-html-webpack-plugin)
+- [Features](https://webdiscus.github.io/html-bundler-webpack-plugin/introduction#key-features)
+- [Options](https://webdiscus.github.io/html-bundler-webpack-plugin/category/options)
+- [Guides](https://webdiscus.github.io/html-bundler-webpack-plugin/guides)
+- [F.A.Q.](https://webdiscus.github.io/html-bundler-webpack-plugin/faq/import-url-in-css)
 
-📖 See [full documentation on GitHub](https://github.com/webdiscus/html-bundler-webpack-plugin).
+For full documentation, visit [HTML Bundler Docs](https://webdiscus.github.io/html-bundler-webpack-plugin).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.20.0-beta.6",
+  "version": "4.20.0-beta.7",
   "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",
@@ -25,10 +25,9 @@
     "integrity",
     "js",
     "javascript",
+    "style",
     "css",
-    "scss",
-    "style-loader",
-    "html-webpack-plugin"
+    "scss"
   ],
   "license": "ISC",
   "author": "webdiscus (https://github.com/webdiscus)",

src/Common/FileSystem/Module/nocacheLoader.js

@@ -4,6 +4,8 @@
 /**
  * Custom resolve hook.
  *
+ * Asynchronous version accepted by module.register().
+ *
  * Appends a unique cache-busting query parameter to module URLs when the parent
  * module was imported with the `nocache` flag.
  * This helps force reloads of changed ESM modules, useful for features like Live Reload or HMR.

src/Common/FileSystem/loadModule.js

@@ -1,11 +1,12 @@
 const path = require('path');
-const nativeEsmLoader = require('./Module/moduleLoader');
-const registerLoader = require('./Module/register');
-const { fileExistsAsync } = require('./Utils');
 const { cyan, yellow } = require('ansis');
+const { fileExistsAsync } = require('./Utils');
+const nativeEsmLoader = require('./Module/moduleLoader');
 
-// Register the custom module loader.
-registerLoader();
+// Register the custom module loader to read real data w/o cache from changed ESM files.
+// It is required for using loadModuleAsync() by serv/watch mode.
+// const registerLoader = require('./Module/register');
+// registerLoader();
 
 /**
  * Load a CommonJS or ESM module.

src/Loader/Option.js

@@ -3,6 +3,7 @@ const PluginService = require('../Plugin/PluginService');
 const { parseQuery, outToConsole } = require('../Common/Helpers');
 const { rootSourceDir, filterParentPaths } = require('../Common/FileUtils');
 const { loadModuleAsync } = require('../Common/FileSystem/loadModule');
+const registerLoader = require('../Common/FileSystem/Module/register');
 const { fileExistsAsync } = require('../Common/FileSystem/Utils');
 const { findRootIssuer } = require('../Common/CompilationHelpers');
 const { getDataFileNotFoundException, getDataFileException } = require('./Messages/Exeptions');
@@ -100,6 +101,12 @@ class Option {
     this.#preprocessorModule = preprocessorModule;
     this.#initPreprocessor(loaderContext);
 
+    if (this.isWatchMode()) {
+      // Register the custom module loader to read real data w/o cache from changed ESM files.
+      // It is required for using loadModuleAsync() by serv/watch mode.
+      registerLoader();
+    }
+
     const promises = [options.data, loaderContext.entryData, this.#queryData].map((file) => this.#loadData(file));
 
     return Promise.all(promises)

test/cases/option-entry-data-file-esm-js/expected/index.html

@@ -7,7 +7,7 @@
   <h1>Welcome to Awesome Corp</h1>
   <footer>
     <p>&copy; Awesome Corp - All rights reserved</p>
-    <p>Address: 123 Main Street, Springfield</p>
+    <p>Address: Wall Street 123, New York</p>
     <p>Phone: +1 234 567 890</p>
     <p>Email: admin@awesomecorp.com</p>
   </footer>

test/cases/option-entry-data-file-esm-js/src/company.js

@@ -1,10 +1,10 @@
-function getData() {
-  return {
-    name: 'Awesome Corp',
-    address: '123 Main Street, Springfield',
-    phone: '+1 234 567 890',
-    email: 'info@awesomecorp.com',
-  };
-}
+import address from './companyAddress.js';
 
-export default getData;
+const data = {
+  name: 'Awesome Corp',
+  address: `${address.street}, ${address.city}`,
+  phone: '+1 234 567 890',
+  email: 'info@awesomecorp.com',
+};
+
+export default data;

test/cases/option-entry-data-file-esm-js/src/companyAddress.js

@@ -0,0 +1,6 @@
+const address = {
+  street: 'Wall Street 123',
+  city: 'New York',
+};
+
+export default address;

test/cases/option-entry-data-file-esm-js/src/data.js

@@ -2,7 +2,7 @@ import company from './company.js';
 
 const data = {
   company: {
-    ...company(),
+    ...company,
     email: 'admin@awesomecorp.com', // override company.email
   },
 };

test/cases/option-entry-data-file-esm-mjs/expected/index.html

@@ -7,9 +7,9 @@
   <h1>Welcome to Awesome Corp</h1>
   <footer>
     <p>&copy; Awesome Corp - All rights reserved</p>
-    <p>Address: 123 Main Street, Springfield</p>
+    <p>Address: Wall Street 123, New York</p>
     <p>Phone: +1 234 567 890</p>
-    <p>Email: info@awesomecorp.com</p>
+    <p>Email: admin@awesomecorp.com</p>
   </footer>
 </body>
 </html>