1// render WebcamPage as a client side react component with fetch handler response object
2
3const script = `
4import WebcamPage from 'https://esm.sh/gh/fal-ai/fal-js@9cc7cf5456/apps/demo-nextjs-app-router/app/camera-turbo/page.tsx';
5import React from 'https://esm.sh/react@17.0.2?dev';
6import { render } from 'https://esm.sh/react-dom@17.0.2?dev';
7
8render(React.createElement(WebcamPage), document.getElementById('root'));
9`;
10
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export const personalWebsite = (request: Request) => {
1/** @jsxImportSource npm:preact **/
2
3import { html } from "https://esm.town/v/stevekrouse/html?v=5";
4import { Base64 } from "npm:js-base64";
5import { render } from "npm:preact-render-to-string";
6
7type SerializedRequest = {
1/** @jsxImportSource https://esm.sh/react */
2import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=46";
3import { email } from "https://esm.town/v/std/email?v=11";
4import { sqlite } from "https://esm.town/v/std/sqlite";
5import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";
6import { renderToString } from "npm:react-dom/server";
7
8const linkClass = "text-blue-500 hover:underline";
19}
20
21export const reactExample = modifyFetchHandler(async (request: Request) => {
22 const url = new URL(request.url);
23 if (url.pathname === "/favicon.ico") return new Response(null, { status: 404 });
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from 'npm:react-dom/server';
3
4export const testWebsite = (request: Request) => {
1null
2
3Migrated from folder: Archive/dateme_react_router_rewrite/dateme_faq_react
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
5import { html } from "https://esm.town/v/stevekrouse/html";
6
7// button that's disabled until client react hydrates
8export const Button = (props) => {
9 const [clientHydrated, setClientHydrated] = useState(false);
51 const props = await loader(req);
52 const script = `
53 import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
54 import { jsx as _jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
55 import { Component } from "https://esm.town/v/${author}/${name}";
56
1# Starter App for [ssr_react_mini](https://www.val.town/v/stevekrouse/ssr_react_mini)
2
3You need to export four things:
4
51. `loader` - runs on any GET request, on the server. it accepts the `Request` and returns the props of your React compnent.
62. `action`- runs on the server on any non-GET, ie POST, PUT, DELETE, or `<form>`s submit
73. `Component` - your React component. it's initially server-rendered and then client-hydrated
84. `default` - you should mostly leave this line alone
9
10This is framework is bleeding-edge. You'll need to read the [code of the framework itself](https://www.val.town/v/stevekrouse/ssr_react_mini) (it's very short) to understand what it's doing.
11
12If you have questions or comments, please comment below on this val! (or any of these vals)
13
14Migrated from folder: Archive/ssr_react_mini_starter
1import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
2import { jsx as _jsx } from "https://esm.sh/react/jsx-runtime";
3import { TodoApp } from "https://esm.town/v/stevekrouse/TodoApp";
4
1# Server-side Render React Mini Framework
2
3This is very experimental, more of a prototype of an architecture, than a true framework
5Example: https://www.val.town/v/stevekrouse/TodoApp
6
7Migrated from folder: Archive/ssr_react_mini