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";
6import Hono from "https://esm.sh/hono";
7
8// button that's disabled until client react hydrates
9export const Button = (props) => {
10 const [clientHydrated, setClientHydrated] = useState(false);
56 const props = await loader(req);
57 const script = `
58 import { hydrateRoot } from "https://esm.sh/react-dom@18.2.0/client";
59 import { jsx as _jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
60 import { Component } from "https://esm.town/v/${author}/${name}";
61
1# Hono React SSR
2
3Development in progress
4
5Migrated from folder: Archive/hono_react_ssr
1/** @jsxImportSource npm:preact */
2import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge";
3import wrapper from "https://esm.town/v/jxnblk/valTownBadgeMiddleware";
4import { render } from "npm:preact-render-to-string";
5
6function handler(req: Request): Promise<Response> {
1/** @jsxImportSource npm:react */
2import React from "npm:react";
3
4export default function CodeIcon(props: React.SVGProps<SVGSVGElement>) {
5 return (
6 <svg
1null
2
3Migrated from folder: _LEAVE_AS_IS/badge_LEAVE_AS_IS/codeIconReact
7Run an editor like so:
8```tsx
9/** @jsxImportSource https://esm.sh/react */
10import { renderToString } from "npm:react-dom/server";
11
12export default async function(req: Request): Promise<Response> {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4import { blob } from "https://esm.town/v/std/blob?v=12";
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4const genSVG = (request: Request): string => {
84};
85
86export const reactExample = (request: Request) =>
87 new Response(
88 genSVG(request),
1/** @jsxImportSource https://esm.sh/react */
2import { Chess, Move, Square } from "npm:chess.js";
3import minify from "npm:css-simple-minifier";
4import { renderToString } from "npm:react-dom/server";
5
6class StaticChess {
1/** @jsxImportSource npm:react */
2import React from "npm:react";
3
4export default function ValTownLogo(props: React.SVGProps<SVGSVGElement>) {
5 return (
6 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 442 79" {...props}>