Val Town Code SearchReturn to Val Town

1Migrated from folder: Archive/dateme_react_router_rewrite/dateme_layout_react

1Migrated from folder: Archive/dateme_react_router_rewrite/dateme_home_react

1Migrated from folder: Archive/dateme_react_router_rewrite/dateme_router

25
26
27Migrated from folder: Archive/dateme_react_router_rewrite/dateme_react_client

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3import { Tldraw } from "https://esm.sh/tldraw@2.1.0";
4

1# lit
2
3[Lit](https://lit.dev/docs/ssr/server-usage/) is kind of like Google's answer to React: it's a little more reliant on browser APIs like custom elements and the shadow DOM, a little less 'magic', like using JSX.
4
5This is an example of using Lit and rendering it straight to a string, which is something that's recently popular. It works pretty well, right off the bat: Lit provides nice ESM modules and a pretty smooth workflow!

1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

1/** @jsxImportSource npm:react **/
2import { renderToString } from "npm:react-dom@18/server";
3
4export default (req: Request) => {

2
3/** @jsx jsx */
4import { renderToString } from "npm:react-dom/server";
5
6import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";