Search
cmdk_command
@pomdtr
An interactive, runnable TypeScript val by pomdtr
HTTP (deprecated)
#!/usr/bin/env -S deno serve --allow-all --env --watch
const app = new Hono();
const token = Deno.env.get("valtown");
app.get("/", async (c) => {
const resp = await fetchAPI("/v1/me", {
token,
if (!resp.ok) {
return resp;
const me = await resp.json();
const page = {
valle_tmp_066236646798213175732405021232028
@janpaul123
// This val creates a simple Hacker News clone with clickable story titles.
HTTP (deprecated)
// This val creates a simple Hacker News clone with clickable story titles.
// Each story title links to a separate page that displays some fake story content.
const app = new Hono();
const stories = [
{ id: 1, title: "First Fake Story", content: "Content of the first fake story.", details: "100 points by user1 1 hour ago | 50 comments" },
{ id: 2, title: "Second Fake Story", content: "Content of the second fake story.", details: "150 points by user2 2 hours ago | 75 comments" },
{ id: 3, title: "Third Fake Story", content: "Content of the third fake story.", details: "200 points by user3 3 hours ago | 100 comments" },
app.get("/", (c) => {
const storyList = stories.map(story => `
<div class="story">
ReactStream
@jxnblk
React SSR and client-side hydration for Val Town Usage /** @jsxImportSource https://esm.sh/react */
import { render, React } from "https://esm.town/v/jxnblk/ReactStream";
function App() {
const [count, setCount] = React.useState(0);
return (
<html>
<body>
<h1>ReactStream</h1>
<p>React SSR with client-side hydration in Val Town</p>
<pre>{count}</pre>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</body>
</html>
);
}
export default render(App, import.meta.url); Live example To render static HTML without hydration, pass false as the second argument. export default render(App, false); Middleware Custom middleware can be added in an array as the third argument.
Middleware can add data to the req.data object or return a response for things like API endpoints. export default render(App, import.meta.url, [
analytics,
robots("User-agent: *\nAllow: /"),
getInitialProps
]) robots.txt ReactStream has a built-in middleware to handle request to /robots.txt import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";
// ...
export default render(App, import.meta.url, [
robots("User-agent: *\nAllow: /"),
]) Add a backend request handler // example middleware
async function api (req: Request, res: Response, next): Promise<Response> {
if (req.pathname !== "/api") return next();
if (req.method === "POST") {
return Repsonse.json({ message: "Hello POST request" });
}
return Response.json({ ok: true });
}
export default render(App, import.meta.url, [ api ]); Fetch data on the server to set initial props // example middleware
async function getInitialProps (req: Request, res: Response, next) {
// fetch data or do async work to pass as props to the component
req.data = {
hello: "props",
};
return next();
}
export default render(App, import.meta.url, [ getInitialProps ]); Starter template /** @jsxImportSource https://esm.sh/react */
import { render } from "https://esm.town/v/jxnblk/ReactStream";
function App () {
return (
<html>
<head>
<title>ReactStream</title>
</head>
<body>
hello
</body>
</html>
);
}
export default render(App, import.meta.url, []); React requires matching versions for SSR and hydration.
Import React from https://esm.town/v/jxnblk/ReactStream to ensure your component uses the same version as this library (currently react@18.3.1). Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo
Script
React SSR and client-side hydration for Val Town
## Usage
```tsx
/** @jsxImportSource https://esm.sh/react */
function App() {
const [count, setCount] = React.useState(0);
/** @jsxImportSource https://esm.sh/react */
export { React };
export type RequestHandler = (request: Request) => Promise<Response>;
export type DataFetcher<T> = (request: Request) => Promise<T>;
spotify
@stevekrouse
// await sqlite.execute("CREATE TABLE spot (id text primary key, data text)")
HTTP (deprecated)
// await sqlite.execute("CREATE TABLE spot (id text primary key, data text)")
export const db = drizzle(sqlite as any);
export const table = sqliteTable("SPOTIFY_AUTH", {
id: text("id").primaryKey(),
data: text("data"),
const thisURL = thisWebURL();
const redirect_uri = thisURL + "/callback";
const app = new Hono();
app.use("*", async (c, next) => {
const state = getCookie(c, "state") ?? generateRandomString(16);
pingMe
@prepor
An interactive, runnable TypeScript val by prepor
Script
let { incrementer } = await import("https://esm.town/v/prepor/incrementer");
export function pingMe() {
incrementer += 1;
console.email(`How are you? ${incrementer}`);
frameHtml
@moe
@jsxImportSource npm:hono@3/jsx
Script
/** @jsxImportSource npm:hono@3/jsx */
export const frameHtml = (frame, baseUrl = "") => {
const prefixUrl = url => baseUrl && url.startsWith("/") ? `${baseUrl}${url}` : url
const aspectRatio = frame.aspectRatio || "1.91:1"
return (
<meta property="fc:frame" content="vNext" />
<meta property="of:version" content="vNext" />
<meta property="of:accepts:lens" content="1.0.0" />
<meta property="of:accepts:xmtp" content="2024-02-09" />
<meta property="fc:frame:image" content={prefixUrl(frame.image)} />
webmention_disco
@brianleroux
function to discover a webmention endpoint
Script
/** function to discover a webmention endpoint */
export default async function discover(source) {
// look for first Link in headers
let found = [];
let raw = await fetch(source, {
redirect: "follow",
follow: 10,
for (let [k, v] of raw.headers.entries()) {
if (k.toLowerCase() === "link") {
let raw = v.split(",");
skypack
@dvdsgl_old
An interactive, runnable TypeScript val by dvdsgl_old
Script
export let skypack = async name => {
return await import(`https://cdn.skypack.dev/${name}`);
honEmeraldSnail
@stevekrouse
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
const MODEL = "claude-3-sonnet-20240229";
function applyDiffs(html, diffs) {
console.log("Applying diffs. Initial HTML:", html);
console.log("Diffs to apply:", diffs);
try {
let replacements;
try {
({ replacements } = JSON.parse(diffs));
console.log("Parsed replacements:", replacements);
blob_admin_blob
@pomdtr
@jsxImportSource https://esm.sh/hono@4.0.8/jsx
Script
/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/
const route = new Hono();
route.get("/:key", async (c) => {
const key = c.req.param("key");
let response = await blob.get(key);
let text = await response.text();
return c.render(
<div>
<h1>{key}</h1>
<code-mirror code={text} readonly></code-mirror>
parse
@caseyg
An interactive, runnable TypeScript val by caseyg
Script
export const parse = (async () => {
const extract = await import("npm:@extractus/article-extractor");
return extract(
"https://www.nytimes.com/2023/05/04/business/regional-banks-stock-price-pacwest.html"
PaLM
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
import process from "node:process";
export const PaLM = (async () => {
const { default: PalmAI } = await import("npm:palmai");
const palm = new PalmAI(process.env.palmai_key);
translate
@yieldray
Translator using a public deepl api
HTTP (deprecated)
# [Translator](https://yieldray-translate.web.val.run)
using a [public deepl api](https://deepl.deno.dev)
if (import.meta.main) Deno.serve(translate);
export async function translate(req: Request) {
if (req.method === "POST") {
return await fetch("https://deepl.deno.dev/translate", {
method: "POST",
body: await req.text(),
return new Response(html, { headers: { "content-type": "text/html" } });
const html = `
Bio
@ikbear
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
export default async function(req: Request) {
return new Response(
renderToString(
<html>
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lishi @ Fork.ai</title>
</head>
