1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import ReactDOM from "https://esm.sh/react-dom@18.2.0/client";
4import App from "./components/App.tsx";
5
6const root = ReactDOM.createRoot(document.getElementById('root')!);
7root.render(<App />);
10 <script src="https://cdn.twind.style" crossorigin></script>
11
12 <!-- React -->
13 <script crossorigin src="https://esm.sh/react@18.2.0/umd/react.production.min.js"></script>
14 <script crossorigin src="https://esm.sh/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
15
16 <!-- Error catching -->
101 <div id="root"></div>
102
103 <!-- Load the React app -->
104 <script type="module" src="/frontend/index.tsx"></script>
105</body>
19## Tech Stack
20
21- **Frontend**: React with TypeScript, TailwindCSS
22- **Backend**: Hono API framework
23- **Database**: SQLite for recipe storage
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4console.log("useState", typeof useState); // should be 'function'
5
6
7export default function App(): React.JSX.Element {
8 const [refreshFrequency, setRefreshFrequency] = useState("");
9 const [isSubmitting, setIsSubmitting] = useState(false);
10 const [message, setMessage] = useState("");
11
12 const handleSubmit = async (e: React.FormEvent) => {
13 e.preventDefault();
14 if (!refreshFrequency.trim()) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React from "https://esm.sh/react@18.2.0";
4import App from "./components/App.tsx";
5
34
35 <script type="module">
36 import { createElement as h, useState, useEffect } from 'https://esm.sh/react@18.2.0';
37 import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
38
39 function App() {
14- `backend/index.ts` - Main Hono server with API routes
15- `frontend/index.html` - Main web interface
16- `frontend/index.tsx` - React frontend application
17- `shared/types.ts` - Shared TypeScript types
18
1# EnhancedVNode
2
3A minimalist, plugin-ready hyperscript-style utility for rendering elements with style normalization, class processing, and custom behavioral plugins. Compatible with React, Preact, or any functionally similar createElement.
4
5## ✨ Features
16
17```js
18import { createElement } from "preact"; // or import from react
19import EnhancedVNode from "./EnhancedVNode.js";
20
69
70```js
71import { createElement } from "preact";
72import EnhancedVNode from "./EnhancedVNode.js";
73
113- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
114- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names
115- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma
116- When facing client-side render issues, check if all React dependencies are pinned to the same version
117- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>`, use dark and light themes, unless otherwise specified
118
226
227### Frontend Best Practices
228- Structure as a standard client-side React app
229- Use SVG for favicons (Val Town only supports text files)
230- Separate components into individual files
231- Access bootstrapped data from `window.__INITIAL_DATA__`
232- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
233- Follow the React component pattern from the example project
234- Handle API calls properly with proper error catching
235
253 - Always run table creation before querying
254
2553. **React Configuration:**
256 - All React dependencies must be pinned to 18.2.0
257 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
258 - Rendering issues often come from mismatched React versions
259
2604. **File Handling:**
180- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
181- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
182- **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 */`
183- Ensure all React dependencies and sub-dependencies are pinned to the same version
184- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
185
266 - Always run table creation before querying
267
2683. **React Configuration:**
269 - All React dependencies must be pinned to 18.2.0
270 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
271 - Rendering issues often come from mismatched React versions
272
2734. **File Handling:**
