10
11The `www` val serves the site using the `src/hono-adapter`.
12This "adapter" could use any framework for rendering so that you could use something like React or something like Handlebars
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { ValTown } from "https://esm.sh/@valtown/sdk";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import { generateCodeAnthropic, makeFullPrompt } from "./backend/generateCode";
6
1# React Router v7
2
3This project demonstrates how to use react-router v7's [custom framework setup](https://reactrouter.com/start/framework/custom) to run react-router in a val.town project.
4
5This is a direct port of [their example repo](https://github.com/remix-run/custom-react-router-framework-example).
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import { useLoaderData } from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
4import type loader from "./about.loader.js";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3export default function Home() {
46 If needed and if the user asks for something that requires persistence, use Val Town SQLite or Blob storage. Use the val's `import.meta.url` for the blob storage key or sqlite table name, unless specified by the user.
47
48 * If you use any React library, use esm.sh and pin its React version to 18.2.0 and its ReactDOM version to 18.2.0 by adding `?deps=react@18.2.0,react-dom@18.2.0` to the end of the URL. If the user is facing a client-side error where nothing is being rendered, check if all React dependencies and sub-dependencies are pinned to the same version, including the @jsxImportSource pragma.
49</requirements>
50
148```val type=http
149/** Use this template when you create http vals only */
150/** @jsxImportSource https://esm.sh/react@18.2.0 */
151import React from "https://esm.sh/react@18.2.0";
152import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
153
154/**
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import {
4 createStaticHandler,
5 createStaticRouter,
6 StaticRouterProvider,
7} from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
8
9import routes from "./routes/_index.ts";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { RouterProvider } from "https://esm.sh/react-router@7.1.3/dom?deps=react@18.2.0,react-dom@18.2.0";
5import { createBrowserRouter } from "https://esm.sh/react-router@7.1.3?deps=react@18.2.0,react-dom@18.2.0";
6import { StrictMode } from "https://esm.sh/react@18.2.0";
7import routes from "./routes/_index.ts";
8
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() {
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
