1/** @jsxImportSource https://esm.sh/react */
2import { analyticsHandlerWrapper } from "https://esm.town/v/maxm/valTownAnalytics";
3import { Chess, Move, Square } from "npm:chess.js";
4import minify from "npm:css-simple-minifier";
5import { renderToString } from "npm:react-dom/server";
6
7class StaticChess {
1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {
41 {
42 type: "http",
43 prompt: "Generate a val that uses React to render HTML",
44 code: `/** @jsxImportSource https://esm.sh/react */
45 import { renderToString } from "npm:react-dom/server";
46
47 export const reactExample = (request: Request) =>
48 new Response(renderToString(<div>Test {1 + 1}</div>), {
49 headers: {
74 type: "http",
75 prompt: null,
76 code: `/** @jsxImportSource https://esm.sh/preact */
77 import { render } from "npm:preact-render-to-string";
78
79 export const preactExample = (request: Request) =>
80 new Response(render(<div>Test {1 + 1}</div>), {
81 headers: {
191 prompt: "Write a val that renders a website and uses tailwind css",
192 type: "http",
193 code: `/** @jsxImportSource https://esm.sh/preact */
194 import { render } from "npm:preact-render-to-string";
195
196 export default async function(req: Request) {
1/** @jsxImportSource npm:react **/
2import process from "node:process";
3import { renderToString } from "npm:react-dom@18/server";
4import { QueryVectorStore, sb, Substrate } from "npm:substrate";
5
10 {
11 user: "website that shows the current time",
12 content: `/** @jsxImportSource npm:react */
13export default function() {
14 return <h1>{new Date().toLocaleTimeString()}</h1>;
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react */
2
3import fal from "npm:@fal-ai/serverless-client";
4import { renderToString } from "npm:react-dom/server";
5
6export default async function(interval: Interval) {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export function getStaticProps() {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3
4const Counter = () => {
5 const [count, setCount] = React.useState(0);
6 return (
7 <button onClick={() => setCount(count + 1)}>
15 <head />
16 <body>
17 <h1>Val Town React Client Demo</h1>
18 <Counter />
19 </body>
22
23if (typeof document !== "undefined") {
24 const { hydrateRoot } = await import("https://esm.sh/react-dom/client");
25 hydrateRoot(document, <App />);
26}
27
28export default async function(req: Request): Promise<Response> {
29 const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");
30 const stream = await renderToReadableStream(<App />, { bootstrapModules: [import.meta.url] });
31 return new Response(stream, { headers: { "content-type": "text/html" } });
Starter template with client-side React & Hono server
Starter template with client-side React & Hono server
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
