Revise

sitegen/x.ts

@@ -426,7 +426,7 @@ async function* serverStateUpdates() {
       "data-suffix": "van.add(document.body, ChatApp())",
       "data-css-file": "sample-code/chat-app.code.css",
     }),
-    p("Note that in the jsfiddle preview link above, we're simulating the server-side state updates. In real-world applications, state updates can be sent from server via ", Link(Symbol("WebSocket"), " messages", "https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event"), ", or ", Link("HTTP polling", "https://medium.com/cache-me-out/http-polling-and-long-polling-bd3f662a14f"), "."),
+    p("Note that in the jsfiddle preview link above, we're simulating the server-side state updates. In real-world applications, state updates can be sent from server via ", Link("server-sent events", "https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events"), ", ", Link(Symbol("WebSocket"), " messages", "https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event"), ", or ", Link("HTTP polling", "https://medium.com/cache-me-out/http-polling-and-long-polling-bd3f662a14f"), "."),
     H3({id: "serialization-and-compact"}, "Serialization app state and ", Symbol("vanX.compact")),
     p("You can serialize the entire app state into a single string, via ", InlineJs("JSON.stringify"), " or ", Link("protobuf", "https://github.com/protobufjs/protobuf.js"), ". As mentioned in ", Link("a previous section", "#holes-in-the-array"), ", holes that might appear in reactive arrays need to be eliminated. ", Symbol("vanX.compact"), " does exactly that. It traverses the entire object tree of the input reactive object and returns a new object with holes in all encountered arrays eliminated."),
     H4({id: "api-compact"}, "API reference: ", Symbol("vanX.compact")),

x.html

@@ -311,7 +311,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
     vanX.list(div({class: "chat-messages"}), appState.messages, s =&gt; div({class: "message"}, s)),
   )
 }
