Search results for "react client side"

twitterAuthHandler

@andreterron

An interactive, runnable TypeScript val by andreterron

7

0

Script

{ client_id, client_secret, redirect_uri, scopes, storage }: {

client_id: string;

client_secret: string;

const { Client, auth } = await import("npm:twitter-api-sdk");

const authClient = new auth.OAuth2User({

client_id,

client_secret,

const client = new Client(authClient);

const authUrl = authClient.generateAuthURL({

client_id,

freshChartsExample

@maxm

Deno Fresh Charts Example Cobbled together from here: https://github.com/denoland/fresh_charts/tree/main/examples Render charts as HTML or as images. This image is rendered by the val below:

2

HTTP

/** @jsxImportSource https://esm.sh/react */

import React from "https://esm.sh/react";

// fresh_charts expects React to be available on globalThis/window, not sure why!

globalThis.React = React;

import { Chart, renderChart } from "https://deno.land/x/fresh_charts/mod.ts";

import { ChartColors, transparentize } from "https://deno.land/x/fresh_charts/utils.ts";

import { renderToString } from "npm:react-dom/server";

const chart = () => ({

beckerBarley

@fil

Becker’s Barley trellis SSR chart with Observable Plot This chart is rendered server-side by val.town, using Observable Plot, from data loaded from the GitHub API. For a more complete example, see https://www.val.town/v/fil.earthquakes. For information on this chart, see https://observablehq.com/@observablehq/plot-barley-trellis.

2

6

HTTP

## SSR chart with Observable Plot

This chart is rendered server-side by val.town, using Observable Plot, from data loaded from the GitHub API. For a more compl

![chart](https://fil-beckerBarley.web.val.run/)

valleGetValsContextWindow

@stevekrouse

An interactive, runnable TypeScript val by stevekrouse

0

HTTP

prompt: "Generate a val that uses React to render HTML",

code: `/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export const reactExample = (request: Request) =>

code: `/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

export const preactExample = (request: Request) =>

code: `/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

sidebar:

properBlueLion

@parthstown

@jsxImportSource https://esm.sh/react

0

Script

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export const ShowName = (name: string) => {

return (

status

@rareadmin

Uptime Status Page This is the status page for the data generated by this uptime cron: @stevekrouse/uptime

0

HTTP

/** @jsxImportSource https://esm.sh/react */

import { sqlite } from "https://esm.town/v/std/sqlite?v=6";

import { html } from "https://esm.town/v/stevekrouse/html";

import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";

import { renderToString } from "npm:react-dom/server";

function StatusRow({ rows }) {

vtApiClient

@nbbaier

An interactive, runnable TypeScript val by nbbaier

11

0

Script

referenceCount: number;

export type ExpressionResult = string | number | Record<string, any> | any[] | boolean;

export class ValTownClient {

private baseURL: string;

private authenticated: boolean;

exemplaryJadeChinchilla

@nguyenthuongvo

@jsxImportSource https://esm.sh/react@18.2.0

0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 **/

import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";

export default (req: Request) => {

return new Response(

telemetry

@saolsen

Telemetry For Vals. Telemetry is a library that lets you trace val town executions with opentelemetry. All traces are stored in val.town sqlite and there is an integrated trace viewer to see them. Quickstart Instrument an http val like this. import { init, tracedHandler, } from "https://esm.town/v/saolsen/telemetry"; // Set up tracing by passing in `import.meta.url`. // be sure to await it!!! await init(import.meta.url); async function handler(req: Request): Promise<Response> { // whatever else you do. return } export default tracedHandler(handler); This will instrument the http val and trace every request. Too add additional traces see this widgets example . Then, too see your traces create another http val like this. import { traceViewer } from "https://esm.town/v/saolsen/telemetry"; export default traceViewer; This val will serve a UI that lets you browse traces. For example, you can see my UI here . Tracing By wrapping your http handler in tracedHandler all your val executions will be traced. You can add additional traces by using the helpers. trace lets you trace a block of syncronous code. import { trace } from "https://esm.town/v/saolsen/telemetry"; trace("traced block", () => { // do something }); traceAsync lets you trace a block of async code. import { traceAsync } from "https://esm.town/v/saolsen/telemetry"; await traceAsync("traced block", await () => { // await doSomething(); }); traced wraps an async function in tracing. import { traceAsync } from "https://esm.town/v/saolsen/telemetry"; const myTracedFunction: () => Promise<string> = traced( "myTracedFunction", async () => { // await sleep(100); return "something"; }, ); fetch is a traced version of the builtin fetch function that traces the request. Just import it and use it like you would use fetch . sqlite is a traced version of the val town sqlite client. Just import it and use it like you would use https://www.val.town/v/std/sqlite attribute adds an attribute to the current span, which you can see in the UI. event adds an event to the current span, which you can see in the UI.

10

6

Script

* `fetch` is a traced version of the builtin `fetch` function that traces the request. Just import it and use it like you wou

* `sqlite` is a traced version of the val town sqlite client. Just import it and use it like you would use [https://www.val.t

* `attribute` adds an attribute to the current span, which you can see in the UI.

import { jsxRenderer, useRequestContext } from "npm:hono@4.2.2/jsx-renderer";

import { html } from "npm:hono@4.2.2/html";

import { type TransactionMode } from "npm:@libsql/client";

import {

InStatement,

mdx

@pomdtr

title: mdx {frontmatter.title} Usage import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo"; import { mdx } from "https://esm.town/v/pomdtr/mdx"; const { author, name } = extractValInfo(import.meta.url); export default mdx(author, name);

5

1

HTTP

/** @jsxImportSource https://esm.sh/preact **/

import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";

import { compile } from "npm:@mdx-js/mdx";

import { render } from "npm:preact-render-to-string";

import remarkFrontmatter from "npm:remark-frontmatter";

const vfile = await compile(readme, {

jsxImportSource: "https://esm.sh/preact",

remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],

ssr_router

@pomdtr

SSR Framework for val.town Usage The router map url paths to component vals. Component vals must export a React Component as their default export: export default function() { <h1>Hello World!</h1> } Optionally, you can define an handler next to your component, allowing you to handle query params or form inputs. Use the ctx.render function to pass props to your component. export const handler: Handler = (ctx) => { const url = new URL(ctx.req.url); const params = new URLSearchParams(url.search); return ctx.render({ name: params.get("name") }); }; export default function(props: {name?: string}) { <h1>Hello { name || "World }!</h1> }

0

HTTP

The router map url paths to component vals.

Component vals must export a React Component as their default export:

```ts

bloomingButton

@maxm

Add a blooming emoji effect when a button is clicked. Import this val as a module and add the bloom-button class to your button. Demo here: https://www.val.town/v/maxm/bloomingButtonDemo /** @jsxImportSource https://esm.sh/react */ import { renderToString } from "npm:react-dom/server"; export default async function(req: Request): Promise<Response> { return new Response( renderToString( <> <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/simplex/bulmaswatch.min.css" /> <div style={{ textAlign: "center", marginTop: "100px" }}> <button className="is-success button bloom-button" id="treeButton">Click Me</button> </div> <script type="module" src="https://esm.town/v/maxm/bloomingButton" /> </>, ), { headers: { "content-type": "text/html" } }, ); }

2

Script

```tsx

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request): Promise<Response> {

function positionDivBehindButton(button) {

const rect = button.getBoundingClientRect();

const newDiv = getBackgroundDiv(button);

happyDomExample

@tmcw

happy-dom Happy-dom is a module that provides a DOM-like abstraction that's pretty popular for test frameworks and server-side rendering, because it's a lot faster and lighter than more full-fledged browser-like options. By default, happy-dom doesn't support Deno , which is the basis for Val Town's runtime, but there's a fork that conveniently swaps out the thing it doesn't support, which is the Node.js vm module. Another way to work with the DOM is to use domino .

0

Script

# happy-dom

s a DOM-like abstraction that's pretty popular for test frameworks and server-side rendering, because it's a lot faster and l

Another way to work with the DOM is to use [domino](https://www.val.town/v/tmcw.dominoDomExample).

valle_tmp_161829582363021365248633116958786

@janpaul123

// This val will serve a basic HTML wordle game with very colorful and animated CSS.

0

HTTP

// This val will serve a basic HTML wordle game with very colorful and animated CSS.

// It will be entirely static. For a more interactive version, you would need a backend to handle game logic.

* @jsxImportSource https://esm.sh/react@17.0.2

import { html } from "https://esm.town/v/stevekrouse/html";

const WebPage = () => (

sapphireThrush

@iamseeley

A handler to serve JSON Resume

0

Script

export default async function handler(req: Request): Promise<Response> {

platform with secure authentication and full CRUD capabilities, streamlining client operations","Created an interactive publi

return new Response(JSON.stringify(resumeDetails), {

headers: { "Content-Type": "application/json" },