Skip to content

Commit d874cb2

Browse files
noamrnoamr
committed
Add lots of examples
1 parent b2c27c2 commit d874cb2

12 files changed

+315
-0
lines changed

‎examples/highlight.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const style = document.createElement("style");
2+
style.textContent = `
3+
@import "https://dev.prismjs.com/themes/prism.css";
4+
5+
body {
6+
font-size: 12px;
7+
}
8+
9+
pre {
10+
width: max-content;
11+
position: absolute;
12+
right: 0;
13+
top: 0;
14+
margin: 10px;
15+
border: 1px solid black;
16+
}
17+
`;
18+
document.head.appendChild(style);
19+
import("https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js").then(() => {
20+
document.querySelectorAll("script:not([src])").forEach((script) => {
21+
// Create the visible elements
22+
const pre = document.createElement("pre");
23+
const code = document.createElement("code");
24+
25+
// Set the language (default to javascript)
26+
code.className = "language-javascript";
27+
28+
// Clean up indentation and inject text
29+
code.textContent = script.textContent.trim();
30+
31+
pre.appendChild(code);
32+
script.parentNode.insertBefore(pre, script.nextSibling);
33+
34+
// Tell Prism to highlight the new element
35+
Prism.highlightElement(code);
36+
});
37+
});

‎examples/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<style>
3+
a {
4+
display: block;
5+
}
6+
</style>
7+
<body>
8+
<a href="stream-append.html">Stream HTML append</a>
9+
<a href="stream-html-into-element.html">Stream HTML into an element</a>
10+
<a href="stream-html-using-worker.html">Stream HTML using a worker</a>
11+
<a href="stream-html-with-out-of-order.html"
12+
>Stream HTML with out of order patches</a
13+
>
14+
<a href="out-of-order-streaming.html">Out of order streaming</a>
15+
<a href="out-of-order-streaming-range.html"
16+
>Out of order streaming with start/end markers</a
17+
>
18+
<a href="nav-with-service-worker.html">Navigation with service worker</a>
19+
</body>

‎examples/nav-with-service-worker.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
3+
<body>
4+
<header>
5+
<nav>
6+
<a href="?page=1">Page 1</a>
7+
<a href="?page=2">Page 2</a>
8+
<a href="?page=3">Page 3</a>
9+
</nav>
10+
</header>
11+
<main>
12+
<div id="content" marker="content"><?start name=content>Loading...</div>
13+
</main>
14+
</body>
15+
<script>
16+
const loaded = new Promise((resolve) => {
17+
window.onload = async () => {
18+
navigator.serviceWorker.register("./sw.js");
19+
await navigator.serviceWorker.ready;
20+
console.log("Service worker ready");
21+
resolve();
22+
};
23+
});
24+
25+
navigation.addEventListener("navigate", async (event) => {
26+
if (event.canIntercept) {
27+
event.intercept({
28+
async handler() {
29+
await loaded;
30+
const url = new URL(event.destination.url);
31+
const page = url.searchParams.get("page");
32+
const stream = document.body.streamAppendHTMLUnsafe();
33+
const response = await fetch("/content?page=" + page);
34+
await response.body
35+
.pipeThrough(new TextDecoderStream())
36+
.pipeTo(stream);
37+
},
38+
});
39+
}
40+
});
41+
</script>

‎examples/out-of-order-streaming-range.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Out of order streaming with start/end markers</title>
7+
<script defer src="highlight.js"></script>
8+
</head>
9+
<body>
10+
<h1>Out of order streaming with start/end markers</h1>
11+
12+
<table>
13+
<tbody marker="data">
14+
<tr>
15+
<td>Before</td>
16+
</tr>
17+
<?marker name=data>
18+
<tr>
19+
<td>After</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
24+
<template for="data">
25+
<?start name=data>
26+
<tr>
27+
<td>Data</td>
28+
</tr>
29+
<?end name=data>
30+
</template>
31+
32+
<template for="data">
33+
<tr>
34+
<td>Data 1</td>
35+
</tr>
36+
<?marker name=data>
37+
</template>
38+
39+
<template for="data">
40+
<tr>
41+
<td>Data 2</td>
42+
</tr>
43+
</template>
44+
</body>
45+
</html>

