ghtml 3.0.5 → 3.0.7

package/README.md

@@ -2,7 +2,7 @@
 
 ta**ghtml** lets you replace your template engine with fast JavaScript by leveraging the power of tagged templates.
 
-Works in the browser. No runtime dependencies. [~30x faster than React. ~10x faster than common-tags.](#benchmarks)
+Works in the browser. No runtime dependencies. [Faster than React & Co. ~3x faster than EJS and ~13x faster than common-tags.](#benchmarks)
 
 ![ghtml.gif](./ghtml.gif)
 
@@ -181,7 +181,11 @@ console.log(logo);
 
 ## Benchmarks
 
-Latest results [from Kita](https://github.com/kitajs/html/tree/cb7950c68489ff70dd0b0c130c9b70046c1543ea/benchmarks):
+Latest results from [Platformatic's SSR Showdown](https://blog.platformatic.dev/ssr-performance-showdown) (fastify-html is ghtml):
+
+![ghtml-perf.png](./ghtml-perf.png)
+
+Latest results from [KitaJS HTML](https://github.com/kitajs/html/tree/cb7950c68489ff70dd0b0c130c9b70046c1543ea/benchmarks):
 
 ```sh
 benchmark        time (avg)             (min … max)       p75       p99      p999

package/bin/src/utils.js

@@ -74,7 +74,7 @@ const updateFilePathsWithHashes = async (
   }
 };
 
-const generateHashesAndReplace = async ({
+export const generateHashesAndReplace = async ({
   roots,
   refs,
   prefix,
@@ -124,5 +124,3 @@ const generateHashesAndReplace = async ({
     skipPatterns,
   );
 };
-
-export { generateHashesAndReplace };

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": "3.0.5",
+  "version": "3.0.7",
   "type": "module",
   "bin": "./bin/src/index.js",
   "main": "./src/index.js",

package/src/html.d.ts

@@ -1,3 +1,3 @@
-export function html({ raw: literals }: TemplateStringsArray, ...expressions: any[]): string;
-export function htmlGenerator({ raw: literals }: TemplateStringsArray, ...expressions: any[]): Generator<string, void, void>;
-export function htmlAsyncGenerator({ raw: literals }: TemplateStringsArray, ...expressions: any[]): AsyncGenerator<string, void, void>;
+export function html(literals: TemplateStringsArray, ...expressions: any[]): string;
+export function htmlGenerator(literals: TemplateStringsArray, ...expressions: any[]): Generator<string, void, void>;
+export function htmlAsyncGenerator(literals: TemplateStringsArray, ...expressions: any[]): AsyncGenerator<string, void, void>;

package/src/html.js

@@ -1,57 +1,50 @@
 const escapeRegExp = /["&'<=>]/g;
 
 const escapeFunction = (string) => {
-  if (!string || !escapeRegExp.test(string)) {
-    return string;
-  }
-
   let escaped = "";
   let start = 0;
 
-  do {
+  while (escapeRegExp.test(string)) {
     const i = escapeRegExp.lastIndex - 1;
 
     switch (string.charCodeAt(i)) {
       case 34: // "
         escaped += string.slice(start, i) + "&#34;";
-        start = escapeRegExp.lastIndex;
-        continue;
+        break;
       case 38: // &
         escaped += string.slice(start, i) + "&#38;";
-        start = escapeRegExp.lastIndex;
-        continue;
+        break;
       case 39: // '
         escaped += string.slice(start, i) + "&#39;";
-        start = escapeRegExp.lastIndex;
-        continue;
+        break;
       case 60: // <
         escaped += string.slice(start, i) + "&#60;";
-        start = escapeRegExp.lastIndex;
-        continue;
+        break;
       case 61: // =
         escaped += string.slice(start, i) + "&#61;";
-        start = escapeRegExp.lastIndex;
-        continue;
+        break;
       case 62: // >
         escaped += string.slice(start, i) + "&#62;";
-        start = escapeRegExp.lastIndex;
-        continue;
+        break;
     }
-  } while (escapeRegExp.test(string));
+
+    start = escapeRegExp.lastIndex;
+  }
 
   return escaped + string.slice(start);
 };
 
 /**
+ * The `html` function is designed to tag template literals and automatically escape their expressions.
  * @param {TemplateStringsArray} literals Tagged template literals.
  * @param {...any} expressions Expressions to interpolate.
  * @returns {string} The processed HTML string.
  */
-export const html = ({ raw: literals }, ...expressions) => {
+export const html = (literals, ...expressions) => {
   let accumulator = "";
 
   for (let i = 0; i !== expressions.length; ++i) {
-    let literal = literals[i];
+    let literal = literals.raw[i];
     let string =
       typeof expressions[i] === "string"
         ? expressions[i]
@@ -64,25 +57,26 @@ export const html = ({ raw: literals }, ...expressions) => {
     if (literal && literal.charCodeAt(literal.length - 1) === 33) {
       literal = literal.slice(0, -1);
     } else {
-      string = escapeFunction(string);
+      string &&= escapeFunction(string);
     }
 
     accumulator += literal + string;
   }
 
-  return accumulator + literals[expressions.length];
+  return accumulator + literals.raw[expressions.length];
 };
 
 /**
+ * The `htmlGenerator` function acts as the generator version of the `html` function.
  * @param {TemplateStringsArray} literals Tagged template literals.
  * @param {...any} expressions Expressions to interpolate.
  * @yields Processed HTML strings.
  * @returns {Generator<string, void, void>} The HTML generator.
  */
-export const htmlGenerator = function* ({ raw: literals }, ...expressions) {
+export const htmlGenerator = function* (literals, ...expressions) {
   for (let i = 0; i !== expressions.length; ++i) {
     let expression = expressions[i];
-    let literal = literals[i];
+    let literal = literals.raw[i];
     let string;
 
     if (typeof expression === "string") {
@@ -122,11 +116,11 @@ export const htmlGenerator = function* ({ raw: literals }, ...expressions) {
                   string = `${expression}`;
                 }
 
-                if (!isRaw) {
-                  string = escapeFunction(string);
-                }
-
                 if (string) {
+                  if (!isRaw) {
+                    string = escapeFunction(string);
+                  }
+
                   yield string;
                 }
               }
@@ -137,11 +131,11 @@ export const htmlGenerator = function* ({ raw: literals }, ...expressions) {
             string = `${expression}`;
           }
 
-          if (!isRaw) {
-            string = escapeFunction(string);
-          }
-
           if (string) {
+            if (!isRaw) {
+              string = escapeFunction(string);
+            }
+
             yield string;
           }
         }
@@ -155,7 +149,7 @@ export const htmlGenerator = function* ({ raw: literals }, ...expressions) {
     if (literal && literal.charCodeAt(literal.length - 1) === 33) {
       literal = literal.slice(0, -1);
     } else {
-      string = escapeFunction(string);
+      string &&= escapeFunction(string);
     }
 
     if (literal || string) {
@@ -163,24 +157,22 @@ export const htmlGenerator = function* ({ raw: literals }, ...expressions) {
     }
   }
 
-  if (literals[expressions.length]) {
-    yield literals[expressions.length];
+  if (literals.raw[expressions.length]) {
+    yield literals.raw[expressions.length];
   }
 };
 
 /**
+ * This version of HTML generator should be preferred for asynchronous and streaming use cases.
  * @param {TemplateStringsArray} literals Tagged template literals.
  * @param {...any} expressions Expressions to interpolate.
  * @yields Processed HTML strings.
  * @returns {AsyncGenerator<string, void, void>} The HTML generator.
  */
-export const htmlAsyncGenerator = async function* (
-  { raw: literals },
-  ...expressions
-) {
+export const htmlAsyncGenerator = async function* (literals, ...expressions) {
   for (let i = 0; i !== expressions.length; ++i) {
     let expression = await expressions[i];
-    let literal = literals[i];
+    let literal = literals.raw[i];
     let string;
 
     if (typeof expression === "string") {
@@ -223,11 +215,11 @@ export const htmlAsyncGenerator = async function* (
                   string = `${expression}`;
                 }
 
-                if (!isRaw) {
-                  string = escapeFunction(string);
-                }
-
                 if (string) {
+                  if (!isRaw) {
+                    string = escapeFunction(string);
+                  }
+
                   yield string;
                 }
               }
@@ -238,11 +230,11 @@ export const htmlAsyncGenerator = async function* (
             string = `${expression}`;
           }
 
-          if (!isRaw) {
-            string = escapeFunction(string);
-          }
-
           if (string) {
+            if (!isRaw) {
+              string = escapeFunction(string);
+            }
+
             yield string;
           }
         }
@@ -256,7 +248,7 @@ export const htmlAsyncGenerator = async function* (
     if (literal && literal.charCodeAt(literal.length - 1) === 33) {
       literal = literal.slice(0, -1);
     } else {
-      string = escapeFunction(string);
+      string &&= escapeFunction(string);
     }
 
     if (literal || string) {
@@ -264,7 +256,7 @@ export const htmlAsyncGenerator = async function* (
     }
   }
 
-  if (literals[expressions.length]) {
-    yield literals[expressions.length];
+  if (literals.raw[expressions.length]) {
+    yield literals.raw[expressions.length];
   }
 };