1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import date_me_doc_locations from "https://esm.town/v/stevekrouse/date_me_doc_locations";
3const Link = ({ href, children }) => {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import isPointWithinRadius from "https://esm.sh/geolib/es/isPointWithinRadius";
3import { useLoaderData } from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0";
4import date_me_doc_locations_geo from "https://esm.town/v/stevekrouse/date_me_doc_locations_geo";
5import { nominatimSearch } from "https://esm.town/v/stevekrouse/nominatimSearch";
32}
33
34// TODO - refactor this into a Cell React component
35function renderCell(header, row) {
36 let data = row[header];
30* If email, show that user's content, and a logout link to "/auth/logout"; if no email, show login options.
31* `import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton"`
32* Use the <LoginWithGoogleButton /> React Component, optionally supplying the `text` attribute
33* Add "via LastLogin" underneat LoginWithGoogleButton, centered, secondary text, linking to https://lastlogin.io/
34* Pass the email from the server to the client-side code if using React hydration or similar techniques.
35
36### How it works
37
381. Your users click on the <LoginWithGoogleButton /> React Component in your app
392. The <LoginWithGoogleButton /> opens a new window to /auth/login?provider=google in your app
403. This middleware directs them to log into Google via LastLogin
64* If email, show that user's content, and a logout link to "/auth/logout";
65* If no email, add a link to "Login or Sign Up" to "/auth/login"
66* Pass the email from the server to the client-side code if using React hydration or similar techniques.
67
68### How it works
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { renderToString } from "https://esm.sh/react-dom/server";
5import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
6
1/** @jsxImportSource https://esm.sh/react */
2import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";
3import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";
14import { Hono } from "npm:hono@3";
15import _ from "npm:lodash@4";
16import { renderToString } from "npm:react-dom/server";
17
18export default function(
1/** @jsxImportSource https://esm.sh/react */
2import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";
3import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";
14import { Hono } from "npm:hono@3";
15import _ from "npm:lodash@4";
16import { renderToString } from "npm:react-dom/server";
17
18export default function(
1React SSR and client-side hydration for Val Town
2
3## Usage
4
5```tsx
6/** @jsxImportSource https://esm.sh/react */
7import { render, React } from "https://esm.town/v/jxnblk/ReactStream";
8
9function App() {
10 const [count, setCount] = React.useState(0);
11 return (
12 <html>
13 <body>
14 <h1>ReactStream</h1>
15 <p>React SSR with client-side hydration in Val Town</p>
16 <pre>{count}</pre>
17 <button onClick={() => setCount(count - 1)}>-</button>
25```
26
27[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)
28
29To render static HTML without hydration, pass `false` as the second argument.
48### robots.txt
49
50ReactStream has a built-in middleware to handle request to `/robots.txt`
51
52```tsx
53import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";
54// ...
55export default render(App, import.meta.url, [
92
93```tsx
94/** @jsxImportSource https://esm.sh/react */
95import { render } from "https://esm.town/v/jxnblk/ReactStream";
96
97function App () {
99 <html>
100 <head>
101 <title>ReactStream</title>
102 </head>
103 <body>
111```
112
113React requires matching versions for SSR and hydration.
114Import `React` from `https://esm.town/v/jxnblk/ReactStream` to ensure your component uses the same version as this library (currently react@18.3.1).
115
116Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo
117
118
119Migrated from folder: _LEAVE_AS_IS/ReactStream
30 {
31 type: "http",
32 prompt: "Generate a val that uses React to render HTML",
33 code: `/** @jsxImportSource https://esm.sh/react */
34 import { renderToString } from "npm:react-dom/server";
35
36 export const reactExample = (request: Request) =>
37 new Response(renderToString(<div>Test {1 + 1}</div>), {
38 headers: {
63 type: "http",
64 prompt: null,
65 code: `/** @jsxImportSource https://esm.sh/preact */
66 import { render } from "npm:preact-render-to-string";
67
68 export const preactExample = (request: Request) =>
69 new Response(render(<div>Test {1 + 1}</div>), {
70 headers: {
180 prompt: "Write a val that renders a website and uses tailwind css",
181 type: "http",
182 code: `/** @jsxImportSource https://esm.sh/preact */
183 import { render } from "npm:preact-render-to-string";
184
185 export default async function(req: Request) {
1/** @jsxImportSource npm:react */
2import CodeIcon from "https://esm.town/v/jxnblk/codeIconReact";
3import Logo from "https://esm.town/v/jxnblk/valTownLogotypeReact";
4import { renderToStaticMarkup } from "npm:react-dom/server";
5
6const width = 160;
1/** @jsxImportSource https://esm.sh/react */
2import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";
3