‎examples/out-of-order-streaming.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Out of order streaming</title>
7+
<script defer src="highlight.js"></script>
8+
</head>
9+
<body>
10+
<h1>Out of order streaming</h1>
11+
12+
<div marker="placeholder"><?start name=placeholder>Loading...</div>
13+
14+
<template for="placeholder">
15+
<p>Result 1</p>
16+
<?marker name=placeholder></template
17+
>
18+
19+
<template for="placeholder">
20+
<p>Result 2</p>
21+
</template>
22+
23+
<footer>Footer</footer>
24+
</body>
25+
</html>

‎examples/stream-append.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Stream HTML append</title>
7+
<script defer src="highlight.js"></script>
8+
</head>
9+
<body>
10+
<h1>Stream HTML append</h1>
11+
<div id="root">0</div>
12+
13+
<script>
14+
const root = document.getElementById("root");
15+
16+
setTimeout(async () => {
17+
let i = 0;
18+
const writer = root.streamAppendHTMLUnsafe().getWriter();
19+
while (true) {
20+
await writer.write(`<p>${++i}</p>`);
21+
await new Promise((resolve) => setTimeout(resolve, 1000));
22+
}
23+
writer.close();
24+
}, 1000);
25+
</script>
26+
</body>
27+
</html>

‎examples/stream-html-into-element.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Stream HTML into an element</title>
7+
<script defer src="highlight.js"></script>
8+
</head>
9+
<body>
10+
<h1>Stream HTML into an element</h1>
11+
<div id="root">Loading...</div>
12+
13+
<script>
14+
const root = document.getElementById("root");
15+
16+
setTimeout(async () => {
17+
let i = 0;
18+
const writer = root.streamHTMLUnsafe().getWriter();
19+
while (true) {
20+
await writer.write(`<p>${++i}</p>`);
21+
await new Promise((resolve) => setTimeout(resolve, 1000));
22+
}
23+
writer.close();
24+
}, 1000);
25+
</script>
26+
</body>
27+
</html>

‎examples/stream-html-using-worker.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Stream HTML using a worker</title>
7+
<script defer src="highlight.js"></script>
8+
</head>
9+
<body>
10+
<h1>Stream HTML using a worker</h1>
11+
<div id="root">Loading...</div>
12+
13+
<script>
14+
const root = document.getElementById("root");
15+
16+
const worker = new Worker("worker.js");
17+
18+
setTimeout(async () => {
19+
let i = 0;
20+
const stream = root.streamHTMLUnsafe();
21+
worker.postMessage({ stream }, [stream]);
22+
}, 1000);
23+
</script>
24+
</body>
25+
</html>

‎examples/stream-html-with-out-of-order.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script defer src="highlight.js"></script>
7+
<title>Stream HTML with out of order patches</title>
8+
</head>
9+
<body>
10+
<h1>Stream HTML with out of order patches</h1>
11+
<div id="root" marker="data"><?start name=data>Loading...</div>
12+
13+
<script>
14+
const root = document.getElementById("root");
15+
16+
const stream = root.streamAppendHTMLUnsafe();
17+
const writer = stream.getWriter();
18+
19+
(async () => {
20+
for (let i = 0; i < 100; ++i) {
21+
await new Promise((resolve) => setTimeout(resolve, 1000));
22+
await writer.write(
23+
`<template for=data><?start name=data>${i}</template>`,
24+
);
25+
}
26+
writer.close();
27+
})();
28+
</script>
29+
</body>
30+
</html>

‎examples/stream-html-with-run-scripts.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script defer src="highlight.js"></script>
7+
<title>Stream HTML with run scripts</title>
8+
</head>
9+
<body>
10+
<h1>Stream HTML with run scripts</h1>
11+
<div id="root">Loading...</div>
12+
13+
<script>
14+
const root = document.getElementById("root");
15+
16+
setTimeout(async () => {
17+
let i = 0;
18+
const writer = root.streamHTMLUnsafe({ runScripts: true }).getWriter();
19+
writer.write("<script>alert('hello')<" + "/script>");
20+
writer.close();
21+
}, 1000);
22+
</script>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)