Merge branch 'voby-0.16' of https://github.com/fabiospampinato/js-framework-benchmark into fabiospampinato-voby-0.16

Author: krausest

frameworks/keyed/voby/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-voby",
-  "version": "0.14.0",
+  "version": "0.16.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.14.0"
+    "voby": "0.16.0"
   },
   "devDependencies": {
     "esbuild": "0.14.28"

frameworks/keyed/voby/src/main.tsx

@@ -1,8 +1,8 @@
 
 /* IMPORT */
 
-import {FunctionMaybe, Observable, ObservableMaybe} from 'voby';
-import {$, createElement, render, template, useSelector, For, Fragment} from 'voby';
+import {FunctionMaybe, Observable, ObservableMaybe} from 'voby/src';
+import {$, createElement, render, template, useSelector, For, Fragment} from 'voby/src';
 
 window.React = {createElement, Fragment};
 
@@ -40,7 +40,7 @@ const buildData = (() => {
 
 /* MODEL */
 
-const Model = (() => {
+const ModelClean = (() => {
 
   /* STATE */
 
@@ -58,55 +58,39 @@ const Model = (() => {
   };
 
   const runWith = ( length: number ): void => {
-    clear ();
     $data ( buildData ( length ) );
   };
 
   const add = (): void => {
-    const data = $data ();
-    data.push.apply ( data, buildData ( 1000 ) );
-    $data.emit ();
+    $data.update ( data => [...data, ...buildData ( 1000 )] );
   };
 
   const update = (): void => {
     const data = $data ();
     for ( let i = 0, l = data.length; i < l; i += 10 ) {
-      const {label} = data[i];
-      label.update ( label => label + ' !!!' );
+      data[i].label.update ( label => label + ' !!!' );
     }
   };
 
   const swapRows = (): void => {
-    const data = $data ();
+    const data = $data ().slice ();
     if ( data.length <= 998 ) return;
     const datum1 = data[1];
     const datum998 = data[998];
     data[1] = datum998;
     data[998] = datum1;
-    $data.emit ();
-  };
-
-  const dispose = (): void => {
-    const data = $data ();
-    for ( let i = 0, l = data.length; i < l; i++ ) {
-      data[i].label.dispose ();
-    }
-    isSelected.dispose ();
+    $data ( data );
   };
 
   const clear = (): void => {
-    dispose ();
     $data ( [] );
   };
 
-  const remove = ( id: number ): void => {
-    const data = $data ();
-    const index = data.findIndex ( datum => datum.id === id );
-    if ( index === -1 ) return;
-    const datum = data[index];
-    datum.label.dispose ();
-    data.splice ( index, 1 );
-    $data.emit ();
+  const remove = ( id: number ): void  => {
+    $data.update ( data => {
+      const idx = data.findIndex ( datum => datum.id === id );
+      return [...data.slice ( 0, idx ), ...data.slice ( idx + 1 )];
+    });
   };
 
   const select = ( id: number ): void => {
@@ -115,7 +99,7 @@ const Model = (() => {
 
   const isSelected = useSelector ( $selected );
 
-  return { $data, $selected, run, runLots, runWith, add, update, swapRows, dispose, clear, remove, select, isSelected };
+  return { $data, $selected, run, runLots, runWith, add, update, swapRows, clear, remove, select, isSelected };
 
 })();
 
@@ -144,7 +128,7 @@ const Row = template (({ id, label, className, onSelect, onRemove }: { id: Funct
 
 const App = (): JSX.Element => {
 
-  const {$data, run, runLots, add, update, swapRows, clear, remove, select, isSelected} = Model;
+  const {$data, run, runLots, add, update, swapRows, clear, remove, select, isSelected} = ModelClean;
 
   return (
     <div class="container">