Back

Version 82

3/16/2024
/** @jsxImportSource https://esm.sh/react */
import { useEffect, useState } from "https://esm.sh/react";

// will run on both client and server
export function Demo(props: { items: string[] }) {
const [items, setItems] = useState([props.items]);
useEffect(() => {
items.push("This item is rendered only on the client, after the hydration");
setItems([...items]);

// fetch data from the server
fetch("/api/item").then(res => res.json()).then(item => setItems([...items, item]));
}, []);

return (
<div className="flex h-5/6 justify-center items-center font-mono">
<ol className="list-decimal">
{items.map(item => <li key={item}>{item}</li>)}
</ol>
</div>
);
}

// You can hydrate multiple components in a single val !
export function Header(props: { title: string }) {
return (
<div
onClick={() => alert("ouch!")}
className="flex text-4xl font-extrabold h-1/6 justify-center items-center font-mono"
>
{props.title} (click on me) !
</div>
);
}

// You server code should be contained in this function
pomdtr-example_ssr.web.val.run
Updated: March 16, 2024