Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4import { email } from "https://esm.town/v/std/email";
5import { OpenAI } from "https://esm.town/v/std/openai";

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { boggleSolver } from "https://esm.town/v/alexwein/boggleSolverTownie";
5import { getRandomWord } from "https://esm.town/v/alexwein/getRandomWord";

1/** @jsxImportSource https://esm.sh/react@18.2.0 **/
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3
4export default (req: Request) => {

1/** @jsxImportSource https://esm.sh/react@18.2.0 **/
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3
4export default (req: Request) => {

1/** @jsxImportSource https://esm.sh/react */
2import JSZip from "https://esm.sh/jszip@3.10.1";
3import React, { useState } from "https://esm.sh/react";
4import { createRoot } from "https://esm.sh/react-dom/client"; //
5
6function App() {

1/** @jsxImportSource https://esm.sh/react@18.2.0  */
2import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
4import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
5import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
6import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";
7
31}: {
32  prompt: string;
33  setPrompt: React.Dispatch<React.SetStateAction<string>>;
34  handleSubmit: (e: React.FormEvent) => void;
35  handleStarterPromptClick: (promptItem: PromptItem) => void;
36}) {
117
118function App() {
119  const previewRef = React.useRef<HTMLDivElement>(null);
120  const [prompt, setPrompt] = useState("");
121  const [projectId, setProjectId] = useState<number | null>(null);
175  }
176
177  async function handleSubmit(e: React.FormEvent | string) {
178    if (typeof e !== "string") {
179      e.preventDefault();
674                </div>
675                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
676                  <React.Fragment key={iframeKey}>
677                    <iframe
678                      srcDoc={code}
680                      className="w-full grow"
681                    />
682                  </React.Fragment>
683                </div>
684              </div>

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5const techOptions = {
6  frontend: [
7    { name: "React", icon: "⚛️", explanation: "A popular JavaScript library for building user interfaces", complexity: 3 },
8    { name: "Vue", icon: "🖖", explanation: "A progressive framework for building user interfaces", complexity: 2 },
9    { name: "Angular", icon: "🅰️", explanation: "A platform for building web applications", complexity: 4 },
10    { name: "Svelte", icon: "🔥", explanation: "A radical new approach to building user interfaces", complexity: 2 },
11    { name: "Next.js", icon: "⏭️", explanation: "A React framework with hybrid static & server rendering", complexity: 3 },
12    { name: "Tailwind CSS", icon: "🎨", explanation: "A utility-first CSS framework for rapid UI development", complexity: 2 },
13  ],
38function client() {
39  const root = document.getElementById("root");
40  if (root && typeof React !== 'undefined' && React.useState) {
41    const { useState, useEffect, useRef } = React;
42
43    function App() {
252    try {
253      createRoot(root).render(
254        <React.StrictMode>
255          <App />
256        </React.StrictMode>
257      );
258    } catch (error) {
259      console.error("Error rendering React app:", error);
260      root.innerHTML = `<div style="color: red; padding: 20px;">
261        <h2>Error Rendering App</h2>
265    }
266  } else {
267    console.error("Root element not found or React is not properly loaded");
268  }
269}

1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2// import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
3import * as React from "https://esm.sh/react@18.3.1";
4
5export { React };
6
7export type RequestHandler = (request: Request) => Promise<Response>;
13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;
14
15export interface ReactStreamProps {
16  url: URL;
17  pathname: string;
23
24export function render<T>(
25  /** Root-level React component that renders an entire <html> element
26   * including the head and body tags.
27   */
28  Component: React.ComponentType<ReactStreamProps>,
29  /** On Val Town, use `import.meta.url` for client-side hydration */
30  // module: string | false,
38
39  return async function handler(request: Request): Promise<Response> {
40    const main = reactRender(Component);
41    const middleware: Middleware[] = [
42      parseURL,
62export default render;
63
64// main react response handler
65const reactRender = (
66  Component: React.ComponentType<ReactStreamProps>,
67): Middleware =>
68  async function(req: DataRequest, res: Response): Promise<Response> {
69    const { renderToStaticMarkup } = await import("https://esm.sh/react-dom@18.3.1/server");
70
71    const html = await renderToStaticMarkup(<Component {...req.data} />);
84    headers.set("Content-Type", "text/html");
85
86    console.log("react", res.status);
87    return new Response(html, {
88      headers,

1React SSR for Val Town
2
3## Usage
4
5```tsx
6/** @jsxImportSource https://esm.sh/react */
7import { render, React } from "https://esm.town/v/jxnblk/ReactStatic";
8
9function App() {
11    <html>
12      <body>
13        <h1>ReactStatic</h1>
14        <p>React SSR in Val Town</p>
15      </body>
16    </html>
22
23<!--
24[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)
25-->
26
41### robots.txt
42
43ReactStatic has a built-in middleware to handle request to `/robots.txt`
44
45```tsx
46import { render, robots } from "https://esm.town/v/jxnblk/ReactStatic";
47// ...
48export default render(App, [
85
86```tsx
87/** @jsxImportSource https://esm.sh/react@18.3.1 */
88import { render } from "https://esm.town/v/jxnblk/ReactStatic";
89
90function App () {
92    <html>
93      <head>
94        <title>ReactStatic</title>
95      </head>
96      <body>
104```
105
106React requires matching versions for SSR and hydration -- ensure you import `react@18.3.1` when using this library.
107
108Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo
109
110
111Migrated from folder: _LEAVE_AS_IS/ReactStatic

1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
3import * as React from "https://esm.sh/react@18.3.1";
4
5export { React };
6
7export type RequestHandler = (request: Request) => Promise<Response>;
13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;
14
15export interface ReactStreamProps {
16  url: URL;
17  pathname: string;
23
24export function render<T>(
25  /** Root-level React component that renders an entire <html> element
26   * including the head and body tags.
27   */
28  Component: React.ComponentType<ReactStreamProps>,
29  /** On Val Town, use `import.meta.url` for client-side hydration */
30  module: string | false,
31  /** Optional middleware */
32  opts: ReactStreamOptions | Middleware[] = [],
33) {
34  const useMiddleware = Array.isArray(opts); // for backwards compat
35  const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};
36  const { api, getInitialProps } = options;
37
42
43  return async function handler(request: Request): Promise<Response> {
44    const main = reactStream(Component, module);
45    const middleware: Middleware[] = [
46      parseURL,
71export default render;
72
73// main react response handler
74const reactStream = (
75  Component: React.ComponentType<ReactStreamProps>,
76  module: string | false,
77): Middleware =>
78  async function(req: DataRequest, res: Response): Promise<Response> {
79    const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");
80
81    const stream = await renderToReadableStream(
91    headers.set("Content-Type", "text/html");
92
93    console.log("react", res.status);
94    return new Response(stream, {
95      headers,
139};
140/** DEPRECATED: Use middleware instead */
141export interface ReactStreamOptions {
142  /** DEPRECATED: Optional text response for robots.txt */
143  robots?: string;