Avoiding wrapping rows in observables for no reason

Author: fabiospampinato

frameworks/keyed/voby/src/main.tsx

@@ -8,7 +8,7 @@ window.React = {createElement, Fragment};
 
 /* TYPES */
 
-type IDatum = Observable<{ id: string, label: Observable<string>, selected: Observable<boolean>, className: Observable<string> }>;
+type IDatum = { id: string, label: Observable<string>, selected: Observable<boolean>, className: Observable<string> };
 
 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 = $<IDatum[]>( [] );
-  let $selected: IDatum | null = null;
+  let selected: IDatum | null = null;
 
   /* API */
 
@@ -77,19 +77,19 @@ 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 () + ' !!!' );
     }
   };
 
   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 => {
       <table class="table table-hover table-striped test-data">
         <tbody>
           <For values={$data}>
-            {( $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};