From 67f6ea57b15263f4a3a272782c47f7597caa0d34 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Sun, 6 Mar 2022 09:51:29 +0000 Subject: [PATCH 01/10] Updated Voby to 0.2.0 --- frameworks/keyed/voby/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frameworks/keyed/voby/package.json b/frameworks/keyed/voby/package.json index 6a52d20f1..bf5643258 100644 --- a/frameworks/keyed/voby/package.json +++ b/frameworks/keyed/voby/package.json @@ -16,7 +16,7 @@ "url": "https://github.com/krausest/js-framework-benchmark.git" }, "dependencies": { - "voby": "0.1.0" + "voby": "0.2.0" }, "devDependencies": { "esbuild": "0.14.23" From 409614900e89cd1d494f3fe659d4643e0e2157a4 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Sun, 6 Mar 2022 12:14:43 +0000 Subject: [PATCH 02/10] Optimized callback creation a bit --- frameworks/keyed/voby/src/main.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frameworks/keyed/voby/src/main.tsx b/frameworks/keyed/voby/src/main.tsx index 682ed7ae4..110c4e29f 100644 --- a/frameworks/keyed/voby/src/main.tsx +++ b/frameworks/keyed/voby/src/main.tsx @@ -175,8 +175,8 @@ const App = (): JSX.Element => { {( $datum: IDatum ) => { const {id, label, className} = $datum (); - const onSelect = () => select ( id ); - const onRemove = () => remove ( id ); + const onSelect = select.bind ( undefined, id ); + const onRemove = remove.bind ( undefined, id ); const props = {id, label, className, onSelect, onRemove}; return RowTemplate ( props ); // return RowDynamic ( props ); From 3002d913abebc4bef31820a1cca84f106a4d943b Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Sun, 6 Mar 2022 13:11:48 +0000 Subject: [PATCH 03/10] Updated Voby to 0.2.1 --- frameworks/keyed/voby/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frameworks/keyed/voby/package.json b/frameworks/keyed/voby/package.json index bf5643258..fd9111e11 100644 --- a/frameworks/keyed/voby/package.json +++ b/frameworks/keyed/voby/package.json @@ -16,7 +16,7 @@ "url": "https://github.com/krausest/js-framework-benchmark.git" }, "dependencies": { - "voby": "0.2.0" + "voby": "0.2.1" }, "devDependencies": { "esbuild": "0.14.23" From 7fab1a1ad5fd7e638c5343b04ebf1dadc08e1bca Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Sun, 6 Mar 2022 15:31:23 +0000 Subject: [PATCH 04/10] Updated Voby to 0.3.0, which supports template recycling (!) --- frameworks/keyed/voby/package.json | 4 ++-- frameworks/keyed/voby/src/main.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frameworks/keyed/voby/package.json b/frameworks/keyed/voby/package.json index fd9111e11..5a8a21b54 100644 --- a/frameworks/keyed/voby/package.json +++ b/frameworks/keyed/voby/package.json @@ -1,6 +1,6 @@ { "name": "js-framework-benchmark-voby", - "version": "0.0.1", + "version": "0.3.0", "main": "dist/main.js", "js-framework-benchmark": { "frameworkVersionFromPackage": "voby" @@ -16,7 +16,7 @@ "url": "https://github.com/krausest/js-framework-benchmark.git" }, "dependencies": { - "voby": "0.2.1" + "voby": "0.3.0" }, "devDependencies": { "esbuild": "0.14.23" diff --git a/frameworks/keyed/voby/src/main.tsx b/frameworks/keyed/voby/src/main.tsx index 110c4e29f..bb5c9a2bd 100644 --- a/frameworks/keyed/voby/src/main.tsx +++ b/frameworks/keyed/voby/src/main.tsx @@ -145,7 +145,7 @@ const RowDynamic = ({ id, label, className, onSelect, onRemove }: { id: Observab ); -const RowTemplate = template ( RowDynamic ); +const RowTemplate = template ( RowDynamic, { recycle: true } ); const App = (): JSX.Element => { From 262370385282a28cf539575e78cb598758415517 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Sun, 6 Mar 2022 20:49:56 +0000 Subject: [PATCH 05/10] Updated Voby to v0.3.1 --- frameworks/keyed/voby/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frameworks/keyed/voby/package.json b/frameworks/keyed/voby/package.json index 5a8a21b54..8e1ab41bf 100644 --- a/frameworks/keyed/voby/package.json +++ b/frameworks/keyed/voby/package.json @@ -1,6 +1,6 @@ { "name": "js-framework-benchmark-voby", - "version": "0.3.0", + "version": "0.3.1", "main": "dist/main.js", "js-framework-benchmark": { "frameworkVersionFromPackage": "voby" @@ -16,7 +16,7 @@ "url": "https://github.com/krausest/js-framework-benchmark.git" }, "dependencies": { - "voby": "0.3.0" + "voby": "0.3.1" }, "devDependencies": { "esbuild": "0.14.23" From d81d10e730d186d5f30587e5bb7d6d34e8c02b93 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Thu, 10 Mar 2022 19:32:46 +0000 Subject: [PATCH 06/10] Updated voby to 0.4.0 --- frameworks/keyed/voby/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frameworks/keyed/voby/package.json b/frameworks/keyed/voby/package.json index 8e1ab41bf..b928d1d16 100644 --- a/frameworks/keyed/voby/package.json +++ b/frameworks/keyed/voby/package.json @@ -1,6 +1,6 @@ { "name": "js-framework-benchmark-voby", - "version": "0.3.1", + "version": "0.4.0", "main": "dist/main.js", "js-framework-benchmark": { "frameworkVersionFromPackage": "voby" @@ -16,7 +16,7 @@ "url": "https://github.com/krausest/js-framework-benchmark.git" }, "dependencies": { - "voby": "0.3.1" + "voby": "0.4.0" }, "devDependencies": { "esbuild": "0.14.23" From 0f7af9447eb5659a0b079985b1602217c8a576a4 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Thu, 10 Mar 2022 19:33:05 +0000 Subject: [PATCH 07/10] Optimized benchmark implementation slightly --- frameworks/keyed/voby/src/main.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/frameworks/keyed/voby/src/main.tsx b/frameworks/keyed/voby/src/main.tsx index bb5c9a2bd..a77987747 100644 --- a/frameworks/keyed/voby/src/main.tsx +++ b/frameworks/keyed/voby/src/main.tsx @@ -39,7 +39,7 @@ const buildData = (() => { const label = $(`${adjective} ${color} ${noun}`); const selected = $(false); const className = $(''); - const datum = $( { id, label, selected, className } ); + const datum = $({ id, label, selected, className }); data[i] = datum; }; return data; @@ -71,15 +71,14 @@ const Model = (() => { }; const add = (): void => { - $data ( [...$data (), ...buildData ( 1000 )] ); + $data ( $data ().concat ( buildData ( 1000 ) ) ); }; const update = (): void => { const data = $data (); for ( let i = 0, l = data.length; i < l; i += 10 ) { - const $datum = data[i]; - const datum = $datum (); - datum.label ( datum.label () + ' !!!' ); + const {label} = data[i](); + label ( label () + ' !!!' ); } }; @@ -101,7 +100,8 @@ const Model = (() => { const remove = ( id: string ): void => { const data = $data (); const index = data.findIndex ( datum => datum.sample ().id === id ); - $data ( [...data.slice ( 0, index ), ...data.slice ( index + 1 )] ); + if ( index === -1 ) return; + $data ( data.slice ( 0, index ).concat ( data.slice ( index + 1 ) ) ); }; const select = ( id: string ): void => { @@ -109,9 +109,11 @@ const Model = (() => { const datum = $selected (); datum.selected ( false ); datum.className ( '' ); + $selected = null; } const data = $data (); - const $datum = data.find ( datum => datum.sample ().id === id )!; + const $datum = data.find ( datum => datum.sample ().id === id ); + if ( !$datum ) return; const datum = $datum (); datum.selected ( true ); datum.className ( 'danger' ); From c9e767ce68961abfada266495f86036cf8fe0209 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Sat, 12 Mar 2022 21:45:06 +0000 Subject: [PATCH 08/10] Benchmark: slightly optimized className setting --- frameworks/keyed/voby/src/main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frameworks/keyed/voby/src/main.tsx b/frameworks/keyed/voby/src/main.tsx index a77987747..5e8d3767f 100644 --- a/frameworks/keyed/voby/src/main.tsx +++ b/frameworks/keyed/voby/src/main.tsx @@ -133,7 +133,7 @@ const Button = ({ id, text, onClick }: { id: string, text: string, onClick: (( e ); const RowDynamic = ({ id, label, className, onSelect, onRemove }: { id: ObservableMaybe, label: ObservableMaybe, className: ObservableMaybe, onSelect: ObservableMaybe<(( event: MouseEvent ) => any)>, onRemove: ObservableMaybe<(( event: MouseEvent ) => any)> }): JSX.Element => ( - + {id} {label} From c0d6d73e43933b60d5f51e2c661439e6979853ba Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Sat, 12 Mar 2022 21:57:07 +0000 Subject: [PATCH 09/10] Avoiding wrapping rows in observables for no reason --- frameworks/keyed/voby/src/main.tsx | 40 ++++++++++++++---------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/frameworks/keyed/voby/src/main.tsx b/frameworks/keyed/voby/src/main.tsx index 5e8d3767f..46e02278f 100644 --- a/frameworks/keyed/voby/src/main.tsx +++ b/frameworks/keyed/voby/src/main.tsx @@ -8,7 +8,7 @@ window.React = {createElement, Fragment}; /* TYPES */ -type IDatum = Observable<{ id: string, label: Observable, selected: Observable, className: Observable }>; +type IDatum = { id: string, label: Observable, selected: Observable, className: Observable }; type IData = IDatum[]; @@ -39,7 +39,7 @@ const buildData = (() => { const label = $(`${adjective} ${color} ${noun}`); const selected = $(false); const className = $(''); - const datum = $({ id, label, selected, className }); + const datum: IDatum = { id, label, selected, className }; data[i] = datum; }; return data; @@ -53,7 +53,7 @@ const Model = (() => { /* STATE */ let $data = $( [] ); - let $selected: IDatum | null = null; + let selected: IDatum | null = null; /* API */ @@ -77,7 +77,7 @@ const Model = (() => { const update = (): void => { const data = $data (); for ( let i = 0, l = data.length; i < l; i += 10 ) { - const {label} = data[i](); + const {label} = data[i]; label ( label () + ' !!!' ); } }; @@ -85,11 +85,11 @@ const Model = (() => { const swapRows = (): void => { const data = $data (); if ( data.length <= 998 ) return; - const pos1$ = data[1]; - const pos998$ = data[998]; + const datum1 = data[1]; + const datum998 = data[998]; const data2 = data.slice (); - data2[1] = pos998$; - data2[998] = pos1$; + data2[1] = datum998; + data2[998] = datum1; $data ( data2 ); }; @@ -99,28 +99,26 @@ const Model = (() => { const remove = ( id: string ): void => { const data = $data (); - const index = data.findIndex ( datum => datum.sample ().id === id ); + const index = data.findIndex ( datum => datum.id === id ); if ( index === -1 ) return; $data ( data.slice ( 0, index ).concat ( data.slice ( index + 1 ) ) ); }; const select = ( id: string ): void => { - if ( $selected ) { - const datum = $selected (); - datum.selected ( false ); - datum.className ( '' ); - $selected = null; + if ( selected ) { + selected.selected ( false ); + selected.className ( '' ); + selected = null; } const data = $data (); - const $datum = data.find ( datum => datum.sample ().id === id ); - if ( !$datum ) return; - const datum = $datum (); + const datum = data.find ( datum => datum.id === id ); + if ( !datum ) return; datum.selected ( true ); datum.className ( 'danger' ); - $selected = $datum; + selected = datum; }; - return { $data, $selected, run, runLots, runWith, add, update, swapRows, clear, remove, select }; + return { $data, selected, run, runLots, runWith, add, update, swapRows, clear, remove, select }; })(); @@ -175,8 +173,8 @@ const App = (): JSX.Element => { - {( $datum: IDatum ) => { - const {id, label, className} = $datum (); + {( datum: IDatum ) => { + const {id, label, className} = datum; const onSelect = select.bind ( undefined, id ); const onRemove = remove.bind ( undefined, id ); const props = {id, label, className, onSelect, onRemove}; From 3e56eff0dfb4a217533c3d70c00b25ddbc909836 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Sat, 12 Mar 2022 22:45:15 +0000 Subject: [PATCH 10/10] Updated Voby to 0.5.0 --- frameworks/keyed/voby/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frameworks/keyed/voby/package.json b/frameworks/keyed/voby/package.json index b928d1d16..6875fde13 100644 --- a/frameworks/keyed/voby/package.json +++ b/frameworks/keyed/voby/package.json @@ -1,6 +1,6 @@ { "name": "js-framework-benchmark-voby", - "version": "0.4.0", + "version": "0.5.0", "main": "dist/main.js", "js-framework-benchmark": { "frameworkVersionFromPackage": "voby" @@ -16,7 +16,7 @@ "url": "https://github.com/krausest/js-framework-benchmark.git" }, "dependencies": { - "voby": "0.4.0" + "voby": "0.5.0" }, "devDependencies": { "esbuild": "0.14.23"