/** @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, { useCallback, useEffect, useState } from "npm:react"; import { renderToString } from "npm:react-dom/server"; // Liveblocks and Yjs dependencies import * as Y from "npm:yjs"; import { yCollab } from "npm:y-codemirror.next"; import { EditorView, basicSetup } from "npm:codemirror"; import { EditorState } from "npm:@codemirror/state"; import { javascript } from "npm:@codemirror/lang-javascript"; import { LiveblocksYjsProvider } from "npm:@liveblocks/yjs"; import { LiveblocksProvider, RoomProvider, ClientSideSuspense } from "npm:@liveblocks/react/suspense"; const { httpEndpoint } = extractValInfo(import.meta.url); const SCHEMA_VERSION = 1; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Liveblocks public API key (Val Town specific) const LIVEBLOCKS_PUBLIC_API_KEY = "pk_dev_xxxxxxxxxxxxxxxxxxxxxxxx"; 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 (

{`🏘️ 🌳 🏠
🚶‍♂️ ⛲ 🚶‍♀️
🏡 🚲 🌳`}

View Source

); } function CollaborativeEditor({ initialContent, id }: { initialContent: string, id: string }) { const [element, setElement] = useState(); const ref = useCallback((node: HTMLElement | null) => { if (!node) return; setElement(node); }, []); useEffect(() => { let provider: LiveblocksYjsProvider; let ydoc: Y.Doc; let view: EditorView; if (!element) return; // Create Yjs provider and document ydoc = new Y.Doc(); provider = new LiveblocksYjsProvider(`my-room-${id}`, ydoc); const ytext = ydoc.getText("codemirror"); const undoManager = new Y.UndoManager(ytext); // Initialize with initial content if provided if (initialContent) { ytext.insert(0, initialContent); } // Set up CodeMirror and extensions const state = EditorState.create({ doc: ytext.toString(), extensions: [ basicSetup, javascript(), yCollab(ytext, provider.awareness, { undoManager }), ], }); // Attach CodeMirror to element view = new EditorView({ state, parent: element, }); return () => { ydoc?.destroy(); provider?.destroy(); view?.destroy(); }; }, [element, id, initialContent]); return (

); } function HomePage() { return ( Val Town Town

Val Town Town

Write an HTTP handler and deploy it with one click!

}> ); } const app = new Hono(); app.get("/", (c) => { return c.html(renderToString()); }); 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()); }); 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; } `;

valtowntown

Version 1