2 |
5 |
15 |
16 | 
18 |
19 |
20 |
21 | [badge-prwelcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
22 | [prwelcome]: http://makeapullrequest.com
23 |
24 | The Diff DOM (Document Object Model) algorithm is used to compare two versions of the DOM, such as before and after an update on a web page. It aims to efficiently identify the changes between both DOMs, minimizing the number of manipulations required to update the user interface.
25 |
26 | The Diff DOM Streaming library extends the traditional Diff DOM algorithm by introducing support for comparing a DOM node with a stream. This enables the library to process the changes incrementally as they occur during the diff process.
27 |
28 | For more info, read this:
29 |
30 | - [HTML Streaming Over the Wire | A Deep Dive](https://dev.to/aralroca/html-streaming-over-the-wire-a-deep-dive-2n20).
31 | - [SPA-like Navigation Preserving Web Component State](https://dev.to/aralroca/spa-like-navigation-preserving-web-component-state-lh3)
32 |
33 | ## Getting started
34 |
35 | ### NPM
36 |
37 | Install:
38 |
39 | ```sh
40 | bun install diff-dom-streaming
41 | ```
42 |
43 | Then import it:
44 |
45 | ```ts
46 | import diff from "diff-dom-streaming";
47 | ```
48 |
49 | ### JSR
50 |
51 | Install:
52 |
53 | ```sh
54 | bunx jsr add @aralroca/diff-dom-streaming
55 | ```
56 |
57 | Then import it:
58 |
59 | ```ts
60 | import diff from "@aralroca/diff-dom-streaming";
61 | ```
62 |
63 | ### UNPKG
64 |
65 | Just import it:
66 |
67 | ```tsx
68 | import diff from "https://unpkg.com/diff-dom-streaming@latest";
69 | ```
70 |
71 | ## Using it
72 |
73 | ```ts
74 | const res = await fetch(/* some url */);
75 |
76 | // Diff between the current document and the stream:
77 | await diff(document, res.body);
78 | ```
79 |
80 | ## API
81 |
82 | `diff(oldNode: Node, stream: ReadableStream${Date.now() - epochStart} milliseconds
52 |Random number: ${Math.random()}
53 |Count: ${count}
42 | `; 43 | const countEl = shadowRoot.querySelector("#count"); 44 | shadowRoot.querySelector("#inc").addEventListener("click", () => { 45 | count++; 46 | countEl.textContent = `Count: ${count}`; 47 | }); 48 | shadowRoot.querySelector("#dec").addEventListener("click", () => { 49 | count--; 50 | countEl.textContent = `Count: ${count}`; 51 | }); 52 | } 53 | } 54 | 55 | // Register Counter Web Component 56 | if (!customElements.get("counter-component")) { 57 | customElements.define("counter-component", CounterComponent); 58 | } 59 | 60 | // Register current scripts 61 | function registerCurrentScripts() { 62 | for (let script of document.scripts) { 63 | if (script.id || script.hasAttribute("src")) { 64 | scripts.add(script.id || script.getAttribute("src")); 65 | } 66 | } 67 | } 68 | 69 | // Load new scripts 70 | function loadScripts(node) { 71 | if (node.nodeName !== "SCRIPT") return; 72 | 73 | const src = node.getAttribute("src"); 74 | 75 | if (scripts.has(src) || scripts.has(node.id)) return; 76 | 77 | const script = document.createElement("script"); 78 | 79 | if (src) script.src = src; 80 | 81 | script.innerHTML = node.innerHTML; 82 | 83 | // Remove after load the script 84 | script.onload = script.onerror = () => script.remove(); 85 | 86 | document.head.appendChild(script); 87 | 88 | // Remove after append + execute (only for inline script) 89 | if (!src) script.remove(); 90 | } 91 | -------------------------------------------------------------------------------- /examples/spa-like/index.ts: -------------------------------------------------------------------------------- 1 | import path from "node:path"; 2 | 3 | const encoder = new TextEncoder(); 4 | const names: Record