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 { useEffect, useContext } from "https://esm.sh/react@18.2.0?dev";
3import { Link, useNavigate } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useLocalStorage } from "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0";
5import { useAuth } from "../hooks/useAuth.tsx";
6import { Circle, Volume2Icon, VolumeOffIcon } from "./icons.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { renderToString } from "https://esm.sh/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 "https://esm.sh/react@18.2.0?dev";
3import { TownieIcon } from "./icons.tsx";
4import { Messages } from "./Messages.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext } from "https://esm.sh/react@18.2.0?dev";
3import { useParams } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useMemo } from "https://esm.sh/react@18.2.0?dev";
3import { useNavigate, useParams } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useBranches } from "../hooks/useBranches.tsx";
5import { useCreateBranch } from "../hooks/useCreateBranch.tsx";
1/** @jsxImportSource https://esm.sh/react@19 */
2import * as React from "https://esm.sh/react@19";
3import ReactDOMServer from "https://esm.sh/react-dom@19/server";
4import {
5 StaticRouter,
6 Routes,
7 Route,
8} from "https://esm.sh/react-router";
9import App from "./App.tsx";
10
14 const url = new URL(req.url);
15
16 let html = await ReactDOMServer.renderToReadableStream(
17 <StaticRouter location={url}>
18 <App />
1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import ReactDOM from "https://esm.sh/react-dom@19/client";
4import { BrowserRouter } from "https://esm.sh/react-router";
5import App from "./App.tsx";
6
7console.log("client");
8
9ReactDOM.hydrateRoot(
10 document,
11 <BrowserRouter>
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 });
