1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { createRoot } from "react-dom";
3import { App } from "./components/App.tsx";
4
180 {
181 "imports": {
182 "react": "https://esm.sh/react@18.2.0?dev",
183 "react-dom": "https://esm.sh/react-dom@18.2.0/client?dev",
184 "react-router": "https://esm.sh/react-router@7.4.0?dev&deps=react@18.2.0&react-dom@18.2.0",
185 "react-use": "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0",
186 "@ai-sdk/react": "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0",
187 "react-markdown": "https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0"
188 }
189 }
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2
3export function TownieIcon({
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { Link } from "react-router";
3import React from "react";
4import {
5 EyeIcon,
85 <p>Townie is built with:</p>
86 <ul>
87 <li>React frontend with TypeScript</li>
88 <li>Hono API server backend</li>
89 <li>Web Audio API for sound notifications</li>
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useEffect, useContext } from "react";
3import { Link, useNavigate } from "react-router";
4import { useLocalStorage } from "react-use";
5import { Circle, Volume2Icon, VolumeOffIcon } from "./icons.tsx";
6import { AppContext } from "./App.tsx";
1/** @jsxImportSource npm:react@18.2.0 */
2import { renderToString } from "npm:react-dom@18.2.0/server";
3import { TownieIcon } from "./components/icons.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useRef, useEffect, useState } from "react";
3import { TownieIcon } from "./icons.tsx";
4import { Messages } from "./Messages.tsx";
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@18.2.0?dev */
2import { useState, useEffect, useContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext, createContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";
