1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3import { Example } from "./components/Example.tsx";
4import { FarcasterMiniApp } from "./components/FarcasterMiniApp.tsx";
1# reactstream
2
3React SSR and client-side hydration for Val Town
4
5## Usage
6
7```tsx
8/** @jsxImportSource https://esm.sh/react */
9import { render, React } from "https://esm.town/v/jxnblk/reactstream/index.tsx";
10
11function App() {
12 const [count, setCount] = React.useState(0);
13
14 return (
15 <html>
16 <body>
17 <h1>ReactStream</h1>
18 <p>React SSR with client-side hydration in Val Town</p>
19 <pre>{count}</pre>
20 <button onClick={() => setCount(count - 1)}>-</button>
29
30<!-- TODO
31[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)
32-->
33
55### robots.txt
56
57ReactStream has a built-in middleware to handle request to `/robots.txt`
58
59```tsx
60import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";
61// ...
62export default render(App, import.meta.url, [
99
100```tsx
101/** @jsxImportSource https://esm.sh/react */
102import { render } from "https://esm.town/v/jxnblk/reactstream/index.tsx";
103
104function App () {
106 <html>
107 <head>
108 <title>ReactStream</title>
109 </head>
110 <body>
118```
119
120React requires matching versions for SSR and hydration.
121Import `React` from `https://esm.town/v/jxnblk/reactstream/index.tsx` to ensure your component uses the same version as this library (currently react@18.3.1).
122
123Inspired by <https://www.val.town/v/stevekrouse/react_http> & <https://www.val.town/v/stevekrouse/reactClientDemo>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { useUrls } from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/ItemContext.tsx";
4import type { DBItem } from "https://esm.town/v/nbbaier/hn_notifier/shared/types.ts";
9}
10
11const Section: React.FC<SectionProps> = ({ type }) => {
12 const [isOpen, setIsOpen] = useState(true); // Default to collapsed
13 const { items, unfollowUrl, isLoading } = useUrls();
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { createContext, type ReactNode, useContext, useEffect, useState } from "https://esm.sh/react@18.2.0";
3import { $api } from "https://esm.town/v/nbbaier/hn_notifier/backend/fetchClient.ts";
4import type { DBItem } from "https://esm.town/v/nbbaier/hn_notifier/shared/types.ts";
27
28interface ItemsProviderProps {
29 children: ReactNode;
30}
31
32export const ItemsProvider: React.FC<ItemsProviderProps> = ({ children }) => {
33 const [items, setItems] = useState<DBItem[]>([]);
34 const [isLoading, setIsLoading] = useState<boolean>(false);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { ErrorBoundary } from "https://esm.sh/react-error-boundary";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4import { useUrls } from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/ItemContext.tsx";
5
10}
11
12const InputComponent: React.FC<InputProps> = ({
13 placeholder = "Enter a Hacker News URL",
14 initialValue = "",
18 const { saveUrl, isLoading } = useUrls();
19
20 const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
21 e.preventDefault(); // Prevent the default form submission
22
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/App.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import Input from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/Input.tsx";
4import { ItemsProvider } from "https://esm.town/v/nbbaier/hn_notifier/frontend/components/ItemContext.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState, useRef } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
13
14 useEffect(() => {
15 import("https://esm.sh/wired-elements@3.0.0-rc.6?deps=react@18.2.0").then(() => {
16 setWiredElements(true);
17 });
26## Technology
27
28- React for the user interface
29- Rough.js for the sketchy, hand-drawn rendering
30- HTML Canvas for the drawing operations
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState, useRef } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
