Versions
- Open: VersionChanges from v29 to v30+1-1⦚ 39 unchanged lines ⦚<script src="https://cdn.tailwindcss.com" /></head>
<body className="max-w-md mx-auto p-10"><h1 className="text-3xl font-bold">Hello Val Town</h1><div>{clicks + initialClicks} clicks ever.</div>⦚ 10 unchanged lines ⦚⦚ 39 unchanged lines ⦚<script src="https://cdn.tailwindcss.com" /></head><body className="max-w-md mx-auto p-4"><h1 className="text-3xl font-bold">Hello Val Town</h1><div>{clicks + initialClicks} clicks ever.</div>⦚ 10 unchanged lines ⦚ - Open: VersionChanges from v28 to v29+2-2⦚ 41 unchanged lines ⦚<body className="max-w-md mx-auto p-10"><h1 className="text-3xl font-bold">Hello Val Town</h1>
<div>I have been clicked {clicks + initialClicks}.</div><div>I was clicked {clicks} times since the page loaded.</div><Form onSubmit={addClick}><button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click!</button>⦚ 7 unchanged lines ⦚⦚ 41 unchanged lines ⦚<body className="max-w-md mx-auto p-10"><h1 className="text-3xl font-bold">Hello Val Town</h1><div>{clicks + initialClicks} clicks ever.</div><div>{clicks} clicks since the page loaded.</div><Form onSubmit={addClick}><button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click!</button>⦚ 7 unchanged lines ⦚ - Open: VersionChanges from v27 to v28+2-1⦚ 41 unchanged lines ⦚<body className="max-w-md mx-auto p-10"><h1 className="text-3xl font-bold">Hello Val Town</h1>
I have been clicked {clicks + initialClicks}. I was clicked {clicks} times since the page loaded.<Form onSubmit={addClick}><button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click!</button>⦚ 7 unchanged lines ⦚⦚ 41 unchanged lines ⦚<body className="max-w-md mx-auto p-10"><h1 className="text-3xl font-bold">Hello Val Town</h1><div>I have been clicked {clicks + initialClicks}.</div><div>I was clicked {clicks} times since the page loaded.</div><Form onSubmit={addClick}><button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click!</button>⦚ 7 unchanged lines ⦚ - Open: VersionChanges from v26 to v27+0-0⦚ 53 unchanged lines ⦚⦚ 53 unchanged lines ⦚
- Open: VersionChanges from v25 to v26+0-0⦚ 53 unchanged lines ⦚⦚ 53 unchanged lines ⦚
- Open: VersionChanges from v24 to v25+1-1⦚ 43 unchanged lines ⦚I have been clicked {clicks + initialClicks}. I was clicked {clicks} times since the page loaded.<Form onSubmit={addClick}>
<button>Click!</button></Form></body>⦚ 5 unchanged lines ⦚⦚ 43 unchanged lines ⦚I have been clicked {clicks + initialClicks}. I was clicked {clicks} times since the page loaded.<Form onSubmit={addClick}><button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click!</button></Form></body>⦚ 5 unchanged lines ⦚ - Open: VersionChanges from v23 to v24+0-0⦚ 53 unchanged lines ⦚⦚ 53 unchanged lines ⦚
- Open: VersionChanges from v22 to v23+34-1/** @jsxImportSource https://esm.sh/react */
import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown";import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini";export function Component() {return (<html>⦚ 5 unchanged lines ⦚<body className="max-w-md mx-auto p-10"><h1 className="text-3xl font-bold">Hello Val Town</h1></body></html>⦚ 4 unchanged lines ⦚/** @jsxImportSource https://esm.sh/react */import { useState } from "https://esm.sh/react@18.2.0";import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown";import { sqlite } from "https://esm.town/v/std/sqlite?v=4";import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini";// runs on page load, on the serverexport async function loader(req: Request) {const [, { columns, rows }] = await sqlite.batch([// you can optionally create your table here IF NOT EXISTS`CREATE TABLE IF NOT EXISTS ssr_react_mini_starter_clicks (created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)`,// get the data your page needs on load`select count(*) from ssr_react_mini_starter_clicks`,]);// return the props for your Componentreturn { initialClicks: rows[0][0] };}// handle <Form> submissions and other server-requestsexport function action(req: Request) {}export function Component({ initialClicks }: { initialClicks: number }) {const [clicks, setClicks] = useState(0);async function addClick() {// optimisitic client-side updatesetClicks(clicks + 1);//}return (<html> - Open: Version+20-0/** @jsxImportSource https://esm.sh/react */import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown";import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini";export function Component() {return (<html><head><title>Todo List</title><meta name="viewport" content="width=device-width, initial-scale=1" /><script src="https://cdn.tailwindcss.com" /></head><body className="max-w-md mx-auto p-10"><h1 className="text-3xl font-bold">Hello Val Town</h1></body></html>);}export default codeOnValTown(hydrate(import.meta.url));
stevekrouse-ssr_react_mini_starter.web.val.run
Updated: February 29, 2024