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
import { delay } from "https://deno.land/x/delay@v0.2.0/mod.ts";
import { Image } from "https://deno.land/x/imagescript@1.2.17/mod.ts";
import { html, htmlResponse } from "https://esm.town/v/postpostscript/html";
import { Layout } from "https://esm.town/v/postpostscript/htmlComponentLibrary";
import { provideBlob } from "https://esm.town/v/postpostscript/provideBlob";
export default async function(req: Request): Promise<Response> {
const expensiveContent = provideBlob(async () => {
await delay(2000 + Math.random() * 3000);
return "expensive content loaded!";
}).jsPromise();
const image = provideBlob(async () => {
const png = new Image(100, 100);
png.drawCircle(50, 50, 50, 100);
return png.encode();
}).jsPromise();
return htmlResponse`
${Layout`
<div id="text">
Loading super expensive content...
</div>
<div id="image"></div>
<script>
(async () => {
document.getElementById("text").innerText = await ${expensiveContent}.then(blob => blob.text())
})();
${image}.then(blob => {
const $img = document.createElement("img")
$img.src = URL.createObjectURL(blob)
document.getElementById("image").appendChild($img)
})
</script>
`}
`;
}