add pug to benchmarks

benchmarks/pug/index.ts

@@ -0,0 +1,124 @@
+import pug from 'pug';
+
+const templates = {
+  purchase: pug.compile(`
+.purchase.purchase-card
+  .purchase-name= name
+  .purchase-price= price
+  .purchase-quantity= quantity
+`),
+
+  layout: pug.compile(`
+doctype html
+html(lang="en")
+  head
+    != head
+  body
+    != children
+`),
+
+  head: pug.compile(`
+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")
+`),
+
+  main: pug.compile(`
+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
+`),
+
+  userProfile: pug.compile(`
+section.user-profile
+  h2.user-profile.title User Profile: #{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
+`),
+
+  sidebar: pug.compile(`
+aside.sidebar
+  h2.purchase.title Recent Purchases
+  ul.purchase.list
+    li.purchase-preview Purchase number 1 - $0.00
+`),
+
+  pageContent: pug.compile(`
+.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.
+`),
+
+  footer: pug.compile(`
+footer.footer
+  p.footer-year © 2024 Sample
+  p.footer
+    a(href="/terms") Terms
+    a(href="/privacy") Privacy
+`)
+};
+
+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()}
+      ${templates.pageContent()}
+    `
+  });
+
+  return templates.layout({
+    head,
+    children: `
+      <div>
+        ${mainContent}
+        ${templates.footer()}
+      </div>
+    `
+  });
+}

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"
+  },
+  "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/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "dist",
+    "module": "Node16",
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kitajs/html",
+    "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/Pug.html

@@ -0,0 +1,81 @@
+<!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>
+    <div>
+      <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: Sample</h2>
+          <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>
+      </main>
+      <footer class="footer">
+        <p class="footer-year">© 2024 Sample</p>
+        <p class="footer"><a href="/terms">Terms</a><a href="/privacy">Privacy</a></p>
+      </footer>
+    </div>
+  </body>
+</html>