pomdtr

trpc Access private Val Town apis. ⚠️ trpc endpoints can change at any time Available Procedures (WIP) Queries search getVal getValMetadata getValLastLogs Mutations deleteVal updateReadme togglePrivacy updateVal toggleLike run updateInterval stopInterval

⚠️ 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. 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.