Merge branch 'twharmon-update-rendrjs'

Author: krausest

frameworks/keyed/rendrjs/README.md

@@ -0,0 +1,17 @@
+# Rendrjs Implementation
+
+
+See the implementation
+```sh
+http://localhost:8080/frameworks/keyed/rendrjs/
+```
+
+Run the benchmark
+```sh
+npm run bench -- --framework keyed/rendrjs --chromeBinary /var/lib/flatpak/exports/bin/com.google.Chrome && npm run results
+```
+
+See the results
+```sh
+http://localhost:8080/webdriver-ts-results/dist/index.html
+```

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.236"
   },
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "@rendrjs/core",

frameworks/keyed/rendrjs/package.json

@@ -1,22 +1,23 @@
-import { rendr, useCallback, useState } from '@rendrjs/core';
-import Jumbotron from './Jumbotron';
-import Row from './Row';
+import { div, rendr, table, tbody, useState } from '@rendrjs/core';
+import { Jumbotron } from './Jumbotron';
+import { Row } from './Row';
+import { makeIcon } from './RemoveIcon';
 
-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,64 +29,53 @@ const buildData = (count) => {
   return data;
 };
 
-const preloadIcon = rendr('span', {
-  className: 'preloadicon glyphicon glyphicon-remove',
-  'aria-hidden': true,
-});
+export let preloadIcon = makeIcon(true);
 
