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

Author: krausest

frameworks/keyed/voby/package.json

@@ -1,12 +1,12 @@
 {
   "name": "js-framework-benchmark-voby",
-  "version": "0.12.1",
+  "version": "0.14.0",
   "main": "dist/main.js",
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "voby"
   },
   "scripts": {
-    "build-prod": "rm -rf dist && mkdir dist && esbuild --bundle --minify --target=es2015 ./src/main.tsx > ./dist/main.js"
+    "build-prod": "rm -rf dist && mkdir dist && esbuild --bundle --minify --target=es2018 ./src/main.tsx > ./dist/main.js"
   },
   "author": "Fabio Spampinato",
   "license": "MIT",
@@ -16,9 +16,9 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "voby": "0.12.1"
+    "voby": "0.14.0"
   },
   "devDependencies": {
-    "esbuild": "0.14.23"
+    "esbuild": "0.14.28"
   }
 }

frameworks/keyed/voby/src/main.tsx

@@ -86,14 +86,25 @@ const Model = (() => {
     $data.emit ();
   };
 
+  const dispose = (): void => {
+    const data = $data ();
+    for ( let i = 0, l = data.length; i < l; i++ ) {
+      data[i].label.dispose ();
+    }
+    isSelected.dispose ();
+  };
+
   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 ();
   };
@@ -102,7 +113,9 @@ const Model = (() => {
     $selected ( id );
   };
 
-  return { $data, $selected, run, runLots, runWith, add, update, swapRows, clear, remove, select };
+  const isSelected = useSelector ( $selected );
+
+  return { $data, $selected, run, runLots, runWith, add, update, swapRows, dispose, clear, remove, select, isSelected };
 
 })();
 
@@ -114,7 +127,7 @@ const Button = ({ id, text, onClick }: { id: string | number, text: string, onCl
   </div>
 );
 
-const RowDynamic = ({ id, label, className, onSelect, onRemove }: { id: FunctionMaybe<string | number>, label: FunctionMaybe<string>, className: FunctionMaybe<string>, onSelect: ObservableMaybe<(( event: MouseEvent ) => any)>, onRemove: ObservableMaybe<(( event: MouseEvent ) => any)> }): JSX.Element => (
+const Row = template (({ id, label, className, onSelect, onRemove }: { id: FunctionMaybe<string | number>, label: FunctionMaybe<string>, className: FunctionMaybe<string>, onSelect: ObservableMaybe<(( event: MouseEvent ) => any)>, onRemove: ObservableMaybe<(( event: MouseEvent ) => any)> }): JSX.Element => (
   <tr className={className}>
     <td class="col-md-1">{id}</td>
     <td class="col-md-4">
@@ -127,14 +140,11 @@ const RowDynamic = ({ id, label, className, onSelect, onRemove }: { id: Function
     </td>
     <td class="col-md-6"></td>
   </tr>
-);
-
-const RowTemplate = template ( RowDynamic, { recycle: false } );
+));
 
 const App = (): JSX.Element => {
 
-  const {$data, $selected, run, runLots, add, update, clear, swapRows, select, remove} = Model;
-  const isSelected = useSelector ( $selected );
+  const {$data, run, runLots, add, update, swapRows, clear, remove, select, isSelected} = Model;
 
   return (
     <div class="container">
@@ -164,8 +174,7 @@ const App = (): JSX.Element => {
               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 );
+              return Row ( props );
             }}
           </For>
         </tbody>