I want to integrate an interface into my project, but I don't want to use heavy frameworks, build anything, or change the project's structure...
Use Reface:
import { Hono } from "jsr:@hono/hono@4.5.6";
import {
Reface,
clean,
html,
island,
RESPONSE
} from "jsr:@vseplet/reface@0.0.23";
const RandomJoke = island<{}, { joke: null }>({
template: ({ rpc }) => html`
<div
${rpc.hx.joke()}
hx-trigger="load, every 5s"
hx-target="#output"
hx-swap="innerHTML">
<h2 id="output"></h2>
</div>
`,
rpc: {
joke: async () => RESPONSE(
await (await fetch(
"https://icanhazdadjoke.com/",
{ headers: { "Accept": "text/plain" } },
)).text(),
),
},
});
Deno.serve(
new Hono()
.route("/", new Reface({
layout: clean({
htmx: true,
jsonEnc: true,
}),
})
.page("/", RandomJoke)
.hono()
).fetch);
Is that it? Seriously?
Seriously, bro :)