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";
4
5function LoginScreen({ onLogin }) {
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() {
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>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
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
6type Category = "bicycle" | "palm" | "hydrant" | "crosswalk";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useRef, useCallback } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5// Social Media Platform Configuration
159 const fileInputRef = useRef<HTMLInputElement>(null);
160
161 const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
162 const file = e.target.files?.[0];
163 if (file) {
6
7Versions 0-17 of this val were done with Hono and server-rendering.
8Versions 18+ were generated with Townie and use client-side React.
9
10To use this val, fork it to your account.
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { Hono } from "https://esm.sh/hono";
3import { debounce } from "https://esm.sh/lodash-es";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import { useDropzone } from "https://esm.sh/react-dropzone?deps=react@18.2.0,react-dom@18.2.0";
6import React, { ReactNode, useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
7import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe";
8import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton";
9
10interface TooltipProps {
11 children: ReactNode;
12 content: string;
13}
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 */
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 { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3
4export default (req: Request) => {