-const App = () => {
-  const [state, setState] = useState({ data: [], selected: 0 });
+export 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 = () => setState({ arr: buildData(1000), sel: 0 });
+  let lots = () => setState({ arr: buildData(10000), sel: 0 });
+  let clear = () => setState({ arr: [], sel: 0 });
+  let update = () => setState(old => {
+    for (let i = 0; i < old.arr.length; i += 10) {
+      old.arr[i].label += ' !!!';
     }
-    return { data: newData, selected: old.selected };
-  }), []);
-  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 };
+    return { ...old };
+  });
+  let swap = () => 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 };
-  }), []);
-  const onDelete = useCallback((id) => setState(old => {
-    old.data.splice(old.data.findIndex((d) => d.id === id), 1);
+    return { ...old, sel: 0 };
+  });
+  let push = () => setState(old => ({ arr: old.arr.concat(buildData(1000)), sel: old.sel }));
+  let del = (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 sel = id => setState(old => ({ ...old, sel: id }));
 
-  return rendr('div', {
-    className: 'container',
+  return div({
+    class: 'container',
     slot: [
-      rendr(Jumbotron, { onRun, onRunlots, onClear, onUpdate, onSwap, onAppend, memo: [] }),
-      rendr('table', {
-        className: 'table table-hover table-striped test-data',
-        slot: rendr('tbody', {
-          slot: state.data.map(item => rendr(Row, {
-            key: `${item.id}`,
-            item: item,
-            selected: state.selected === item.id,
-            onSelect,
-            onDelete,
-            memo: [item.id === state.selected, item.label],
+      rendr(Jumbotron, { run, lots, clear, update, swap, push, memo: [] }),
+      table({
+        class: 'table table-hover table-striped test-data',
+        slot: tbody({
+          slot: state.arr.map(item => rendr(Row, {
+            key: item.id,
+            item,
+            hi: state.sel === item.id,
+            sel,
+            del,
+            memo: [item.id === state.sel, item.label],
           })),
         }),
       }),
       preloadIcon,
     ],
   });
 };
-
-export default App;

frameworks/keyed/rendrjs/src/App.js

@@ -1,16 +1,16 @@
-import { rendr } from '@rendrjs/core';
+import { button, div } from '@rendrjs/core';
+import { colSm6 } from './classes';
 
-const Button = (props) => {
-  return rendr('div', {
-    className: 'col-sm-6 smallpad',
-    slot: rendr('button', {
+let className = colSm6 + ' smallpad';
+export let Button = (props) => {
+  return div({
+    class: className,
+    slot: 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,
     }),
   });
 };
-
-export default Button;

frameworks/keyed/rendrjs/src/Button.js

@@ -1,33 +1,34 @@
-import { rendr } from '@rendrjs/core';
-import Button from './Button';
+import { div, h1, rendr } from '@rendrjs/core';
+import { Button } from './Button';
+import { colMd6 } from './classes';
 
-const Jumbotron = (props) => {
-  return rendr('div', {
-    className: 'jumbotron',
-    slot: rendr('div', {
-      className: 'row',
+let header = div({
+  class: colMd6,
+  slot: h1({ slot: 'Rendrjs keyed' }),
+});
+
+export let Jumbotron = (props) => {
+  return div({
+    class: 'jumbotron',
+    slot: div({
+      class: 'row',
       slot: [
-        rendr('div', {
-          className: 'col-md-6',
-          slot: rendr('h1', { slot: 'Rendrjs keyed' }),
-        }),
-        rendr('div', {
-          className: 'col-md-6',
-          slot: rendr('div', {
-            className: 'row',
+        header,
+        div({
+          class: colMd6,
+          slot: div({
+            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 }),
             ],
           }),
         }),
       ],
     }),
   });
 };
-
-export default Jumbotron;

frameworks/keyed/rendrjs/src/Jumbotron.js

@@ -0,0 +1,6 @@
+import { span } from '@rendrjs/core';
+
+export let makeIcon = preload => span({
+    class: `${preload ? 'preloadicon ' : ''}glyphicon glyphicon-remove`,
+    ariaHidden: true,
+});

frameworks/keyed/rendrjs/src/RemoveIcon.js

@@ -1,35 +1,30 @@
-import { rendr } from '@rendrjs/core';
+import { a, td, tr } from '@rendrjs/core';
+import { colMd1, colMd4, colMd6 } from './classes';
+import { makeIcon } from './RemoveIcon';
 
-const Row = (props) => {
-  return rendr('tr', {
-    className: props.selected ? 'danger' : undefined,
+let icon = makeIcon();
+let emptyTd = td({ class: colMd6 });
+
+export let Row = ({ hi, sel, item, del }) => {
+  return tr({
+    class: hi ? 'danger' : undefined,
     slot: [
-      rendr('td', {
-        className: 'col-md-1',
-        slot: `${props.item.id}`,
-      }),
-      rendr('td', {
-        className: 'col-md-4',
-        slot: rendr('a', {
-          onclick: () => props.onSelect(props.item.id),
-          slot: props.item.label,
+      td({ class: colMd1, slot: `${item.id}` }),
+      td({
+        class: colMd4,
+        slot: a({
+          onclick: () => sel(item.id),
+          slot: item.label,
         }),
       }),
-      rendr('td', {
-        className: 'col-md-1',
-        slot: rendr('a', {
-          onclick: () => props.onDelete(props.item.id),
-          slot: rendr('span', {
-            className: 'glyphicon glyphicon-remove',
-            'aria-hidden': true,
-          }),
+      td({
+        class: colMd1,
+        slot: a({
+          onclick: () => del(item.id),
+          slot: icon,
         }),
       }),
-      rendr('td', {
-        className: 'col-md-6',
-      }),
+      emptyTd,
     ],
   });
 };
-
-export default Row;

frameworks/keyed/rendrjs/src/Row.js

@@ -0,0 +1,4 @@
+export let colMd1 = 'col-md-1';
+export let colMd4 = 'col-md-4';
+export let colMd6 = 'col-md-6';
+export let colSm6 = 'col-sm-6';

frameworks/keyed/rendrjs/src/classes.js

@@ -1,4 +1,4 @@
 import { mount, rendr } from '@rendrjs/core';
-import App from './App';
+import { App } from './App';
 
 mount(document.querySelector('#root'), rendr(App));