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
1/** @jsxImportSource https://esm.sh/react */
2import { Canvas } from "https://esm.sh/react-three-fiber";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { html } from "https://esm.town/v/stevekrouse/html?v=5";
5
29
30 return html(`<html><head></head><body><script type="module">
31 import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
32 import { jsx as _jsx } from "https://esm.sh/react/jsx-runtime";
33 import { WeatherSuggest } from "https://esm.town/v/seflless/weatherGPT";
34
1/** @jsxImportSource https://esm.sh/preact */
2import { blob } from "https://esm.town/v/std/blob";
3// import * as opaque from "npm:@cloudflare/opaque-ts";
4import { Hono } from "npm:hono@3";
5import { render } from "npm:preact-render-to-string";
6
7const resp = (content, status) =>
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
