HTTP Handler #37

/** @jsxImportSource npm:react */
import { serveRequest } from "https://esm.town/v/maxm/reqEvaltown";
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=29";
import { sqlite } from "https://esm.town/v/stevekrouse/sqlite";
import { Hono } from "npm:hono";
import React from "npm:react";
import { renderToString } from "npm:react-dom/server";

const { httpEndpoint } = extractValInfo(import.meta.url);
const SCHEMA_VERSION = 1;
const KEY = new URL(import.meta.url).pathname.split("/").at(-1);

class ContentStore {
  private tableName: string;

constructor() {
    this.tableName = `${KEY}_content_${SCHEMA_VERSION}`;
  }

async init() {
    await sqlite.execute(`
      CREATE TABLE IF NOT EXISTS ${this.tableName} (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        body TEXT NOT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
      )
    `);
  }

async insertContent(handler: string) {
    const result = await sqlite.execute(
      `INSERT INTO ${this.tableName} (body) VALUES (?) RETURNING id`,
      [handler],
    );
    return result.rows[0].id;
  }

async getContent(id: string) {
    const result = await sqlite.execute(
      `SELECT body FROM ${this.tableName} WHERE id = ?`,
      [id],
    );
    return result.rows[0]?.body;
  }
}

const contentStore = new ContentStore();
await contentStore.init();

function Town() {
  return (
    <div
      style={{
        fontSize: "20px",
        position: "fixed",
        zIndex: "-1",
        bottom: "20px",
        left: "50%",
        textAlign: "center",
        transform: "translateX(-50%)",
      }}
    >
      <pre style={{ margin: 0, marginBottom: "10px" }}>{`🏘️ 🌳 🏠
🚶‍♂️ ⛲ 🚶‍♀️
🏡 🚲 🌳`}</pre>
      <a style={{ fontSize: "15px", color: "black" }} href="https://www.val.town/v/maxm/valtowntown">View Source</a>
    </div>
  );
}

function HomePage() {
  return (
    <html>
      <head>
        <title>Val Town Town</title>
        <link rel="icon" href="https://fav.farm/🏘️" />
        <style>{css}</style>
      </head>
      <body>
        <h1>Val Town Town</h1>
        <p>Write an HTTP handler and deploy it with one click!</p>
        <form method="POST" action="/submit">
          <textarea name="handler" rows={10} cols={50} autoFocus>
            {`export default async function(req: Request) {
    return Response.json("Hello, world!");
}`}
          </textarea>
          <br />
          <button type="submit">Deploy!</button>
          <Town />
        </form>
      </body>
    </html>
  );
}

textarea.addEventListener('input', function() {
            if (textarea.value !== originalContent) {
              submitButton.style.display = 'inline-block';
            } else {
              submitButton.style.display = 'none';
            }
          });
        `,
          }}
        >
        </script>
        <Town />
      </body>
    </html>
  );
}

const app = new Hono();

app.get("/", (c) => {
  return c.html(renderToString(<HomePage />));
});

app.post("/submit", async (c) => {
  const { handler } = await c.req.parseBody();
  if (handler) {
    const id = await contentStore.insertContent(handler as string);
    return c.redirect(`/handler/${id}`);
  }
  return c.redirect("/");
});

app.get("/handler/:id", async (c) => {
  const id = c.req.param("id");
  const handler = await contentStore.getContent(id);
  if (!handler || typeof handler !== "string") {
    return c.notFound();
  }
  return c.html(renderToString(<ContentPage handler={handler} id={id} />));
});

app.get("/serve/:id", async (c) => {
  const id = c.req.param("id");
  const handler = await contentStore.getContent(id);
  if (!handler || typeof handler !== "string") {
    return c.notFound();
  }
  return serveRequest(c.req.raw, `data:text/tsx,${encodeURIComponent(handler)}`);
});

export default app.fetch.bind(app);

const css = `
  body {
    font-family: monospace;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
    margin-bottom: 100px;
  }
  textarea {
    width: 100%;
    font-family: monospace;
    field-sizing: content;

white-space: pre-wrap;
    word-wrap: break-word;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #000;
  }
  iframe {
    width: 100%;
  }
  button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #ddd;
    border: 2px solid #000;
    cursor: pointer;
  }
`;

Visit: https://maxm-valtowntown.web.val.run/serve/37

Return home

🏘️ 🌳 🏠
🚶‍♂️ ⛲ 🚶‍♀️
🏡 🚲 🌳

View Source