1/** @jsxImportSource https://esm.sh/react@17.0.2 */
2import { renderToString } from "https://esm.sh/react-dom@17.0.2/server";
3import React from "https://esm.sh/react@17.0.2";
4
5const gradientBackground: React.CSSProperties = {
6 background: "linear-gradient(135deg, #00a8e8 0%, #007ea7 100%)",
7 minHeight: "100vh",
11};
12
13const containerStyle: React.CSSProperties = {
14 padding: "30px",
15 width: "300px",
22};
23
24const headingStyle: React.CSSProperties = {
25 color: "#ffffff",
26 marginBottom: "10px",
27};
28
29const subheadingStyle: React.CSSProperties = {
30 color: "#e0f7fa",
31 marginBottom: "20px",
32};
33
34const buttonContainerStyle: React.CSSProperties = {
35 display: "flex",
36 flexDirection: "column",
38};
39
40const buttonStyle: React.CSSProperties = {
41 padding: "12px",
42 color: "#007ea7",
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) {
