From 932797f5574b344834dc2968fed16383853777db Mon Sep 17 00:00:00 2001 From: Michael Scherbakow Date: Tue, 9 Sep 2025 22:33:40 +0200 Subject: [PATCH] update non-keyed/vode - fix version read-out - memo rows --- frameworks/non-keyed/vode/main.mjs | 2 +- frameworks/non-keyed/vode/package-lock.json | 12 ++++++------ frameworks/non-keyed/vode/package.json | 6 +++--- frameworks/non-keyed/vode/src/main.ts | 8 ++++---- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/frameworks/non-keyed/vode/main.mjs b/frameworks/non-keyed/vode/main.mjs index ec87aaefc..6d4862e4d 100644 --- a/frameworks/non-keyed/vode/main.mjs +++ b/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;d0&&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;ce([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[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;T0&&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;ce([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[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"}]]);})(); diff --git a/frameworks/non-keyed/vode/package-lock.json b/frameworks/non-keyed/vode/package-lock.json index fa101ef4f..141c20a04 100644 --- a/frameworks/non-keyed/vode/package-lock.json +++ b/frameworks/non-keyed/vode/package-lock.json @@ -1,15 +1,15 @@ { "name": "js-framework-benchmark-vode", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "js-framework-benchmark-vode", - "version": "1.0.0", + "version": "1.0.1", "license": "MIT", "dependencies": { - "@ryupold/vode": "1.0.1" + "@ryupold/vode": "1.0.2" }, "devDependencies": { "esbuild": "0.25.9" @@ -458,9 +458,9 @@ } }, "node_modules/@ryupold/vode": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@ryupold/vode/-/vode-1.0.1.tgz", - "integrity": "sha512-yCy2FheWvK6LUDaRwQVp8WGQ+BEwunPnROgoDD8cx5fTuotuEjC/vfT8eVTM5R7ueqCFvgcjRZ4rjCmHQvSiXw==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@ryupold/vode/-/vode-1.0.2.tgz", + "integrity": "sha512-2P005pPnfHNSsMh+W1Wp6DLRDFBVJE1Iaco3duMdF5Ncu52BC41equlULk+zGkhgrjxVPzP8xqotQA6rpmsE0w==", "license": "MIT" }, "node_modules/esbuild": { diff --git a/frameworks/non-keyed/vode/package.json b/frameworks/non-keyed/vode/package.json index 838aae9cf..5453fcc78 100644 --- a/frameworks/non-keyed/vode/package.json +++ b/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" diff --git a/frameworks/non-keyed/vode/src/main.ts b/frameworks/non-keyed/vode/src/main.ts index 5494fe617..50f5c9227 100644 --- a/frameworks/non-keyed/vode/src/main.ts +++ b/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) => >[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) => >[DIV, { class: "container", id: [TABLE, { class: 'table table-hover table-striped test-data' }, [TBODY, - ...s.data.map(d => >[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) => >[DIV, { class: "container", id: ], ], [TD, { class: "col-md-6" }] - ]) + ])) ], ],