Public vals
46

saolsen avatar
telemetry
@saolsen
Script
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.
saolsen avatar
changes
@saolsen
HTTP
View val changes as a diff. Go to /v/username/valname/version to see a diff between that version and the previous one. For example https://saolsen-changes.web.val.run/v/saolsen/tracing/108
saolsen avatar
tracing
@saolsen
Script
Opentelemetry Tracing for Vals! Enables Opentelemetry tracing for vals. Exports two functions, init and traced_handler . init will set up opentelemetry. For how to use it see this example val . By default, traces log to the console but if you set HONEYCOMB_API_KEY it'll also push the traces to honeycomb. In the future we can add more export targets for other services. I'm also thinking about making a val to display them. traced_handler is a wrapper for your handler you can use on an HTTP val. Just pass it your HTTP function and export it as the default and it'll trace every request. Here's a screenshot of what the honeycomb view of a trace from my connect playing val looks like.
saolsen avatar
connect4_site
@saolsen
HTTP
Play connect4. Write agents that play connect4. Battle your agents against other agents. It's fun.
saolsen avatar
gltf_torus
@saolsen
HTTP
Builds a torus as a gltf file and displays it with https://modelviewer.dev/ based on https://www.donmccurdy.com/2023/08/01/generating-gltf/ https://github.com/mrdoob/three.js/tree/dev/src/geometries
saolsen avatar
prune_val
@saolsen
Script
Prune a val's versions. Useful if you want to delete a bunch of versions. All versions before keep_since that aren't in keep_versions will be deleted !!! You can run it without passing commit to see a preview of what will happen. Example await prune_val("abcdefg", [3,6,8], 12, true); Could output Val: untitled_peachTakin, Current Version: 15 Deleting Versions: [ 1, 2, 4, 5, 7, 8, 9, 10, 11 ] Deleting Version 1 Deleted Deleting Version 2 Deleted Deleting Version 4 Deleted Deleting Version 5 Deleted Deleting Version 6 Deleted Deleting Version 7 Version already deleted, skipping Deleting Version 8 Deleted Deleting Version 9 Deleted Deleting Version 10 Deleted Deleting Version 11 Deleted
saolsen avatar
sqlite_migrations
@saolsen
Script
Tiny migrations "framework" that makes using sqlite in vals a little easier. Not great yet, so far can only run "up" for migrations you haven't run yet or down for all the ones you have run. See https://www.val.town/v/saolsen/sqlite_migrations_example for usage.
saolsen avatar
gameplay_agent
@saolsen
Script
gameplay_agent This is a val.town mirror of gameplay/games/agent . Click the link to see docs.
saolsen avatar
display_markdown
@saolsen
Script
Display Markdown Takes a markdown document (as a string) and returns an http handler that renders it. Example https://www.val.town/v/saolsen/display_markdown_example
saolsen avatar
display_mermaid
@saolsen
Script
Display Mermaid Takes a mermaid document (as a string) and returns an http handler that renders it. Example https://www.val.town/v/saolsen/display_mermaid_example import { displayMermaid } from "https://esm.town/v/saolsen/display_mermaid"; const mermaid = ` sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! `; export default displayMermaid(mermaid);
saolsen avatar
p5
@saolsen
Script
P5 sketch Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example. Usage Make a p5 sketch, you can import the p5 types to make it easier. import type * as p5 from "npm:@types/p5"; Export any "global" p5 functions. These are functions like setup and draw that p5 will call. Set the val type to http and default export the result of sketch , passing in import.meta.url . A full example looks like this. import type * as p5 from "npm:@types/p5"; export function setup() { createCanvas(400, 400); } export function draw() { if (mouseIsPressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); } import { sketch } from "https://esm.town/v/saolsen/p5"; export default sketch(import.meta.url); How it works The sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default sketch export) so you can't call any Deno functions, environment variables, or other server side apis.
saolsen avatar
tiny_jest_example
@saolsen
Script
An interactive, runnable TypeScript val by saolsen
saolsen avatar
connect4
@saolsen
Script
An interactive, runnable TypeScript val by saolsen
saolsen avatar
testCodemirrorTsBrowserEmacs
@saolsen
HTTP
@jsxImportSource https://esm.sh/react
saolsen avatar
codemirrorTsBrowserEmacs
@saolsen
Script
codemirror-ts You can import this a val like this in browser to run codemirror-ts. Bundling done with esm.sh. Working demo: preview / source Run an editor like so: /** @jsxImportSource https://esm.sh/react */ import { renderToString } from "npm:react-dom/server"; export default async function(req: Request): Promise<Response> { return new Response( renderToString( <> <script type="module" src="https://esm.town/v/maxm/codemirrorTsBrowser" /> <form> <textarea id="editorSource" className="for-codemirror" name="editorSource"> {`let hasAnError: string = 10; function increment(num: number) { return num + 1; } increment('not a number');`} </textarea> <button id="submit" type="submit">Submit</button> </form> </>, ), { headers: { "content-type": "text/html" } }, ); }
saolsen avatar
poker_agent_all_in
@saolsen
HTTP
An interactive, runnable TypeScript val by saolsen