Adjust the example of vanX.noreactive

jsfiddle/x/noreactive/demo.js

@@ -5,6 +5,9 @@ const data = vanX.reactive([
   vanX.noreactive(new ArrayBuffer(16)),
 ])
 
-const App = () => vanX.list(div, data, v => div(v.val.byteLength))
+const App = () => div(
+  vanX.list(div, data, v => div(v.val.byteLength)),
+  div(button({onclick: () => data.push(vanX.noreactive(new ArrayBuffer(24)))}, "Push")),
+)
 
 van.add(document.body, App())

noreactive.code.js

@@ -3,4 +3,7 @@ const data = vanX.reactive([
   vanX.noreactive(new ArrayBuffer(16)),
 ])
 
-const App = () => vanX.list(div, data, v => div(v.val.byteLength))
+const App = () => div(
+  vanX.list(div, data, v => div(v.val.byteLength)),
+  div(button({onclick: () => data.push(vanX.noreactive(new ArrayBuffer(24)))}, "Push")),
+)

x.html

@@ -135,7 +135,10 @@ <h1 class="w3-padding-16 w3-xxxlarge">
   vanX.noreactive(new ArrayBuffer(16)),
 ])
 
-const App = () =&gt; vanX.list(div, data, v =&gt; div(v.val.byteLength))
+const App = () =&gt; div(
+  vanX.list(div, data, v =&gt; div(v.val.byteLength)),
+  div(button({onclick: () =&gt; data.push(vanX.noreactive(new ArrayBuffer(24)))}, "Push")),
+)
 </code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/noreactive">Try on jsfiddle</a></p><h4 class="w3-medium w3-text-red" id="api-noreactive"><a class="self-link" href="#api-noreactive">API reference: <code class="symbol">vanX.noreactive</code></a></h4><table><tbody><tr><td><b>Signature</b></td><td><code class="language-js">vanX.noreactive(obj) =&gt; &lt;the same object but won't be converted into a reactive object&gt;</code></td></tr><tr><td><b>Description</b></td><td>Marks an object so that it won't be converted into a reactive object.</td></tr><tr><td><b>Parameters</b></td><td><ul><li><b><code class="symbol">obj</code></b> - The input object which you want to exempt from being converted into a reactive object.</li></ul></td></tr><tr><td><b>Returns</b></td><td>The same object but won't be converted into a reactive object</td></tr></tbody></table><h3 class="w3-large w3-text-red" id="a-comprehensive-example"><a class="self-link" href="#a-comprehensive-example">A comprehensive example</a></h3><p>You can refer to this <a href="https://github.com/vanjs-org/van/blob/main/x/examples/reactive/src/main.js" class="w3-hover-opacity">file</a> for a comprehensive demo of all the features regarding to reactive objects discussed above. You can preview the app via <a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/x/examples/reactive?file=%2Fsrc%2Fmain.js%3A1%2C1" class="w3-hover-opacity">CodeSandbox</a>.</p><h2 class="w3-xxlarge w3-text-red" id="reactive-list"><a class="self-link" href="#reactive-list"><code class="symbol">vanX.list</code>: Reactive List that Minimizes Re-rendering on Updates</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p><code class="symbol">vanX.list</code> takes an input reactive object and builds a list of UI elements whose contents are updated whenever any field of the input reactive object changes. The input reactive object can either be an <code class="symbol"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="w3-hover-opacity">Array</a></code> for non-keyed input, or a plain object for keyed input.</p><p>Let's first take a look at some simple examples.</p><p><code class="symbol">Array</code> for non-keyed input:</p><pre><code class="language-js">const items = vanX.reactive([1, 2, 3])
 return vanX.list(ul, items, v =&gt; li(v))
 </code></pre><p>Plain object for keyed input:</p><pre><code class="language-js">const items = vanX.reactive({a: 1, b: 2, c: 3})

x/index.html

@@ -135,7 +135,10 @@ <h1 class="w3-padding-16 w3-xxxlarge">
   vanX.noreactive(new ArrayBuffer(16)),
 ])
 
-const App = () =&gt; vanX.list(div, data, v =&gt; div(v.val.byteLength))
+const App = () =&gt; div(
+  vanX.list(div, data, v =&gt; div(v.val.byteLength)),
+  div(button({onclick: () =&gt; data.push(vanX.noreactive(new ArrayBuffer(24)))}, "Push")),
+)
 </code></pre><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/x/noreactive">Try on jsfiddle</a></p><h4 class="w3-medium w3-text-red" id="api-noreactive"><a class="self-link" href="#api-noreactive">API reference: <code class="symbol">vanX.noreactive</code></a></h4><table><tbody><tr><td><b>Signature</b></td><td><code class="language-js">vanX.noreactive(obj) =&gt; &lt;the same object but won't be converted into a reactive object&gt;</code></td></tr><tr><td><b>Description</b></td><td>Marks an object so that it won't be converted into a reactive object.</td></tr><tr><td><b>Parameters</b></td><td><ul><li><b><code class="symbol">obj</code></b> - The input object which you want to exempt from being converted into a reactive object.</li></ul></td></tr><tr><td><b>Returns</b></td><td>The same object but won't be converted into a reactive object</td></tr></tbody></table><h3 class="w3-large w3-text-red" id="a-comprehensive-example"><a class="self-link" href="#a-comprehensive-example">A comprehensive example</a></h3><p>You can refer to this <a href="https://github.com/vanjs-org/van/blob/main/x/examples/reactive/src/main.js" class="w3-hover-opacity">file</a> for a comprehensive demo of all the features regarding to reactive objects discussed above. You can preview the app via <a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/x/examples/reactive?file=%2Fsrc%2Fmain.js%3A1%2C1" class="w3-hover-opacity">CodeSandbox</a>.</p><h2 class="w3-xxlarge w3-text-red" id="reactive-list"><a class="self-link" href="#reactive-list"><code class="symbol">vanX.list</code>: Reactive List that Minimizes Re-rendering on Updates</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p><code class="symbol">vanX.list</code> takes an input reactive object and builds a list of UI elements whose contents are updated whenever any field of the input reactive object changes. The input reactive object can either be an <code class="symbol"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="w3-hover-opacity">Array</a></code> for non-keyed input, or a plain object for keyed input.</p><p>Let's first take a look at some simple examples.</p><p><code class="symbol">Array</code> for non-keyed input:</p><pre><code class="language-js">const items = vanX.reactive([1, 2, 3])
 return vanX.list(ul, items, v =&gt; li(v))
 </code></pre><p>Plain object for keyed input:</p><pre><code class="language-js">const items = vanX.reactive({a: 1, b: 2, c: 3})