Versions

  • v30

    2/24/2024
    Open: Version
    Changes 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 ⦚
  • v29

    2/24/2024
    Open: Version
    Changes 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 ⦚
  • v28

    2/24/2024
    Open: Version
    Changes 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 ⦚
  • v27

    2/24/2024
    Open: Version
    Changes from v26 to v27
    +0
    -0
    ⦚ 53 unchanged lines ⦚
    ⦚ 53 unchanged lines ⦚
  • v26

    2/24/2024
    Open: Version
    Changes from v25 to v26
    +0
    -0
    ⦚ 53 unchanged lines ⦚
    ⦚ 53 unchanged lines ⦚
  • v25

    2/24/2024
    Open: Version
    Changes 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 ⦚
  • v24

    2/24/2024
    Open: Version
    Changes from v23 to v24
    +0
    -0
    ⦚ 53 unchanged lines ⦚
    ⦚ 53 unchanged lines ⦚
  • v23

    2/24/2024
    Open: Version
    Changes 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 server
    export 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 Component
    return { initialClicks: rows[0][0] };
    }

    // handle <Form> submissions and other server-requests
    export function action(req: Request) {
    }

    export function Component({ initialClicks }: { initialClicks: number }) {
    const [clicks, setClicks] = useState(0);

    async function addClick() {
    // optimisitic client-side update
    setClicks(clicks + 1);

    //
    }

    return (
    <html>
  • v22

    2/24/2024
    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));