ghtml 1.2.0 → 1.2.2

package/.eslintrc.json

@@ -1,5 +1,4 @@
 {
   "root": true,
-  "env": { "node": true },
   "extends": ["plugin:grules/all"]
 }

package/.github/workflows/benchmark.yml

@@ -0,0 +1,93 @@
+name: Benchmark Comparison
+
+permissions:
+  contents: read
+  pull-requests: write
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  benchmark-comparison:
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout PR code
+      - name: Checkout PR code
+        uses: actions/checkout@v4
+
+      # Setup Node.js
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      # Install dependencies
+      - name: Install dependencies
+        run: npm install
+
+      # Run benchmark on PR code
+      - name: Run benchmark on PR code
+        run: node bench/index.js
+        id: benchmark_pr
+
+      # Save PR benchmark results
+      - name: Save PR benchmark results
+        run: echo "PR_RESULTS=$(cat bench/results.json)" >> "$GITHUB_ENV"
+
+      # Prepare for main branch benchmark
+      - name: Backup PR src directory
+        run: mkdir _pr_branch && mv src _pr_branch/src
+
+      # Checkout main branch src directory
+      - name: Checkout main branch src directory
+        uses: actions/checkout@v4
+        with:
+          ref: "main"
+          path: "_main_branch"
+
+      # Replace PR src with main src
+      - name: Replace PR src with main src
+        run: |
+          rm -rf src
+          cp -R _main_branch/src src
+
+      # Run benchmark on main branch src with PR's benchmark tooling
+      - name: Run benchmark on main branch src
+        run: node bench/index.js
+        id: benchmark_main
+
+      # Save main benchmark results
+      - name: Save main benchmark results
+        run: echo "MAIN_RESULTS=$(cat bench/results.json)" >> "$GITHUB_ENV"
+
+      # Comment PR with benchmark results comparison
+      - name: Comment PR with benchmark results comparison
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const prResults = JSON.parse(Buffer.from(process.env.PR_RESULTS, 'base64').toString('utf8'));
+            const mainResults = JSON.parse(Buffer.from(process.env.MAIN_RESULTS, 'base64').toString('utf8'));
+
+            const commentBody = `
+              Benchmark Results Comparison (${context.sha}):
+
+              **PR Branch:**
+              \`\`\`json
+              ${JSON.stringify(prResults, null, 2)}
+              \`\`\`
+
+              **Main Branch:**
+              \`\`\`json
+              ${JSON.stringify(mainResults, null, 2)}
+              \`\`\`
+            `;
+
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: commentBody
+            });

package/.github/workflows/{ci.yml → npm-test.yml}

@@ -1,4 +1,4 @@
-name: CI
+name: npm-test
 
 on:
   push:
@@ -23,4 +23,4 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install
-      - run: npm run test
+      - run: npm test

package/README.md

@@ -61,10 +61,8 @@ const htmlString = html`
       ? html`
           <p>Data:</p>
           <ul>
