pomdtr
I mainly enjoy building dev tools:
- VS Code integration: https://github.com/pomdtr/valtown-vscode
- CLI: https://github.com/pomdtr/vt
Likes
109
nbbaier
sqliteExplorerApp
HTTP
SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query
23
nbbaier
sqliteDump
Script
SQLite Dump Util A utility function that generates SQL statements to dump the data and schema of tables in a SQLite database. Usage This example specifically dumps the users table and logs the output: import { sqliteDump } from "https://esm.town/v/nbbaier/sqliteDump";
const dump = await sqliteDump(["users"]);
console.log(dump) You can optionally specify a callback to handle the result. The example below dumps the users table and emails it using std/email . import { email } from "https://esm.town/v/std/email";
import { sqliteDump } from "https://esm.town/v/nbbaier/sqliteDump";
await sqliteDump(["users"], async (res) => {
await email({ text: res });
}); Function Signature function sqliteDump(tables?: string[], callback?: ((result: string) => string | void | Promise<void>) | undefined): Promise<string | void> Parameters tables : (Optional) Array of table names to include in the dump. If not provided, all tables will be included. callback : (Optional) An (potentially async) callback function to process the dump result. The callback receives the dump string as its argument.
2
pomdtr
notebook
HTTP
Notebook Val This val automatically serves the codeblock it contains. Each codeblock is augmented with a set of properties ```html { name: "index.html" }
<h1>Hello world</h1>
``` Properties follow JSON5 syntax . Currently only a name property is supported. Files Entrypoint <html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link rel="icon" href="https://fav.farm/📔" />
<script src='main.js'></script>
</head>
<body>
<h1>This whole val code is extracted from a README!</h1>
<a href="https://www.val.town/v/pomdtr/notebook">View Val</a>
</body>
</html> Styling body {
background-color: white;
}
h1 {
color: red;
} Script console.log("Hi from the readme")
2
pomdtr
auth_middleware
Script
Authentication middleware Guards your public http vals behind a login page. This val use a json web token stored as an http-only cookie to persist authentication. Usage Set an AUTH_SECRET_KEY env variable (used to sign/verify jwt tokens) to a random string . Then use an API token to authenticate. import { auth } from "https://esm.town/v/pomdtr/auth_middleware";
async function handler(req: Request): Promise<Response> {
return new Response("You are authenticated!");
}
export default auth(handler); See @pomdtr/test_auth for an example ⚠️ Make sure to only provides your api token to vals you trust (i.e. your own), as it gives access to your whole account.
1
pomdtr
sql
Script
SQL Template Tag Port of blakeembrey/sql-template-tag for usage in val.town. Usage import { sqlite } from "https://esm.town/v/std/sqlite"
import { sql, zip } from "https://esm.town/v/pomdtr/sql"
const query = sql`SELECT * FROM books WHERE author = ${author}`;
console.log(query.sql) // => "SELECT * FROM books WHERE author = ?"
console.log(query.args) // => [author]
const res = await sqlite.execute(query)
console.table(zip(res)) For advanced usage (ex: nesting queries), refer to the project readme .
6
pomdtr
static
HTTP
Static Vals Serve static content from val.town Usage First, fork this val to get your own http endpoint. Then create a val that uses a string as it's default export, or a single string export. The val must be either public or unlisted . export default `<static content>` You can then fetch the exported string from outside val.town using: curl 'https://<owner>-static.web.val.run/<val>.<extension>' The Content-Type will be dynamically set depending on the provided extension. Example https://pomdtr-static.web.val.run/val_town_readme_style.css Val Link
6
pomdtr
bookmarklets
HTTP
Bookmarklet Manager Write your bookmarklets in val.town. Usage You val should just contain your bookmarklet code. alert("Hi mom!"); Make sure that your val is either unlisted or public, and not named bookmarklets .
Then navigate to https://pomdtr-bookmarklets.web.val.run/v/:author/:name to generate the bookmarklet link. Sharing a bookmarklet Make sure that your val is public, and add a #bookmarklet tag anywhere in the code. alert("Hi mom!");
// #bookmarklet It should automatically appears on https://pomdtr-bookmarklets.web.val.run . ⚠️
If you are using the Arc Browser , you can use the Powerlet extension to install bookmarklets.
2
rlesser
getDependencyGraph
Script
Dependency Graph Explorer This val allows for dependency graph exploration. getDependencyGraph Iteratively explores the dependency graph of a val and its children, returning the results. arguments valUrlOrSlug string - the full val url or slug ( author/name ) of the val returns An object containing: dependencyMap Map<string, string[]> - A map of vals (by id) to dependencies (vals or non-val id) moduleMap Map<string, Module> - A map of modules (by val or non-val id) to module information. Module object contains: slug string - the slug of the module, how it should be displayed visually id string - the id of the module, corresponding to how it's displayed in the code, normally as a url. websiteUrl string - the website link for the module, a normally a link to either valtown or npm. category string|null - the category of the module, such as "valtown", "esm.sh", or "npm". Those without a predefined category are in null.
2
pomdtr
basicAuth
Script
Val Town Basic Auth Add basic auth on top of any http val Usage Wrap your HTTP handler in the basicAuth middleware. import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth";
function handler(req: Request) {
return new Response("You are authenticated!");
}
export default basicAuth(handler, { verifyUser: (username, password) => username == "user" && password == "password" }); If you want to use an apiToken as a password: import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth";
import { verifyToken } from "https://www.val.town/v/pomdtr/verifyToken"
function handler(req: Request) {
return new Response("You are authenticated!");
}
export default basicAuth(handler, { verifyUser: (_, password) => verifyToken(password) });
9