Val Town Code SearchReturn to Val Town

1import { reactDemo } from "https://esm.town/v/liamdanielduffy/reactDemo";
2import { serveAsHTML } from "https://esm.town/v/liamdanielduffy/serveAsHTML";
3
4export function serveReactDemo(req, res) {
5  serveAsHTML(req, res, reactDemo());
6}

1import { addReactFromCDN } from "https://esm.town/v/liamdanielduffy/addReactFromCDN";
2import { buildHtml } from "https://esm.town/v/liamdanielduffy/buildHtml";
3
4export function reactDemo() {
5  return buildHtml(addReactFromCDN(), "");
6}

1export const reactSSRExample = async (req: express.Request, res: express.Response) => {
2  // Import React
3  const React = await import("npm:react");
4  const ReactDOMServer = await import("npm:react-dom/server");
5  // Define some components
6  function TodoItem(props) {
7    return React.createElement("li", null, props.text);
8  }
9  function TodoList(props) {
10    const todoItems = props.items.map((item, index) =>
11      React.createElement(TodoItem, { key: index, text: item })
12    );
13    return React.createElement("ul", null, todoItems);
14  }
15  const items = ["Buy groceries", "Do laundry", "Walk the dog"];
16  // Render the page
17  const html = ReactDOMServer.renderToString(
18    React.createElement(TodoList, { items: items }),
19  );
20  res.send(html);

1import { REACT_DOM_MINIFIED_FINAL } from "https://esm.town/v/liamdanielduffy/REACT_DOM_MINIFIED_FINAL";
2
3export function REACT_DOM_CDN_VAL(req, res) {
4  res.set("Content-Type", "text/javascript");
5  res.send(REACT_DOM_MINIFIED_FINAL);
6}

1import { scriptTag } from "https://esm.town/v/liamdanielduffy/scriptTag";
2
3export function addReactFromValCDN(): string {
4  const reactDom = scriptTag({
5    src: "https://api.val.town/v1/express/liamdanielduffy.REACT_DOM_CDN_VAL",
6  });
7  const react = scriptTag({
8    src: "https://api.val.town/v1/express/liamdanielduffy.REACT_CDN_VAL",
9  });
10  return [react, reactDom].join(" ");
11}

1import { REACT_TODO_LIST_CONTENTS } from "https://esm.town/v/liamdanielduffy/REACT_TODO_LIST_CONTENTS";
2import { addReactFromValCDN } from "https://esm.town/v/liamdanielduffy/addReactFromValCDN";
3import { buildHtml } from "https://esm.town/v/liamdanielduffy/buildHtml";
4
5// https://api.val.town/v1/express/liamdanielduffy.reactTodoListWebsite
6export function reactTodoListWebsite(req, res) {
7  res.set("Content-Type", "text/html");
8  res.send(buildHtml({
9    scripts: [addReactFromValCDN()],
10    styles: REACT_TODO_LIST_CONTENTS.styles,
11    body: REACT_TODO_LIST_CONTENTS.body,
12  }));
13}

1export const MAXIMUM_VAL_SIZE = "???";
2// We ran into a bug where the entirety of React DOM minified would not fit into a val as a string. IS this a max string size? Is it a max val size? Who knows.

1export const reactSSRExample = async (req: Request) => {
2  // Import React
3  const React = await import("npm:react");
4  const ReactDOMServer = await import("npm:react-dom/server");
5  // Define some components
6  function TodoItem(props) {
7    return React.createElement("li", null, props.text);
8  }
9  function TodoList(props) {
10    const todoItems = props.items.map((item, index) =>
11      React.createElement(TodoItem, { key: index, text: item })
12    );
13    return React.createElement("ul", null, todoItems);
14  }
15  const items = ["Buy groceries", "Do laundry", "Walk the dog"];
16  // Render the page
17  const html = ReactDOMServer.renderToString(
18    React.createElement(TodoList, { items: items }),
19  );
20  return new Response(html, { headers: { "Content-Type": "text/html" } });

1import { createReActPrompt } from "https://esm.town/v/jdan/createReActPrompt";
2
3export const counterfeitPrompt = createReActPrompt({
4  tools: [
5    `weigh(A: number[], B: number[]): "left" | "right" | "even"`,

42        
43        const onCancel = function (event) {
44          // handle cancel event (e.g. email the user later to try and reactivate them)
45          // note: this event will not be triggered if the user closes their browser.
46        };