1/** @jsxImportSource https://esm.sh/react@18.3.1 */
2import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
3import * as React from "https://esm.sh/react@18.3.1";
4import { reactStream } from "./react-stream.tsx";
5import { parseURL } from "./parse-url.tsx";
6import { parseHeaders } from "./parse-headers.tsx";
7import { ReactStreamProps, Middleware } from "./types.tsx";
8
9export { React };
10export { robots } from "./robots.tsx";
11
12export function render<T>(
13 /** Root-level React component that renders an entire <html> element
14 * including the head and body tags.
15 */
16 Component: React.ComponentType<ReactStreamProps>,
17 /** On Val Town, use `import.meta.url` for client-side hydration */
18 module: string | false,
21) {
22 if (typeof document !== "undefined" && module) {
23 console.log("jxnblk/reactstream");
24 const props = window.__data;
25 hydrateRoot(document, <Component {...props} />);
27
28 return async function handler(request: Request): Promise<Response> {
29 const main = reactStream(Component, module);
30 const middleware: Middleware[] = [
31 parseURL,
1/** @jsxImportSource npm:react */
2import * as React from "npm:react";
3import ReactDOMServer from "npm:react-dom/server";
4
5const CLIENT_MODULE = import.meta.resolve("./client.tsx");
9 <html lang="en">
10 <head>
11 <title>React Router Starter</title>
12 </head>
13 <body>
19
20export default async function (req: Request): Promise<Response> {
21 let html = await ReactDOMServer.renderToReadableStream(<Root />, {
22 bootstrapModules: [ CLIENT_MODULE ],
23 });
1/** @jsxImportSource npm:react */
2/** @jsxImportSourceTypes npm:@types/react */
3import { renderToString } from "npm:react-dom/server";
4import { SearchPage } from "./components.tsx";
5import {
1---
2title: "Knee Slide Cursor"
3description: "A fun, interactive soccer-themed cursor effect that reacts to your mouse movements! Featuring a smooth knee-slide animation and goal celebration messages."
4imageUrl: "https://chatgpt.com/backend-api/public_content/enc/eyJpZCI6Im1fNjgwZDhkYjBiNzdjODE5MTkxOTM3Y2ZlODk3NThjM2E6ZmlsZV8wMDAwMDAwMGY4NDg2MjMwOTU5NDRkOTE0ZTFhMTk3ZCIsInRzIjoiNDg0OTIxIiwicCI6InB5aSIsInNpZyI6ImE2MTRjMjZlMTA1ODM0ZmFkZGQzZDU4YTcyMDdjZmYzMzAyZGEzMGNhZWI0ZGEyMjI2YWM5ZGFiNDM4MTdlNjIiLCJ2IjoiMCIsImdpem1vX2lkIjpudWxsfQ=="
5author: "dcm31"
6tags: ["javascript","react","cursor-effects","val-town","soccer","interactive","tes"]
7tabs: ["Silly", "Soccer"]
8---
158 --fan-translate-x-next: 0px;
159 --fan-rotate-y-next: 0deg;
160 --fan-transition-speed: 0.2s; /* How fast the fan effect reacts */
161
162 /* <<< NEW: Border Animation Variables >>> */
394 const DRAG_THRESHOLD = 50;
395 const NUM_SPARKS = 15;
396 const FAN_SENSITIVITY = 1.5; // Multiplier for how quickly fanning reacts to mouse horizontal position ( > 1 means faster)
397 const FAN_DEADZONE = 0.05; // Range around center (-0.05 to 0.05) where no fanning occurs
398
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5const SCHEDULE = [
1/** @jsxImportSource https://esm.sh/react@19 */
2import { ArrowLeft, Share } from "https://esm.sh/lucide-react";
3import { useEffect, useState } from "https://esm.sh/react@19";
4
5export function Section({ children, ...props }: any) {
1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5- **Remix** this starter template on the top right to get started.
7- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
8
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
1/** @jsxImportSource https://esm.sh/react@19 */
2import { QueryClient, QueryClientProvider } from "https://esm.sh/@tanstack/react-query@5";
3import { createRoot } from "https://esm.sh/react-dom@19/client";
4import { BrowserRouter } from "https://esm.sh/react-router@7";
5
6import { App } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react */
2import { render } from "https://deno.land/x/resvg_wasm/mod.ts";
3import { Hono } from "npm:hono";
25 <div tw="h-[270px]"></div>
26 <div tw="flex text-[100px] tracking-[-5px]">Mini App Starter</div>
27 <div tw="flex text-[30px] opacity-50 tracking-[-1px]">Hono + React + Tailwind Starter Project on Val Town</div>
28 </div>
29 </div>,
