Merge branch 'jmeistrich-master'

Author: krausest

frameworks/non-keyed/legend-state/index.html renamed to frameworks/keyed/legend-state/index.html

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-legend-state",
-  "version": "0.14.0",
+  "version": "1.2.8",
   "description": "Legend-State demo",
   "main": "index.js",
   "sideEffects": false,
@@ -34,7 +34,7 @@
     "webpack-cli": "5.0.1"
   },
   "dependencies": {
-    "@legendapp/state": "0.14.0",
+    "@legendapp/state": "1.2.9",
     "react": "17.0.1",
     "react-dom": "17.0.1"
   }

frameworks/non-keyed/legend-state/package-lock.json renamed to frameworks/keyed/legend-state/package-lock.json

@@ -1,5 +1,5 @@
-import { observable, observableBatcher } from "@legendapp/state";
-import { observer, For } from "@legendapp/state/react";
+import { beginBatch, endBatch, observable } from "@legendapp/state";
+import { For, useSelector } from "@legendapp/state/react";
 import React, { memo } from "react";
 import ReactDOM from "react-dom";
 
@@ -13,10 +13,9 @@ const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "s
 const random = (max) => Math.round(Math.random() * 1000) % max;
 
 let nextId = 1;
-function buildData (count) {
+function buildData(count) {
     let data = new Array(count);
-    for (let i = 0; i < count; i++)
-    {
+    for (let i = 0; i < count; i++) {
         data[i] = {
             id: nextId++,
             label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
@@ -26,69 +25,66 @@ function buildData (count) {
 }
 
 let selectedItem = undefined;
-const state = observable({ data: [], num: 2 });
+const arr$ = observable([]);
 
-function run () {
-    state.data.set(buildData(1000));
+function run() {
+    arr$.set(buildData(1000));
 }
-function runLots () {
-    state.data.set(buildData(10000));
+function runLots() {
+    arr$.set(buildData(10000));
 }
-function add () {
-    state.data.set(state.data.concat(buildData(1000)));
+function add() {
+    arr$.set(arr$.concat(buildData(1000)));
 }
-function update () {
-    observableBatcher.begin();
-    const list = state.data;
-    const length = list.length;
-    for (let i = 0; i < length; i += 10)
-    {
-        const r = list[i];
-        list[i].label.set(r.label + " !!!");
+function update() {
+    beginBatch();
+    const length = arr$.length;
+    for (let i = 0; i < length; i += 10) {
+        arr$[i].label.set(v => v + " !!!");
     }
-    observableBatcher.end();
+    endBatch();
 }
-function remove (id) {
-    const idx = state.data.findIndex((d) => d?.id === id);
-    state.data.splice(idx, 1);
+function remove(itemData) {
+    const idx = arr$.peek().indexOf(itemData);
+    arr$.splice(idx, 1);
 }
-function select (item) {
-    if (selectedItem !== undefined)
-    {
-        selectedItem.set('selected', false);
+function select(item) {
+    if (selectedItem !== undefined) {
+        selectedItem.selected.set(false);
     }
-    item.set('selected', true);
+    item.selected.set(true);
     selectedItem = item;
 }
-function swapRows () {
-    const arr = state.data.slice();
+function swapRows() {
+    const arr = arr$.slice();
     const tmp = arr[1];
     arr[1] = arr[998];
     arr[998] = tmp;
-    state.data.set(arr);
+    arr$.set(arr);
 }
-function clear () {
-    state.data.set([]);
+function clear() {
+    arr$.set([]);
 }
 
 const GlyphIcon = <span className="glyphicon glyphicon-remove" aria-hidden="true"></span>;
 
-const Row = observer(({ item }) => {
-    const { label, selected, id } = item.get();
+const Row = ({ item }) => {
+    const itemData = useSelector(item);
+    const { label, selected, id } = itemData;
 
     return (
         <tr className={selected ? "danger" : ""}>
             <td className="col-md-1">{id}</td>
             <td className="col-md-4"><a onClick={() => select(item)}>{label}</a></td>
-            <td className="col-md-1"><a onClick={() => remove(id)}>{GlyphIcon}</a></td>
+            <td className="col-md-1"><a onClick={() => remove(itemData)}>{GlyphIcon}</a></td>
             <td className="col-md-6"></td>
         </tr>
     )
-});
+}
 
-const RowList = observer(() => {
-    return <For each={state.data} item={Row} />;
-});
+const RowList = () => {
+    return <For each={arr$} item={Row} />;
+};
 
 const Button = memo(({ id, title, cb }) => (
     <div className="col-sm-6 smallpad">
@@ -101,7 +97,7 @@ const Main = () => {
         <div className="container">
             <div className="jumbotron">
                 <div className="row">
-                    <div className="col-md-6"><h1>Legend-State v0.14.0</h1></div>
+                    <div className="col-md-6"><h1>Legend-State v1.2.9</h1></div>
                     <div className="col-md-6"><div className="row">
                         <Button id="run" title="Create 1,000 rows" cb={run} />
                         <Button id="runlots" title="Create 10,000 rows" cb={runLots} />

frameworks/non-keyed/legend-state/package.json renamed to frameworks/keyed/legend-state/package.json

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Legend-State</title>
+  <link href="/css/currentStyle.css" rel="stylesheet"/>
+</head>
+<body>
+  <div id='main'></div>
+  <script src='dist/main.js'></script>
+</body>
+</html>