summerboys

3 public vals

Joined October 12, 2023

SSR React Mini & SQLite Todo App

This Todo App is server rendered and client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in Val Town SQLite.

demo

SSR React Mini Framework

This "framework" is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.

The trick is client-side importing the React component that you're server rendering. Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as modules importable by the browser.

The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side loader and action with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the loader and action, so they only run server-side.

TodoApp

100

/** @jsxImportSource https://esm.sh/react */

import { zip } from "https://esm.sh/lodash-es";

import { useEffect, useState } from "https://esm.sh/react@18.2.0";

import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown?v=46";

import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";

export async function loader(req: Request) {

const { sqlite } = await import("https://esm.town/v/std/sqlite?v=4");

const [, { columns, rows }] = await sqlite.batch([

`CREATE TABLE IF NOT EXISTS todos2 (

id INTEGER PRIMARY KEY AUTOINCREMENT,

created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,

completed_at TIMESTAMP,

text TEXT NOT NULL

)`,

`select * from todos2`,

]);

const initialTodos = rows.map(row => Object.fromEntries(zip(columns, row)));

return { initialTodos, initialLogs: [`Server rendered`] };

}

export async function action(req: Request) {

const { sqlite } = await import("https://esm.town/v/std/sqlite?v=4");

const formData = await req.formData();

if (req.method === "POST") {

const text = formData.get("text") as string;

const [, { rows }] = await sqlite.batch([{

sql: `insert into todos2(text) values (?)`,

args: [text],

}, "select last_insert_rowid()"]);

return Response.json({ id: rows[0][0], text });

}

else if (req.method === "PUT") {

const id = formData.get("id") as string;

// TODO handle no id (clicked too fast)

const { rows } = await sqlite.execute({ sql: `select completed_at from todos2 where id = ?`, args: [id] });

const completed_at = rows[0][0];

const new_completed_at = completed_at ? null : new Date() as any;

await sqlite.execute({ sql: `update todos2 set completed_at = ? where id = ?`, args: [new_completed_at, id] });

}

else if (req.method === "DELETE") {

const id = formData.get("id") as string;

// TODO handle no id (clicked too fast)

await sqlite.execute({ sql: `delete from todos2 where id = ?`, args: [id] });

}

return Response.json("OK");

}

export function Component({ initialTodos, initialLogs }) {

const [todos, setTodos] = useState(initialTodos);

const [logs, setLogs] = useState(initialLogs);

const [newTodo, setNewTodo] = useState("");

const addLog = log => setLogs([...logs, log]);

useEffect(() => addLog(`Client rendered`), []);

function addTodo() {

setTodos([...todos, { text: newTodo }]);

setNewTodo("");

return async (resp: Response) => {

const { text, id } = await resp.json();

setTodos([...todos, { text, id }]); // ok to add again because todos is stale

addLog(`Got ${resp.ok ? "OK" : "Error"} from server for adding todo`);

};

}

function toggleTodo(e) {

const formData = new FormData(e.target);

const id = parseInt(formData.get("id") as string);

setTodos(todos.map(t => t.id === id ? { ...t, completed_at: t.completed_at ? null : Date.now() } : t));

return (resp: Response) => addLog(`Got ${resp.ok ? "OK" : "Error"} from server for toggling todo`);

}

function deleteTodo(e) {

const formData = new FormData(e.target);

const id = parseInt(formData.get("id") as string);

setTodos(todos.filter(t => t.id !== id));

return (resp: Response) => addLog(`Got ${resp.ok ? "OK" : "Error"} from server for deleting todo`);

}

return (

<html>

<head>

</head>

{todos.map((todo) => (

<button>{todo.completed_at ? "✅" : "o"}</button>

</Form>

{todo.text}

</div>

Poll RSS feeds

This val periodically polls specified RSS feeds and send the author an email with new items. It checks each feed defined in rssFeeds for new content since the last run and sends an email with the details of the new items.

Usage

Fork @stevekrouse/rssFeeds and update it with your desired RSS feeds;
Fork this val and replace the https://esm.town/v/stevekrouse/rssFeeds import with your newly forked val;
Enjoy RSS updates on your email!

pollRSSFeeds

Fork

import { email } from "https://esm.town/v/std/email?v=9";

import { newRSSItems } from "https://esm.town/v/stevekrouse/newRSSItems";

import { rssFeeds } from "https://esm.town/v/stevekrouse/rssFeeds";

export async function pollRSSFeeds({ lastRunAt }: Interval) {

return Promise.all(

Object.entries(rssFeeds).map(async ([name, url]) => {

let items = await newRSSItems({

url,

lastRunAt,

});

if (items.length)

await email({

text: JSON.stringify(items, null, 2),

subject: `New from ${name} RSS`,

});

return { name, items };

}),

);

}

HTML example

This is an example of how to return an HTML response.

You can also preview it at https://andreterron-htmlExample.web.val.run?name=Andre

htmlExample

// View at https://andreterron-htmlExample.web.val.run?name=Andre

export default async function(req: Request): Promise<Response> {

const query = new URL(req.url).searchParams;

// Read name from the querystring or body. Defaults to "you" if not present.

const name = query.get("name") || (await req.json().catch(() => ({}))).name || "you";

// Returns the HTML response

return new Response(`<h1>Hi summer ${name}!</h1>`, {

headers: { "Content-Type": "text/html" },

});

}