Hono + Deno + Preact

Using Hono, Deno and Preact together to render HTML.

Example

deno.json:

{
	"tasks": {
		"start": "deno run -A main.tsx"
	},
	"compilerOptions": {
		"jsx": "react-jsx",
		"jsxImportSource": "preact"
	},
	"imports": {
		"hono/": "https://deno.land/x/[email protected]/",
		"preact": "https://esm.sh/[email protected]",
		"preact/": "https://esm.sh/[email protected]/",
		"preact-render-to-string": "https://esm.sh/*[email protected]"
	}
}

main.tsx:

import { Hono } from "hono/mod.ts"
import { render } from "preact-render-to-string"

const app = new Hono()

const Greeting = (props: { phrase: string }) => {
	return <p>Hello {props.phrase}!</p>
}

app.get("/", (c) => {
	return c.html(render(<Greeting phrase="world" />))
})

Deno.serve(app.fetch)