Update deps

Author: twharmon

frameworks/keyed/rendrjs/package-lock.json

@@ -10,7 +10,7 @@
     "webpack-cli": "5.1.4"
   },
   "dependencies": {
-    "@rendrjs/core": "0.1.190"
+    "@rendrjs/core": "0.1.194"
   },
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "@rendrjs/core",

frameworks/keyed/rendrjs/package.json

@@ -2,21 +2,21 @@ import { rendr, useCallback, useState } from '@rendrjs/core';
 import Jumbotron from './Jumbotron';
 import Row from './Row';
 
-const random = (max) => Math.round(Math.random() * 1000) % max;
+let random = (max) => Math.round(Math.random() * 1000) % max;
 
-const A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome',
+let A = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome',
   'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy',
   'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive',
   'fancy'];
-const C = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown',
+let C = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown',
   'white', 'black', 'orange'];
-const N = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie',
+let N = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie',
   'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
 
 let nextId = 1;
 
-const buildData = (count) => {
-  const data = new Array(count);
+let buildData = (count) => {
+  let data = new Array(count);
 
   for (let i = 0; i < count; i++) {
     data[i] = {
@@ -28,58 +28,52 @@ const buildData = (count) => {
   return data;
 };
 
-const preloadIcon = rendr('span', {
-  className: 'preloadicon glyphicon glyphicon-remove',
+let preloadIcon = rendr('span', {
+  class: 'preloadicon glyphicon glyphicon-remove',
   'aria-hidden': true,
 });
 
-const App = () => {
-  const [state, setState] = useState({ data: [], selected: 0 });
+let App = () => {
+  let [state, setState] = useState({ arr: [], sel: 0 });
 
-  const onRun = useCallback(() => setState({ data: buildData(1000), selected: 0 }), []);
-  const onRunlots = useCallback(() => setState({ data: buildData(10000), selected: 0 }), []);
-  const onClear = useCallback(() => setState({ data: [], selected: 0 }), []);
-  const onUpdate = useCallback(() => setState(old => {
-    const newData = old.data.slice(0);
-    for (let i = 0; i < newData.length; i += 10) {
-      const r = newData[i];
-      newData[i] = { id: r.id, label: r.label + ' !!!' };
+  let run = useCallback(() => setState({ arr: buildData(1000), sel: 0 }), []);
+  let lots = useCallback(() => setState({ arr: buildData(10000), sel: 0 }), []);
+  let clear = useCallback(() => setState({ arr: [], sel: 0 }), []);
+  let update = useCallback(() => setState(old => {
+    for (let i = 0; i < old.arr.length; i += 10) {
+      old.arr[i].label += ' !!!';
     }
-    return { data: newData, selected: old.selected };
+    return { ...old };
   }), []);
-  const onSwap = useCallback(() => setState(old => {
-    if (old.data.length > 998) {
-      const d1 = old.data[1];
-      const d998 = old.data[998];
-      old.data[1] = d998;
-      old.data[998] = d1;
-      return { ...old };
+  let swap = useCallback(() => setState(old => {
+    if (old.arr.length > 998) {
+      let one = old.arr[1];
+      old.arr[1] = old.arr[998];
+      old.arr[998] = one;
     }
-    return { data: old.data, selected: 0 };
-  }), []);
-  const onAppend = useCallback(() => setState(old => {
-    return { data: old.data.concat(buildData(1000)), selected: old.selected };
+    return { ...old, sel: 0 };
   }), []);
-  const onDelete = useCallback((id) => setState(old => {
-    old.data.splice(old.data.findIndex((d) => d.id === id), 1);
+  let push = useCallback(() => setState(old => ({ arr: old.arr.concat(buildData(1000)), sel: old.sel })), []);
+  let del = useCallback((id) => setState(old => {
+    old.arr.splice(old.arr.findIndex((d) => d.id === id), 1);
     return { ...old };
   }), []);
-  const onSelect = useCallback((id) => setState(old => ({ ...old, selected: id })), []);
+  let select = useCallback((id) => setState(old => ({ ...old, sel: id })), []);
 
   return rendr('div', {
-    className: 'container',
+    class: 'container',
     slot: [
-      rendr(Jumbotron, { onRun, onRunlots, onClear, onUpdate, onSwap, onAppend, memo: [] }),
+      rendr(Jumbotron, { run, lots, clear, update, swap, push, memo: [] }),
       rendr('table', {
-        className: 'table table-hover table-striped test-data',
+        class: 'table table-hover table-striped test-data',
         slot: rendr('tbody', {
-          slot: state.data.map(item => rendr(Row, {
+          slot: state.arr.map(item => rendr(Row, {
             key: `${item.id}`,
-            item: item,
-            selected: state.selected === item.id,
-            onSelect,
-            onDelete,
-            memo: [item.id === state.selected, item.label],
+            item,
+            sel: state.sel === item.id,
+            select,
+            del,
+            memo: [item.id === state.sel, item.label],
           })),
         }),
       }),

frameworks/keyed/rendrjs/src/App.js

@@ -1,14 +1,14 @@
 import { rendr } from '@rendrjs/core';
 
-const Button = (props) => {
+let Button = (props) => {
   return rendr('div', {
-    className: 'col-sm-6 smallpad',
+    class: 'col-sm-6 smallpad',
     slot: rendr('button', {
       id: props.id,
       onclick: props.cb,
       type: 'button',
-      className: 'btn btn-primary btn-block',
-      slot: props.title,
+      class: 'btn btn-primary btn-block',
+      slot: props.text,
     }),
   });
 };

frameworks/keyed/rendrjs/src/Button.js

@@ -1,27 +1,27 @@
 import { rendr } from '@rendrjs/core';
 import Button from './Button';
 
-const Jumbotron = (props) => {
+let Jumbotron = (props) => {
   return rendr('div', {
-    className: 'jumbotron',
+    class: 'jumbotron',
     slot: rendr('div', {
-      className: 'row',
+      class: 'row',
       slot: [
         rendr('div', {
-          className: 'col-md-6',
+          class: 'col-md-6',
           slot: rendr('h1', { slot: 'Rendrjs keyed' }),
         }),
         rendr('div', {
-          className: 'col-md-6',
+          class: 'col-md-6',
           slot: rendr('div', {
-            className: 'row',
+            class: 'row',
             slot: [
-              rendr(Button, { id: 'run', title: 'Create 1,000 rows', cb: props.onRun }),
-              rendr(Button, { id: 'runlots', title: 'Create 10,000 rows', cb: props.onRunlots }),
-              rendr(Button, { id: 'add', title: 'Append 1,000 rows', cb: props.onAppend }),
-              rendr(Button, { id: 'update', title: 'Update every 10th row', cb: props.onUpdate }),
-              rendr(Button, { id: 'clear', title: 'Clear', cb: props.onClear }),
-              rendr(Button, { id: 'swaprows', title: 'Swap rows', cb: props.onSwap }),
+              rendr(Button, { id: 'run', text: 'Create 1,000 rows', cb: props.run }),
+              rendr(Button, { id: 'runlots', text: 'Create 10,000 rows', cb: props.lots }),
+              rendr(Button, { id: 'add', text: 'Append 1,000 rows', cb: props.push }),
+              rendr(Button, { id: 'update', text: 'Update every 10th row', cb: props.update }),
+              rendr(Button, { id: 'clear', text: 'Clear', cb: props.clear }),
+              rendr(Button, { id: 'swaprows', text: 'Swap rows', cb: props.swap }),
             ],
           }),
         }),

frameworks/keyed/rendrjs/src/Jumbotron.js

@@ -1,32 +1,32 @@
 import { rendr } from '@rendrjs/core';
 
-const Row = (props) => {
+let Row = props => {
   return rendr('tr', {
-    className: props.selected ? 'danger' : undefined,
+    class: props.sel ? 'danger' : undefined,
     slot: [
       rendr('td', {
-        className: 'col-md-1',
+        class: 'col-md-1',
         slot: `${props.item.id}`,
       }),
       rendr('td', {
-        className: 'col-md-4',
+        class: 'col-md-4',
         slot: rendr('a', {
-          onclick: () => props.onSelect(props.item.id),
+          onclick: () => props.select(props.item.id),
           slot: props.item.label,
         }),
       }),
       rendr('td', {
-        className: 'col-md-1',
+        class: 'col-md-1',
         slot: rendr('a', {
-          onclick: () => props.onDelete(props.item.id),
+          onclick: () => props.del(props.item.id),
           slot: rendr('span', {
-            className: 'glyphicon glyphicon-remove',
+            class: 'glyphicon glyphicon-remove',
             'aria-hidden': true,
           }),
         }),
       }),
       rendr('td', {
-        className: 'col-md-6',
+        class: 'col-md-6',
       }),
     ],
   });