-</code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/chat-app">Try on jsfiddle</a></p><p>Note that in the jsfiddle preview link above, we're simulating the server-side state updates. In real-world applications, state updates can be sent from server via <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event" class="w3-hover-opacity"><code class="symbol">WebSocket</code> messages</a>, or <a href="https://medium.com/cache-me-out/http-polling-and-long-polling-bd3f662a14f" class="w3-hover-opacity">HTTP polling</a>.</p><h3 class="w3-large w3-text-red" id="serialization-and-compact"><a class="self-link" href="#serialization-and-compact">Serialization app state and <code class="symbol">vanX.compact</code></a></h3><p>You can serialize the entire app state into a single string, via <code class="language-js">JSON.stringify</code> or <a href="https://github.com/protobufjs/protobuf.js" class="w3-hover-opacity">protobuf</a>. As mentioned in <a href="#holes-in-the-array" class="w3-hover-opacity">a previous section</a>, holes that might appear in reactive arrays need to be eliminated. <code class="symbol">vanX.compact</code> does exactly that. It traverses the entire object tree of the input reactive object and returns a new object with holes in all encountered arrays eliminated.</p><h4 class="w3-medium w3-text-red" id="api-compact"><a class="self-link" href="#api-compact">API reference: <code class="symbol">vanX.compact</code></a></h4><table><tbody><tr><td><b>Signature</b></td><td><code class="language-js">vanX.compact(obj) =&gt; &lt;a new object with holes in all arrays eliminated&gt;</code></td></tr><tr><td><b>Description</b></td><td>Traverse the entire object tree of the input reactive object <code class="symbol">obj</code> and returns a new object with holes in all encountered arrays eliminated. The input object <code class="symbol">obj</code> remains unchanged.</td></tr><tr><td><b>Parameters</b></td><td><ul><li><b><code class="symbol">obj</code></b> - The input reactive object.</li></ul></td></tr><tr><td><b>Returns</b></td><td>A new object with holes eliminated.</td></tr></tbody></table><h2 class="w3-xxlarge w3-text-red" id="api-index"><a class="self-link" href="#api-index">API Index</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Below is the list of all top-level APIs in <b>VanX</b>:</p><ul><li><code class="symbol"><a href="#api-reactive" class="w3-hover-opacity">vanX.reactive</a></code></li><li><code class="symbol"><a href="#api-calc" class="w3-hover-opacity">vanX.calc</a></code></li><li><code class="symbol"><a href="#api-stateFields" class="w3-hover-opacity">vanX.stateFields</a></code></li><li><code class="symbol"><a href="#api-raw" class="w3-hover-opacity">vanX.raw</a></code></li><li><code class="symbol"><a href="#api-noreactive" class="w3-hover-opacity">vanX.noreactive</a></code></li><li><code class="symbol"><a href="#api-list" class="w3-hover-opacity">vanX.list</a></code></li><li><code class="symbol"><a href="#api-replace" class="w3-hover-opacity">vanX.replace</a></code></li><li><code class="symbol"><a href="#api-compact" class="w3-hover-opacity">vanX.compact</a></code></li></ul></div>
+</code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/chat-app">Try on jsfiddle</a></p><p>Note that in the jsfiddle preview link above, we're simulating the server-side state updates. In real-world applications, state updates can be sent from server via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" class="w3-hover-opacity">server-sent events</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event" class="w3-hover-opacity"><code class="symbol">WebSocket</code> messages</a>, or <a href="https://medium.com/cache-me-out/http-polling-and-long-polling-bd3f662a14f" class="w3-hover-opacity">HTTP polling</a>.</p><h3 class="w3-large w3-text-red" id="serialization-and-compact"><a class="self-link" href="#serialization-and-compact">Serialization app state and <code class="symbol">vanX.compact</code></a></h3><p>You can serialize the entire app state into a single string, via <code class="language-js">JSON.stringify</code> or <a href="https://github.com/protobufjs/protobuf.js" class="w3-hover-opacity">protobuf</a>. As mentioned in <a href="#holes-in-the-array" class="w3-hover-opacity">a previous section</a>, holes that might appear in reactive arrays need to be eliminated. <code class="symbol">vanX.compact</code> does exactly that. It traverses the entire object tree of the input reactive object and returns a new object with holes in all encountered arrays eliminated.</p><h4 class="w3-medium w3-text-red" id="api-compact"><a class="self-link" href="#api-compact">API reference: <code class="symbol">vanX.compact</code></a></h4><table><tbody><tr><td><b>Signature</b></td><td><code class="language-js">vanX.compact(obj) =&gt; &lt;a new object with holes in all arrays eliminated&gt;</code></td></tr><tr><td><b>Description</b></td><td>Traverse the entire object tree of the input reactive object <code class="symbol">obj</code> and returns a new object with holes in all encountered arrays eliminated. The input object <code class="symbol">obj</code> remains unchanged.</td></tr><tr><td><b>Parameters</b></td><td><ul><li><b><code class="symbol">obj</code></b> - The input reactive object.</li></ul></td></tr><tr><td><b>Returns</b></td><td>A new object with holes eliminated.</td></tr></tbody></table><h2 class="w3-xxlarge w3-text-red" id="api-index"><a class="self-link" href="#api-index">API Index</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Below is the list of all top-level APIs in <b>VanX</b>:</p><ul><li><code class="symbol"><a href="#api-reactive" class="w3-hover-opacity">vanX.reactive</a></code></li><li><code class="symbol"><a href="#api-calc" class="w3-hover-opacity">vanX.calc</a></code></li><li><code class="symbol"><a href="#api-stateFields" class="w3-hover-opacity">vanX.stateFields</a></code></li><li><code class="symbol"><a href="#api-raw" class="w3-hover-opacity">vanX.raw</a></code></li><li><code class="symbol"><a href="#api-noreactive" class="w3-hover-opacity">vanX.noreactive</a></code></li><li><code class="symbol"><a href="#api-list" class="w3-hover-opacity">vanX.list</a></code></li><li><code class="symbol"><a href="#api-replace" class="w3-hover-opacity">vanX.replace</a></code></li><li><code class="symbol"><a href="#api-compact" class="w3-hover-opacity">vanX.compact</a></code></li></ul></div>
         <aside id="toc"><ul><li><a href="#installation" class="w3-hover-opacity">Installation</a></li><li><a href="#reactive-object" class="w3-hover-opacity">vanX.reactive: Reactive Object to Hold Many Individual States</a><ul><li><a href="#a-practical-example" class="w3-hover-opacity">A practical example</a></li><li><a href="#calculated-fields" class="w3-hover-opacity">Calculated fields</a></li><li><a href="#get-the-underlying-state-object" class="w3-hover-opacity">Get the underlying State object</a></li><li><a href="#get-the-raw-field-value" class="w3-hover-opacity">Get the raw field value without registering the dependency</a></li><li><a href="#add-reactivity-to-existing-javascript-classes" class="w3-hover-opacity">Add reactivity to existing JavaScript classes</a></li><li><a href="#vanx-noreactive-exemption-from-reactivity-conversion" class="w3-hover-opacity">vanX.noreactive: exemption from reactivity conversion</a></li><li><a href="#a-comprehensive-example" class="w3-hover-opacity">A comprehensive example</a></li></ul></li><li><a href="#reactive-list" class="w3-hover-opacity">vanX.list: Reactive List that Minimizes Re-rendering on Updates</a><ul><li><a href="#a-simplified-todo-app" class="w3-hover-opacity">A simplified TODO App</a></li><li><a href="#holes-in-the-array" class="w3-hover-opacity">Holes in the array</a></li></ul></li><li><a href="#vanx-replace-update-insert-delete-and-reorder-items-in-batch" class="w3-hover-opacity">vanX.replace: Update, Insert, Delete and Reorder Items in Batch</a><ul><li><a href="#example-1-sortable-list" class="w3-hover-opacity">Example 1: sortable list</a></li><li><a href="#example-2-an-advanced-sortable-todo-list" class="w3-hover-opacity">Example 2: an advanced sortable TODO list</a></li><li><a href="#vanx-list-for-calculated-fields" class="w3-hover-opacity">vanX.list for calculated fields</a></li></ul></li><li><a href="#global-app-state-and-serialization" class="w3-hover-opacity">Global App State and Serialization</a><ul><li><a href="#smart-diff-update-in-vanx-replace" class="w3-hover-opacity">Smart diff / update in vanX.replace</a></li><li><a href="#server-driven-ui-sdui-with-vanx" class="w3-hover-opacity">Server-driven UI (SDUI) with VanX</a></li><li><a href="#serialization-and-compact" class="w3-hover-opacity">Serialization app state and vanX.compact</a></li></ul></li><li><a href="#api-index" class="w3-hover-opacity">API Index</a></li></ul></aside>
       </div>
     </div>

