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 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 { renderToString } from "npm:react-dom/server";
3
4function HelloWorld() {
26}
27
28function reactExample(request: Request) {
29 const renderedString = renderToString(<Html content={<HelloWorld />} />);
30
38}
39
40export default reactExample;
1/** @jsxImportSource https://esm.sh/react */
2
3import fal from "npm:@fal-ai/serverless-client";
4import { renderToString } from "npm:react-dom/server";
5
6export default async function(interval: Interval) {
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/preact **/
2
3import register from "https://esm.sh/preact-custom-element";
4
5const Greeting = ({ name = "World" }) => <p>Hello, {name}!</p>;
1/** @jsxImportSource https://esm.sh/react */
2import { useEffect, useState } from "https://esm.sh/react";
3
4// will run on both client and server
35 // server-side import should only be used here
36 const { Island } = await import("https://esm.town/v/pomdtr/island");
37 const { renderToString } = await import("https://esm.sh/react-dom/server");
38 return new Response(
39 renderToString(
1const islands = Array.from(document.querySelectorAll("[data-hydration-src]"));
2if (islands.length > 0) {
3 const { hydrateRoot } = await import("https://esm.sh/react-dom@18.2.0/client");
4 const { jsx: _jsx } = await import("https://esm.sh/react@18.2.0/jsx-runtime");
5 for (const island of islands) {
6 let src = island.getAttribute("data-hydration-src");
1/** @jsxImportSource https://esm.sh/react */
2
3import React from "https://esm.sh/react";
4
5export function Island({
12 children: any;
13}) {
14 const child = React.Children.only(children);
15
16 return (
Starter template with client-side React & Hono server
A web-based dice roller using React on Val Town
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
