bench: add pug to benchmarks

benchmarks/pug/index.ts

@@ -0,0 +1,45 @@
+import { join } from 'path';
+import pug from 'pug';
+
+const templates = {
+  purchase: pug.compileFile(join(__dirname, 'templates/purchase.pug')),
+  layout: pug.compileFile(join(__dirname, 'templates/layout.pug')),
+  head: pug.compileFile(join(__dirname, 'templates/head.pug')),
+  main: pug.compileFile(join(__dirname, 'templates/main.pug')),
+  userProfile: pug.compileFile(join(__dirname, 'templates/user-profile.pug')),
+  sidebar: pug.compileFile(join(__dirname, 'templates/sidebar.pug')),
+  pageContent: pug.compileFile(join(__dirname, 'templates/page_content.pug')),
+  footer: pug.compileFile(join(__dirname, 'templates/footer.pug'))
+};
+
+export function RealWorldPage(name: string, purchases: any[]) {
+  const head = templates.head({ title: 'Real World Example' });
+  const purchasesHtml = purchases
+    .map((purchase) =>
+      templates.purchase({
+        name: purchase.name,
+        price: purchase.price,
+        quantity: purchase.quantity
+      })
+    )
+    .join('');
+
+  const mainContent = templates.main({
+    name,
+    children: `
+      <h2>Purchases</h2>
+      <div class="purchases">${purchasesHtml}</div>
+      ${templates.userProfile({ name })}
+      ${templates.sidebar({ purchases })}
+      ${templates.pageContent()}
+      ${templates.footer({ name })}
+    `
+  });
+
+  return templates.layout({
+    head,
+    children: `
+      ${mainContent}
+    `
+  });
+}

benchmarks/pug/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@kitajs/bench-html-pug",
+  "version": "1.0.0",
+  "private": true,
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc && cp -r templates dist"
+  },
+  "dependencies": {
+    "pug": "^3.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "@types/pug": "^2.0.10"
+  }
+}

benchmarks/pug/templates/footer.pug

@@ -0,0 +1,5 @@
+footer.footer
+  p.footer-year © #{new Date().getFullYear()} #{name}
+  p.footer
+    a(href="/terms") Terms
+    a(href="/privacy") Privacy 

benchmarks/pug/templates/head.pug