x/index.html

@@ -311,7 +311,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
     vanX.list(div({class: "chat-messages"}), appState.messages, s =&gt; div({class: "message"}, s)),
   )
 }
-</code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/chat-app">Try on jsfiddle</a></p><p>Note that in the jsfiddle preview link above, we're simulating the server-side state updates. In real-world applications, state updates can be sent from server via <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event" class="w3-hover-opacity"><code class="symbol">WebSocket</code> messages</a>, or <a href="https://medium.com/cache-me-out/http-polling-and-long-polling-bd3f662a14f" class="w3-hover-opacity">HTTP polling</a>.</p><h3 class="w3-large w3-text-red" id="serialization-and-compact"><a class="self-link" href="#serialization-and-compact">Serialization app state and <code class="symbol">vanX.compact</code></a></h3><p>You can serialize the entire app state into a single string, via <code class="language-js">JSON.stringify</code> or <a href="https://github.com/protobufjs/protobuf.js" class="w3-hover-opacity">protobuf</a>. As mentioned in <a href="#holes-in-the-array" class="w3-hover-opacity">a previous section</a>, holes that might appear in reactive arrays need to be eliminated. <code class="symbol">vanX.compact</code> does exactly that. It traverses the entire object tree of the input reactive object and returns a new object with holes in all encountered arrays eliminated.</p><h4 class="w3-medium w3-text-red" id="api-compact"><a class="self-link" href="#api-compact">API reference: <code class="symbol">vanX.compact</code></a></h4><table><tbody><tr><td><b>Signature</b></td><td><code class="language-js">vanX.compact(obj) =&gt; &lt;a new object with holes in all arrays eliminated&gt;</code></td></tr><tr><td><b>Description</b></td><td>Traverse the entire object tree of the input reactive object <code class="symbol">obj</code> and returns a new object with holes in all encountered arrays eliminated. The input object <code class="symbol">obj</code> remains unchanged.</td></tr><tr><td><b>Parameters</b></td><td><ul><li><b><code class="symbol">obj</code></b> - The input reactive object.</li></ul></td></tr><tr><td><b>Returns</b></td><td>A new object with holes eliminated.</td></tr></tbody></table><h2 class="w3-xxlarge w3-text-red" id="api-index"><a class="self-link" href="#api-index">API Index</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Below is the list of all top-level APIs in <b>VanX</b>:</p><ul><li><code class="symbol"><a href="#api-reactive" class="w3-hover-opacity">vanX.reactive</a></code></li><li><code class="symbol"><a href="#api-calc" class="w3-hover-opacity">vanX.calc</a></code></li><li><code class="symbol"><a href="#api-stateFields" class="w3-hover-opacity">vanX.stateFields</a></code></li><li><code class="symbol"><a href="#api-raw" class="w3-hover-opacity">vanX.raw</a></code></li><li><code class="symbol"><a href="#api-noreactive" class="w3-hover-opacity">vanX.noreactive</a></code></li><li><code class="symbol"><a href="#api-list" class="w3-hover-opacity">vanX.list</a></code></li><li><code class="symbol"><a href="#api-replace" class="w3-hover-opacity">vanX.replace</a></code></li><li><code class="symbol"><a href="#api-compact" class="w3-hover-opacity">vanX.compact</a></code></li></ul></div>
+</code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/chat-app">Try on jsfiddle</a></p><p>Note that in the jsfiddle preview link above, we're simulating the server-side state updates. In real-world applications, state updates can be sent from server via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" class="w3-hover-opacity">server-sent events</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/message_event" class="w3-hover-opacity"><code class="symbol">WebSocket</code> messages</a>, or <a href="https://medium.com/cache-me-out/http-polling-and-long-polling-bd3f662a14f" class="w3-hover-opacity">HTTP polling</a>.</p><h3 class="w3-large w3-text-red" id="serialization-and-compact"><a class="self-link" href="#serialization-and-compact">Serialization app state and <code class="symbol">vanX.compact</code></a></h3><p>You can serialize the entire app state into a single string, via <code class="language-js">JSON.stringify</code> or <a href="https://github.com/protobufjs/protobuf.js" class="w3-hover-opacity">protobuf</a>. As mentioned in <a href="#holes-in-the-array" class="w3-hover-opacity">a previous section</a>, holes that might appear in reactive arrays need to be eliminated. <code class="symbol">vanX.compact</code> does exactly that. It traverses the entire object tree of the input reactive object and returns a new object with holes in all encountered arrays eliminated.</p><h4 class="w3-medium w3-text-red" id="api-compact"><a class="self-link" href="#api-compact">API reference: <code class="symbol">vanX.compact</code></a></h4><table><tbody><tr><td><b>Signature</b></td><td><code class="language-js">vanX.compact(obj) =&gt; &lt;a new object with holes in all arrays eliminated&gt;</code></td></tr><tr><td><b>Description</b></td><td>Traverse the entire object tree of the input reactive object <code class="symbol">obj</code> and returns a new object with holes in all encountered arrays eliminated. The input object <code class="symbol">obj</code> remains unchanged.</td></tr><tr><td><b>Parameters</b></td><td><ul><li><b><code class="symbol">obj</code></b> - The input reactive object.</li></ul></td></tr><tr><td><b>Returns</b></td><td>A new object with holes eliminated.</td></tr></tbody></table><h2 class="w3-xxlarge w3-text-red" id="api-index"><a class="self-link" href="#api-index">API Index</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Below is the list of all top-level APIs in <b>VanX</b>:</p><ul><li><code class="symbol"><a href="#api-reactive" class="w3-hover-opacity">vanX.reactive</a></code></li><li><code class="symbol"><a href="#api-calc" class="w3-hover-opacity">vanX.calc</a></code></li><li><code class="symbol"><a href="#api-stateFields" class="w3-hover-opacity">vanX.stateFields</a></code></li><li><code class="symbol"><a href="#api-raw" class="w3-hover-opacity">vanX.raw</a></code></li><li><code class="symbol"><a href="#api-noreactive" class="w3-hover-opacity">vanX.noreactive</a></code></li><li><code class="symbol"><a href="#api-list" class="w3-hover-opacity">vanX.list</a></code></li><li><code class="symbol"><a href="#api-replace" class="w3-hover-opacity">vanX.replace</a></code></li><li><code class="symbol"><a href="#api-compact" class="w3-hover-opacity">vanX.compact</a></code></li></ul></div>
         <aside id="toc"><ul><li><a href="#installation" class="w3-hover-opacity">Installation</a></li><li><a href="#reactive-object" class="w3-hover-opacity">vanX.reactive: Reactive Object to Hold Many Individual States</a><ul><li><a href="#a-practical-example" class="w3-hover-opacity">A practical example</a></li><li><a href="#calculated-fields" class="w3-hover-opacity">Calculated fields</a></li><li><a href="#get-the-underlying-state-object" class="w3-hover-opacity">Get the underlying State object</a></li><li><a href="#get-the-raw-field-value" class="w3-hover-opacity">Get the raw field value without registering the dependency</a></li><li><a href="#add-reactivity-to-existing-javascript-classes" class="w3-hover-opacity">Add reactivity to existing JavaScript classes</a></li><li><a href="#vanx-noreactive-exemption-from-reactivity-conversion" class="w3-hover-opacity">vanX.noreactive: exemption from reactivity conversion</a></li><li><a href="#a-comprehensive-example" class="w3-hover-opacity">A comprehensive example</a></li></ul></li><li><a href="#reactive-list" class="w3-hover-opacity">vanX.list: Reactive List that Minimizes Re-rendering on Updates</a><ul><li><a href="#a-simplified-todo-app" class="w3-hover-opacity">A simplified TODO App</a></li><li><a href="#holes-in-the-array" class="w3-hover-opacity">Holes in the array</a></li></ul></li><li><a href="#vanx-replace-update-insert-delete-and-reorder-items-in-batch" class="w3-hover-opacity">vanX.replace: Update, Insert, Delete and Reorder Items in Batch</a><ul><li><a href="#example-1-sortable-list" class="w3-hover-opacity">Example 1: sortable list</a></li><li><a href="#example-2-an-advanced-sortable-todo-list" class="w3-hover-opacity">Example 2: an advanced sortable TODO list</a></li><li><a href="#vanx-list-for-calculated-fields" class="w3-hover-opacity">vanX.list for calculated fields</a></li></ul></li><li><a href="#global-app-state-and-serialization" class="w3-hover-opacity">Global App State and Serialization</a><ul><li><a href="#smart-diff-update-in-vanx-replace" class="w3-hover-opacity">Smart diff / update in vanX.replace</a></li><li><a href="#server-driven-ui-sdui-with-vanx" class="w3-hover-opacity">Server-driven UI (SDUI) with VanX</a></li><li><a href="#serialization-and-compact" class="w3-hover-opacity">Serialization app state and vanX.compact</a></li></ul></li><li><a href="#api-index" class="w3-hover-opacity">API Index</a></li></ul></aside>
       </div>
     </div>