3 "lock": false,
4 "compilerOptions": {
5 "jsx": "react-jsx",
6 "jsxImportSource": "https://esm.sh/react@18.2.0",
7 "jsxImportSourceTypes": "https://esm.sh/react@18.2.0",
8
9 "noImplicitAny": false,
189- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
190- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
191- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
192- Ensure all React dependencies and sub-dependencies are pinned to the same version
193- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
194
275 - Always run table creation before querying
276
2773. **React Configuration:**
278 - All React dependencies must be pinned to 18.2.0
279 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
280 - Rendering issues often come from mismatched React versions
281
2824. **File Handling:**
1/** @jsxImportSource https://esm.sh/react */
2import { analyticsHandlerWrapper } from "https://esm.town/v/maxm/valTownAnalytics";
3import { Chess, Move, Square } from "npm:chess.js";
4import minify from "npm:css-simple-minifier";
5import { renderToString } from "npm:react-dom/server";
6
7class StaticChess {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export function ChessEmbedIframe({ config }) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function CheckoutContent({ data, content }) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import { DemoData, isApiError, isNotionPage } from "../index.tsx";
4import { CheckoutContent } from "./content/checkout/checkout.tsx";
50 // current hash for nav styling
51 const currentHash = useCurrentHash();
52 // a little light logging so we can see that React is connecting the /frontend and the /backend
53 console.log("Current path:", location.pathname);
54 console.log("Demo data:", demoData);
321 };
322
323 // this last return puts the page elements from renderDemoData into a div, which React likes
324 return (
325 <div>
34
35If you want more interactivity, check out this
36[React starter](https://www.val.town/x/std/reactHonoStarter).
37
38### ← favicon.svg
1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from 'https://esm.sh/@farcaster/frame-sdk'
3import { useQuery } from 'https://esm.sh/@tanstack/react-query@5'
4import { AudioLines, Mic, MicOff, LoaderCircle } from 'https://esm.sh/lucide-react@0.510.0'
5import { NavLink, Route, Routes, useNavigate, useParams } from 'https://esm.sh/react-router@7'
6import { use, useEffect, useRef, useState } from 'https://esm.sh/react@19'
7
8import { Button, Input, Section, ShareButton, Sheet } from '../components/ui.tsx'
19 usePublish, // Publish the local tracks
20 useRemoteUsers, // Retrieve the list of remote users
21} from 'https://esm.sh/agora-rtc-react'
22import AgoraRTC, { AgoraRTCProvider } from 'https://esm.sh/agora-rtc-react'
23
24const client = AgoraRTC.createClient({ mode: 'live', codec: 'vp8', role: 'host' })
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export function PdfContent({ data, content }) {
16```
17
18Example usage: https://www.val.town/x/std/reactHonoStarter/code/backend/index.ts
