REST Client

\n \n \n ,\n );\n};\n\nexport function httpClient(next: (req: Request) => Response | Promise, options: {\n path: string;\n bookmarks: Bookmark[];\n} = { path: \"/\", bookmarks: [] }) {\n return async (req: Request) => {\n const url = new URL(req.url);\n if (url.pathname == options.path) {\n return html(await getBody(options.bookmarks));\n }\n\n return next(req);\n };\n}\n\nexport default async function(req: Request) {\n const bookmarks = [{ label: \"Dummy Request\", request: new Request(\"https://dummyjson.com/products\") }];\n return html(await getBody(bookmarks));\n}","createdAt",["D",1710865314808],"version",30,"currentUserHasLiked","likeCount",9,"forkCount",1,"referenceCount",10,"dependencyCount","commentCount","prCount","mergedPr",{"_136":137,"_138":139},"handle","pomdtr","profileImageUrl","https://images.clerk.dev/oauth_github/img_2RCoAITJZH1QencEgtVjh4Qirj4.jpeg","forkedVal","fileId","interval","slug","pomdtr/http_client","description","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\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n}) 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\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n}, {\n bookmarks: [\n {\n \"label\": \"Dummy Request\",\n \"request\": new Request(\"https://dummyjson.com/products\")\n }\n]}) Customizing the client path import {httpClient} from \"https://esm.town/v/pomdtr/http_client\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n}, {\n path: \"/http-client\"\n}) TODO [ ] fix syntax highlighting on successive request [ ] allow to prefill the initial request","versions",[149,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,231,234,238,242,246,250,254,258,261,264],{"_122":123,"_150":-5,"_120":151,"_117":115},"prId",["D",1710865314808],{"_122":153,"_150":-5,"_120":154,"_117":155},29,["D",1710864351732],"8ef19db0-e60a-11ee-a000-8aad37b30b4b",{"_122":157,"_150":-5,"_120":158,"_117":159},28,["D",1710864298266],"6f137e32-e60a-11ee-9f5d-8aad37b30b4b",{"_122":161,"_150":-5,"_120":162,"_117":163},27,["D",1710863767506],"32b7d3b2-e609-11ee-a5cf-8aad37b30b4b",{"_122":165,"_150":-5,"_120":166,"_117":167},26,["D",1710863261161],"04e9ab14-e608-11ee-b74c-8aad37b30b4b",{"_122":169,"_150":-5,"_120":170,"_117":171},25,["D",1710863103462],"a6eac0ca-e607-11ee-bea3-8aad37b30b4b",{"_122":173,"_150":-5,"_120":174,"_117":175},24,["D",1710863031158],"7bd21fdc-e607-11ee-ae0d-8aad37b30b4b",{"_122":177,"_150":-5,"_120":178,"_117":179},23,["D",1710862800315],"f23a4632-e606-11ee-95e6-8aad37b30b4b",{"_122":181,"_150":-5,"_120":182,"_117":183},22,["D",1710862649708],"987574dc-e606-11ee-9369-8aad37b30b4b",{"_122":185,"_150":-5,"_120":186,"_117":187},21,["D",1710862526799],"4f32f9b6-e606-11ee-9792-8aad37b30b4b",{"_122":189,"_150":-5,"_120":190,"_117":191},20,["D",1710862464133],"29d8db22-e606-11ee-8436-8aad37b30b4b",{"_122":193,"_150":-5,"_120":194,"_117":195},19,["D",1710862299174],"c78620ce-e605-11ee-b1f6-8aad37b30b4b",{"_122":197,"_150":-5,"_120":198,"_117":199},18,["D",1710856664504],"a8ffbc08-e5f8-11ee-8a73-8aad37b30b4b",{"_122":201,"_150":-5,"_120":202,"_117":203},17,["D",1710856628923],"93ca887c-e5f8-11ee-a463-8aad37b30b4b",{"_122":205,"_150":-5,"_120":206,"_117":207},16,["D",1710856619746],"8e523e6c-e5f8-11ee-ab4f-8aad37b30b4b",{"_122":209,"_150":-5,"_120":210,"_117":211},15,["D",1710856608300],"877fc96a-e5f8-11ee-ac0d-8aad37b30b4b",{"_122":213,"_150":-5,"_120":214,"_117":215},14,["D",1710856544935],"61bafc9a-e5f8-11ee-a932-8aad37b30b4b",{"_122":217,"_150":-5,"_120":218,"_117":219},13,["D",1710856171953],"836a87ee-e5f7-11ee-a5c4-8aad37b30b4b",{"_122":221,"_150":-5,"_120":222,"_117":223},12,["D",1710856073053],"4877965e-e5f7-11ee-a1a6-8aad37b30b4b",{"_122":225,"_150":-5,"_120":226,"_117":227},11,["D",1710846629709],"4bcb9122-e5e1-11ee-89d2-8aad37b30b4b",{"_122":130,"_150":-5,"_120":229,"_117":230},["D",1710844170095],"91c03152-e5db-11ee-ba72-8aad37b30b4b",{"_122":126,"_150":-5,"_120":232,"_117":233},["D",1710844040522],"4484e7a2-e5db-11ee-ba72-8aad37b30b4b",{"_122":235,"_150":-5,"_120":236,"_117":237},8,["D",1710843958148],"136bb416-e5db-11ee-8f45-8aad37b30b4b",{"_122":239,"_150":-5,"_120":240,"_117":241},7,["D",1710803811104],"99eb050e-e57d-11ee-8d18-8aad37b30b4b",{"_122":243,"_150":-5,"_120":244,"_117":245},6,["D",1710800291872],"684ab894-e575-11ee-b050-8aad37b30b4b",{"_122":247,"_150":-5,"_120":248,"_117":249},5,["D",1710789425035],"1b26f578-e55c-11ee-ae0c-8aad37b30b4b",{"_122":251,"_150":-5,"_120":252,"_117":253},4,["D",1710789420845],"18a7b120-e55c-11ee-beb3-8aad37b30b4b",{"_122":255,"_150":-5,"_120":256,"_117":257},3,["D",1710789406825],"104c7718-e55c-11ee-9d16-8aad37b30b4b",{"_122":94,"_150":-5,"_120":259,"_117":260},["D",1710789322673],"de23cbce-e55b-11ee-89b7-8aad37b30b4b",{"_122":128,"_150":-5,"_120":262,"_117":263},["D",1710779505778],"02d09018-e545-11ee-b707-8aad37b30b4b",{"_122":33,"_150":-5,"_120":265,"_117":266},["D",1710777258564],"c75ee188-e53f-11ee-80d4-8aad37b30b4b","recentThread","breadcrumbs","comments",[271,282],{"_117":272,"_273":274,"_120":275,"_276":-5,"_277":27,"_278":27,"_21":279},"9862f302-e60b-11ee-863e-8aad37b30b4b","body","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!\n\n",["D",1710864797070],"updatedAt","canDelete","canEdit",{"_136":280,"_138":281},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_117":283,"_273":284,"_120":285,"_276":-5,"_277":27,"_278":27,"_21":286},"93d177ea-e60c-11ee-8ce6-8aad37b30b4b","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.",["D",1710865218903],{"_136":137,"_138":139},"isOwner","routes/_app.v.$handle.$name.forks",{"_290":291,"_313":128,"_314":144,"_315":33,"_98":316},"forksList",[292],{"_104":293,"_294":295},"e2c3a716-e60b-11ee-b325-8aad37b30b4b","initialData",{"_102":103,"_99":296,"_104":293,"_106":297,"_107":-5,"_108":109,"_110":298,"_112":113,"_114":299,"_116":27,"_117":299,"_118":300,"_120":301,"_122":33,"_124":27,"_125":33,"_129":33,"_131":128,"_132":33,"_127":33,"_133":33,"_134":-5,"_21":302,"_140":303,"_142":-7,"_145":305,"_306":-5,"_143":307,"_147":308},"a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","eecc26b7-476b-4e93-9487-ae8b4988d6e5","# HTTP Client\n\nAttach a postman-like http client to your vals, with bookmarks and history support\n\n![2fa974c630d393c3b4f419de8a142a2f35a11ceebda42d195b07623889e5604e.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/72cd491e-9503-46c5-9c7c-3a78c975d600/public)\n\n## Usage\n\nWrap your http handler in an the httpClient middleware.\n\n```ts\nimport {httpClient} from \"https://esm.town/v/pomdtr/http_client\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n})\n```\n\nGo to `https://-.web.val.run/http-client` to view the http client UI.\n\n## Adding bookmarks\n\nYou might want to bookmark some requests you need often. You can do it by passing a bookmark list as a middleware option:\n\n```ts\nimport {httpClient} from \"https://esm.town/v/pomdtr/http_client\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n}, {\n bookmarks: [\n {\n \"label\": \"Dummy Request\",\n \"request\": new Request(\"https://dummyjson.com/products\")\n }\n]})\n```\n\n![ad7b95611871eb090ddadfa48f73d14692280e5389db1592403053d311aaa623.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b8b5e323-a683-408c-5d8e-663554bca800/public)\n\n\n## Customizing the client path\n\n```ts\nimport {httpClient} from \"https://esm.town/v/pomdtr/http_client\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n}, {\n path: \"/\" // show the http client on the website root\n})\n```\n\n## TODO\n\n- [ ] fix syntax highlighting on successive request\n- [ ] allow to prefill the initial request","e2c56c2c-e60b-11ee-b325-8aad37b30b4b","/** @jsxImportSource npm:preact **/\n\nimport { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\nimport { Base64 } from \"npm:js-base64\";\nimport { render } from \"npm:preact-render-to-string\";\n\ntype SerializedRequest = {\n url: string;\n method: string;\n headers: [string, string][];\n body: string | undefined;\n};\n\ntype Bookmark = {\n label: string;\n request: Request;\n};\n\nasync function serializeRequest(request: Request): Promise {\n return {\n url: request.url,\n method: request.method,\n headers: Array.from(request.headers.entries()),\n body: request.body ? Base64.encode(await request.text()) : undefined,\n };\n}\n\nconst getBody = async (bookmarks: Bookmark[]) => {\n const serializedBookmarks = JSON.stringify(\n await Promise.all(bookmarks.map(async (bookmark) => ({\n label: bookmark.label,\n request: await serializeRequest(bookmark.request),\n }))),\n );\n return render(\n \n \n \n \n REST Client\n \n \n \n \n \n \n

\n \n \n ,\n );\n};\n\nexport function httpClient(next: (req: Request) => Response | Promise, options: {\n path: string;\n bookmarks: Bookmark[];\n} = { path: \"/http-client\", bookmarks: [] }) {\n return async (req: Request) => {\n const url = new URL(req.url);\n if (url.pathname == options.path) {\n return html(await getBody(options.bookmarks));\n }\n\n return next(req);\n };\n}\n\nexport default async function(req: Request) {\n const bookmarks = [{ label: \"Dummy Request\", request: new Request(\"https://dummyjson.com/products\") }];\n return html(await getBody(bookmarks));\n}",["D",1710864921867],{"_136":280,"_138":281},{"_117":155,"_136":137,"_102":103,"_122":153,"_304":-5},"prDisabledHint","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\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n}) Go to https://-.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: import {httpClient} from \"https://esm.town/v/pomdtr/http_client\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n}, {\n bookmarks: [\n {\n \"label\": \"Dummy Request\",\n \"request\": new Request(\"https://dummyjson.com/products\")\n }\n]}) Customizing the client path import {httpClient} from \"https://esm.town/v/pomdtr/http_client\"\n\nexport default httpClient((req) => {\n return new Response(\"Hello World!\")\n}, {\n path: \"/\" // show the http client on the website root\n}) TODO [ ] fix syntax highlighting on successive request [ ] allow to prefill the initial request","latestEvaluation","stevekrouse/http_client",[309],{"_120":310,"_122":33,"_311":312},["D",1710864921867],"n","1","forksCount","valname","page",{"_117":115,"_102":103,"_136":137,"_12":100,"_122":123,"_104":105,"_141":-5,"_118":119,"_108":109,"_116":27,"_143":144},"routes/_app","actionData","errors"]