Val Town Code SearchReturn to Val Town

20Here's an example app I made with townie: https://www.val.town/v/maxm/emojiTodoListApp
21
22You can see that the `"https://esm.sh/react"` import imports the version directly without any redirects. Saving on network hops and also ensuring version stability!
23
24<p><img width=400 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/38d61d0a-0dee-42de-dd44-b4ce9bd57000/public" /></p>

4  return new Response(
5    JSON.stringify(
6      [{ msg: "version history of: https://esm.sh/react-dom@18.2.0 deps" }, ...await getAllVersions()],
7      null,
8      2,

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2/*
3   SINGLE-FILE VAL CODE
4   1) Imports React, once.
5   2) Declares CSS + server() function
6   3) Declares the <App/> React component
7   4) Declares client() to mount <App/>
8   5) Exports default server()
9*/
10
11import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
12import React, { useCallback, useEffect, useState } from "https://esm.sh/react@18.2.0";
13
14/* ------------------------------------------------
326
327/* ------------------------------------------------
328  3) The React App
329------------------------------------------------ */
330function App() {
895
896/* ------------------------------------------------
897  4) Mount the React <App/> client-side
898------------------------------------------------ */
899function client() {

yongeStreetTorontoArchiveyongeStreetFooter4 matches

@vawogbemi•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import React from "https://esm.sh/react@18.2.0";
4
5interface FooterProps {
8}
9
10const Footer: React.FC<FooterProps> = ({ width = 300, height = 300 }) => (
11  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 980 980">
12    <path

yongeStreetTorontoArchiveyongeStreetLogo3 matches

@vawogbemi•Updated 3 months ago

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface LogoProps {
7}
8
9const Logo: React.FC<LogoProps> = ({ width = 945 / 3, height = 100 / 3 }) => (
10  <svg width={width} height={height} viewBox="0 0 945 100" xmlns="http://www.w3.org/2000/svg">
11    <path

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
80}: {
81  prompt: string;
82  setPrompt: React.Dispatch<React.SetStateAction<string>>;
83  handleSubmit: (e: React.FormEvent) => void;
84  handleStarterPromptClick: (promptItem: PromptItem) => void;
85}) {
169
170function App() {
171  const previewRef = React.useRef<HTMLDivElement>(null);
172  const [prompt, setPrompt] = useState("");
173  const [projectId, setProjectId] = useState<number | null>(null);
227  }
228
229  async function handleSubmit(e: React.FormEvent | string) {
230    if (typeof e !== "string") {
231      e.preventDefault();
733                </div>
734                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
735                  <React.Fragment key={iframeKey}>
736                    <iframe
737                      srcDoc={code}
739                      className="w-full grow"
740                    />
741                  </React.Fragment>
742                </div>
743              </div>

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import {
3  DragDropContext,
4  Draggable,
5  Droppable,
6} from "https://esm.sh/react-beautiful-dnd@13.1.1?deps=react@18.2.0,react-dom@18.2.0";
7import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
8import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
9
10function TaskBoard() {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";//
4import {
5  CartesianGrid,
11  XAxis,
12  YAxis,
13} from "https://esm.sh/recharts@2.7.2?deps=react@18.2.0,react-dom@18.2.0";
14
15function App({ tweetData }) {

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
33}: {
34  prompt: string;
35  setPrompt: React.Dispatch<React.SetStateAction<string>>;
36  handleSubmit: (e: React.FormEvent) => void;
37  handleStarterPromptClick: (promptItem: PromptItem) => void;
38}) {
122
123function App() {
124  const previewRef = React.useRef<HTMLDivElement>(null);
125  const [prompt, setPrompt] = useState("");
126  const [projectId, setProjectId] = useState<number | null>(null);
180  }
181
182  async function handleSubmit(e: React.FormEvent | string) {
183    if (typeof e !== "string") {
184      e.preventDefault();
679                </div>
680                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
681                  <React.Fragment key={iframeKey}>
682                    <iframe
683                      srcDoc={code}
685                      className="w-full grow"
686                    />
687                  </React.Fragment>
688                </div>
689              </div>

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,