@@ -0,0 +1,18 @@
+div
+  title= title
+  meta(name="description" content="A description")
+  meta(name="keywords" content="some, keywords")
+  meta(name="author" content="Some Author")
+  meta(name="viewport" content="width=device-width, initial-scale=1.0")
+  link(rel="stylesheet" href="styles.css")
+  script(src="script.js")
+  meta(name="twitter:card" content="summary")
+  meta(name="twitter:site" content="@site")
+  meta(name="twitter:title" content="Title")
+  meta(name="twitter:description" content="A description")
+  meta(name="twitter:creator" content="@creator")
+  meta(name="twitter:image" content="image.jpg")
+  meta(content="Title")
+  meta(content="website")
+  script(src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js")
+  script(src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js") 

benchmarks/pug/templates/layout.pug

@@ -0,0 +1,6 @@
+doctype html
+html(lang="en")
+  head
+    != head
+  body
+    != children 

benchmarks/pug/templates/main.pug

@@ -0,0 +1,10 @@
+main.main
+  header.header
+    h1.header-title Hello #{name}
+    nav.header-nav
+      ul.header-ul
+        li.header-item
+          a(href="/") Home
+        li
+          a(href="/about") About
+  != children 

benchmarks/pug/templates/page_content.pug

@@ -0,0 +1,11 @@
+.page-content
+  h2.title.mb-4.h2 Welcome to our store
+  p.p.text.mb-0
+    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis magna
+    | id dolor ultricies, eget pretium ligula sodales. Cras sit amet turpis nec
+    | lacus blandit placerat. Sed vestibulum est sit amet enim ultrices rutrum.
+    | Vivamus in nulla vel nunc interdum vehicula.
+  p.p.text.mb-0
+    | Pellentesque efficitur tellus id velit vehicula laoreet. Proin et neque ac
+    | dolor hendrerit elementum. Fusce auctor metus non ligula tincidunt, id gravida
+    | odio sollicitudin. 

benchmarks/pug/templates/purchase.pug

@@ -0,0 +1,4 @@
+.purchase.purchase-card
+  .purchase-name= name
+  .purchase-price= price
+  .purchase-quantity= quantity 

benchmarks/pug/templates/sidebar.pug

@@ -0,0 +1,5 @@
+aside.sidebar
+  h2.purchase.title Recent Purchases
+  ul.purchase.list
+    each purchase, index in purchases.slice(0, 3)
+      li.purchase-preview #{purchase.name} - $#{purchase.price.toFixed(2)} 

benchmarks/pug/templates/user-profile.pug

@@ -0,0 +1,6 @@
+section.user-profile
+  h2.user-profile.title User Profile
+  p.user-profile.name Name: #{name}
+  p.user-profile.info Email: [email protected]
+  p.user-profile.info Address: 123 Main St, City, Country
+  p.user-profile.info Phone: 123-456-7890 

benchmarks/pug/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "module": "Node16",
+    "target": "ESNext",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["index.ts"],
+  "exclude": ["dist"]
+}

benchmarks/runner/lib/runners.js

@@ -2,6 +2,7 @@ import HonoRuntimeRenderers from '@kitajs/bench-html-honojsx';
 import JSXTERuntimeRenderers from '@kitajs/bench-html-jsxte';
 import KitaHtmlJSXRuntimeRenderers from '@kitajs/bench-html-kitajs';
 import PreactRuntimeRenderers from '@kitajs/bench-html-preact';
+import PugRenderers from '@kitajs/bench-html-pug';
 import ReactRuntimeRenderers from '@kitajs/bench-html-react';
 import ReactJSXRuntimeRenderers from '@kitajs/bench-html-reactjsx';
 import StringTemplateRenderers from '@kitajs/bench-html-templates';
@@ -105,6 +106,12 @@ export function HonoJsx(name, purchases) {
 HonoJsx.type = RunnerType.jsx;
 HonoJsx.baseline = false;
 
+export function Pug(name, purchases) {
+  return PugRenderers.RealWorldPage(name, purchases);
+}
+Pug.type = RunnerType.template;
+Pug.baseline = false;
+
 // NanoJSX was so slow that it was increasing the scale of the graph, making it hard to read
 // Nano.renderSSR();
 // /** @param {string} name */
@@ -125,6 +132,7 @@ export const RunnersFn = [
   CommonTags,
   Ghtml,
   HonoHtml,
-  HonoJsx
+  HonoJsx,
+  Pug
   // NanoJsx
 ].sort((a, b) => a.type - b.type);

benchmarks/runner/package.json

@@ -14,6 +14,7 @@
     "@kitajs/bench-html-jsxte": "workspace:*",
     "@kitajs/bench-html-kitajs": "workspace:*",
     "@kitajs/bench-html-preact": "workspace:*",
+    "@kitajs/bench-html-pug": "workspace:*",
     "@kitajs/bench-html-react": "workspace:*",
     "@kitajs/bench-html-reactjsx": "workspace:*",
     "@kitajs/bench-html-templates": "workspace:*",

benchmarks/runner/samples/CommonTags.html

@@ -68,7 +68,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a> <a href="/privacy">Privacy</a></p>
       </footer>
     </div>

benchmarks/runner/samples/Ghtml.html

@@ -77,7 +77,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
       </main>
 
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
 
         <p class="footer">
           <a href="/terms">Terms</a>

benchmarks/runner/samples/HonoHtml.html

@@ -77,7 +77,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
       </main>
 
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
 
         <p class="footer">
           <a href="/terms">Terms</a>

benchmarks/runner/samples/HonoJsx.html

@@ -73,7 +73,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy</a></p>
       </footer>
     </div>

benchmarks/runner/samples/Jsxte.html

@@ -73,7 +73,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy</a></p>
       </footer>
     </div>

benchmarks/runner/samples/KitaJs.html

@@ -73,7 +73,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy</a></p>
       </footer>
     </div>

benchmarks/runner/samples/Preact.html

@@ -73,7 +73,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy</a></p>
       </footer>
     </div>

benchmarks/runner/samples/Pug.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <div>
+      <title>Real World Example</title
+      ><meta name="description" content="A description" /><meta
+        name="keywords"
+        content="some, keywords"
+      /><meta name="author" content="Some Author" /><meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0"
+      /><link rel="stylesheet" href="styles.css" />
+      <script src="script.js"></script>
+      <meta name="twitter:card" content="summary" /><meta
+        name="twitter:site"
+        content="@site"
+      /><meta name="twitter:title" content="Title" /><meta
+        name="twitter:description"
+        content="A description"
+      /><meta name="twitter:creator" content="@creator" /><meta
+        name="twitter:image"
+        content="image.jpg"
+      /><meta content="Title" /><meta content="website" />
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dev/index.bundle.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@1/dist/index.bundle.js"></script>
+    </div>
+  </head>
+  <body>
+    <main class="main">
+      <header class="header">
+        <h1 class="header-title">Hello Sample</h1>
+        <nav class="header-nav">
+          <ul class="header-ul">
+            <li class="header-item"><a href="/">Home</a></li>
+            <li><a href="/about">About</a></li>
+          </ul>
+        </nav>
+      </header>
+      <h2>Purchases</h2>
+      <div class="purchases">
+        <div class="purchase purchase-card">
+          <div class="purchase-name">Purchase number 1</div>
+          <div class="purchase-price">0</div>
+          <div class="purchase-quantity">0</div>
+        </div>
+      </div>
+      <section class="user-profile">
+        <h2 class="user-profile title">User Profile</h2>
+        <p class="user-profile name">Name: Sample</p>
+        <p class="user-profile info">Email: [email protected]</p>
+        <p class="user-profile info">Address: 123 Main St, City, Country</p>
+        <p class="user-profile info">Phone: 123-456-7890</p>
+      </section>
+      <aside class="sidebar">
+        <h2 class="purchase title">Recent Purchases</h2>
+        <ul class="purchase list">
+          <li class="purchase-preview">Purchase number 1 - $0.00</li>
+        </ul>
+      </aside>
+      <div class="page-content">
+        <h2 class="title mb-4 h2">Welcome to our store</h2>
+        <p class="p text mb-0">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis magna
+          id dolor ultricies, eget pretium ligula sodales. Cras sit amet turpis nec lacus
+          blandit placerat. Sed vestibulum est sit amet enim ultrices rutrum. Vivamus in
+          nulla vel nunc interdum vehicula.
+        </p>
+        <p class="p text mb-0">
+          Pellentesque efficitur tellus id velit vehicula laoreet. Proin et neque ac dolor
+          hendrerit elementum. Fusce auctor metus non ligula tincidunt, id gravida odio
+          sollicitudin.
+        </p>
+      </div>
+      <footer class="footer">
+        <p class="footer-year">© 2025 Sample</p>
+        <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy </a></p>
+      </footer>
+    </main>
+  </body>
+</html>

benchmarks/runner/samples/React.html

@@ -73,7 +73,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy</a></p>
       </footer>
     </div>

benchmarks/runner/samples/ReactJsx.html

@@ -73,7 +73,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy</a></p>
       </footer>
     </div>

benchmarks/runner/samples/TypedHtml.html

@@ -69,7 +69,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a> <a href="/privacy">Privacy</a></p>
       </footer>
     </div>

benchmarks/runner/samples/vHtml.html

@@ -73,7 +73,7 @@ <h2 class="title mb-4 h2">Welcome to our store</h2>
         </div>
       </main>
       <footer class="footer">
-        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer-year">© 2025 Sample</p>
         <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy</a></p>
       </footer>
     </div>