/** @jsxImportSource https://esm.sh/react */ import { renderToString } from "https://esm.sh/react-dom@18.2.0/server"; import { useEffect, useState } from "https://esm.sh/react@18.2.0"; import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=25"; import { html } from "https://esm.town/v/stevekrouse/html"; import Hono from "https://esm.sh/hono"; // button that's disabled until client react hydrates export const Button = (props) => { const [clientHydrated, setClientHydrated] = useState(false); useEffect(() => setClientHydrated(true), []); return ; }; export const Form = ({ onSubmit, ...props }: any) => { const [clientHydrated, setClientHydrated] = useState(false); useEffect(() => setClientHydrated(true), []); return ( ); }; export const middleware = (importMetaURL: string) => async function(req: Request): Promise { const { author, name } = extractValInfo(importMetaURL); const valURL = `https://www.val.town/v/${author}/${name}`; const moduleURL = `https://esm.town/v/${author}/${name}`; const exports = await import(moduleURL); const action = exports.action ?? (() => ({})); const loader = exports.loader ?? (() => ({})); const Component = exports.Component ?? (() => (

Error: Please ensure you export Component" in{" "} @{author}/{name}.

)); if (req.method === "GET") { const props = await loader(req); const script = ` import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { jsx as _jsx } from "https://esm.sh/react@18.2.0/jsx-runtime"; import { Component } from "https://esm.town/v/${author}/${name}"; let props = ${JSON.stringify(props)} try { hydrateRoot(document, _jsx(Component, props)); } catch (e) { console.error(e) } `; return html(renderToString( <>

hono_react_ssr