benchmark: Added vhtml to benchmarks

.changeset/four-weeks-drum.md

@@ -0,0 +1,5 @@
+---
+'@kitajs/html': patch
+---
+
+Added vhtml to benchmarks

benchmarks/README.md

@@ -19,6 +19,66 @@ Also, feel free to contribute benchmarks for any library you're interested in by
 pull request (PR). If you need assistance or wish to suggest a library for benchmarking,
 don't hesitate to open an issue.
 
+## Benchmark Results
+
+```s
+cpu: 13th Gen Intel(R) Core(TM) i5-13600K
+runtime: node v20.11.0 (x64-linux)
+
+benchmark        time (avg)             (min … max)       p75       p99      p999
+--------------------------------------------------- -----------------------------
+• Many Components (31.4kb)
+--------------------------------------------------- -----------------------------
+KitaJS/Html     120 µs/iter    (71'126 ns … 755 µs)    118 µs    417 µs    685 µs
+Typed Html      714 µs/iter     (620 µs … 1'171 µs)    736 µs  1'070 µs  1'171 µs
+VHtml         2'142 µs/iter   (1'942 µs … 2'705 µs)  2'257 µs  2'647 µs  2'705 µs
+React         4'488 µs/iter   (4'242 µs … 5'025 µs)  4'612 µs  4'999 µs  5'025 µs
+Common Tags   2'747 µs/iter   (2'493 µs … 4'639 µs)  2'832 µs  3'356 µs  4'639 µs
+Ghtml           765 µs/iter     (677 µs … 1'371 µs)    774 µs  1'135 µs  1'371 µs
+
+summary for Many Components (31.4kb)
+  KitaJS/Html
+   5.96x faster than Typed Html
+   6.39x faster than Ghtml
+   17.87x faster than VHtml
+   22.93x faster than Common Tags
+   37.45x faster than React
+
+• Many Props (7.4kb)
+--------------------------------------------------- -----------------------------
+KitaJS/Html  17'856 ns/iter    (15'394 ns … 552 µs) 16'779 ns 40'678 ns    294 µs
+Typed Html   73'914 ns/iter    (64'472 ns … 587 µs) 69'672 ns    265 µs    480 µs
+VHtml        77'348 ns/iter    (69'187 ns … 678 µs) 73'025 ns    207 µs    491 µs
+React        67'160 ns/iter    (56'875 ns … 642 µs) 62'871 ns    231 µs    485 µs
+Common Tags  41'257 ns/iter    (36'495 ns … 620 µs) 39'047 ns 93'601 ns    415 µs
+Ghtml        41'301 ns/iter    (37'672 ns … 689 µs) 39'598 ns 80'722 ns    363 µs
+
+summary for Many Props (7.4kb)
+  KitaJS/Html
+   2.31x faster than Common Tags
+   2.31x faster than Ghtml
+   3.76x faster than React
+   4.14x faster than Typed Html
+   4.33x faster than VHtml
+
+• MdnHomepage (66.7Kb)
+--------------------------------------------------- -----------------------------
+KitaJS/Html     394 µs/iter     (296 µs … 1'720 µs)    367 µs  1'192 µs  1'581 µs
+Typed Html    2'326 µs/iter   (1'807 µs … 4'986 µs)  2'468 µs  4'637 µs  4'986 µs
+VHtml         2'411 µs/iter   (1'965 µs … 5'148 µs)  2'464 µs  5'009 µs  5'148 µs
+React         6'832 µs/iter  (6'031 µs … 10'336 µs)  7'170 µs 10'336 µs 10'336 µs
+Common Tags   2'932 µs/iter   (2'496 µs … 4'542 µs)  2'880 µs  4'452 µs  4'542 µs
+Ghtml           421 µs/iter     (325 µs … 3'123 µs)    384 µs  2'548 µs  2'897 µs
+
+summary for MdnHomepage (66.7Kb)
+  KitaJS/Html
+   1.07x faster than Ghtml
+   5.91x faster than Typed Html
+   6.12x faster than VHtml
+   7.45x faster than Common Tags
+   17.35x faster than React
+```
+
 ## About KitaJS/Html
 
 KitaJS/Html prioritizes performance while maintaining a user-friendly and intuitive API.
@@ -29,3 +89,15 @@ on maintaining developer productivity.
 The library adheres to the JSX standard for its API, shielding users from the complexities
 of its internal workings. This approach allows us to optimize the underlying
 implementation extensively, including function inlining, to achieve maximum performance.
