streams-demo-streaming-element-isvalid.html (1759B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Streaming element demo</title> 4 5 <script src="transforms/transform-stream-polyfill.js"></script> 6 <script src="transforms/text-encode-transform.js"></script> 7 <script src="tags/streaming-element.js"></script> 8 <script src="resources/highlight.pack.js"></script> 9 <script src="resources/web-animations.min.js"></script> 10 <script src="tags/view-source.js"></script> 11 12 <link rel=stylesheet href="resources/common.css"> 13 <link rel=stylesheet href="resources/jank-meter.css"> 14 <link rel=stylesheet href="resources/commits.css"> 15 16 <h1>Streaming element demo</h1> 17 <a id=back-to-index href=index.html>Back to demo index</a> 18 <view-source></view-source> 19 20 <div id=buttons> 21 <button id="load">Load HTML stream</button> 22 <button id="reset">Reset</button> 23 </div> 24 25 <div id=jank-meter>JANK METER</div> 26 27 <streaming-element id=target></streaming-element> 28 29 <script> 30 'use strict'; 31 const loadButton = document.querySelector('#load'); 32 const resetButton = document.querySelector('#reset'); 33 const targetDiv = document.querySelector('#target'); 34 35 // BEGIN SOURCE TO VIEW 36 async function streamDirectlyIntoDOM() { 37 const response = await fetch('data/commits.include', 38 { 39 mode: 'same-origin', 40 headers: { 41 'Cache-Control': 'no-cache, no-store' 42 } 43 }); 44 45 await response.body 46 .pipeThrough(new TextDecoder()) 47 .pipeTo(targetDiv.writable); 48 } 49 50 loadButton.onclick = () => { 51 loadButton.disabled = true; 52 streamDirectlyIntoDOM(); 53 }; 54 // END SOURCE TO VIEW 55 56 resetButton.onclick = () => { 57 targetDiv.reset(); 58 loadButton.disabled = false; 59 }; 60 </script>