1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import OpenAI from "https://esm.sh/openai@4.28.4";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
5
6const ELEVENLABS_API_KEY = "sk_352c51c19a910aa3973cc146d057c11a1216da0eec41e0ee";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31 prompt: string;
32 setPrompt: React.Dispatch<React.SetStateAction<string>>;
33 handleSubmit: (e: React.FormEvent) => void;
34 handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
120 const [projectId, setProjectId] = useState<number | null>(null);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
673 </div>
674 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675 <React.Fragment key={iframeKey}>
676 <iframe
677 srcDoc={code}
679 className="w-full grow"
680 />
681 </React.Fragment>
682 </div>
683 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { blob } from "https://esm.town/v/std/blob";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useRef, useState } from 'https://esm.sh/react@18.2.0';
3import ReactDOM from 'https://esm.sh/react-dom@18.2.0/client';
4import * as THREE from 'https://esm.sh/three@0.158.0';
5
367function client() {
368 const container = document.getElementById('root');
369 const root = ReactDOM.createRoot(container);
370 root.render(<App />);
371}
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4import { v4 as uuidv4 } from "https://esm.sh/uuid";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31 prompt: string;
32 setPrompt: React.Dispatch<React.SetStateAction<string>>;
33 handleSubmit: (e: React.FormEvent) => void;
34 handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118 const previewRef = React.useRef<HTMLDivElement>(null);
119 const [prompt, setPrompt] = useState("");
120 const [projectId, setProjectId] = useState<number | null>(null);
174 }
175
176 async function handleSubmit(e: React.FormEvent | string) {
177 if (typeof e !== "string") {
178 e.preventDefault();
673 </div>
674 <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675 <React.Fragment key={iframeKey}>
676 <iframe
677 srcDoc={code}
679 className="w-full grow"
680 />
681 </React.Fragment>
682 </div>
683 </div>
1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2import * as React from "https://esm.sh/react@18.3.1";
3import { ReactStreamProps, Middleware } from "./types.tsx";
4
5// main react response handler
6export const reactStream = (
7 Component: React.ComponentType<ReactStreamProps>,
8 module: string | false,
9): Middleware =>
10 async function(req: DataRequest, res: Response): Promise<Response> {
11 const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");
12
13 const stream = await renderToReadableStream(
23 headers.set("Content-Type", "text/html");
24
25 console.log("reactstream", res.status);
26 return new Response(stream, {
27 headers,
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>React Hono Val Town Starter</title>
7 <link rel="stylesheet" href="/public/style.css">
8 <link
1/** @jsxImportSource https://esm.sh/react@experimental */
2
3import { renderToReadableStream } from "npm:react-dom@experimental/server";
4import { MarkdownAsync } from "npm:react-markdown";
5import rehypeRaw from "npm:rehype-raw";
6import remarkMdx from "npm:remark-mdx";
1/** @jsxImportSource npm:react */
2import React from "npm:react";
3import warehouse from "./index.tsx";
4import reactRender from "./react-render.tsx";
5
6function Demo () {
8 <html>
9 <head>
10 <title>Static React Demo</title>
11 <style>{`
12 body {
20 </head>
21 <body>
22 <h1>Static React Demo</h1>
23 </body>
24 </html>
27
28export default warehouse(
29 reactRender(Demo),
30);
31
