Search

valle_tmp_3173618096166977554668362851031

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP

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

import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";

import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

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

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "janpaul123";

bioFeeler

@o_sv

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import sha256 from 'https://esm.sh/crypto-js/sha256';

</div>

function client() {

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

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

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

reloadOnSave

@stevekrouse

Live reload in new tabs When you're working on an HTML HTTP val in a new tab, it's annoying to have to manually reload the tab on every save. In the Val Town editor, you can hit cmd+enter, but there's nothing like that for a val in a new tab because Val Town doesn't control that new tab (like we control the iframe in the browser preview). However, you control that HTML via the fetch handler you're writing, so you can add a script that polls the Val Town API for the current version number of your val, and reload itself if it detects a new version. This val has a collection of helpers to help you do just that. Usage import { html } from "https://esm.town/v/stevekrouse/html"; import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave"; export default reloadOnSaveFetchMiddleware(async function(req: Request): Promise<Response> { return html(`<h1>Hello!!</h1>`); })

2 142

Script

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

import type { MiddlewareHandler } from "npm:hono";

// this script runs client-side

export const reloadOnVals = async function(vals: ValRef[]) {

const valVersions = await Promise.all(vals.map(getCurrentValVersionNumber));

passkeys_demo

@stevekrouse

Passkeys Demo Passkeys are pretty neat! I wanted to get a demo working in Val Town so I ported over https://github.com/maximousblk/passkeys-demo. One challenge was that the original extensively uses DenoKV store with compound keys and values. I created @stevekrouse/DenoSyntheticKV as a replacement for DenoKV. It uses SuperJSON to encode the keys and values. You can find the client-side script for the main page here: @stevekrouse/passkey_script

HTTP

You can find the client-side script for the main page here: @stevekrouse/passkey_script

residentKey: "required",

const clientData = JSON.parse(atob(cred.response.clientDataJSON));

console.log({ clientData });

const challenge = await kv.get<Challenge>(["challenges", clientData.challenge]);

expectedChallenge: clientData.challenge,

await kv.delete(["challenges", clientData.challenge]);

const clientData = JSON.parse(atob(cred.response.clientDataJSON));

console.log({ clientData });

const challenge = await kv.get<Challenge>(["challenges", clientData.challenge]);

expectedChallenge: clientData.challenge,

savvyTomatoToad

@yysofiyan

This is an edit to the existing code to convert it to a Val Town HTTP val. Changes required: Remove Express and CORS dependencies Convert to native Deno/Val Town HTTP handler Use standard Response objects Remove PORT configuration Simplify server setup Use esm.sh for any required imports I've made several key modifications to adapt the code to Val Town: Converted from Express to a native Deno HTTP handler Added two API endpoints: /api/authors: Returns all authors /api/author/:sintaID : Returns a specific author by Sinta ID Added CORS headers to allow cross-origin requests Included a simple React frontend with a view source link Implemented error handling for non-existent routes Used Val Town's recommended import and rendering strategies The val now provides a flexible API for retrieving author information with both a JSON endpoint and a basic web interface.

HTTP

3. Added CORS headers to allow cross-origin requests

4. Included a simple React frontend with a view source link

5. Implemented error handling for non-existent routes

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

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

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

// Contoh data penulis

</div>

function client() {

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

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

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

cryptoTransactionTracker

@LifeNexus

@jsxImportSource https://esm.sh/react

Cron

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

import React, { useState, useEffect } 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> {

blueskyPostButton

@jdan

blueskyPostButton An app to post to bsky.app, generated with townie! setup Two environment variables BLUESKY_USERNAME: Your username BLUESKY_PASSWORD: Your password, use an app password

HTTP

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

import { BskyAgent } from "https://esm.sh/@atproto/api";

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

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

function App() {

</div>

function client() {

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

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

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

textToSixImageGenerator

@Nandu

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

HTTP

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

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

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

function App() {

const [error, setError] = useState<string | null>(null);

const generateImages = async (e: React.FormEvent) => {

e.preventDefault();

fontSize: '0.9rem',

function client() {

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

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

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

dateme_router

@stevekrouse

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

Script

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

import * as ReactDOM from "https://esm.sh/react-dom@18.2.0/client";

} from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0";

import * as React from "https://esm.sh/react@18.2.0";

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

import FAQ from "https://esm.town/v/stevekrouse/dateme_faq_react";

import Submit from "https://esm.town/v/stevekrouse/dateme_form_react";

import Home from "https://esm.town/v/stevekrouse/dateme_home_react";

import Root from "https://esm.town/v/stevekrouse/dateme_layout_react";

ReactDOM.createRoot(document.body).render(

searchSectorsApp

@Fairestofthemall

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

function BusinessDetailsModal({ business, onClose }) {

cursor: 'pointer',

function client() {

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

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

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

healthtech4africa

@thomaskangah

AI Mental health support app for precision neuroscience

HTTP

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

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

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

const countries = ["Kenya", "India"];

</div>

function client() {

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

if (typeof document !== "undefined") {

client();

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

InventionDetailstoJSONConverter

@willthereader

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

function App() {

</div>

function client() {

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

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

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

aiHonoHtmxAlpineStreamingExample

@yawnxyz

This Frankenstein of an example shows how well Hono, htmx, and Alpine play together. Hono serves the frameworks, API calls, and functions htmx handles ajax requests, and can very powerfully request html and other content to swap out the front-end alpine handles app-like reactivity without having to always resort to server round trips

HTTP

- htmx handles ajax requests, and can very powerfully request html and other content to swap out the front-end

- alpine handles app-like reactivity without having to always resort to server round trips

mileiShowGraph

@maxm

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

HTTP

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

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

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

import {

YAxis,

} from "https://esm.sh/recharts@2.7.2?deps=react@18.2.0,react-dom@18.2.0";

function App({ tweetData }) {

</div>

function client() {

const tweetData = JSON.parse(document.getElementById("tweet-data").textContent);

createRoot(document.getElementById("root")).render(<App tweetData={tweetData} />);

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

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

waveForm

@all

@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 * as Tone from "https://esm.sh/tone";

</div>

function client() {

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

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

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

…

35 36

38 39

…

251