Log inSign up
pomdtr avatar
Public
HTTP
Fork
7 Likes
pomdtr-http_client.web.val.run
Readme

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 val
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:

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

ad7b95611871eb090ddadfa48f73d14692280e5389db1592403053d311aaa623.png

Customizing the client path

Create val
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
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));
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Comments
2
stevekrouse avatar
stevekrouse…

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
pomdtr…

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.

v30
March 19, 2024