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
Readme
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/** @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(
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>REST Client</title>
<link rel="icon" href="https://fav.farm/🌐" />
<script src="https://cdn.tailwindcss.com"></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/code-mirror-web-component@0.0.20/dist/code-mirror.js"
>
</script>
</head>
<body class="bg-orange-100">
<div id="app" data-bookmarks={serializedBookmarks}></div>
<script type="module" src="https://esm.town/v/pomdtr/http_client_component"></script>
</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));
}
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.
Comments
stevekrouse avatar

I wonder if you should put the default client on the root and then if they want to put it elsewhere they can do that. That's the default I would do and what I expected, especially while you can't change the path for val preview embeds!

pomdtr avatar

yeah it's probably better, I'll switch the default. Maybe the main purpose of this val is to add an UI to vals that don't have one.