1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { type Message } from "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0";
3import ReactMarkdown from "https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { ImagePreview } from "./ImageUpload.tsx";
5
48 // Use the triple backtick syntax for code blocks
49 const codeBlock = "```" + language + "\n" + content + "\n```";
50 return <ReactMarkdown>{codeBlock}</ReactMarkdown>;
51};
52
87
88export function MessagePart({ part }: { part: NonNullable<Message["parts"]>[number] }) {
89 if (part.type === "text") return <ReactMarkdown>{part.text}</ReactMarkdown>;
90 if (part.type === "reasoning")
91 return (
95 </summary>
96 <div>
97 <ReactMarkdown>{part.reasoning}</ReactMarkdown>
98 {part.details && part.details.map((detail, index) => (
99 <div key={index} className="mt-2">
100 <ReactMarkdown>{detail.text}</ReactMarkdown>
101 </div>
102 ))}
145 return (
146 <div className="think-content text-lg">
147 <ReactMarkdown>{args.thought}</ReactMarkdown>
148 </div>
149 );
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5function ShaderRenderer({ vertexShader, fragmentShader, animated = false, width = "100%", height = "200px" }) {
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { App } from "/frontend/components/App.tsx";
3import { ErrorBoundary } from "/frontend/components/ErrorBoundary.tsx";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?dev";
5import React from "https://esm.sh/react@18.2.0?dev";
6
7// Log that we're using the development build
8console.log(
9 "%c🛠️ React Development Build Enabled",
10 "background: #61dafb; color: #282c34; font-weight: bold; padding: 4px 8px; border-radius: 4px;",
11);
15const root = createRoot(document.getElementById("root")!);
16root.render(
17 <React.StrictMode>
18 <ErrorBoundary>
19 <App />
20 </ErrorBoundary>
21 </React.StrictMode>,
22);
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useState } from "https://esm.sh/react@18.2.0?dev";
3
4export function DebugInfo() {
7
8 // Override console methods to capture logs
9 React.useEffect(() => {
10 const originalConsoleLog = console.log;
11 const originalConsoleError = console.error;
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { Component, ErrorInfo, ReactNode } from "https://esm.sh/react@18.2.0?dev";
3
4interface Props {
5 children: ReactNode;
6 fallback?: ReactNode;
7}
8
37 }
38
39 render(): ReactNode {
40 if (this.state.hasError) {
41 // You can render any custom fallback UI
1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2import { render, React } from "https://esm.town/v/jxnblk/reactstream/index.tsx";
3
4function App() {
5 const [count, setCount] = React.useState(0);
6
7 return (
8 <html>
9 <body>
10 <h1>ReactStream</h1>
11 <p>React SSR with client-side hydration in Val Town</p>
12 <pre>{count}</pre>
13 <button onClick={() => setCount(count - 1)}>-</button>
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React from "https://esm.sh/react@18.2.0?dev";
3
4export function Header() {
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3import { Game } from "https://esm.town/v/tmcw/timeline/shared/types.ts";
4import { Header } from "./Header.tsx";
1# React Starter
2
3Minimal React SSR example for Val Town
4[View Demo](https://jxnblk--122089bc0b3011f09093569c3dd06744.web.val.run/)
5
6Remix this project to start building your own React app
7
8## How it works
10The `http.tsx` file is the main entry point and serves the app.
11It renders the `App` component on the server and wraps it in an HTML response.
12This HTML response includes a `<script>` tag that loads the `client.tsx` module that hydrates the React app in the browser.
13
14The `App.tsx` file is the root component of the React app. You can add more components and functionality as needed.
15
16---
18_See also:_
19
20- [React Streaming Starter][]
21- [React SPA Starter][]
22
23[React Streaming Starter]: https://val.town/x/jxnblk/react-streaming-starter
24[React SPA Starter]: https://val.town/x/jxnblk/react-spa-starter
1# React SPA Starter
2
3Minimal React SPA example for Val Town.
4[View Demo][demo]
5
6[demo]: https://jxnblk--9c1548940bdd11f08b59569c3dd06744.web.val.run
7
8Remix this project to start building your own React app
9
10## How it works
12The `http.tsx` file is the main entry point and serves the app.
13It returns a static HTML string response that includes the client-side JavaScript module in `client.tsx`.
14The `client.tsx` module hydrates the React app on the client.
15
16The `App.tsx` file is the root component of the React app.
17You can add more components and functionality as needed.
18
20Using one of the versions with SSR is highly recommended:
21
22- [React Starter][]
23- [React Streaming Starter][]
24
25
26[react streaming starter]: https://val.town/x/jxnblk/react-streaming-starter
27[react starter]: https://www.val.town/x/jxnblk/react-starter
28[react spa starter]: https://www.val.town/x/jxnblk/react-spa-starter