ghtml 2.2.0 → 2.3.0

package/.eslintrc.json

@@ -1,4 +1,8 @@
 {
   "root": true,
-  "extends": ["plugin:grules/all"]
+  "extends": ["plugin:grules/all"],
+  "rules": {
+    "no-await-in-loop": "off",
+    "require-unicode-regexp": "off"
+  }
 }

package/README.md

@@ -2,6 +2,8 @@ ta**ghtml** lets you replace your template engine with fast JavaScript by levera
 
 Inspired by [html-template-tag](https://github.com/AntonioVdlC/html-template-tag).
 
+![ghtml.gif](./ghtml.gif)
+
 ## Installation
 
 ```sh
@@ -171,4 +173,4 @@ console.log(logo);
 
 ## Security
 
-Like [similar](https://github.com/mde/ejs/blob/main/SECURITY.md#out-of-scope-vulnerabilities) [tools](https://handlebarsjs.com/guide/#html-escaping), ghtml does not prevent all kinds of XSS attacks. It is the responsibility of developers to sanitize user inputs. Some inherently insecure uses include dynamically generating JavaScript, failing to quote HTML attribute values (especially when they contain expressions), and relying on unsanitized user-provided URLs.
+Like [similar](https://github.com/mde/ejs/blob/main/SECURITY.md#out-of-scope-vulnerabilities) [tools](https://handlebarsjs.com/guide/#html-escaping), ghtml does not prevent all kinds of XSS attacks. It is the responsibility of developers to sanitize user inputs. Some inherently insecure uses include dynamically generating JavaScript, failing to quote HTML attribute values (especially when they contain expressions), and relying on unsanitized user-provided URIs.

package/bench/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable no-unused-vars */
-/* eslint-disable no-unused-expressions */
 import { html } from "../src/index.js";
 import { Bench } from "tinybench";
 import { writeFileSync } from "node:fs";
@@ -8,7 +7,6 @@ import { Buffer } from "node:buffer";
 let result = "";
 const bench = new Bench({ time: 500 });
 
-// Simple cases
 bench.add("simple HTML formatting", () => {
   result = html`<div>Hello, world!</div>`;
 });
@@ -17,7 +15,6 @@ bench.add("null and undefined expressions", () => {
   result = html`<p>${null} and ${undefined}</p>`;
 });
 
-// String expressions
 const username = "User";
 bench.add("single string expression", () => {
   result = html`<p>${username}</p>`;
@@ -27,7 +24,6 @@ bench.add("multiple string expressions", () => {
   result = html`<p>${username} and ${username}</p>`;
 });
 
-// Array expressions
 const items1 = ["Item 1", undefined, "Item 2", null, 2000, 1500.5];
 bench.add("array expressions", () => {
   result = html`<ul>
@@ -46,7 +42,6 @@ bench.add("array expressions with escapable chars", () => {
   </ul>`;
 });
 
-// Object expressions
 const user = { id: 1, name: "John Doe" };
 bench.add("object expressions", () => {
   result = html`
@@ -55,7 +50,6 @@ bench.add("object expressions", () => {
   `;
 });
 
-// Mixed expressions
 bench.add("multiple types of expressions", () => {
   result = html`
     ${undefined}
@@ -70,17 +64,15 @@ bench.add("multiple types of expressions", () => {
   `;
 });
 
-// Large strings
 const largeString = Array.from({ length: 1000 }).join("Lorem ipsum ");
 bench.add("large strings", () => {
   result = html`<p>${largeString}${largeString}</p>`;
 });
 
-// Escaped and unescaped expressions
 const rawHTML = "<em>Italic</em> and <strong>bold</strong>";
 const markup = "<mark>Highlighted</mark>";
 bench.add("unescaped expressions", () => {
-  html`
+  result = html`
     <div>!${rawHTML}</div>
     <div>!${rawHTML}</div>
     <div>!${markup}</div>
@@ -91,7 +83,7 @@ bench.add("unescaped expressions", () => {
 });
 
 bench.add("escaped expressions", () => {
-  html`
+  result = html`
     <div>${rawHTML}</div>
     <div>${rawHTML}</div>
     <div>${markup}</div>
@@ -102,7 +94,7 @@ bench.add("escaped expressions", () => {
 });
 
 bench.add("mixed escaped and unescaped expressions", () => {
-  html`
+  result = html`
     <div>!${rawHTML}</div>
     <div>!${rawHTML}</div>
     <div>${markup}</div>

package/bin/README.md

@@ -1,4 +1,4 @@
-This executable lets you append unique hashes to assets referenced in your views to aggressively cache them while guaranteeing that clients receive the most recent versions.
+Append unique hashes to assets referenced in your views to aggressively cache them while guaranteeing that clients receive the most recent versions.
 
 ## Usage
 
@@ -27,7 +27,7 @@ Add the `ghtml` command to the build script:
 
 ```json
 "scripts": {
-  "build": "npx ghtml --roots=assets/ --refs=views/,routes/",
+  "build": "npx ghtml --roots=assets/ --refs=views/,routes/ --prefix=/p/assets/",
 },
 ```
 

package/bin/example/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "require-await": "off",
+    "n/no-missing-import": "off"
+  }
+}

package/bin/example/package.json

@@ -3,7 +3,7 @@
   "main": "./server.js",
   "scripts": {
     "start": "node server.js",
-    "build": "ghtml --roots=assets/ --refs=routes/"
+    "build": "ghtml --roots=assets/ --refs=routes/ --prefix=/p/assets/"
   },
   "dependencies": {
     "@fastify/static": "^7.0.1",

package/bin/src/index.js

@@ -1,41 +1,45 @@
 #!/usr/bin/env node
-
 import { generateHashesAndReplace } from "./utils.js";
 import process from "node:process";
 
 const parseArguments = (args) => {
   let roots = null;
   let refs = null;
+  let prefix = "/";
 
   for (const arg of args) {
     if (arg.startsWith("--roots=")) {
       roots = arg.split("=", 2)[1].split(",");
     } else if (arg.startsWith("--refs=")) {
       refs = arg.split("=", 2)[1].split(",");
+    } else if (arg.startsWith("--prefix=")) {
+      prefix = arg.split("=", 2)[1];
     }
   }
 
   if (!roots || !refs) {
     console.error(
-      'Usage: npx ghtml --roots="path/to/scan/assets1/,path/to/scan/assets2/" --refs="views/path/to/append/hashes1/,views/path/to/append/hashes2/"',
+      'Usage: npx ghtml --roots="path/to/scan/assets1/,path/to/scan/assets2/" --refs="views/path/to/append/hashes1/,views/path/to/append/hashes2/" [--prefix="/optional/prefix/"]',
     );
     process.exit(1);
   }
 
-  return { roots, refs };
+  return { roots, refs, prefix };
 };
 
 const main = async () => {
-  const { roots, refs } = parseArguments(process.argv.slice(2));
+  const { roots, refs, prefix } = parseArguments(process.argv.slice(2));
 
   try {
     console.warn(`Generating hashes and updating file paths...`);
     console.warn(`Scanning files in: ${roots}`);
     console.warn(`Updating files in: ${refs}`);
+    console.warn(`Using prefix: ${prefix}`);
 
     await generateHashesAndReplace({
       roots,
       refs,
+      prefix,
     });
 
     console.warn("Hash generation and file updates completed successfully.");

package/bin/src/utils.js

@@ -18,6 +18,7 @@ const generateFileHash = async (filePath) => {
 const updateFilePathsWithHashes = async (
   fileHashes,
   refs,
+  prefix,
   includeDotFiles,
   skipPatterns,
 ) => {
@@ -38,42 +39,35 @@ const updateFilePathsWithHashes = async (
 
     for await (const filePath of filesIterable) {
       let content = await readFile(filePath, "utf8");
-      let hasChanges = false;
-
-      for (const [originalPath, hash] of fileHashes) {
-        const pathIndex = content.indexOf(originalPath);
-        if (pathIndex !== -1) {
-          hasChanges = true;
-          const beforePath = content.slice(0, pathIndex);
-          const afterPath = content.slice(pathIndex + originalPath.length);
-
-          const queryStart = afterPath.indexOf("?");
-          if (queryStart === -1) {
-            content = `${beforePath}${originalPath}?hash=${hash}${afterPath}`;
-            continue;
-          }
-
-          const queryEnd = afterPath.slice(queryStart).search(/[#"'`]/u);
-          const queryString =
-            queryEnd !== -1
-              ? afterPath.slice(queryStart + 1, queryEnd)
-              : afterPath.slice(queryStart + 1);
-
-          const hashRegex = /(?<=(?:^|&))hash=[^&]*/u;
-          if (hashRegex.test(queryString)) {
-            const newQueryString = queryString.replace(
-              hashRegex,
-              `hash=${hash}`,
-            );
-            content = `${beforePath}${originalPath}?${newQueryString}${afterPath.slice(queryStart + queryString.length + 1)}`;
-            continue;
-          }
-
-          content = `${beforePath}${originalPath}?hash=${hash}&${afterPath.slice(queryStart + 1)}`;
-        }
+      let found = false;
+
+      for (const [path, hash] of fileHashes) {
+        const fullPath = prefix + path;
+        const escapedPath = fullPath.replace(
+          /[$()*+.?[\\\]^{|}]/g,
+          String.raw`\$&`,
+        );
+        const regex = new RegExp(
+          `(?<path>${escapedPath})(\\?(?<queryString>[^#"'\`]*))?`,
+          "g",
+        );
+
+        content = content.replace(
+          regex,
+          (match, p1, p2, p3, offset, string, groups) => {
+            found = true;
+            const { path, queryString } = groups;
+
+            return !queryString
+              ? `${path}?hash=${hash}`
+              : queryString.includes("hash=")
+                ? `${path}?${queryString.replace(/(?<hash>hash=)[\dA-Fa-f]*/u, `$1${hash}`)}`
+                : `${path}?hash=${hash}&${queryString}`;
+          },
+        );
       }
 
-      if (hasChanges) {
+      if (found) {
         await writeFile(filePath, content);
       }
     }
@@ -83,6 +77,7 @@ const updateFilePathsWithHashes = async (
 const generateHashesAndReplace = async ({
   roots,
   refs,
+  prefix,
   includeDotFiles = false,
   skipPatterns = ["**/node_modules/**"],
 }) => {
@@ -124,6 +119,7 @@ const generateHashesAndReplace = async ({
   await updateFilePathsWithHashes(
     fileHashes,
     refs,
+    prefix,
     includeDotFiles,
     skipPatterns,
   );

package/package.json

@@ -3,7 +3,7 @@
   "description": "Replace your template engine with fast JavaScript by leveraging the power of tagged templates.",
   "author": "Gürgün Dayıoğlu",
   "license": "MIT",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "bin": "./bin/src/index.js",
   "main": "./src/index.js",
@@ -26,7 +26,7 @@
   "devDependencies": {
     "@fastify/pre-commit": "^2.1.0",
     "c8": "^10.1.2",
-    "grules": "^0.17.3",
+    "grules": "^0.21.0",
     "tinybench": "^2.8.0"
   },
   "repository": {

package/src/html.js

@@ -33,7 +33,7 @@ const escapeFunction = (string) => {
     }
   }
 
-  escaped += string.slice(start, string.length);
+  escaped += string.slice(start);
 
   return escaped;
 };