Vals using js-base64

Project homepage js-base64

Description from the NPM package:

Yet another Base64 transcoder in pure-JS

generate_invoice

Fork

import { parseArgs } from "jsr:@std/cli/parse-args";

import { Base64 } from "npm:js-base64";

import open from "npm:open";

function printHelp() {

console.log("help");

}

const { _, language, currency } = parseArgs(Deno.args, {

boolean: ["help"],

string: ["language", "currency"],

});

if (_.length == 0 || !language || !currency) {

printHelp();

Deno.exit(1);

}

const content = Deno.readTextFileSync(_[0]);

const url = new URL(`https://jsoninvoice.pomdtr.me/invoice/${Base64.encode(content)}`);

url.searchParams.set("language", language);

url.searchParams.set("currency", currency);

console.log(url.toString());

await open(url.toString());

jsoninvoice_homepage

Fork

/** @jsxImportSource npm:hono/jsx */

import { Invoice } from "https://esm.town/v/pomdtr/invoice_schema";

import { Base64 } from "npm:js-base64";

const invoice: Invoice = {

id: "20240401",

issued: "2024-01-01",

due: "2024-01-15",

currencies: [{ code: "USD" }, { code: "EUR", rate: 0.94 }],

tax: 10,

from: {

name: "Achille Lacoin",

to: {

name: "Val Town",

items: [

{

title: {

"en-US": "Creation of JSON Invoice Website",

"fr-FR": "Création du site JSON Invoice",

quantity: 7,

price: 70,

};

const b64Invoice = Base64.encode(JSON.stringify(invoice));

export const HomePage = () => {

return (

<html>

<head>

<title>JSON Invoice</title>

<script

type="module"

src="https://raw.esm.sh/code-mirror-web-component@0.1.1/dist/json-editor.js"

></script>

</head>

<body>

<h1 class="text-xl font-bold">JSON Invoice</h1>

</nav>

<span class="block text-amber-500">Invoice for Devs</span>

</h1>

An open file format for invoices, targeted toward solo

freelancers.

</p>

</div>

class="inline-flex items-center px-4 py-2 font-medium text-xl bg-amber-500 hover:bg-amber-400 border border-transparent rounded-lg text-white w-[200px] h-[54px] justify-center"

href="/editor"

Open Playground

</a>

</span>

</div>

class="inline-flex items-center px-4 py-2 font-medium text-xl bg-gray-100 hover:bg-gray-200 border border-transparent rounded-lg w-[200px] h-[54px] justify-center"

href="/TODO"

View Specs

</a>

</span>

</div>

<image

class="rounded-lg border w-3/4"

src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a35e64a5-e0e7-48f1-31b9-f1b77edb4900/public"

</div>

</body>

</html>

);

};

HTTP Client

Attach a postman-like http client to your vals, with bookmarks and history support

2fa974c630d393c3b4f419de8a142a2f35a11ceebda42d195b07623889e5604e.png

Usage

Wrap your http handler in an the httpClient middleware.

Create valimport {httpClient} from "https://esm.town/v/pomdtr/http_client"

export default httpClient((req) => {
   return new Response("Hello World!")
})

Go to https://<author>-<name>.web.val.run/http-client to view the http client UI.

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:

Create valimport {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")
    }
]})

ad7b95611871eb090ddadfa48f73d14692280e5389db1592403053d311aaa623.png

Customizing the client path

Create valimport {httpClient} from "https://esm.town/v/pomdtr/http_client"

export default httpClient((req) => {
   return new Response("Hello World!")
}, {
  path: "/" // show the http client on the website root
})

TODO

fix syntax highlighting on successive request
allow to prefill the initial request

http_client

/** @jsxImportSource npm:preact **/

import { html } from "https://esm.town/v/stevekrouse/html?v=5";

import { Base64 } from "npm:js-base64";

import { render } from "npm:preact-render-to-string";

type SerializedRequest = {

url: string;

method: string;

headers: [string, string][];

body: string | undefined;

};

type Bookmark = {

label: string;

request: Request;

};

async function serializeRequest(request: Request): Promise<SerializedRequest> {

return {

url: request.url,

method: request.method,

headers: Array.from(request.headers.entries()),

body: request.body ? Base64.encode(await request.text()) : undefined,

};

}

const getBody = async (bookmarks: Bookmark[]) => {

const serializedBookmarks = JSON.stringify(

await Promise.all(bookmarks.map(async (bookmark) => ({

label: bookmark.label,

request: await serializeRequest(bookmark.request),

}))),

);

return render(

<head>

<title>REST Client</title>

<script

type="module"

src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.20/dist/code-mirror.js"

</script>

</head>

</body>

</html>,

);

};

export function httpClient(next: (req: Request) => Response | Promise<Response>, options: {

path: string;

bookmarks: Bookmark[];

} = { path: "/http-client", bookmarks: [] }) {

return async (req: Request) => {

const url = new URL(req.url);

if (url.pathname == options.path) {

return html(await getBody(options.bookmarks));

}

return next(req);

};

}

export default async function(req: Request) {

const bookmarks = [{ label: "Dummy Request", request: new Request("https://dummyjson.com/products") }];

return html(await getBody(bookmarks));

}

HTTP Client

Attach a postman-like http client to your vals, with bookmarks and history support

2fa974c630d393c3b4f419de8a142a2f35a11ceebda42d195b07623889e5604e.png

Usage

Wrap your http handler in an the httpClient middleware.

Create valimport {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:

Create valimport {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")
    }
]})

