pomdtr

⚠️ This readme is only readable from the val http endpoint import msg from "https://esm.town/v/pomdtr/msg" import {capitalize} from "https://esm.sh/lodash-es" export const title = "mdx rendered from a val readme" {capitalize(title)} {msg}

HTTP Client Attach a postman-like http client to your vals, with bookmarks and history support Usage Wrap your http handler in an the httpClient middleware. import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }) The http client will be shown on the root. Adding bookmarks You might want to bookmark some requests you need often. You can do it by passing a bookmark list as a middleware option: import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }, { bookmarks: [ { "label": "Dummy Request", "request": new Request("https://dummyjson.com/products") } ]}) Customizing the client path import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }, { path: "/http-client" }) TODO [ ] fix syntax highlighting on successive request [ ] allow to prefill the initial request

SSR + Hydration Demo Look at @pomdtr/island and @pomdtr/hydrate_islands to read the whole library source code (less than 50 rows!).

CodeMirror Web Component Available Attributes language readonly code theme API You can access the code using the code property: document.getElementById("editor").code

Val Town CDN If you only want to get the source of a val, you should use https://esm.town/ instead. Usage curl https://pomdtr-cdn.web.val.run/<author>/<name>.<extension>[?v=<version>] To see the code of this val, use https://pomdtr-cdn.web.val.run/pomdtr/cdn.ts Examples Fetching the val code $ curl https://pomdtr-cdn.web.val.run/pomdtr/add.tsx You can also use js , jsx and ts extension (only the content-type change, there is no transpilation). Fetching private val Pass an api token as an username $ curl "https://<token>@pomdtr-cdn.web.val.run/pomdtr/privateVal.ts" Fetching the val README $ curl https://pomdtr-cdn.web.val.run/pomdtr/add.md Getting an image $ curl https://pomdtr-cdn.web.val.run/pomdtr/add.png Fetching a specific version of a val $ curl https://pomdtr-cdn.web.val.run/pomdtr/cdn.ts?v=66 You need to be authenticated to use this method. Fetching the val metadata $ curl https://pomdtr-cdn.web.val.run/pomdtr/add.json

Val Town To SQLite Dump all public vals to an sqlite table TODO [x] Upsert instead of insert

Email Auth for Val Town ⚠️ Require a pro account (needed to send email to users) Usage Create an http server, and wrap it in the emailAuth middleware. import { emailAuth } from "https://esm.town/v/pomdtr/email_auth" import { verifyUserEmail } from "https://esm.town/v/pomdtr/verifyUserEmail" export default emailAuth((req) => { return new Response(`your mail is ${req.headers.get("X-User-Email")}`); }, { verifyEmail: verifyUserEmail }); 💡 If you do not want to put your email in clear text, just move it to an env var (ex: Deno.env.get("email") ) If you want to allow anyone to access your val, just use: import { emailAuth } from "https://esm.town/v/pomdtr/email_auth" export default emailAuth((req) => { return new Response(`your mail is ${req.headers.get("X-User-Email")}`); }, { verifyEmail: (_email) => true }); Each time someone tries to access your val but is not allowed, you will get an email with: the email of the user trying to log in the name of the val the he want to access You can then just add the user to your whitelist to allow him in (and the user will not need to confirm his email again) ! TODO [ ] Add expiration for verification codes and session tokens [ ] use links instead of code for verification [ ] improve errors pages

playground edit, run, and embed vals without requiring an account (or even js enabled!) caveats: logs don't stream I haven't set up codemirror only script vals supported everything else should be fully functional. you can prefill the editor with code: https://easrng-playground.web.val.run/?code=console.log(1) a val: https://easrng-playground.web.val.run/?load=easrng/playground some other url: https://easrng-playground.web.val.run/?load=https://any/other/url

Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Demo See @pomdtr/password_auth_test Usage import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84"; export default passwordAuth(() => { return new Response("OK"); }, { verifyPassword: (password) => password == Deno.env.get("VAL_PASSWORD") }); If you want to use an api token to authenticate: import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84"; import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken"; export default passwordAuth(() => { return new Response("OK"); }, { verifyPassword: verifyToken }); TODO [x] allow to authenticate using a val town token [ ] add a way to send an email to ask a password from the val owner [ ] automatically extend the session [ ] automatically remove expired sessions FAQ How to sign out ? Navigate to <your-site>/signout .

// SPDX-License-Identifier: 0BSD

@postpostscript/MyFooter: my footer component which shares random vals I've liked!

Test Explorer Click on the play button next to list items to run them. Usage Fork this val Create new tests in any of vals (and export them) (see @pomdtr/example_test) import { assertEquals } from "https://deno.land/std@0.216.0/assert/mod.ts"; import { Test } from "https://esm.town/v/<account>/test_explorer"; export const exampleTestSuccess = new Test(() => { assertEquals(1 + 1, 2); }); export const exampleTestFailure = new Test(() => { assertEquals(1 + 1, 3); }); Go to https://<account>-test_explorer.web.val.run to run your test click on the val name to go to the val the tests are originating from click on the test name to run it ℹ️ You probably want to protect your test explorer behind an authentication middleware like @pomdtr/basicAuth Discovery mechanism In order to define a test, the user need to import the Test class from https://val.town/v/<account>/Test . So we can use the api to search for vals containing the https://val.town/v/<account>/Test string to locate the vals containing tests. Next, we need to extract the tests from the val exports. We use exported instanceof Test to filter them (at some point we will probably use static analysis for this). TODO [x] persist test results in sqlite [x] Improve styling (help welcome ❤️) [ ] View logs in a modal [ ] Batch http requests

All TODOs from public vals Todo [ ] Remove forks from results ? [ ] use a cron val to cache results in an sqlite table

Val Release Pattern Create a new val, then use the proper exports depending on what version you want to install: // install stable version export { stable } from "https://esm.town/v/pomdtr/example_release" // install dev version export { dev } from "https://esm.town/v/pomdtr/example_release" // install canary version export { canary } from "https://esm.town/v/pomdtr/example_release"

Code on Val Town Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it. This uses github-fork-ribbon-css under the hood. Usage Here are 2 different ways to add the "Code on Val Town" ribbon: 1. Wrap your fetch handler (recommended) import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50"; import { html } from "https://esm.town/v/stevekrouse/html?v=5"; export default modifyFetchHandler(async (req: Request): Promise<Response> => { return html(`<h2>Hello world!</h2>`); }); Example: @andreterron/openable_handler 2. Wrap your HTML string import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=50"; import { html } from "https://esm.town/v/stevekrouse/html?v=5"; export default async (req: Request): Promise<Response> => { return html(modifyHtmlString(`<h2>Hello world!</h2>`)); }; Example: @andreterron/openable_html Other ways We made sure this was very modular, so you can also add the ribbon using these methods: Get the element string directly: @andreterron/codeOnVT_ribbonElement Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse Use .pipeThrough to append to a stream: @andreterron/InjectCodeOnValTownStream Customization Linking to the val These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val argument: modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }}) modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }}) Styling You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element. modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"}) modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"}) Here's how you can hide the ribbon on small screens: modifyFetchHandler(handler, {style: `@media (max-width: 768px) { .github-fork-ribbon { display: none !important; } }`}) To-dos [ ] Let users customize the ribbon. Some ideas are the text, color or placement.

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