1/** @jsxImportSource https://esm.sh/react */
2
3import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";
14import { Hono } from "npm:hono@3";
15import _ from "npm:lodash@4";
16import { renderToString } from "npm:react-dom/server";
17
18function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {
232 executed on every HTTP request.
233 The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.
234 You can use React but you don't have to.
235 `.replace("\n", " ");
236
246 const changesMessages = function({ currentCode, userprompt }: { currentCode: string; userprompt: string }) {
247 if (!currentCode) {
248 currentCode = `/** @jsxImportSource https://esm.sh/react */
249
250import React from "npm:react";
251import { renderToString } from "npm:react-dom/server";
252
253const Example = () => (<html></html>);
293executed on every HTTP request.
294The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.
295You can use React but you don't have to.
296Take requests for changes to the supplied code.
297If the request is ambiguous, ask questions.
407 code as possible, only changing things that are strictly necessary to change.
408 \`\`\`ts
409/** @jsxImportSource https://esm.sh/react */
410
411import React from "npm:react";
412import { renderToString } from "npm:react-dom/server";
413
414const Example = () => (<html></html>);
431\`\`\`ts
432[SEARCH_START_SINGLE_LINE]
433import React from "npm:react";
434[/SEARCH_START_SINGLE_LINE]
435[SEARCH_END_SINGLE_LINE]
436[/SEARCH_END_SINGLE_LINE]
437[REPLACE]
438// This val creates a simple "Hello World" page using React.
439// We'll use React and ReactDOMServer for server-side rendering.
440// The approach is straightforward: create a React component and render it to HTML.
441
442import React from "npm:react";
443[/REPLACE]
444\`\`\`
479 code as possible, only changing things that are strictly necessary to change.
480 \`\`\`ts
481/** @jsxImportSource https://esm.sh/react */
482
483// This val creates a simple "Hello World" page using React.
484// We'll use React and ReactDOMServer for server-side rendering.
485// The approach is straightforward: create a React component and render it to HTML.
486
487import React from "npm:react";
488import { renderToString } from "npm:react-dom/server";
489
490const HelloWorld = () => (
516\`\`\`ts
517[SEARCH_START_SINGLE_LINE]
518// The approach is straightforward: create a React component and render it to HTML.
519[/SEARCH_START_SINGLE_LINE]
520[SEARCH_END_SINGLE_LINE]
521[/SEARCH_END_SINGLE_LINE]
522[REPLACE]
523// The approach is straightforward: create a React component and render it to HTML.
524// We import Tailwind CSS and apply classes to our React elements to style the page.
525[/REPLACE]
526\`\`\`
560 code as possible, only changing things that are strictly necessary to change.
561 \`\`\`ts
562/** @jsxImportSource https://esm.sh/react */
563
564// This val creates a simple Hacker News clone using React, Tailwind CSS, and blob storage.
565// We'll use React and ReactDOMServer for server-side rendering, Tailwind for styling,
566// and blob storage to persist and retrieve posts.
567
568import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
569import { blob } from "https://esm.town/v/std/blob";
570import React from "npm:react";
571import { renderToString } from "npm:react-dom/server";
572
573const { name } = extractValInfo(import.meta.url);
611 const initialPosts: Post[] = [
612 { id: 1, title: "Deno 1.0 Released", url: "https://deno.land/", score: 100 },
613 { id: 2, title: "React 18 Announced", url: "https://reactjs.org/", score: 80 },
614 { id: 3, title: "Tailwind CSS v3.0", url: "https://tailwindcss.com/", score: 60 },
615 ];
764 role: "user",
765 content:
766 `For all requests below, use React and Tailwind for the frontend, and blob storage for the backend, unless otherwise specified.`,
767 },
768 {
