maxsei · July 9, 2026 17:19
diff --git a/README.md b/README.md
diff --git a/index.tsx b/index.tsx
 import { Hono } from "hono";
 import type { FC } from "hono/jsx";

 const app = new Hono();

 app.get("/", async (c) => {
  return c.html(
    <Layout>
      <div class="flex flex-column">
        <div>
          <button data-on:click="@post('/sleep')" data-indicator="sleeping">
            Sleep For
          </button>
          <input type="number" data-bind="sleepFor" value="5000" step="1" />
        </div>
        <div class="dn" data-class:dib="$sleeping">
          Sleeping...
        </div>
        <SleptFor />
      </div>
    </Layout>,
  );
 });

 app.post("/sleep", async (c) => {
  const signals = await c.req.json();
  const sleepFor = parseInt(signals.sleepFor);
  const reqId = crypto.randomUUID();
  console.info({ reqId, sleeping: "start" });
  await new Promise<void>(async (accept) => {
    setTimeout(() => accept(), sleepFor);
  });
  console.info({ reqId, sleeping: "end" });
  return c.html(<SleptFor value={sleepFor} />);
 });

 const SleptFor: FC<{ value?: number }> = ({ value }) => (
  <span id="sleptFor" data-show="!$sleeping">
    {value ? `Slept for ${value}ms` : ""}
  </span>
 );

 const Layout: FC<{ children: any }> = ({ children }) => {
  return (
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>App</title>
        <link
          rel="stylesheet"
          href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"
        />
        <script
          type="module"
          src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.2/bundles/datastar.js"
        ></script>
      </head>
      <body>{children}</body>
    </html>
  );
 };

 export default app;
	import { Hono } from "hono";
	import type { FC } from "hono/jsx";

	const app = new Hono();

	app.get("/", async (c) => {
	return c.html(
	<Layout>
	<div class="flex flex-column">
	<div>
	<button data-on:click="@post('/sleep')" data-indicator="sleeping">
	Sleep For
	</button>
	<input type="number" data-bind="sleepFor" value="5000" step="1" />
	</div>
	<div class="dn" data-class:dib="$sleeping">
	Sleeping...
	</div>
	<SleptFor />
	</div>
	</Layout>,
	);
	});

	app.post("/sleep", async (c) => {
	const signals = await c.req.json();
	const sleepFor = parseInt(signals.sleepFor);
	const reqId = crypto.randomUUID();
	console.info({ reqId, sleeping: "start" });
	await new Promise<void>(async (accept) => {
	setTimeout(() => accept(), sleepFor);
	});
	console.info({ reqId, sleeping: "end" });
	return c.html(<SleptFor value={sleepFor} />);
	});

	const SleptFor: FC<{ value?: number }> = ({ value }) => (
	<span id="sleptFor" data-show="!$sleeping">
	{value ? `Slept for ${value}ms` : ""}
	</span>
	);

	const Layout: FC<{ children: any }> = ({ children }) => {
	return (
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>App</title>
	<link
	rel="stylesheet"
	href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"
	/>
	<script
	type="module"
	src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.2/bundles/datastar.js"
	></script>
	</head>
	<body>{children}</body>
	</html>
	);
	};

	export default app;
No results found