Val Town Code SearchReturn to Val Town

1// JSX can be used in the client val thanks to this magic comment
2/** @jsxImportSource https://esm.sh/react **/
3// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
4import { GGMLQuantizationType, gguf } from "https://esm.sh/@huggingface/gguf";
5import React from "https://esm.sh/react";
6import ReactDOM from "https://esm.sh/react-dom";
7import { ObjectInspector } from "https://esm.sh/react-inspector";
8
9async function fetchGgufMetadata(url: string) {
13
14function Counter() {
15  const [counter, setCounter] = React.useState(0);
16
17  return (
29  return (
30    <>
31      <h1>React Example</h1>
32      <Counter />
33    </>
36
37// The app will be rendered inside the root div
38const root = ReactDOM.createRoot(document.getElementById("root"));
39root.render(<App />);

8
9```tsx
10/** @jsxImportSource https://esm.sh/react */
11import { renderToString } from "npm:react-dom/server";
12
13export default async function(req: Request): Promise<Response> {

1/** @jsxImportSource https://esm.sh/react */
2import { DateTime } from "https://cdn.skypack.dev/luxon@2.3.2";
3import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
4import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
5import { renderToString } from "npm:react-dom/server";
6
7const { author, name, httpEndpoint } = extractValInfo(import.meta.url);

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4// dprint-ignore

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

1/** @jsxImportSource https://esm.sh/react */
2import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
3import { blob } from "https://esm.town/v/std/blob?v=12";
5import { createHash } from "node:crypto";
6import base32Encode from "npm:base32-encode";
7import { renderToString } from "npm:react-dom/server";
8
9const { author, name } = extractValInfo(import.meta.url);

1/** @jsxImportSource https://esm.sh/react */
2import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
3import { blob } from "https://esm.town/v/std/blob?v=12";
4import { Buffer } from "node:buffer";
5import { createHash } from "node:crypto";
6import { renderToString } from "npm:react-dom/server";
7
8const { author, name } = extractValInfo(import.meta.url);

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

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