update non-keyed/vode

frameworks/non-keyed/vode/main.mjs

@@ -1 +1 @@
-(()=>{function V(e,o,r,...s){if(!e)throw new Error("container must be a valid HTMLElement");if(!o||typeof o!="object")throw new Error("initialState must be an object");if(typeof r!="function")throw new Error("dom must be a function that returns a vode");let t={};t.stats={lastRenderTime:0,renderCount:0,liveEffectCount:0,patchCount:0,renderPatchCount:0},Object.defineProperty(o,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async c=>{if(!(!c||typeof c!="function"&&typeof c!="object"))if(t.stats.patchCount++,c?.next){let T=c;t.stats.liveEffectCount++;try{let i=await T.next();for(;i.done===!1;){t.stats.liveEffectCount++;try{t.patch(i.value),i=await T.next()}finally{t.stats.liveEffectCount--}}t.patch(i.value)}finally{t.stats.liveEffectCount--}}else if(c.then){t.stats.liveEffectCount++;try{let T=await c;t.patch(T)}finally{t.stats.liveEffectCount--}}else Array.isArray(c)?typeof c[0]=="function"?c.length>1?t.patch(c[0](t.state,...c.slice(1))):t.patch(c[0](t.state)):t.stats.patchCount--:typeof c=="function"?t.patch(c(t.state)):(t.stats.renderPatchCount++,t.q=m(t.q||{},c,!1),t.isRendering||t.render())}}),Object.defineProperty(t,"render",{enumerable:!1,configurable:!0,writable:!1,value:()=>requestAnimationFrame(()=>{if(t.isRendering||!t.q)return;t.isRendering=!0;let c=Date.now();try{t.state=m(t.state,t.q,!0),t.q=null,t.vode=C(t.state,t.patch,e,0,t.vode,r(t.state))}finally{t.isRendering=!1,t.stats.renderCount++,t.stats.lastRenderTime=Date.now()-c,t.q&&t.render()}})}),t.patch=o.patch,t.state=o,t.q=null;let n=e;n._vode=t;let a=r(o);t.vode=a,t.vode=C(o,t.patch,e,0,void 0,a);for(let c of s)t.patch(c);return t.patch}function y(e){if(Array.isArray(e)&&e.length>1&&e[1]&&!Array.isArray(e[1])&&typeof e[1]=="object"&&e[1].nodeType!==Node.TEXT_NODE)return e[1]}function O(e){let o=Y(e);return o>0?e.slice(o):null}function Y(e){return y(e)?2:1}function m(e,o,r){if(!o)return e;for(let s in o){let t=o[s];if(t&&typeof t=="object"){let n=e[s];n?Array.isArray(t)?e[s]=[...t]:t instanceof Date&&n!==t?e[s]=new Date(t):Array.isArray(n)?e[s]=m({},t,r):typeof n=="object"?m(e[s],t,r):e[s]=m({},t,r):Array.isArray(t)?e[s]=[...t]:t instanceof Date?e[s]=new Date(t):e[s]=m({},t,r)}else t===void 0&&r?delete e[s]:e[s]=t}return e}function C(e,o,r,s,t,n,a){n=R(e,n,t);let c=!n||typeof n=="number"||typeof n=="boolean";if(n===t||!t&&c)return t;let T=t?.nodeType===Node.TEXT_NODE,i=T?t:t?.node;if(c){i?.onUnmount&&o(i.onUnmount(i)),i?.remove();return}let A=!c&&W(n),b=!c&&w(n),N=!!n&&typeof n!="string"&&!!(n?.node||n?.nodeType===Node.TEXT_NODE);if(!A&&!b&&!N&&!t)throw new Error("Invalid vode: "+typeof n+" "+JSON.stringify(n));if(N&&A?n=n.wholeText:N&&b&&(n=[...n]),T&&A)return i.nodeValue!==n&&(i.nodeValue=n),t;if(A&&(!i||!T)){let l=document.createTextNode(n);return i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(l)):r.childNodes[s]?r.insertBefore(l,r.childNodes[s]):r.appendChild(l),l}if(b&&(!i||T||t[0]!==n[0])){a=a||n[0]==="svg";let l=a?document.createElementNS("http://www.w3.org/2000/svg",n[0]):document.createElement(n[0]);n.node=l;let E=n;1 in E&&(E[1]=R(e,E[1],void 0));let S=y(n);D(o,l,void 0,S,a),i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(l)):r.childNodes[s]?r.insertBefore(l,r.childNodes[s]):r.appendChild(l);let u=O(n);if(u)for(let d=0;d<u.length;d++){let p=u[d],x=C(e,o,l,d,void 0,p,a);n[S?d+2:d+1]=x}return l.onMount&&o(l.onMount(l)),n}if(!T&&b&&t[0]===n[0]){a=a||n[0]==="svg",n.node=i;let l=n,E=t,S=!1;if(l[1]?.__memo){let p=l[1];if(l[1]=R(e,l[1],E[1]),p!==l[1]){let x=y(n);D(o,i,y(t),x,a),S=!!x}}else{let p=y(n);D(o,i,y(t),p,a),S=!!p}let u=O(n),d=O(t);if(u){for(let p=0;p<u.length;p++){let x=u[p],$=d&&d[p],F=C(e,o,i,p,$,x,a);F&&(n[S?p+2:p+1]=F)}for(let p=u.length;d&&p<d.length;p++)d[p]?.node?d[p].node.remove():d[p]?.nodeType===Node.TEXT_NODE&&d[p].remove()}for(let p=u?.length||0;p<d?.length;p++)d[p]?.node?d[p].node.remove():d[p]?.nodeType===Node.TEXT_NODE&&d[p].remove();return n}}function w(e){return Array.isArray(e)&&e.length>0&&typeof e[0]=="string"}function W(e){return typeof e=="string"||e?.nodeType===Node.TEXT_NODE}function R(e,o,r){if(typeof o!="function")return o;let s=o?.__memo,t=r?.__memo;if(Array.isArray(s)&&Array.isArray(t)&&s.length===t.length){let a=!0;for(let c=0;c<s.length;c++)if(s[c]!==t[c]){a=!1;break}if(a)return r}let n=G(o,e);return typeof n=="object"&&(n.__memo=o?.__memo),n}function G(e,o){return typeof e=="function"?G(e(o),o):e}function D(e,o,r,s,t){if(!(!s&&!r)){if(r)for(let n in r){let a=r[n],c=s?.[n];a!==c&&(s?s[n]=P(e,o,n,a,c,t):P(e,o,n,a,void 0,t))}if(s&&r){for(let n in s)if(!(n in r)){let a=s[n];s[n]=P(e,o,n,void 0,a,t)}}else if(s)for(let n in s){let a=s[n];s[n]=P(e,o,n,void 0,a,t)}}}function P(e,o,r,s,t,n){if(r==="style")if(!t)o.style.cssText="";else if(s)for(let a in{...s,...t})!s||t[a]!==s[a]?o.style[a]=t[a]:s[a]&&!t[a]&&(o.style[a]=void 0);else for(let a in t)o.style[a]=t[a];else if(r==="class")if(n)if(t){let a=L(t);o.classList.value=a}else o.classList.value="";else if(t){let a=L(t);o.className=a}else o.className="";else if(r[0]==="o"&&r[1]==="n")if(t){let a=null;if(typeof t=="function"){let c=t;a=T=>e([c,T])}else if(Array.isArray(t)){let c=t,T=t[0];c.length>1?a=()=>e([T,...c.slice(1)]):a=i=>e([T,i])}else typeof t=="object"&&(a=()=>e(t));o[r]=a}else o[r]=null;else t!=null&&t!==!1?o.setAttribute(r,t):o.removeAttribute(r);return t}function L(e){return typeof e=="string"?e:Array.isArray(e)?e.map(L).join(" "):typeof e=="object"?Object.keys(e).filter(o=>e[o]).join(" "):""}var v="a";var g="button";var f="div";var H="h1";var I="span";var U="table",j="tbody",h="td";var B="tr";var J=1,_=["pretty","large","big","small","tall","short","long","handsome","plain","quaint","clean","elegant","easy","angry","crazy","helpful","mushy","odd","unsightly","adorable","important","inexpensive","cheap","expensive","fancy"],K=["red","yellow","blue","green","pink","brown","purple","brown","white","black","orange"],X=["table","chair","house","bbq","desk","car","pony","cookie","sandwich","burger","pizza","mouse","keyboard"];function k(e){return Math.round(Math.random()*1e3)%e}function M(e){let o=new Array(e);for(let r=0;r<e;r++)o[r]={id:`${J++}`,label:`${_[k(_.length)]} ${K[k(K.length)]} ${X[k(X.length)]}`};return o}var q={name:"js-framework-benchmark-vode",version:"1.0.0",description:"vode framework benchmark",main:"main.mjs","js-framework-benchmark":{frameworkVersionFromPackage:"vode",frameworkHomeURL:"https://github.com/ryupold/vode"},dependencies:{"@ryupold/vode":"1.0.1"},devDependencies:{esbuild:"0.25.9"},scripts:{"build-prod":"npm run bundle",bundle:"esbuild src/main.ts --bundle --outfile=main.mjs --minify"},keywords:["@ryupold/vode","vode"],license:"MIT"};var Q={data:[],selected:null};V(document.body,Q,e=>[f,{class:"container",id:"main"},[f,{class:"jumbotron"},[f,{class:"row"},[f,{class:"col-md-6"},[H,`[V,{},d,e] ${q.dependencies["@ryupold/vode"]} (non-keyed)`]],[f,{class:"col-md-6"},[f,{class:"row"},[f,{class:"col-sm-6 smallpad"},[g,{id:"run",type:"button",class:"btn btn-primary btn-block",onclick:()=>({data:M(1e3),selected:null})},"Create 1,000 rows"]],[f,{class:"col-sm-6 smallpad"},[g,{id:"runlots",type:"button",class:"btn btn-primary btn-block",onclick:()=>({data:M(1e4),selected:null})},"Create 10,000 rows"]],[f,{class:"col-sm-6 smallpad"},[g,{id:"add",type:"button",class:"btn btn-primary btn-block",onclick:()=>({data:e.data.concat(M(1e3))})},"Append 1,000 rows"]],[f,{class:"col-sm-6 smallpad"},[g,{id:"update",type:"button",class:"btn btn-primary btn-block",onclick:()=>({data:e.data.map((o,r)=>r%10===0?{id:o.id,label:o.label+" !!!"}:o)})},"Update every 10th row"]],[f,{class:"col-sm-6 smallpad"},[g,{id:"clear",type:"button",class:"btn btn-primary btn-block",onclick:{data:[],selected:null}},"Clear"]],[f,{class:"col-sm-6 smallpad"},[g,{id:"swaprows",type:"button",class:"btn btn-primary btn-block",onclick:()=>{if(e.data.length>998){let o=e.data[998];e.data[998]=e.data[1],e.data[1]=o}return{}}},"Swap Rows"]]]]]],[U,{class:"table table-hover table-striped test-data"},[j,...e.data.map(o=>[B,{class:{danger:e.selected===o.id}},[h,{class:"col-md-1"},o.id],[h,{class:"col-md-4"},[v,{onclick:{selected:o.id}},o.label]],[h,{class:"col-md-1"},[v,{onclick:()=>({data:e.data.filter(r=>r.id!==o.id),selected:e.selected===o.id?null:e.selected})},[I,{class:"glyphicon glyphicon-remove","aria-hidden":"true"}]]],[h,{class:"col-md-6"}]])]],[I,{class:"preloadicon glyphicon glyphicon-remove","aria-hidden":"true"}]]);})();
+(()=>{function V(e,o,r,...a){if(!e)throw new Error("container must be a valid HTMLElement");if(!o||typeof o!="object")throw new Error("given state must be an object");if(typeof r!="function")throw new Error("dom must be a function that returns a vode");let t={};t.stats={lastRenderTime:0,renderCount:0,liveEffectCount:0,patchCount:0,renderPatchCount:0},Object.defineProperty(o,"patch",{enumerable:!1,configurable:!0,writable:!1,value:async c=>{if(!(!c||typeof c!="function"&&typeof c!="object"))if(t.stats.patchCount++,c?.next){let d=c;t.stats.liveEffectCount++;try{let i=await d.next();for(;i.done===!1;){t.stats.liveEffectCount++;try{t.patch(i.value),i=await d.next()}finally{t.stats.liveEffectCount--}}t.patch(i.value)}finally{t.stats.liveEffectCount--}}else if(c.then){t.stats.liveEffectCount++;try{let d=await c;t.patch(d)}finally{t.stats.liveEffectCount--}}else Array.isArray(c)?typeof c[0]=="function"?c.length>1?t.patch(c[0](t.state,...c.slice(1))):t.patch(c[0](t.state)):t.stats.patchCount--:typeof c=="function"?t.patch(c(t.state)):(t.stats.renderPatchCount++,t.q=m(t.q||{},c,!1),t.isRendering||t.render())}}),Object.defineProperty(t,"render",{enumerable:!1,configurable:!0,writable:!1,value:()=>requestAnimationFrame(()=>{if(t.isRendering||!t.q)return;t.isRendering=!0;let c=Date.now();try{t.state=m(t.state,t.q,!0),t.q=null,t.vode=C(t.state,t.patch,e,0,t.vode,r(t.state))}finally{t.isRendering=!1,t.stats.renderCount++,t.stats.lastRenderTime=Date.now()-c,t.q&&t.render()}})}),t.patch=o.patch,t.state=o,t.q=null;let n=e;n._vode=t;let s=r(o);t.vode=s,t.vode=C(o,t.patch,e,0,void 0,s);for(let c of a)t.patch(c);return t.patch}function G(e,o){return o.__memo=e,o}function y(e){if(Array.isArray(e)&&e.length>1&&e[1]&&!Array.isArray(e[1])&&typeof e[1]=="object"&&e[1].nodeType!==Node.TEXT_NODE)return e[1]}function O(e){let o=w(e);return o>0?e.slice(o):null}function w(e){return y(e)?2:1}function m(e,o,r){if(!o)return e;for(let a in o){let t=o[a];if(t&&typeof t=="object"){let n=e[a];n?Array.isArray(t)?e[a]=[...t]:t instanceof Date&&n!==t?e[a]=new Date(t):Array.isArray(n)?e[a]=m({},t,r):typeof n=="object"?m(e[a],t,r):e[a]=m({},t,r):Array.isArray(t)?e[a]=[...t]:t instanceof Date?e[a]=new Date(t):e[a]=m({},t,r)}else t===void 0&&r?delete e[a]:e[a]=t}return e}function C(e,o,r,a,t,n,s){n=R(e,n,t);let c=!n||typeof n=="number"||typeof n=="boolean";if(n===t||!t&&c)return t;let d=t?.nodeType===Node.TEXT_NODE,i=d?t:t?.node;if(c){i?.onUnmount&&o(i.onUnmount(i)),i?.remove();return}let A=!c&&J(n),b=!c&&W(n),N=!!n&&typeof n!="string"&&!!(n?.node||n?.nodeType===Node.TEXT_NODE);if(!A&&!b&&!N&&!t)throw new Error("Invalid vode: "+typeof n+" "+JSON.stringify(n));if(N&&A?n=n.wholeText:N&&b&&(n=[...n]),d&&A)return i.nodeValue!==n&&(i.nodeValue=n),t;if(A&&(!i||!d)){let l=document.createTextNode(n);return i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(l)):r.childNodes[a]?r.insertBefore(l,r.childNodes[a]):r.appendChild(l),l}if(b&&(!i||d||t[0]!==n[0])){s=s||n[0]==="svg";let l=s?document.createElementNS("http://www.w3.org/2000/svg",n[0]):document.createElement(n[0]);n.node=l;let E=n;1 in E&&(E[1]=R(e,E[1],void 0));let g=y(n);D(o,l,void 0,g,s),i?(i.onUnmount&&o(i.onUnmount(i)),i.replaceWith(l)):r.childNodes[a]?r.insertBefore(l,r.childNodes[a]):r.appendChild(l);let u=O(n);if(u)for(let T=0;T<u.length;T++){let p=u[T],x=C(e,o,l,T,void 0,p,s);n[g?T+2:T+1]=x}return l.onMount&&o(l.onMount(l)),n}if(!d&&b&&t[0]===n[0]){s=s||n[0]==="svg",n.node=i;let l=n,E=t,g=!1;if(l[1]?.__memo){let p=l[1];if(l[1]=R(e,l[1],E[1]),p!==l[1]){let x=y(n);D(o,i,y(t),x,s),g=!!x}}else{let p=y(n);D(o,i,y(t),p,s),g=!!p}let u=O(n),T=O(t);if(u){for(let p=0;p<u.length;p++){let x=u[p],Y=T&&T[p],F=C(e,o,i,p,Y,x,s);F&&(n[g?p+2:p+1]=F)}for(let p=u.length;T&&p<T.length;p++)T[p]?.node?T[p].node.remove():T[p]?.nodeType===Node.TEXT_NODE&&T[p].remove()}for(let p=u?.length||0;p<T?.length;p++)T[p]?.node?T[p].node.remove():T[p]?.nodeType===Node.TEXT_NODE&&T[p].remove();return n}}function W(e){return Array.isArray(e)&&e.length>0&&typeof e[0]=="string"}function J(e){return typeof e=="string"||e?.nodeType===Node.TEXT_NODE}function R(e,o,r){if(typeof o!="function")return o;let a=o?.__memo,t=r?.__memo;if(Array.isArray(a)&&Array.isArray(t)&&a.length===t.length){let s=!0;for(let c=0;c<a.length;c++)if(a[c]!==t[c]){s=!1;break}if(s)return r}let n=H(o,e);return typeof n=="object"&&(n.__memo=o?.__memo),n}function H(e,o){return typeof e=="function"?H(e(o),o):e}function D(e,o,r,a,t){if(!(!a&&!r)){if(r)for(let n in r){let s=r[n],c=a?.[n];s!==c&&(a?a[n]=P(e,o,n,s,c,t):P(e,o,n,s,void 0,t))}if(a&&r){for(let n in a)if(!(n in r)){let s=a[n];a[n]=P(e,o,n,void 0,s,t)}}else if(a)for(let n in a){let s=a[n];a[n]=P(e,o,n,void 0,s,t)}}}function P(e,o,r,a,t,n){if(r==="style")if(!t)o.style.cssText="";else if(a)for(let s in{...a,...t})!a||t[s]!==a[s]?o.style[s]=t[s]:a[s]&&!t[s]&&(o.style[s]=void 0);else for(let s in t)o.style[s]=t[s];else if(r==="class")if(n)if(t){let s=L(t);o.classList.value=s}else o.classList.value="";else if(t){let s=L(t);o.className=s}else o.className="";else if(r[0]==="o"&&r[1]==="n")if(t){let s=null;if(typeof t=="function"){let c=t;s=d=>e([c,d])}else if(Array.isArray(t)){let c=t,d=t[0];c.length>1?s=()=>e([d,...c.slice(1)]):s=i=>e([d,i])}else typeof t=="object"&&(s=()=>e(t));o[r]=s}else o[r]=null;else t!=null&&t!==!1?o.setAttribute(r,t):o.removeAttribute(r);return t}function L(e){return typeof e=="string"?e:Array.isArray(e)?e.map(L).join(" "):typeof e=="object"?Object.keys(e).filter(o=>e[o]).join(" "):""}var v="a";var S="button";var f="div";var U="h1";var I="span";var j="table",B="tbody",h="td";var _="tr";var z=1,K=["pretty","large","big","small","tall","short","long","handsome","plain","quaint","clean","elegant","easy","angry","crazy","helpful","mushy","odd","unsightly","adorable","important","inexpensive","cheap","expensive","fancy"],X=["red","yellow","blue","green","pink","brown","purple","brown","white","black","orange"],q=["table","chair","house","bbq","desk","car","pony","cookie","sandwich","burger","pizza","mouse","keyboard"];function k(e){return Math.round(Math.random()*1e3)%e}function M(e){let o=new Array(e);for(let r=0;r<e;r++)o[r]={id:`${z++}`,label:`${K[k(K.length)]} ${X[k(X.length)]} ${q[k(q.length)]}`};return o}var $={name:"js-framework-benchmark-vode",version:"1.0.1",description:"vode framework benchmark",main:"main.mjs","js-framework-benchmark":{frameworkVersionFromPackage:"@ryupold/vode",frameworkHomeURL:"https://github.com/ryupold/vode"},dependencies:{"@ryupold/vode":"1.0.2"},devDependencies:{esbuild:"0.25.9"},scripts:{"build-prod":"npm run bundle",bundle:"esbuild src/main.ts --bundle --outfile=main.mjs --minify"},keywords:["@ryupold/vode","vode"],license:"MIT"};var Z={data:[],selected:null};V(document.body,Z,e=>[f,{class:"container",id:"main"},[f,{class:"jumbotron"},[f,{class:"row"},[f,{class:"col-md-6"},[U,`[V,{},d,e] ${$.dependencies["@ryupold/vode"]} (non-keyed)`]],[f,{class:"col-md-6"},[f,{class:"row"},[f,{class:"col-sm-6 smallpad"},[S,{id:"run",type:"button",class:"btn btn-primary btn-block",onclick:()=>({data:M(1e3),selected:null})},"Create 1,000 rows"]],[f,{class:"col-sm-6 smallpad"},[S,{id:"runlots",type:"button",class:"btn btn-primary btn-block",onclick:()=>({data:M(1e4),selected:null})},"Create 10,000 rows"]],[f,{class:"col-sm-6 smallpad"},[S,{id:"add",type:"button",class:"btn btn-primary btn-block",onclick:()=>({data:e.data.concat(M(1e3))})},"Append 1,000 rows"]],[f,{class:"col-sm-6 smallpad"},[S,{id:"update",type:"button",class:"btn btn-primary btn-block",onclick:()=>({data:e.data.map((o,r)=>r%10===0?{id:o.id,label:o.label+" !!!"}:o)})},"Update every 10th row"]],[f,{class:"col-sm-6 smallpad"},[S,{id:"clear",type:"button",class:"btn btn-primary btn-block",onclick:{data:[],selected:null}},"Clear"]],[f,{class:"col-sm-6 smallpad"},[S,{id:"swaprows",type:"button",class:"btn btn-primary btn-block",onclick:()=>{if(e.data.length>998){let o=e.data[998];e.data[998]=e.data[1],e.data[1]=o}return{}}},"Swap Rows"]]]]]],[j,{class:"table table-hover table-striped test-data"},[B,...e.data.map(o=>G([o.id,o.label,e.selected===o.id],r=>[_,{class:{danger:r.selected===o.id}},[h,{class:"col-md-1"},o.id],[h,{class:"col-md-4"},[v,{onclick:{selected:o.id}},o.label]],[h,{class:"col-md-1"},[v,{onclick:()=>({data:r.data.filter(a=>a.id!==o.id),selected:r.selected===o.id?null:r.selected})},[I,{class:"glyphicon glyphicon-remove","aria-hidden":"true"}]]],[h,{class:"col-md-6"}]]))]],[I,{class:"preloadicon glyphicon glyphicon-remove","aria-hidden":"true"}]]);})();

