Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions modules/vanilla/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
14 changes: 14 additions & 0 deletions modules/vanilla/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "vanilla-benchmark",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"build": "vite build --ssr src/entry-server.ts --outDir dist"
},
"devDependencies": {
"typescript": "^5.2.2",
"vite": "^5.2.0"
},
"main": "dist/entry-server.js"
}
1 change: 1 addition & 0 deletions modules/vanilla/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 57 additions & 0 deletions modules/vanilla/src/entry-server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import type { IncomingMessage, ServerResponse } from "http";
import { testData } from "testdata";

type EntryData = Awaited<ReturnType<typeof testData>>[0]

function renderEntry(entry: EntryData) {
return `
<tr>
<td>${entry.id}</td>
<td>${entry.name}</td>
</tr>
`
}

function renderTable(entries: EntryData[]) {
let tableHtml = ""
for(let i = 0; i < entries.length; i++) {
tableHtml += renderEntry(entries[i])
}

return `
<table>
<tbody>
${tableHtml}
</tbody>
</table>
`
}

function renderLayout(html: string) {
return `
<!DOCTYPE html>
<html>
<head>
<title>Vanilla</title>
</head>
<body>
${html}
</body>
</html>
`
}

export async function renderHtml() {
const data = await testData()
const tableHtmlString = renderTable(data)
const html = renderLayout(tableHtmlString)
return { html }
}

export async function buildHandler(){
return async function handler(_: IncomingMessage, res: ServerResponse) {
const { html } = await renderHtml()
res.setHeader("Content-Type", "text/html")
res.end(html)
}
}
Comment on lines +51 to +57
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This part is something like async/suspense logic

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a sync render. "Suspense logic" first renders a fallback html then hydrates it with the resolved content

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could hydrate a shadowroot. It allows for fallbacks content while waiting for the next chunk of the response to stream in:

<body>
  <div>
    <template shadowrootmode=open>
      <slot>Loading...</slot>
    </template>
    <!-- here some async work can happen -->
    ${renderTable()}
  </div>
</body>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Who's ready for yet another new framework?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a screen capture of the movie Back To the Future. Doc, Marty & Jennifer are all in the Delorean, and Doc is wearing futuristic shades. The caption says "frameworks?! where we're going we don't need frameworks!"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't get it. I think it's enough. Did you see the bundled result from Marko? It's nearly the same as mine.

23 changes: 23 additions & 0 deletions modules/vanilla/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
12 changes: 12 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ const handlers = [
name: "mfng",
handler: await import("mfng-benchmark").then((x) => x.buildHandler()),
},
{
name: "vanilla",
handler: await import("vanilla-benchmark").then((x) => x.buildHandler()),
},
{ name: "remix", handler: await buildRemixHandler() },
{ name: "next", handler: await buildNextHandler() },
{ name: "next-pages", handler: await buildNextPagesHandler() },
Expand Down