framework/examples/streaming/index.html at main · async/framework · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Async Loader Streaming</title>
  </head>
  <body async:container>
    <main>
      <h1>Streaming</h1>

      <section>
        <h2>Handler-driven swap</h2>
        <button type="button" on:click="streamingDemo.streamProduct">Stream product</button>
        <section async:boundary="product">
          <p>Waiting for streamed HTML...</p>
        </section>
      </section>

      <section>
        <h2>Out-of-order stream patches</h2>
        <p>
          Three feed boundaries reveal in source order even though their
          patches arrive shuffled; the news patch fails first and recovers
          with a later patch.
        </p>
        <section async:reveal="streamingFeed" async:reveal-order="forwards" async:reveal-tail="collapsed">
          <section async:boundary="feed-news"><p>Loading news…</p></section>
          <section async:boundary="feed-stats"><p>Loading stats…</p></section>
          <section async:boundary="feed-tips"><p>Loading tips…</p></section>
        </section>
      </section>
    </main>

    <!-- Wire patches a streaming server would emit between HTML chunks. The
         stats patch arrives before news, so it buffers under order="forwards";
         the news error settles its slot; the final patch recovers it. -->
    <script type="application/json" data-stream-patch>
      { "boundary": "feed-stats", "seq": 1, "html": "<p>42 sales so far today</p>" }
    </script>
    <script type="application/json" data-stream-patch>
      { "boundary": "feed-news", "seq": 1, "error": { "message": "news source offline" } }
    </script>
    <script type="application/json" data-stream-patch>
      { "boundary": "feed-tips", "seq": 1, "html": "<p>Tip: stream boundaries, not documents</p>" }
    </script>
    <script type="application/json" data-stream-patch>
      { "boundary": "feed-news", "seq": 2, "html": "<p>News is back online</p>" }
    </script>

    <script type="module" src="./main.js"></script>
  </body>
</html>