+
+## Runtime Inconsistencies
+
+I tried multiple formatters and minifiers to ensure the html output of all runtimes is
+consistent, however vhtml and common-tags aren't consistent at all, with weird behaviors
+like adding spaces between components and rendering `0` as an empty string...
+
+As react is by far the JSX standard these days, **KitaJS/Html is only required to produce
+the same output as ReactDOMServer.renderToStaticMarkup**.
+
+To be sure we are emitting a similar output and none of the libraries are emitting broken
+HTML, a realWorldPage is rendered and stored at the [samples](./runner/samples) directory.

benchmarks/kitajs/renderers/real-world.tsx

@@ -1,16 +1,21 @@
-const purchases = Array.from({ length: 10000 }, (_, i) => ({
-  id: i + 1,
+const purchases = Array.from({ length: 1000 }, (_, i) => ({
   name: `Item ${i + 1}`,
-  price: Math.random() * 10,
-  quantity: Math.floor(Math.random() * 10) + 1
+  price: i * 2,
+  quantity: i * 5
 }));
 
-function Purchase({ id, name, price, quantity }) {
+function Purchase({ name, price, quantity }) {
   return (
     <div class="purchase purchase-card">
-      <div class="purchase-name">{name}</div>
-      <div class="purchase-price">{price}</div>
-      <div class="purchase-quantity">{quantity}</div>
+      <div class="purchase-name" safe>
+        {name}
+      </div>
+      <div class="purchase-price" safe>
+        {price}
+      </div>
+      <div class="purchase-quantity" safe>
+        {quantity}
+      </div>
     </div>
   );
 }
@@ -27,7 +32,7 @@ function Layout({ children, head }) {
 function Head({ title }) {
   return (
     <div>
-      <title>{title}</title>
+      <title safe>{title}</title>
       <meta name="description" content="A description" />
       <meta name="keywords" content="some, keywords" />
       <meta name="author" content="Some Author" />
@@ -51,7 +56,9 @@ function Head({ title }) {
 function Header({ name }) {
   return (
     <header class="header">
-      <h1 class="header-title">Hello {name}</h1>
+      <h1 class="header-title" safe>
+        Hello {name}
+      </h1>
       <nav class="header-nav">
         <ul class="header-ul">
           <li class="header-item">
@@ -69,7 +76,7 @@ function Header({ name }) {
 function Footer({ name }) {
   return (
     <footer class="footer">
-      <p class="footer-year">
+      <p class="footer-year" safe>
         © {new Date().getFullYear()} {name}
       </p>
 
@@ -95,7 +102,9 @@ function UserProfile({ name }) {
   return (
     <section class="user-profile">
       <h2 class="user-profile title">User Profile</h2>
-      <p class="user-profile name">Name: {name}</p>
+      <p class="user-profile name" safe>
+        Name: {name}
+      </p>
       <p class="user-profile info">Email: example@example.com</p>
       <p class="user-profile info">Address: 123 Main St, City, Country</p>
       <p class="user-profile info">Phone: 123-456-7890</p>
@@ -109,7 +118,7 @@ function Sidebar() {
       <h2 class="purchase title">Recent Purchases</h2>
       <ul class="purchase list">
         {purchases.slice(0, 3).map((purchase) => (
-          <li class="purchase-preview">
+          <li class="purchase-preview" safe>
             {purchase.name} - ${purchase.price.toFixed(2)}
           </li>
         ))}
@@ -146,7 +155,6 @@ export function RealWorldPage(name: string) {
         <div class="purchases">
           {purchases.map((purchase) => (
             <Purchase
-              id={purchase.id}
               name={purchase.name}
               price={purchase.price}
               quantity={purchase.quantity}

benchmarks/kitajs/tsconfig.json

@@ -9,6 +9,7 @@
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "jsxImportSource": "@kitajs/html",
+    "plugins": [{ "name": "@kitajs/ts-html-plugin" }],
     "declaration": true,
     "declarationMap": true
   },

benchmarks/react/index.ts

@@ -0,0 +1,3 @@
+export * from './renderers/many-components';
+export * from './renderers/many-props';
+export * from './renderers/real-world';

benchmarks/react/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@kitajs/bench-html-react",
+  "private": true,
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.64"
+  }
+}

benchmarks/react/renderers/many-components.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+export function ManyComponents(name: string) {
+  for (let i = 0; i < 10000; i++) {
+    <div>{name}</div>;
+  }
+
+  return <div>{name}</div>;
+}