1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export default async function(req: Request) {
1// This val renders the output of "janpaul123/getValsContextWindow" as HTML
2// It uses React for rendering and includes a <select> for the "model" option
3// The approach is to fetch the context window data, then render it as an interactive HTML page
4
5/** @jsxImportSource https://esm.sh/react */
6import { renderToString } from "npm:react-dom/server";
7import getValsContextWindow from "https://esm.town/v/janpaul123/getValsContextWindow";
8import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
62 target: ts.ScriptTarget.ESNext,
63 module: ts.ModuleKind.ESNext,
64 jsx: ts.JsxEmit.React,
65 lib: ["esnext", "dom"],
66 moduleDetection: ModuleDetectionKind.Force,
1/** @jsxImportSource npm:react **/
2/** kortina
3import process from "node:process";
4import { renderToString } from "npm:react-dom@18/server";
5import { QueryVectorStore, sb, Substrate } from "npm:substrate";
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";
13import { Hono } from "npm:hono@3";
14import _ from "npm:lodash@4";
15import { renderToString } from "npm:react-dom/server";
16
17export 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(
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 npm:react **/
2import { renderToString } from "npm:react-dom@18/server";
3
4export default (req: Request) => {
1/**
2 * @title React CSR Client in Val Town
3 * @description Client-side React application for a personal portfolio website.
4 */
5/** @jsxImportSource https://esm.sh/react */
6import React, { useState, useEffect } from "https://esm.sh/react";
7import ReactDOM from "https://esm.sh/react-dom";
8import { BrowserRouter, Route, NavLink, Routes } from "https://esm.sh/react-router-dom";
9import { personalData } from "https://esm.town/v/iamseeley/personalData";
10
32 <h2>Welcome to My Portfolio</h2>
33 <p>{personalData.summary}</p>
34 <p><strong>This website is rendered client-side with React.</strong></p>
35 <p>Check out the <a target='_blank' href='https://www.val.town/v/iamseeley/reactClient'>client</a> and <a target='_blank' href='https://www.val.town/v/iamseeley/reactServer'>server</a> code and start building your own site!</p>
36 <p>You've been on this page for {count} seconds.</p>
37 </div>
88);
89
90const root = ReactDOM.createRoot(document.getElementById("root"));
91root.render(<App />);
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
