Val Town Code Search

ReactStream main.tsx16 matches

@lisardo•Updated 9 months ago

1/** @jsxImportSource https://esm.sh/react */
2import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
3import * as React from "https://esm.sh/react@18.3.1";
4
5export { React };
6
7export type RequestHandler = (request: Request) => Promise<Response>;
13export type Middleware = (req: DataRequest, res: Response, callback: NextCallback) => Promise<Response>;
14
15export interface ReactStreamProps {
16  url: URL;
17  pathname: string;
23
24export function render<T>(
25  /** Root-level React component that renders an entire <html> element
26   * including the head and body tags.
27   */
28  Component: React.ComponentType<ReactStreamProps>,
29  /** On Val Town, use `import.meta.url` for client-side hydration */
30  module: string | false,
31  /** Optional middleware */
32  opts: ReactStreamOptions | Middleware[] = [],
33) {
34  const useMiddleware = Array.isArray(opts); // for backwards compat
35  const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};
36  const { api, getInitialProps } = options;
37
42
43  return async function handler(request: Request): Promise<Response> {
44    const main = reactStream(Component, module);
45    const middleware: Middleware[] = [
46      parseURL,
71export default render;
72
73// main react response handler
74const reactStream = (
75  Component: React.ComponentType<ReactStreamProps>,
76  module: string | false,
77): Middleware =>
78  async function(req: DataRequest, res: Response): Promise<Response> {
79    const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");
80
81    const stream = await renderToReadableStream(
91    headers.set("Content-Type", "text/html");
92
93    console.log("react", res.status);
94    return new Response(stream, {
95      headers,
139};
140/** DEPRECATED: Use middleware instead */
141export interface ReactStreamOptions {
142  /** DEPRECATED: Optional text response for robots.txt */
143  robots?: string;

hungryWhiteLeopon main.tsx4 matches

@gr8gatsby•Updated 9 months ago

4 * information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews.
5 *
6 * It uses React for the frontend, the Nominatim API for initial coffee shop data,
7 * and Val Town's SQLite for data persistence.
8 */
9
10/** @jsxImportSource https://esm.sh/react */
11import React, { useEffect, useState } from "https://esm.sh/react";
12import { createRoot } from "https://esm.sh/react-dom/client";
13
14function App() {

addToLog main.tsx5 matches

@ejfox•Updated 9 months ago

1/**
2 * This chat application allows users to post messages and view a log of all messages.
3 * It uses SQLite for persistence and React for the frontend.
4 * The server handles message posting and retrieval, while the client renders the UI.
5 */
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState, useEffect } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10interface Message {
28  };
29
30  const handleSubmit = async (e: React.FormEvent) => {
31    e.preventDefault();
32    if (!newMessage.trim()) return;

inventory main.tsx6 matches

@ejfox•Updated 9 months ago

1/**
2 * This val creates an interactive tech stack wizard that generates a video game-style inventory screen.
3 * It uses React for the UI, leverages emoji and Unicode symbols for a visually rich experience, and
4 * incorporates Tailwind CSS for elegant, grayscale styling.
5 * The wizard allows users to select tools, libraries, and APIs, then displays them in a shareable format.
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React, { useState } from "https://esm.sh/react";
10import { createRoot } from "https://esm.sh/react-dom/client";
11
12// Define tech options with emojis or Unicode symbols as icons
13const techOptions = [
14  { name: "React", icon: "⚛️" },
15  { name: "Vue", icon: "🖖" },
16  { name: "Angular", icon: "🅰️" },
47  { name: "Swift", icon: "🕊️" },
48  { name: "Flutter", icon: "🦋" },
49  { name: "React Native", icon: "📱" },
50  { name: "Electron", icon: "🔬" },
51  { name: "Webpack", icon: "📦" },

techstackinventory main.tsx5 matches

@ejfox•Updated 9 months ago

1/**
2 * This val creates a tech stack inventory chooser using React and Tailwind CSS for styling.
3 * It allows users to select technologies for different categories and displays the chosen stack.
4 */
5/** @jsxImportSource https://esm.sh/react */
6import React, { useState } from "https://esm.sh/react";
7import { createRoot } from "https://esm.sh/react-dom/client";
8
9const techCategories = {
10  frontend: ["React", "Vue", "Angular", "Svelte"],
11  backend: ["Node.js", "Python", "Ruby", "Java"],
12  database: ["PostgreSQL", "MongoDB", "MySQL", "SQLite"],

status main.tsx3 matches

@endzel•Updated 9 months ago

1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {

shySapphireLeopard main.tsx4 matches

@stevekrouse•Updated 9 months ago

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4import React from "https://esm.sh/react";
5import { createRoot } from "https://esm.sh/react-dom/client";
6
7function App() {

valleGetValsContextWindow main.tsx9 matches

@roadlabs•Updated 9 months ago

41        {
42          type: "http",
43          prompt: "Generate a val that uses React to render HTML",
44          code: `/** @jsxImportSource https://esm.sh/react */
45    import { renderToString } from "npm:react-dom/server";
46  
47    export const reactExample = (request: Request) =>
48      new Response(renderToString(<div>Test {1 + 1}</div>), {
49        headers: {
74          type: "http",
75          prompt: null,
76          code: `/** @jsxImportSource https://esm.sh/preact */
77    import { render } from "npm:preact-render-to-string";
78  
79    export const preactExample = (request: Request) =>
80      new Response(render(<div>Test {1 + 1}</div>), {
81        headers: {
191          prompt: "Write a val that renders a website and uses tailwind css",
192          type: "http",
193          code: `/** @jsxImportSource https://esm.sh/preact */
194    import { render } from "npm:preact-render-to-string";
195  
196    export default async function(req: Request) {

requestCollector main.tsx4 matches

@maxm•Updated 9 months ago

2 * This request collector val saves information about incoming requests
3 * and displays summary statistics on the home page. It uses SQLite for
4 * persistence and server-side React for rendering the UI. Users can click
5 * on a request ID to view full details of that request.
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React from "https://esm.sh/react";
10import { renderToString } from "https://esm.sh/react-dom/server";
11
12interface RequestData {

linkInBioTemplate main.tsx4 matches

@Olive•Updated 9 months ago

2 * This web app creates a Side School Seminar location voting system.
3 * Users can vote for their preferred seminar location from four options.
4 * The app uses React for the frontend and SQLite for storing votes on the backend.
5 * The design is inspired by Side.school and includes an image in the first frame.
6 * It features a celebration animation when voting, a distinct style for the selected option,
7 * and allows users to cancel their vote by clicking on the selected option again.
8 */
9/** @jsxImportSource https://esm.sh/react */
10import React, { useState, useEffect } from "https://esm.sh/react";
11import { createRoot } from "https://esm.sh/react-dom/client";
12
13const locations = [

« Previous

1...1230 1231 1232 1233 1234 1235 1236...1279

Projects

View all 215 vals

reactHonoStarter4 file matches

@notmart•Updated 11 hours ago

FarcasterGallery10 file matches

@moe•Updated 20 hours ago

Hono + React + Tailwind + Farcaster Frame Starter Project

Users

View all 2 users

@effector2 vals

Updated 3 weeks ago

Write business logic with ease Meet the new standard for modern TypeScript development. Type-safe, reactive, framework-agnostic library to manage your business logic.

@officialrajdeepsingh1 val

Updated 4 weeks ago

Documentation

View all 4 documentation results

Val Town Code SearchReturn to Val Town

ReactStreammain.tsx16 matches

hungryWhiteLeoponmain.tsx4 matches

addToLogmain.tsx5 matches

inventorymain.tsx6 matches

techstackinventorymain.tsx5 matches

statusmain.tsx3 matches

shySapphireLeopardmain.tsx4 matches

valleGetValsContextWindowmain.tsx9 matches

requestCollectormain.tsx4 matches

linkInBioTemplatemain.tsx4 matches

Projects

reactHonoStarter4 file matches

FarcasterGallery10 file matches

Users

@effector2 vals

@officialrajdeepsingh1 val

Documentation

Val Town Code Search Return to Val Town

ReactStream main.tsx16 matches

hungryWhiteLeopon main.tsx4 matches

addToLog main.tsx5 matches

inventory main.tsx6 matches

techstackinventory main.tsx5 matches

status main.tsx3 matches

shySapphireLeopard main.tsx4 matches

valleGetValsContextWindow main.tsx9 matches

requestCollector main.tsx4 matches

linkInBioTemplate main.tsx4 matches