From c4c7b1838866df2771e8bc2c0ffca8232ccfe625 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Mon, 14 Mar 2022 11:27:01 +0000 Subject: [PATCH 1/4] Updated Voby to v0.6.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 0b289188f..4acb46422 100644 --- a/frameworks/keyed/voby/package.json +++ b/frameworks/keyed/voby/package.json @@ -1,6 +1,6 @@ { "name": "js-framework-benchmark-voby", - "version": "0.5.0", + "version": "0.6.0", "main": "dist/main.js", "js-framework-benchmark": { "frameworkVersionFromPackage": "voby", @@ -17,7 +17,7 @@ "url": "https://github.com/krausest/js-framework-benchmark.git" }, "dependencies": { - "voby": "0.5.0" + "voby": "0.6.0" }, "devDependencies": { "esbuild": "0.14.23" From 099849c93267411e853dcdcc15799fe6abe63a38 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Mon, 14 Mar 2022 11:31:04 +0000 Subject: [PATCH 2/4] Updated benchmark implementation, keeping the state in one observable and cleaning up some code --- frameworks/keyed/voby/src/main.tsx | 65 ++++++++++++------------------ 1 file changed, 25 insertions(+), 40 deletions(-) diff --git a/frameworks/keyed/voby/src/main.tsx b/frameworks/keyed/voby/src/main.tsx index 46e02278f..8b2ed43e0 100644 --- a/frameworks/keyed/voby/src/main.tsx +++ b/frameworks/keyed/voby/src/main.tsx @@ -1,14 +1,14 @@ /* IMPORT */ -import {Observable, ObservableMaybe} from 'voby'; +import {FunctionMaybe, Observable, ObservableMaybe} from 'voby'; import {$, createElement, render, template, For, Fragment} from 'voby'; window.React = {createElement, Fragment}; /* TYPES */ -type IDatum = { id: string, label: Observable, selected: Observable, className: Observable }; +type IDatum = { id: number, label: Observable }; type IData = IDatum[]; @@ -18,28 +18,20 @@ const rand = ( max: number ): number => { return Math.round ( Math.random () * 1000 ) % max; }; -const uuid = (() => { - let counter = 1; - return (): string => { - return String ( counter++ ); - }; -})(); - const buildData = (() => { const adjectives = ['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']; const colors = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange']; const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard']; + let uuid = 1; return ( length: number ): IData => { const data: IData = new Array ( length ); for ( let i = 0; i < length; i++ ) { - const id = uuid (); + const id = uuid++; const adjective = adjectives[rand ( adjectives.length )]; const color = colors[rand ( colors.length )]; const noun = nouns[rand ( nouns.length )]; const label = $(`${adjective} ${color} ${noun}`); - const selected = $(false); - const className = $(''); - const datum: IDatum = { id, label, selected, className }; + const datum = { id, label }; data[i] = datum; }; return data; @@ -52,8 +44,8 @@ const Model = (() => { /* STATE */ - let $data = $( [] ); - let selected: IDatum | null = null; + const $data = $( [] ); + const $selected = $( -1 ); /* API */ @@ -71,14 +63,16 @@ const Model = (() => { }; const add = (): void => { - $data ( $data ().concat ( buildData ( 1000 ) ) ); + const data = $data (); + data.push.apply ( data, buildData ( 1000 ) ); + $data.emit (); }; const update = (): void => { const data = $data (); for ( let i = 0, l = data.length; i < l; i += 10 ) { const {label} = data[i]; - label ( label () + ' !!!' ); + label.update ( label => label + ' !!!' ); } }; @@ -87,50 +81,40 @@ const Model = (() => { if ( data.length <= 998 ) return; const datum1 = data[1]; const datum998 = data[998]; - const data2 = data.slice (); - data2[1] = datum998; - data2[998] = datum1; - $data ( data2 ); + data[1] = datum998; + data[998] = datum1; + $data.emit (); }; const clear = (): void => { $data ( [] ); }; - const remove = ( id: string ): void => { + const remove = ( id: number ): void => { const data = $data (); const index = data.findIndex ( datum => datum.id === id ); if ( index === -1 ) return; - $data ( data.slice ( 0, index ).concat ( data.slice ( index + 1 ) ) ); + data.splice ( index, 1 ); + $data.emit (); }; - const select = ( id: string ): void => { - if ( selected ) { - selected.selected ( false ); - selected.className ( '' ); - selected = null; - } - const data = $data (); - const datum = data.find ( datum => datum.id === id ); - if ( !datum ) return; - datum.selected ( true ); - datum.className ( 'danger' ); - selected = datum; + const select = ( id: number ): void => { + $selected ( id ); }; - return { $data, selected, run, runLots, runWith, add, update, swapRows, clear, remove, select }; + return { $data, $selected, run, runLots, runWith, add, update, swapRows, clear, remove, select }; })(); /* MAIN */ -const Button = ({ id, text, onClick }: { id: string, text: string, onClick: (( event: MouseEvent ) => any) }): JSX.Element => ( +const Button = ({ id, text, onClick }: { id: string | number, text: string, onClick: ObservableMaybe<(( event: MouseEvent ) => any)> }): JSX.Element => (
); -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 => ( +const RowDynamic = ({ id, label, className, onSelect, onRemove }: { id: FunctionMaybe, label: FunctionMaybe, className: FunctionMaybe, onSelect: ObservableMaybe<(( event: MouseEvent ) => any)>, onRemove: ObservableMaybe<(( event: MouseEvent ) => any)> }): JSX.Element => ( {id} @@ -149,7 +133,7 @@ const RowTemplate = template ( RowDynamic, { recycle: true } ); const App = (): JSX.Element => { - const {$data, run, runLots, add, update, clear, swapRows, select, remove} = Model; + const {$data, $selected, run, runLots, add, update, clear, swapRows, select, remove} = Model; return (
@@ -174,7 +158,8 @@ const App = (): JSX.Element => { {( datum: IDatum ) => { - const {id, label, className} = datum; + const {id, label} = datum; + const className = () => ( $selected () === id ) ? 'danger' : ''; const onSelect = select.bind ( undefined, id ); const onRemove = remove.bind ( undefined, id ); const props = {id, label, className, onSelect, onRemove}; From 8b52afb7d78b4b57c62d42ccc79b5b90965aae23 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Mon, 14 Mar 2022 13:50:34 +0000 Subject: [PATCH 3/4] Updated Voby to v0.7.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 4acb46422..300bafaec 100644 --- a/frameworks/keyed/voby/package.json +++ b/frameworks/keyed/voby/package.json @@ -1,6 +1,6 @@ { "name": "js-framework-benchmark-voby", - "version": "0.6.0", + "version": "0.7.0", "main": "dist/main.js", "js-framework-benchmark": { "frameworkVersionFromPackage": "voby", @@ -17,7 +17,7 @@ "url": "https://github.com/krausest/js-framework-benchmark.git" }, "dependencies": { - "voby": "0.6.0" + "voby": "0.7.0" }, "devDependencies": { "esbuild": "0.14.23" From b45e99b29d167701f65efa8f0c84d59d2008f6c2 Mon Sep 17 00:00:00 2001 From: Fabio Spampinato Date: Mon, 14 Mar 2022 13:51:49 +0000 Subject: [PATCH 4/4] Benchmark: using the new useSelector hook --- frameworks/keyed/voby/src/main.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frameworks/keyed/voby/src/main.tsx b/frameworks/keyed/voby/src/main.tsx index 8b2ed43e0..3a3abc390 100644 --- a/frameworks/keyed/voby/src/main.tsx +++ b/frameworks/keyed/voby/src/main.tsx @@ -2,7 +2,7 @@ /* IMPORT */ import {FunctionMaybe, Observable, ObservableMaybe} from 'voby'; -import {$, createElement, render, template, For, Fragment} from 'voby'; +import {$, createElement, render, template, useSelector, For, Fragment} from 'voby'; window.React = {createElement, Fragment}; @@ -134,6 +134,7 @@ const RowTemplate = template ( RowDynamic, { recycle: true } ); const App = (): JSX.Element => { const {$data, $selected, run, runLots, add, update, clear, swapRows, select, remove} = Model; + const isSelected = useSelector ( $selected ); return (
@@ -159,7 +160,7 @@ const App = (): JSX.Element => { {( datum: IDatum ) => { const {id, label} = datum; - const className = () => ( $selected () === id ) ? 'danger' : ''; + const className = () => isSelected ( id ) ? 'danger' : ''; const onSelect = select.bind ( undefined, id ); const onRemove = remove.bind ( undefined, id ); const props = {id, label, className, onSelect, onRemove};