Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react */
2import { zip } from "https://esm.sh/lodash-es";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown?v=46";
5import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";
6
7export async function loader(req: Request) {

1# Simple HTML page
2
3with react-dom/server
4

1Basic demo of getting reactive Alpine.js working on a hono/jsx "backend"
2- For server <> frontend interaction, do form POST submissions (or potentially POST json to the public val address?)
3
4https://alpinejs.dev/start-here#building-a-counter
5
6Migrated from folder: Experiments/alpine/honoJsxAlpineReactive

8  {
9    user: "website that shows the current time",
10    content: `/** @jsxImportSource npm:react */
11export default function() {
12  return <h1>{new Date().toLocaleTimeString()}</h1>;

1# SSR React Mini & SQLite Todo App
2
3This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
4
5![demo](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3bbc3a39-9017-4a95-797b-2f205aa57f00/public)
6
7## SSR React Mini Framework
8
9This ["framework"](https://www.val.town/v/stevekrouse/ssr_react_mini) is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.
10
11The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you're [server rendering](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L35-37). Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as [modules](https://esm.town/v/stevekrouse/TodoApp) importable by the browser.
12
13The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side `loader` and `action` with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the [`loader`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L7) and [`action`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L20), so they only run server-side.
14
15

1/** @jsxImportSource https://esm.sh/react */
2import { zip } from "https://esm.sh/lodash-es";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown?v=46";
5import { Form, hydrate } from "https://esm.town/v/stevekrouse/ssr_react_mini?v=75";
6
7export async function loader(req: Request) {

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

1/** @jsxImportSource npm:preact **/
2import { html } from "https://esm.town/v/stevekrouse/html?v=5";
3import { render } from "npm:preact-render-to-string";
4
5type HandlerFunc = (req?: Request) => Response | Promise<Response>;

1import { Button, Tailwind } from "npm:@react-email/components";
2import { Html } from "npm:@react-email/html";
3import { render } from "npm:@react-email/render";
4import * as React from "npm:react";
5
6import { sendMail } from "https://esm.town/v/tomas_padrieza/sendEmail";

1Simple demo of a React Email rendering