From 387322a5653fb18dfc2e42a2fe079606188f15ff Mon Sep 17 00:00:00 2001 From: cjh <1784581164@qq.com> Date: Tue, 7 Jan 2025 21:56:41 +0800 Subject: [PATCH] bench: add pug to benchmarks --- benchmarks/pug/index.ts | 45 ++ benchmarks/pug/package.json | 18 + benchmarks/pug/templates/footer.pug | 5 + benchmarks/pug/templates/head.pug | 18 + benchmarks/pug/templates/layout.pug | 6 + benchmarks/pug/templates/main.pug | 10 + benchmarks/pug/templates/page_content.pug | 11 + benchmarks/pug/templates/purchase.pug | 4 + benchmarks/pug/templates/sidebar.pug | 5 + benchmarks/pug/templates/user-profile.pug | 6 + benchmarks/pug/tsconfig.json | 13 + benchmarks/runner/lib/runners.js | 10 +- benchmarks/runner/package.json | 1 + benchmarks/runner/samples/CommonTags.html | 2 +- benchmarks/runner/samples/Ghtml.html | 2 +- benchmarks/runner/samples/HonoHtml.html | 2 +- benchmarks/runner/samples/HonoJsx.html | 2 +- benchmarks/runner/samples/Jsxte.html | 2 +- benchmarks/runner/samples/KitaJs.html | 2 +- benchmarks/runner/samples/Preact.html | 2 +- benchmarks/runner/samples/Pug.html | 80 +++ benchmarks/runner/samples/React.html | 2 +- benchmarks/runner/samples/ReactJsx.html | 2 +- benchmarks/runner/samples/TypedHtml.html | 2 +- benchmarks/runner/samples/vHtml.html | 2 +- pnpm-lock.yaml | 627 ++++++++++++++++++++++ 26 files changed, 869 insertions(+), 12 deletions(-) create mode 100644 benchmarks/pug/index.ts create mode 100644 benchmarks/pug/package.json create mode 100644 benchmarks/pug/templates/footer.pug create mode 100644 benchmarks/pug/templates/head.pug create mode 100644 benchmarks/pug/templates/layout.pug create mode 100644 benchmarks/pug/templates/main.pug create mode 100644 benchmarks/pug/templates/page_content.pug create mode 100644 benchmarks/pug/templates/purchase.pug create mode 100644 benchmarks/pug/templates/sidebar.pug create mode 100644 benchmarks/pug/templates/user-profile.pug create mode 100644 benchmarks/pug/tsconfig.json create mode 100644 benchmarks/runner/samples/Pug.html diff --git a/benchmarks/pug/index.ts b/benchmarks/pug/index.ts new file mode 100644 index 000000000..11b0ea47a --- /dev/null +++ b/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: ` +

Purchases

+
${purchasesHtml}
+ ${templates.userProfile({ name })} + ${templates.sidebar({ purchases })} + ${templates.pageContent()} + ${templates.footer({ name })} + ` + }); + + return templates.layout({ + head, + children: ` + ${mainContent} + ` + }); +} diff --git a/benchmarks/pug/package.json b/benchmarks/pug/package.json new file mode 100644 index 000000000..7bbb6564f --- /dev/null +++ b/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" + } +} diff --git a/benchmarks/pug/templates/footer.pug b/benchmarks/pug/templates/footer.pug new file mode 100644 index 000000000..ade481f59 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/benchmarks/pug/templates/head.pug b/benchmarks/pug/templates/head.pug new file mode 100644 index 000000000..50c6da4ee --- /dev/null +++ b/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") \ No newline at end of file diff --git a/benchmarks/pug/templates/layout.pug b/benchmarks/pug/templates/layout.pug new file mode 100644 index 000000000..bd0d3afe9 --- /dev/null +++ b/benchmarks/pug/templates/layout.pug @@ -0,0 +1,6 @@ +doctype html +html(lang="en") + head + != head + body + != children \ No newline at end of file diff --git a/benchmarks/pug/templates/main.pug b/benchmarks/pug/templates/main.pug new file mode 100644 index 000000000..0a61ed2d4 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/benchmarks/pug/templates/page_content.pug b/benchmarks/pug/templates/page_content.pug new file mode 100644 index 000000000..594135a31 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/benchmarks/pug/templates/purchase.pug b/benchmarks/pug/templates/purchase.pug new file mode 100644 index 000000000..64af46023 --- /dev/null +++ b/benchmarks/pug/templates/purchase.pug @@ -0,0 +1,4 @@ +.purchase.purchase-card + .purchase-name= name + .purchase-price= price + .purchase-quantity= quantity \ No newline at end of file diff --git a/benchmarks/pug/templates/sidebar.pug b/benchmarks/pug/templates/sidebar.pug new file mode 100644 index 000000000..7a5914a01 --- /dev/null +++ b/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)} \ No newline at end of file diff --git a/benchmarks/pug/templates/user-profile.pug b/benchmarks/pug/templates/user-profile.pug new file mode 100644 index 000000000..55fefd0a4 --- /dev/null +++ b/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: example@example.com + p.user-profile.info Address: 123 Main St, City, Country + p.user-profile.info Phone: 123-456-7890 \ No newline at end of file diff --git a/benchmarks/pug/tsconfig.json b/benchmarks/pug/tsconfig.json new file mode 100644 index 000000000..9d8074444 --- /dev/null +++ b/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"] +} diff --git a/benchmarks/runner/lib/runners.js b/benchmarks/runner/lib/runners.js index 02c782479..466494f66 100644 --- a/benchmarks/runner/lib/runners.js +++ b/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); diff --git a/benchmarks/runner/package.json b/benchmarks/runner/package.json index 3049eb743..ea94f6d53 100644 --- a/benchmarks/runner/package.json +++ b/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:*", diff --git a/benchmarks/runner/samples/CommonTags.html b/benchmarks/runner/samples/CommonTags.html index b3156a44d..3428dd2b8 100644 --- a/benchmarks/runner/samples/CommonTags.html +++ b/benchmarks/runner/samples/CommonTags.html @@ -68,7 +68,7 @@

Welcome to our store

diff --git a/benchmarks/runner/samples/Ghtml.html b/benchmarks/runner/samples/Ghtml.html index d7ba13f0a..99fef2386 100644 --- a/benchmarks/runner/samples/Ghtml.html +++ b/benchmarks/runner/samples/Ghtml.html @@ -77,7 +77,7 @@

Welcome to our store