Search

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(

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> {

valle_tmp_92279722423458817448513814852015

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

/** @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";

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 88

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));

pushFrontend

@jrmann100

An interactive, runnable TypeScript val by jrmann100

Script

return;

let clientSubscription = await registration.pushManager.getSubscription();

let serverSubscription = await (await fetch("/subscription")).json();

if (clientSubscription === null) {

if (serverSubscription !== null) {

status.textContent = "Server was reset.";

clientSubscription.unsubscribe();

clientSubscription = null;

button.textContent = "Subscribe";

} else if (

clientSubscription?.toJSON().keys.p256dh === serverSubscription

status.textContent = "This device is subscribed to notifications.";

status.textContent = "Another device is currently receiving notifications.";

clientSubscription.unsubscribe();

clientSubscription = null;

button.textContent = "Subscribe";

body: JSON.stringify(

clientSubscription

? (await clientSubscription.unsubscribe(), null)

: await registration.pushManager.subscribe({

HTMX_template

@deepfates

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

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

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

export default async function(req: Request) {

if (req.method === "POST") {

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 (deprecated)

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,

valle_tmp_02267091431922629935130311039563566

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";

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";

virtualPetSim

@muhammad_owais_warsi

// This app will create a virtual pet simulation game where users can adopt, care for, and interact with a digital creature.

HTTP

// This app will create a virtual pet simulation game where users can adopt, care for, and interact with a digital creature.

// We'll use React for the frontend, SQLite for data persistence, and custom emoji combinations for visuals.

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

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

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

const EMOTIONS = {

</div>

function client() {

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

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

client();

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

remarkDemoJSX

@stevekrouse

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

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

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

export const remarkDemoJSX = async (req: Request) =>

new Response(

react_http

@tfayyaz

An interactive, runnable TypeScript val by tfayyaz

Script

import { ${component.name} } from "${url}"

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

import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";

createRoot(document.body).render(jsx(App, {}));

</script>

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 (deprecated)

- 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

valle_tmp_2671404837576818506367901100203444

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

Sure, I'll focus on cleaning up some repeated code, improve code readability, and add some enhancements while keeping the exi

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

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

import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";

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";

testCodemirrorTsBrowserEmacs

@saolsen

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

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

return new Response(

dndoodle

@csl_

DNDoodle My DND group has used doodle for ages to schedule our sessions, but it never really worked that great for us. We just didn't need that many features. This was my very first val and honestly, I couldn't be happier with it.

HTTP

* and is displayed differently in the results view.

* The app uses React for the frontend and SQLite for data persistence.

* It features improved styling, interactive elements, and email functionality.

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

import { addDays, format, parse } from "https://esm.sh/date-fns";

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> {

…

12 13

15 16

…

184