Search

REACT_DOM_CDN_VAL

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

import { REACT_DOM_MINIFIED_FINAL } from "https://esm.town/v/liamdanielduffy/REACT_DOM_MINIFIED_FINAL";

export function REACT_DOM_CDN_VAL(req, res) {

res.set("Content-Type", "text/javascript");

res.send(REACT_DOM_MINIFIED_FINAL);

valboard

@avycado13

// Function to fetch JSON data from URL

HTTP

import renderToString from "https://esm.sh/preact-render-to-string@6.2.1";

import { h } from "https://esm.sh/preact@10.23.2";

// Function to fetch JSON data from URL

text: item.Text,

// Server-side rendering

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

MoonPhase

@sethblanchard

@jsxImportSource npm:react

HTTP

/** @jsxImportSource npm:react **/

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

import { load } from "npm:cheerio";

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

export default async (req: Request) => {

const html = await fetchText(

debatePollApp

@laur3n

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, useEffect, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import Chart from "https://esm.sh/chart.js/auto";

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

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

salubriousPurpleSnail

@cheney

@jsxImportSource https://esm.sh/react

HTTP

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

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

export default (req: Request) => {

return new Response(

lucia_middleware

@yawnxyz

Lucia Middleware Import users. Backed by Val Town SQLite. Demo: @stevekrouse/lucia_middleware_demo If you want a version that is safe to import (but not call) on the frontend: import { luciaMiddleware } from "https://esm.town/v/stevekrouse/lucia_middleware_safe"; Usage Wrap your HTTP handler in it, ie export default luciaMiddleware(handler) In your handler, redirect to /auth/signup , /auth/login , /auth/logout to trigger those flows. Remember Response.redirect is broken in Val Town right now, so either use links or return new Response(null, { 302, headers: { Location: "/place/to/redirect" }}) In your HTTP handler, read the X-Lucia-Username header, ie const username = req.headers.get("X-Lucia-Username") If the user is logged in, you now have a username you can work with. If not, it will be empty Custom Sign Up and Log In pages By default, the middleware has very basic sign in and sign up pages. The only way to customize those right now is to fork this middleware and customize them to your liking. Todos [ ] Allow users to specify the users & sessions table [ ] Remove Hono from this middleware (attempted in this fork: @stevekrouse/lucia_middleware_vanilla) [ ] Allow users to customize the auth pages without forking the middleware Initially built by @pomdtr

Script

import { serializeCookie, parseCookies } from "npm:oslo/cookie";

const githubClientId = Deno.env.get("GITHUB_OAUTH_COVERSHEET_CLIENT");

const githubClientSecret = Deno.env.get("GITHUB_OAUTH_COVERSHEET_SECRET");

export const github = new GitHub(githubClientId, githubClientSecret);

const googleClientId = Deno.env.get("GOOGLE_OAUTH_COVERSHEET_CLIENT");

const googleClientSecret = Deno.env.get("GOOGLE_OAUTH_COVERSHEET_SECRET");

const google = new Google(googleClientId, googleClientSecret, `https://yawnxyz-hncloneluciaoauth.web.val.run/auth/google/call

// TODO: need to be able to set these dynamically from the requester app

feistyAmberSquirrel

@Fahad61814

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

Script

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

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

export default (req: Request) => {

<h1>Welcome to My First Website!</h1>

<p>This is my first web app built with React!</p>

<button onClick={() => alert("Button clicked!")}>Click Me!</button>

ReactStreamDemo

@jxnblk

@jsxImportSource https://esm.sh/react

HTTP

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

import { React, render } from "https://esm.town/v/jxnblk/ReactStream";

function App() {

const [count, setCount] = React.useState<number>(0);

return (

greenSilkworm

@atlted

@jsxImportSource npm:react

HTTP

/** @jsxImportSource npm:react **/

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

export default (req: Request) => {

return new Response(

adaptableAmberDonkey

@Gcoxy

@jsxImportSource https://esm.sh/react

HTTP

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

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

import { createRoot } from "https://esm.sh/react-dom/client";

import * as LucideIcons from "https://esm.sh/lucide-react";

Root: ({ className, children }: { className?: string; children: React.ReactNode }) => (

Header: ({ className, children }: { className?: string; children: React.ReactNode }) => (

Content: ({ className, children }: { className?: string; children: React.ReactNode }) => (

children, onClick, type, icon, description }: { className?: string; children: React.ReactNode; onClick?: () => void; type?: "

const [qrDataUrl, setQrDataUrl] = React.useState<string | null>(null);

React.useEffect(() => {

MacTrackpadScale

@perbhat

@jsxImportSource npm:react

HTTP

/** @jsxImportSource npm:react **/

import { useEffect, useState } from "npm:react";

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

const TrackpadScale = () => {

spotify

@stevekrouse

// await sqlite.execute("CREATE TABLE spot (id text primary key, data text)")

1 1

HTTP

return c.redirect(

`https://accounts.spotify.com/authorize?response_type=code&client_id=${

encodeURIComponent(Deno.env.get("SPOTIFY_CLIENT_ID"))

}&scope=${encodeURIComponent(scopes)}&redirect_uri=${encodeURIComponent(redirect_uri)}&state=${state}`,

code,

client_id: Deno.env.get("SPOTIFY_CLIENT_ID"),

client_secret: Deno.env.get("SPOTIFY_CLIENT_SECRET"),

redirect_uri,

refresh_token: data.refresh_token,

client_id: Deno.env.get("SPOTIFY_CLIENT_ID"),

client_secret: Deno.env.get("SPOTIFY_CLIENT_SECRET"),

if (refresh.error) return c.json("Refresh error: " + refresh.error);

authenticCrimsonGrouse

@wottan32

@jsxImportSource https://esm.sh/react@18.2.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(

git_jiggy

@iamwil

Needs GITHUB_CONTRIBUTIONS key set in your Val Town Environment Variables . Get this token here: https://github.com/settings/personal-access-tokens/new Give it basically the minimum permissions. It should only pull public data anyways.

HTTP

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

import React, { useEffect, useRef, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

// Pachelbel's Canon chord progression in D major

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

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

fearlessCyanBobcat

@changqing91

@jsxImportSource https://esm.sh/react

HTTP

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

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

export default (req: Request) => {

return new Response(

…

62 63

65 66

…

252