frameworks/non-keyed/vode/package.json

@@ -1,14 +1,14 @@
 {
   "name": "js-framework-benchmark-vode",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "vode framework benchmark",
   "main": "main.mjs",
   "js-framework-benchmark": {
-    "frameworkVersionFromPackage": "vode",
+    "frameworkVersionFromPackage": "@ryupold/vode",
     "frameworkHomeURL": "https://github.com/ryupold/vode"
   },
   "dependencies": {
-    "@ryupold/vode": "1.0.1"
+    "@ryupold/vode": "1.0.2"
   },
   "devDependencies": {
     "esbuild": "0.25.9"

frameworks/non-keyed/vode/src/main.ts

@@ -1,4 +1,4 @@
-import { app, createState, BUTTON, DIV, H1, TABLE, TBODY, TR, Vode, TD, A, SPAN } from "@ryupold/vode";
+import { app, createState, memo, A, BUTTON, DIV, H1, SPAN, TABLE, TBODY, TR, TD } from "@ryupold/vode";
 import { buildData, DataEntry } from "./data";
 import packageJson from "../package.json";
 
@@ -9,7 +9,7 @@ const s = createState({
 
 type State = typeof s;
 
-app(document.body, s, (s: State) => <Vode<State>>[DIV, { class: "container", id: 'main' },
+app(document.body, s, (s: State) => [DIV, { class: "container", id: 'main' },
     [DIV, { class: "jumbotron" },
         [DIV, { class: "row" },
             [DIV, { class: "col-md-6" },
@@ -89,7 +89,7 @@ app(document.body, s, (s: State) => <Vode<State>>[DIV, { class: "container", id:
 
     [TABLE, { class: 'table table-hover table-striped test-data' },
         [TBODY,
-            ...s.data.map(d => <Vode<State>>[TR,
+            ...s.data.map(d => memo([d.id, d.label, s.selected === d.id], (s: State) => [TR,
                 { class: { danger: s.selected === d.id } },
                 [TD, { class: "col-md-1" }, d.id],
                 [TD, { class: "col-md-4" },
@@ -106,7 +106,7 @@ app(document.body, s, (s: State) => <Vode<State>>[DIV, { class: "container", id:
                     ],
                 ],
                 [TD, { class: "col-md-6" }]
-            ])
+            ]))
         ],
     ],