-            ${Object.values(data).map(
-              ([key, val]) => `
-                ${key}: ${val}
-              `,
+            !${Object.values(data).map(
+              ([key, val]) => html`<li>${key}: ${val}</li>`,
             )}
           </ul>
         `

package/bench/index.js

@@ -0,0 +1,101 @@
+/* eslint-disable no-unused-expressions */
+import { html } from "../src/html.js";
+import { Bench } from "tinybench";
+import { writeFileSync } from "node:fs";
+import { Buffer } from "node:buffer";
+
+const bench = new Bench({ time: 500 });
+
+bench.add("Simple formatting", () => {
+  html`<div>Hello, world!</div>`;
+});
+
+const username = "User";
+bench.add("Using string variable", () => {
+  html`<p>${username}</p>`;
+});
+
+const value = null;
+const undef = undefined;
+bench.add("Handling null and undefined", () => {
+  html`<p>${value} and ${undef}</p>`;
+});
+
+const user = { id: 1, name: "John Doe" };
+bench.add("Multiple types of expressions", () => {
+  html`
+    ${undefined}
+    <div>User: <span>${user.name}</span></div>
+    <div>Id: <span>${user.id}</span></div>
+    ${null}
+  `;
+});
+
+const items = ["Item 1", "Item 2", "Item 3"];
+bench.add("Arrays and iteration", () => {
+  html`<ul>
+    ${items.map((item) => {
+      return html`<li>${item}</li>`;
+    })}
+  </ul>`;
+});
+
+const items2 = ["Item 1", undefined, "Item 2", null, 2000];
+bench.add("Arrays and iteration with multiple types", () => {
+  html`<ul>
+    ${items2.map((item) => {
+      return html`<li>${item}</li>`;
+    })}
+  </ul>`;
+});
+
+const loggedIn = true;
+bench.add("Complex/nested expressions", () => {
+  html`<nav>
+    ${loggedIn
+      ? html`<a href="/logout">Logout</a>`
+      : html`<a href="/login">Login</a>`}
+  </nav>`;
+});
+
+const largeString = Array.from({ length: 1000 }).join("Lorem ipsum ");
+bench.add("Large strings", () => {
+  html`<p>${largeString}</p>`;
+});
+
+bench.add("High iteration count", () => {
+  for (let i = 0; i < 1000; i++) {
+    html`<span>${i}</span>`;
+  }
+});
+
+const scriptContent =
+  "<script>console.log('This should not execute');</script>";
+bench.add("Escape HTML", () => {
+  html`<div>${scriptContent} ${scriptContent}</div>`;
+});
+
+// Render raw HTML
+const rawHTML = "<em>Italic</em> and <strong>bold</strong>";
+const markup = "<mark>Highlighted</mark>";
+bench.add("Unescaped expressions", () => {
+  html`
+    <div>!${rawHTML}</div>
+    <div>!${rawHTML}</div>
+    <div>!${markup}</div>
+    <div>!${markup}</div>
+    <div>!${rawHTML}</div>
+    <div>!${rawHTML}</div>
+  `;
+});
+
+await bench.warmup();
+await bench.run();
+
+const table = bench.table();
+console.table(table);
+
+writeFileSync(
+  "bench/results.json",
+  Buffer.from(JSON.stringify(table), "utf8").toString("base64"),
+);

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": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "main": "./src/index.js",
   "exports": {
@@ -20,7 +20,8 @@
   },
   "devDependencies": {
     "@fastify/pre-commit": "^2.1.0",
-    "grules": "^0.13.0"
+    "grules": "^0.15.0",
+    "tinybench": "^2.6.0"
   },
   "repository": {
     "type": "git",

package/src/html.js

@@ -20,12 +20,12 @@ const escapeFunction = (key) => {
  * @param {...any} expressions Expressions to interpolate.
  * @returns {string} The HTML string.
  */
-const html = (literals, ...expressions) => {
+const html = ({ raw: literals }, ...expressions) => {
   let accumulator = "";
   let index = 0;
 
-  while (index < expressions.length) {
-    let literal = literals.raw[index];
+  for (; index < expressions.length; ++index) {
+    let literal = literals[index];
     let expression =
       typeof expressions[index] === "string"
         ? expressions[index]
@@ -42,12 +42,9 @@ const html = (literals, ...expressions) => {
     }
 
     accumulator += literal + expression;
-    ++index;
   }
 
-  accumulator += literals.raw[index];
-
-  return accumulator;
+  return (accumulator += literals[index]);
 };
 
 /**
@@ -55,11 +52,11 @@ const html = (literals, ...expressions) => {
  * @param {...any} expressions Expressions to interpolate.
  * @yields {string} The HTML strings.
  */
-const htmlGenerator = function* (literals, ...expressions) {
+const htmlGenerator = function* ({ raw: literals }, ...expressions) {
   let index = 0;
 
-  while (index < expressions.length) {
-    let literal = literals.raw[index];
+  for (; index < expressions.length; ++index) {
+    let literal = literals[index];
     let expression;
 
     if (typeof expressions[index] === "string") {
@@ -100,7 +97,6 @@ const htmlGenerator = function* (literals, ...expressions) {
           }
         }
 
-        ++index;
         continue;
       }
 
@@ -116,12 +112,10 @@ const htmlGenerator = function* (literals, ...expressions) {
     if (literal.length || expression.length) {
       yield literal + expression;
     }
-
-    ++index;
   }
 
-  if (literals.raw[index].length) {
-    yield literals.raw[index];
+  if (literals[index].length) {
+    yield literals[index];
   }
 };
 

package/test/index.js

@@ -1,15 +1,14 @@
 import test from "node:test";
 import assert from "node:assert";
-import { html, htmlGenerator } from "../src/index.js";
+import { html, htmlGenerator } from "../src/html.js";
 
+const conditionTrue = true;
+const conditionFalse = false;
 const username = "Paul";
 const descriptionSafe = "This is a safe description.";
 const descriptionUnsafe =
   "<script>alert('This is an unsafe description.')</script>";
 const array1 = [1, 2, 3, 4, 5];
-const conditionTrue = true;
-const conditionFalse = false;
-const emptyString = "";
 
 const generatorExample = function* () {
   yield "<p>";
@@ -26,13 +25,17 @@ test("renders empty input", () => {
 });
 
 test("renders empty input", () => {
-  assert.strictEqual(html`${emptyString}`, "");
+  assert.strictEqual(html`${""}`, "");
 });
 
 test("renders normal input", () => {
   assert.strictEqual(html`Hey, ${username}!`, `Hey, ${username}!`);
 });
 
+test("renders undefined and null as empty string", () => {
+  assert.strictEqual(html`<p>${null}${undefined}</p>`, "<p></p>");
+});
+
 test("renders safe content", () => {
   assert.strictEqual(
     html`<p>${descriptionSafe}</p>`,
@@ -40,7 +43,7 @@ test("renders safe content", () => {
   );
 });
 
-test("escapes unsafe content", () => {
+test("renders unsafe content", () => {
   assert.strictEqual(
     html`<p>${descriptionUnsafe}</p>`,
     `<p>&lt;script&gt;alert(&apos;This is an unsafe description.&apos;)&lt;/script&gt;</p>`,
@@ -54,14 +57,14 @@ test("renders arrays", () => {
   );
 });
 
-test("bypass escaping", () => {
+test("bypasses escaping", () => {
   assert.strictEqual(
     html`<p>!${[descriptionSafe, descriptionUnsafe]}</p>`,
     "<p>This is a safe description.<script>alert('This is an unsafe description.')</script></p>",
   );
 });
 
-test("renders wrapped html calls", () => {
+test("renders nested html calls", () => {
   // prettier-ignore
   assert.strictEqual(
     html`<p>!${conditionTrue ? html`<strong>${descriptionUnsafe}</strong>` : ""}</p>`,
@@ -117,17 +120,20 @@ test("renders multiple html calls with different expression types", () => {
 });
 
 test("htmlGenerator renders safe content", () => {
-  const generator = htmlGenerator`<p>${descriptionSafe}!${descriptionSafe}G!${htmlGenerator`${array1}`}!${null}${255}</p>`;
-  assert.strictEqual(generator.next().value, "<p>This is a safe description.");
-  assert.strictEqual(generator.next().value, "This is a safe description.");
-  assert.strictEqual(generator.next().value, "G");
-  assert.strictEqual(generator.next().value, "12345");
-  assert.strictEqual(generator.next().value, "255");
-  assert.strictEqual(generator.next().value, "</p>");
-  assert.strictEqual(generator.next().done, true);
+  const generator = htmlGenerator`<p>${descriptionSafe}!${descriptionUnsafe}G!${htmlGenerator`${array1}`}!${null}${255}</p>`;
+  let accumulator = "";
+
+  for (const value of generator) {
+    accumulator += value;
+  }
+
+  assert.strictEqual(
+    accumulator,
+    "<p>This is a safe description.<script>alert('This is an unsafe description.')</script>G12345255</p>",
+  );
 });
 
-test("htmlGenerator escapes unsafe content", () => {
+test("htmlGenerator renders unsafe content", () => {
   const generator = htmlGenerator`<p>${descriptionUnsafe}${descriptionUnsafe}${htmlGenerator`${array1}`}${null}${255}</p>`;
   assert.strictEqual(
     generator.next().value,