8 {
9 user: "website that shows the current time",
10 content: `/** @jsxImportSource npm:react */
11export default function() {
12 return <h1>{new Date().toLocaleTimeString()}</h1>;
1# SSR React Mini & SQLite Todo App
2
3This 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](https://docs.val.town/std/sqlite/).
4
5
6
7## SSR React Mini Framework
8
9This ["framework"](https://www.val.town/v/stevekrouse/ssr_react_mini) is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.
10
11The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you're [server rendering](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L35-37). Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as [modules](https://esm.town/v/stevekrouse/TodoApp) importable by the browser.
12
13The 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`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L7) and [`action`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L20), so they only run server-side.
14
15
1/** @jsxImportSource https://esm.sh/react */
2import { zip } from "https://esm.sh/lodash-es";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown?v=46";
5import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";
6
7export async function loader(req: Request) {
1/** @jsxImportSource npm:react **/
2import { renderToString } from "npm:react-dom@18/server";
3
4export default (req: Request) => {
1/** @jsxImportSource npm:preact **/
2import { html } from "https://esm.town/v/stevekrouse/html?v=5";
3import { render } from "npm:preact-render-to-string";
4
5type HandlerFunc = (req?: Request) => Response | Promise<Response>;
1import { Button, Tailwind } from "npm:@react-email/components";
2import { Html } from "npm:@react-email/html";
3import { render } from "npm:@react-email/render";
4import * as React from "npm:react";
5
6import { sendMail } from "https://esm.town/v/tomas_padrieza/sendEmail";
1Simple demo of a React Email rendering
633. The GET URL should be called and result printed in the console.
64
65I'm using React, so make it a react component.
66```
1/**
2 * @title Running React on the Client
3 * @description Vals can also be used to host client-side code!
4 * @preview https://pomdtr-react_example_server.web.val.run
5 * @include pomdtr/react_example_client
6 * @resource [React - Quick Start](https://react.dev/learn)
7 */
8
12 `<html>
13 <head>
14 <title>React Example</title>
15 <meta name="viewport" content="width=device-width, initial-scale=1" />
16 </head>
17 <body>
18 <main id="root"></main>
19 <script type="module" src="https://esm.town/v/pomdtr/react_example_client"></script/>
20 </body>
21 </html>`,
1# reactiveStateBlob: wrap blob state in a proxy to autosave it on changes
2
3## Examples (full example at [@postpostscript/reactiveStateBlobExample](reactiveStateBlobExample))
4
5```typescript
6import { reactiveStateBlob } from "https://esm.town/v/postpostscript/reactiveStateBlob"
7
8using state = await reactiveStateBlob({
9 viewCount: 0,
10 rows: [] as {
24
25```ts
26using state = await reactiveStateBlob({
27 viewCount: 0,
28 rows: [] as {
31 }[],
32}, {
33 key: 'reactiveStateBlobExample.state',
34});
35```
40
41```typescript
42using state = await reactiveStateBlob((existingState) => {
43 return {
44 viewCount: (existingState.viewCount ?? 0) as number,
55
56```typescript
57using state = await reactiveStateBlob<{
58 value: number;
59}>({
71[@postpostscript/counter](counter) (example at [@postpostscript/counterExample](counterExample))
72
73Migrated from folder: State/reactiveStateBlob
Starter template with client-side React & Hono server
A web-based dice roller using React on Val Town
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
