Merge branch 'update-rts-1.4.3' of https://github.com/oleggrishechkin/js-framework-benchmark into oleggrishechkin-update-rts-1.4.3

Author: krausest

frameworks/keyed/react-tagged-state/package-lock.json

@@ -33,6 +33,6 @@
   "dependencies": {
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-tagged-state": "1.1.7"
+    "react-tagged-state": "1.4.3"
   }
 }

frameworks/keyed/react-tagged-state/package.json

@@ -1,6 +1,6 @@
-import {memo} from "react";
+import {memo, useCallback} from "react";
 import {render} from "react-dom";
-import {batch, mutated, useTagged} from "react-tagged-state";
+import {createSignal, useSelector, useSignal} from "react-tagged-state";
 
 const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
     "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
@@ -13,50 +13,50 @@ const random = (max) => Math.round(Math.random() * 1000) % max;
 
 let nextId = 1;
 
-const buildData = (res, count) => {
+const buildData = (count) => {
+    const res = new Array(count);
+
     for (let index = 0; index < count; index++) {
-        res.push({
+        res[index] = {
             id: nextId++,
             label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`
-        })
+        };
     }
+
+    return res;
 }
 
-const data = [];
+const data = createSignal([]);
 
-let selected = 0;
+let selected = createSignal(0);
 
 const Row = memo(({item}) => {
-    useTagged(item);
+    const isSelected = useSelector(() => item.id === selected());
+    const handleSelect = useCallback(() => {
+        selected(item.id);
+    }, [item.id]);
+    const handleRemove = useCallback(() => {
+        data((curr) => curr.filter(({id}) => id !== item.id));
+    }, [item.id]);
 
     return (
-        <tr className={selected === item.id ? "danger" : ""}>
+        <tr className={isSelected ? "danger" : ""}>
             <td className="col-md-1">{item.id}</td>
             <td className="col-md-4">
-                <a onClick={() => batch(() => {
-                    if (selected) {
-                        mutated(data.find(({id}) => id === selected));
-                    }
-
-                    selected = item.id;
-                    mutated(item);
-                })}>{item.label}</a>
+                <a onClick={handleSelect}>{item.label}</a>
             </td>
             <td className="col-md-1">
-                <a onClick={() => {
-                    data.splice(data.indexOf(item), 1);
-                    mutated(data);
-                }}><span className="glyphicon glyphicon-remove" aria-hidden="true"/></a>
+                <a onClick={handleRemove}><span className="glyphicon glyphicon-remove" aria-hidden="true"/></a>
             </td>
             <td className="col-md-6"/>
         </tr>
     )
 });
 
 const RowList = () => {
-    useTagged(data);
+    const items = useSignal(data);
 
-    return data.map((item) => <Row key={item.id} item={item}/>)
+    return items.map((item) => <Row key={item.id} item={item}/>)
 };
 
 const Button = ({id, title, cb}) => (
@@ -73,34 +73,35 @@ const Main = () => (
                 <div className="col-md-6">
                     <div className="row">
                         <Button id="run" title="Create 1,000 rows" cb={() => {
-                            data.length = 0;
-                            selected = 0;
-                            buildData(data, 1000);
-                            mutated(data);
+                            data(buildData(1000));
+                            selected(0);
                         }}/>
                         <Button id="runlots" title="Create 10,000 rows" cb={() => {
-                            data.length = 0;
-                            selected = 0;
-                            buildData(data, 10000);
-                            mutated(data);
+                            data(buildData(10000));
+                            selected(0);
                         }}/>
                         <Button id="add" title="Append 1,000 rows" cb={() => {
-                            buildData(data, 1000);
-                            mutated(data);
+                            data((curr) => curr.concat(buildData(1000)));
+                        }}/>
+                        <Button id="update" title="Update every 10th row" cb={() => {
+                            data((curr) => {
+                                const copy = curr.slice(0);
+
+                                for (let index = 0; index < copy.length; index += 10) {
+                                    const item = copy[index];
+
+                                    copy[index] = {id: item.id, label: item.label + " !!!"};
+                                }
+
+                                return copy;
+                            });
                         }}/>
-                        <Button id="update" title="Update every 10th row" cb={() => batch(() => {
-                            for (let index = 0; index < data.length; index += 10) {
-                                mutated(data[index]).label += " !!!";
-                            }
-                        })}/>
                         <Button id="clear" title="Clear" cb={() => {
-                            data.length = 0;
-                            selected = 0;
-                            mutated(data);
+                            data([]);
+                            selected(0);
                         }}/>
                         <Button id="swaprows" title="Swap Rows" cb={() => {
-                            [data[1], data[998]] = [data[998], data[1]];
-                            mutated(data);
+                            data((curr) => [curr[0], curr[998], ...curr.slice(2, 998), curr[1], curr[999]]);
                         }}/>
                     </div>
                 </div>