ad7b95611871eb090ddadfa48f73d14692280e5389db1592403053d311aaa623.png

Customizing the client path

Create valimport {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

http_client

/** @jsxImportSource npm:preact **/

import { html } from "https://esm.town/v/stevekrouse/html?v=5";

import { Base64 } from "npm:js-base64";

import { render } from "npm:preact-render-to-string";

type SerializedRequest = {

url: string;

method: string;

headers: [string, string][];

body: string | undefined;

};

type Bookmark = {

label: string;

request: Request;

};

async function serializeRequest(request: Request): Promise<SerializedRequest> {

return {

url: request.url,

method: request.method,

headers: Array.from(request.headers.entries()),

body: request.body ? Base64.encode(await request.text()) : undefined,

};

}

const getBody = async (bookmarks: Bookmark[]) => {

const serializedBookmarks = JSON.stringify(

await Promise.all(bookmarks.map(async (bookmark) => ({

label: bookmark.label,

request: await serializeRequest(bookmark.request),

}))),

);

return render(

<head>

<title>REST Client</title>

<script

type="module"

src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.20/dist/code-mirror.js"

</script>

</head>

</body>

</html>,

);

};

export function httpClient(next: (req: Request) => Response | Promise<Response>, options: {

path: string;

bookmarks: Bookmark[];

} = { path: "/", bookmarks: [] }) {

return async (req: Request) => {

const url = new URL(req.url);

if (url.pathname == options.path) {

return html(await getBody(options.bookmarks));

}

return next(req);

};

}

export default async function(req: Request) {

const bookmarks = [{ label: "Dummy Request", request: new Request("https://dummyjson.com/products") }];

return html(await getBody(bookmarks));

}

1 2 7

This val is supposed to be used with the val.town extension. See the extension readme for installation instructions.

val2img

Fork

import { Base64 } from "npm:js-base64@3.7.5";

import { BrowserContext } from "https://esm.town/v/pomdtr/browser";

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";

export default async function(ctx: BrowserContext<{ author: string; name: string }>) {

const { author, name } = ctx.params;

const title = `@${author}/${name}`;

const resp = await fetch(`https://api.val.town/v1/alias/${author}/${name}`, {

headers: {

Authorization: `Bearer ${Deno.env.get("valtown")}`,

});

if (!resp.ok) {

throw new Error(await resp.text());

}

const { code } = await resp.json();

const hash = `#language=tsx&title=${title}&code=${Base64.encodeURI(code)}`;

return { type: "open", url: `https://ray.so${hash}` };

}

// #web