Add readme

Author: twharmon

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/src/App.js

@@ -1,6 +1,7 @@
 import { rendr, useState } from '@rendrjs/core';
-import Jumbotron from './Jumbotron';
-import Row from './Row';
+import { Jumbotron } from './Jumbotron';
+import { Row } from './Row';
+import { RemoveIcon } from './RemoveIcon';
 
 let random = (max) => Math.round(Math.random() * 1000) % max;
 
@@ -28,12 +29,9 @@ let buildData = (count) => {
   return data;
 };
 
-let preloadIcon = rendr('span', {
-  class: 'preloadicon glyphicon glyphicon-remove',
-  'aria-hidden': true,
-});
+export let preloadIcon = rendr(RemoveIcon, { pre: true });
 
-let App = () => {
+export let App = () => {
   let [state, setState] = useState({ arr: [], sel: 0 });
 
   let run = () => setState({ arr: buildData(1000), sel: 0 });
@@ -58,7 +56,7 @@ let App = () => {
     old.arr.splice(old.arr.findIndex((d) => d.id === id), 1);
     return { ...old };
   });
-  let select = id => setState(old => ({ ...old, sel: id }));
+  let sel = id => setState(old => ({ ...old, sel: id }));
 
   return rendr('div', {
     class: 'container',
@@ -70,8 +68,8 @@ let App = () => {
           slot: state.arr.map(item => rendr(Row, {
             key: `${item.id}`,
             item,
-            sel: state.sel === item.id,
-            select,
+            hi: state.sel === item.id,
+            sel,
             del,
             memo: [item.id === state.sel, item.label],
           })),
@@ -81,5 +79,3 @@ let App = () => {
     ],
   });
 };
-
-export default App;

frameworks/keyed/rendrjs/src/Button.js

@@ -1,8 +1,9 @@
 import { rendr } from '@rendrjs/core';
+import { colSm6 } from './classes';
 
-let Button = (props) => {
+export let Button = (props) => {
   return rendr('div', {
-    class: 'col-sm-6 smallpad',
+    class: `${colSm6} smallpad`,
     slot: rendr('button', {
       id: props.id,
       onclick: props.cb,
@@ -12,5 +13,3 @@ let Button = (props) => {
     }),
   });
 };
-
-export default Button;

frameworks/keyed/rendrjs/src/Jumbotron.js

@@ -1,18 +1,19 @@
 import { rendr } from '@rendrjs/core';
-import Button from './Button';
+import { Button } from './Button';
+import { colMd6 } from './classes';
 
-let Jumbotron = (props) => {
+export let Jumbotron = (props) => {
   return rendr('div', {
     class: 'jumbotron',
     slot: rendr('div', {
       class: 'row',
       slot: [
         rendr('div', {
-          class: 'col-md-6',
+          class: colMd6,
           slot: rendr('h1', { slot: 'Rendrjs keyed' }),
         }),
         rendr('div', {
-          class: 'col-md-6',
+          class: colMd6,
           slot: rendr('div', {
             class: 'row',
             slot: [
@@ -29,5 +30,3 @@ let Jumbotron = (props) => {
     }),
   });
 };
-
-export default Jumbotron;

frameworks/keyed/rendrjs/src/RemoveIcon.js

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

frameworks/keyed/rendrjs/src/Row.js

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

frameworks/keyed/rendrjs/src/classes.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/main.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));