2b:null 2c:["$","title",null,{"children":"Experimenting with a Request UI | Tanner Hobson | Observable"}] 31:[] 2f:{"id":"4e8f6c4e4bad33a8","slug":null,"title":"Experimenting with a Request UI","thumbnail":"15ef8f13e40dd0f66cbd865d9419e22e94b628aa578f9da43f3200fd90edd454","access_level":"public","create_time":"$D2023-03-07T17:02:36.558Z","update_time":"$D2023-03-07T17:30:55.068Z","view_time":null,"first_public_time":"$D2023-03-07T17:02:36.558Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7343f790779e6735","login":"player1537","name":"Tanner Hobson","avatar_url":"https://avatars-next.observableusercontent.com/16170a1a32e364e1ff6054c6045de6814a032d01331aba01288f82afceeaaec2","tier":"starter_2024"},"version":17,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0a627f6b6f3beb0","login":"player1537","name":"Tanner Hobson","avatar_url":"https://avatars-next.observableusercontent.com/16170a1a32e364e1ff6054c6045de6814a032d01331aba01288f82afceeaaec2","tier":null}],"members":[{"type":"individual","id":"e0a627f6b6f3beb0","login":"player1537","name":"Tanner Hobson","avatar_url":"https://avatars-next.observableusercontent.com/16170a1a32e364e1ff6054c6045de6814a032d01331aba01288f82afceeaaec2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Experimenting with a Request UI","cells":[{"id":0,"value":"# Experimenting with a Request UI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"{\n yield '1';\n const response = await request('https://swapi.dev/api/people/1', { mode: 'cors' });\n yield '2';\n const json = await response.json();\n \n yield json;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof request = {\n const requests = [];\n \n const value = REQUEST;\n const self = htl.html`

${TEMPLATE()}`;\n \n return Object.defineProperties(self, {\n value: {\n get: () => value,\n },\n });\n\n function RENDER() {\n self.replaceChildren(TEMPLATE());\n self.dispatchEvent(new CustomEvent('input',));\n };\n\n function REQUEST(url, options={}) {\n requests.push(url, options);\n RENDER();\n };\n \n function TEMPLATE() {\n return htl.html`\n \n \n \n ${requests.map((request) => htl.html.fragment`\n \n

Actions\n	URL\n
\n \n \n	${request.url}\n `)}\n `; // htl.html\n };\n\n function APPROVE() {};\n function DENY() {};\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"