fix: 🐛 fix issue of loaders

Author: tianyingchun

.changeset/fuzzy-feet-type.md

@@ -0,0 +1,5 @@
+---
+"@hyperse/html-webpack-plugin-loader": patch
+---
+
+fix issue of loaders

package.json

@@ -21,6 +21,7 @@
     },
     ".": {
       "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
       "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
@@ -61,15 +62,13 @@
     "@commitlint/config-conventional": "^19.8.1",
     "@hyperse/eslint-config-hyperse": "^1.4.5",
     "@hyperse/ts-node": "^1.0.3",
-    "@types/loader-runner": "^2.2.8",
     "@types/node": "^24.0.1",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.28.0",
     "html-webpack-plugin": "^5.6.3",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.0",
-    "loader-runner": "^4.3.0",
     "npm-run-all": "^4.1.5",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",

scripts/build.ts

@@ -13,7 +13,7 @@ async function buildAll() {
   const externals = ['webpack'];
   const entries: Record<string, Omit<Options, 'entry'> & { entry: string }> = {
     'src/index.ts': {
-      format: ['esm'],
+      format: ['esm', 'cjs'],
       entry: 'index',
       dts: true,
       clean: true,
@@ -35,7 +35,8 @@ async function buildAll() {
   };
 
   for (const [key, value] of Object.entries(entries)) {
-    const { format, entry, dts, clean, outExtension } = value;
+    const { format, entry, dts, clean, outExtension, external, noExternal } =
+      value;
     await build({
       splitting: false,
       treeshake: true,
@@ -46,6 +47,8 @@ async function buildAll() {
       dts,
       clean,
       outExtension,
+      external,
+      noExternal,
       format: format as Format[],
     });
   }

src/loader/htmlLoader.ts

@@ -3,37 +3,51 @@ import { parseTemplate } from '../parser/parseTemplate.js';
 
 // Define the loader options type
 interface LoaderOptions {
-  title?: string;
-  favicon?: string;
-  headMetaTags?: string[];
-  headStyles?: string[];
-  headScripts?: string[];
-  headInlineScripts?: string[];
-  bodyScripts?: string[];
-  bodyInlineScripts?: string[];
+  force?: boolean;
 }
 
 export default function htmlLoader(
   this: LoaderContext<LoaderOptions>,
   source: string
 ): string {
   // Get and validate options
-  const options = this.getOptions;
+  const options = this.getOptions();
+  const force = options.force || false;
 
-  // Skip .js files (unless it's explicitly enforced)
-  if (!/\.html$/.test(this.resourcePath)) {
+  const allLoadersButThisOne = this.loaders.filter(
+    (loader) => loader.normal !== module.exports
+  );
+
+  // This loader shouldn't kick in if there is any other loader (unless it's explicitly enforced)
+  if (allLoadersButThisOne.length > 0 && !force) {
     return source;
   }
 
-  // Example transformation
-  const transformedSource = parseTemplate(source);
+  // Allow only one html-webpack-plugin loader to allow loader options in the webpack config
+  const htmlWebpackPluginLoaders = this.loaders.filter(
+    (loader) => loader.normal === module.exports
+  );
 
-  // You can use this.emitFile to emit additional files
-  // this.emitFile('output.txt', 'Some content');
+  const lastHtmlWebpackPluginLoader =
+    htmlWebpackPluginLoaders[htmlWebpackPluginLoaders.length - 1];
+  if (this.loaders[this.loaderIndex] !== lastHtmlWebpackPluginLoader) {
+    return source;
+  }
 
-  // You can use this.callback for async operations
-  // this.callback(null, transformedSource, sourceMap, meta);
+  // Skip .js files (unless it's explicitly enforced)
+  if (!/\.html$/.test(this.resourcePath)) {
+    return source;
+  }
 
-  // Return the transformed source
-  return `export default ${JSON.stringify(transformedSource)}`;
+  // Convert the source into a string that can be executed by vm.Script
+  return [
+    'const { TemplateParser } = eval("require")(' +
+      JSON.stringify(require.resolve('../index.cjs')) +
+      ');',
+    'const parseTemplate = ' + parseTemplate.toString() + ';',
+    'const source = ' + JSON.stringify(source) + ';',
+    'module.exports = (function(templateParams) { ',
+    'return parseTemplate(source, templateParams || {});',
+    '});',
+  ].join('');
 }

tests/fixtures/index.html

@@ -14,6 +14,11 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="viewport"
         content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
+    <link rel="icon" href="<%= favicon %>">
+    <title>
+        <%= title %>
+    </title>
+
 </head>
 
 <body>

tests/htmlLoader.test.ts

@@ -1,11 +1,11 @@
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { existsSync, rmSync } from 'node:fs';
 import { join } from 'node:path';
-import { describe, it } from 'vitest';
 import { getDirname, testWebpackPlugin } from './testUtils.js';
 
 const fixtureCwd = getDirname(import.meta.url, './fixtures/basic');
 const fixtureDist = join(fixtureCwd, 'dist');
+const loader = getDirname(import.meta.url, '../dist/loader/htmlLoader.cjs');
 
 describe('htmlPluginBasic', () => {
   beforeEach(() => {
@@ -15,18 +15,27 @@ describe('htmlPluginBasic', () => {
   });
 
   it('should return the correct html', async () => {
-    const result = await testWebpackPlugin({
-      entry: join(fixtureCwd, './index.js'),
-      output: {
-        path: fixtureDist,
-        filename: 'index_bundle.js',
+    const result = await testWebpackPlugin(
+      {
+        entry: join(fixtureCwd, './index.js'),
+        output: {
+          path: fixtureDist,
+          filename: 'index_bundle.js',
+        },
+        plugins: [
+          new HtmlWebpackPlugin({
+            inject: 'body',
+            template: `${loader}!${join(fixtureCwd, '../index.html')}`,
+            templateParameters: {
+              title: 'default title',
+              favicon: 'default favicon',
+            },
+          }),
+        ],
       },
-      plugins: [
-        new HtmlWebpackPlugin({
-          template: join(fixtureCwd, '../index.html'),
-        }),
-      ],
-    });
-    expect(result).toBe(true);
+      fixtureDist
+    );
+    expect(result).toContain('<title>default title</title>');
+    expect(result).toContain('<link rel="icon" href="default favicon">');
   });
 });

tests/htmlPluginBasic.test.ts

@@ -1,40 +1,34 @@
-import { type RunLoaderOption, runLoaders } from 'loader-runner';
+import { readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import webpack from 'webpack';
+import type { Configuration } from 'webpack';
+import { webpack } from 'webpack';
 
 export const getDirname = (url: string, ...paths: string[]) => {
   return join(dirname(fileURLToPath(url)), ...paths);
 };
 
-export const testLoader = (options: RunLoaderOption) => {
-  return new Promise((resolve, reject) => {
-    runLoaders(options, (err, result) => {
-      if (err) {
-        reject(err);
-        return;
-      }
-      resolve(result);
-    });
-  });
-};
-
-export const testWebpackPlugin = (webpackConfig: webpack.Configuration) => {
-  return new Promise<webpack.Stats | undefined>((resolve, reject) => {
+export const testWebpackPlugin = (
+  webpackConfig: Configuration,
+  htmlDist: string
+) => {
+  return new Promise<string>((resolve, reject) => {
     webpack(
       {
         ...webpackConfig,
         mode: 'development',
         optimization: {
           minimize: false,
         },
+        stats: 'verbose',
       },
-      (err, stats) => {
+      (err, _stats) => {
         if (err) {
           reject(err);
           return;
         }
-        resolve(stats);
+        const html = readFileSync(join(htmlDist, 'index.html'), 'utf-8');
+        resolve(html);
       }
     );
   });

tests/testUtils.ts

@@ -865,15 +865,13 @@ __metadata:
     "@commitlint/config-conventional": "npm:^19.8.1"
     "@hyperse/eslint-config-hyperse": "npm:^1.4.5"
     "@hyperse/ts-node": "npm:^1.0.3"
-    "@types/loader-runner": "npm:^2.2.8"
     "@types/node": "npm:^24.0.1"
     commitizen: "npm:^4.3.1"
     cz-conventional-changelog: "npm:^3.3.0"
     eslint: "npm:^9.28.0"
     html-webpack-plugin: "npm:^5.6.3"
     husky: "npm:^9.1.7"
     lint-staged: "npm:^16.1.0"
-    loader-runner: "npm:^4.3.0"
     npm-run-all: "npm:^4.1.5"
     parse5: "npm:^7.3.0"
     tsup: "npm:^8.5.0"
@@ -1637,15 +1635,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/loader-runner@npm:^2.2.8":
-  version: 2.2.8
-  resolution: "@types/loader-runner@npm:2.2.8"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10/3a7d070bc36926620e752afe5bd49bc79b9c501f04935dc78e8aa0532618a350c7a773d29d8bfe939f5aae2551c322cb0e8ef65486ac78e3c3715b2f436d5765
-  languageName: node
-  linkType: hard
-
 "@types/mdast@npm:^4.0.0":
   version: 4.0.4
   resolution: "@types/mdast@npm:4.0.4"
@@ -5803,7 +5792,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-runner@npm:^4.2.0, loader-runner@npm:^4.3.0":
+"loader-runner@npm:^4.2.0":
   version: 4.3.0
   resolution: "loader-runner@npm:4.3.0"
   checksum: 10/555ae002869c1e8942a0efd29a99b50a0ce6c3296efea95caf48f00d7f6f7f659203ed6613688b6181aa81dc76de3e65ece43094c6dffef3127fe1a84d973cd3