chore: 🤖 update

Author: tianyingchun

.github/ISSUE_TEMPLATE/bug_report.md

@@ -22,7 +22,7 @@ A clear and concise description of what you expected to happen.
 
 **Environment (please complete the following information):**
 
-- @hyperse/ts-node version:
+- @hyperse/html-webpack-plugin-loader version:
 - Nodejs version
 
 **Additional context**

.github/workflows/ci-integrity.yml

@@ -43,7 +43,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/release-or-version-pr.yml

@@ -19,10 +19,10 @@ jobs:
           # @link https://github.com/actions/checkout#fetch-all-history-for-all-tags-and-branches
           fetch-depth: 0
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: 📥 Install Dependencies
         run: yarn --frozen-lockfile

.vscode/launch.json

@@ -10,7 +10,7 @@
       "name": "Debug Test File",
       "runtimeExecutable": "npm",
       "runtimeArgs": ["run-script", "test-unit"],
-      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "skipFiles": ["<node_internals>/**"],
       "args": ["${relativeFile}"],
       "env": {}
     }

package.json

@@ -17,11 +17,10 @@
   "type": "module",
   "exports": {
     "./loader": {
-      "import": "./dist/loader/loader.js"
+      "import": "./dist/loader/htmlLoader.cjs"
     },
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
       "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
@@ -53,7 +52,6 @@
     }
   },
   "dependencies": {
-    "loader-utils": "^3.3.1",
     "parse5": "^7.3.0"
   },
   "devDependencies": {
@@ -64,12 +62,11 @@
     "@hyperse/eslint-config-hyperse": "^1.4.5",
     "@hyperse/ts-node": "^1.0.3",
     "@types/loader-runner": "^2.2.8",
-    "@types/loader-utils": "^2.0.6",
     "@types/node": "^24.0.1",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.28.0",
-    "execa": "^9.6.0",
+    "html-webpack-plugin": "^5.6.3",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.0",
     "loader-runner": "^4.3.0",

scripts/build.ts

@@ -28,7 +28,7 @@ async function buildAll() {
       external: externals,
       outExtension() {
         return {
-          js: `.js`,
+          js: `.cjs`,
         };
       },
     },

src/loader/htmlLoader.ts

@@ -1,30 +1,32 @@
-import { getOptions } from 'loader-utils';
 import type { LoaderContext } from 'webpack';
+import { parseTemplate } from '../parser/parseTemplate.js';
 
 // Define the loader options type
 interface LoaderOptions {
-  transform?: boolean;
-  // Add more option types as needed
+  title?: string;
+  favicon?: string;
+  headMetaTags?: string[];
+  headStyles?: string[];
+  headScripts?: string[];
+  headInlineScripts?: string[];
+  bodyScripts?: string[];
+  bodyInlineScripts?: string[];
 }
 
 export default function htmlLoader(
   this: LoaderContext<LoaderOptions>,
   source: string
 ): string {
   // Get and validate options
-  const options = getOptions(this) as LoaderOptions;
+  const options = this.getOptions;
 
-  // Get the resource path
+  // Skip .js files (unless it's explicitly enforced)
   if (!/\.html$/.test(this.resourcePath)) {
     return source;
   }
 
   // Example transformation
-  let transformedSource = source;
-  if (options.transform) {
-    // Add your transformation logic here
-    transformedSource = source.toUpperCase(); // Example transformation
-  }
+  const transformedSource = parseTemplate(source);
 
   // You can use this.emitFile to emit additional files
   // this.emitFile('output.txt', 'Some content');
@@ -33,5 +35,5 @@ export default function htmlLoader(
   // this.callback(null, transformedSource, sourceMap, meta);
 
   // Return the transformed source
-  return `module.exports.default = module.exports = ${JSON.stringify(transformedSource)}`;
+  return `export default ${JSON.stringify(transformedSource)}`;
 }

tests/fixtures/basic/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = 'common';

tests/fixtures/index.html

@@ -14,9 +14,6 @@
     <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">
-    <title></title>
-    <script></script>
-    <script>!function (e) { var t, n = 1, i = 1; !function (r, o) { var a = e.document, c = a.documentElement, u = navigator.userAgent.toLowerCase().indexOf("android") > -1; (i = e.devicePixelRatio || 1) > 3 && (i = 3), u && (i = 1), console.log("current devicePixelRatio:", i), c.setAttribute("data-dpr", i.toString()); var d, l = a.querySelector('meta[name="viewport"]'); function m() { var e = document.documentElement.clientWidth; t = e / o * (r / i) * i, a.documentElement.style.fontSize = String(t) + "px" } l || (n = 1 / i, (l = a.createElement("meta")).setAttribute("name", "viewport"), a.head.appendChild(l), l.setAttribute(["content", "width=device-width,user-scalable=no,initial-scale=", n, ",maximum-scale=", n, ",minimum-scale=", n].join(""))), e.addEventListener("resize", (function () { clearTimeout(d), d = setTimeout(m, 300) }), !1), e.addEventListener("onload", m, !1), m() }(100, 750), window.fabricViewport = { currRem: t, currDpr: i, currScale: n, dpiPX2px: function (e) { return parseFloat(e.toString()) / t * 100 + "px" }, px2DPIpx: function (e) { return parseFloat(e.toString()) / 100 * t + "px" }, px2rem: function (e) { return parseFloat(e.toString()) / 100 + "rem" } } }(window)</script>
 </head>
 
 <body>

tests/htmlLoader.test.ts

@@ -1,20 +1,19 @@
-// import fs from 'fs';
+import fs from 'fs';
 import { describe, expect, it } from 'vitest';
-// import { testLoader } from './testLoader.js';
-// import { getDirname } from './testUtils.js';
+import { getDirname, testLoader } from './testUtils.js';
 
 describe('htmlLoader', () => {
-  it('should return the correct html', () => {
-    // const result = testLoader({
-    //   resource: './test.txt',
-    //   loaders: [getDirname(import.meta.url, '../dist/loader/htmlLoader.cjs')],
-    //   context: {
-    //     loaderOptions: {
-    //       /* options */
-    //     },
-    //   },
-    //   readResource: fs.readFile.bind(fs),
-    // });
-    expect(true).toBe(true);
+  it('should return the correct html', async () => {
+    const result = await testLoader({
+      resource: getDirname(import.meta.url, './fixtures/index.html'),
+      loaders: [getDirname(import.meta.url, '../dist/loader/htmlLoader.cjs')],
+      context: {
+        loaderOptions: {
+          /* options */
+        },
+      },
+      readResource: fs.readFile.bind(fs),
+    });
+    expect(result).toBe(true);
   });
 });