Update rendrjs version

Author: twharmon

frameworks/keyed/rendrjs-atoms/package-lock.json

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

frameworks/keyed/rendrjs-atoms/package.json

@@ -1,9 +1,9 @@
-import { div } from '@rendrjs/core';
+import { component, element } from '@rendrjs/core';
 import { Jumbotron } from './Jumbotron';
 import { makeIcon } from './RemoveIcon';
 import { Table } from './Table';
 
-export let App = () => div({
+export let App = () => element('div', {
   class: 'container',
-  slot: [Jumbotron, Table, makeIcon(true)],
+  slot: [component(Jumbotron), component(Table), makeIcon(true)],
 });

frameworks/keyed/rendrjs-atoms/src/App.js

@@ -1,4 +1,4 @@
-import { div, h1, useAtomSetter, button } from '@rendrjs/core';
+import { element, useAtomSetter, text } from '@rendrjs/core';
 import { dataAtom, selectedAtom } from './store';
 
 let random = arr => arr[Math.round(Math.random() * 1000) % arr.length];
@@ -25,33 +25,33 @@ let buildData = (count = 1000) => {
   return data;
 };
 
-let btn = (id, slot, onclick) => div({
+let btn = (id, txt, onclick) => element('div', {
   class: 'col-sm-6 smallpad',
-  slot: button({
+  slot: element('button', {
     id,
     onclick,
     type: 'button',
     class: 'btn btn-primary btn-block',
-    slot,
+    slot: text(txt),
   }),
 })
 
 export let Jumbotron = () => {
   let setData = useAtomSetter(dataAtom);
   let setSelected = useAtomSetter(selectedAtom);
 
-  return div({
+  return element('div', {
     class: 'jumbotron',
-    slot: div({
+    slot: element('div', {
       class: 'row',
       slot: [
-        div({
+        element('div', {
           class: 'col-md-6',
-          slot: h1('Rendrjs atoms'),
+          slot: element('h1', { slot: text('Rendrjs atoms') }),
         }),
-        div({
+        element('div', {
           class: 'col-md-6',
-          slot: div({
+          slot: element('div', {
             class: 'row',
             slot: [
               btn('run', 'Create 1,000 rows', () => {

frameworks/keyed/rendrjs-atoms/src/Jumbotron.js

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

frameworks/keyed/rendrjs-atoms/src/RemoveIcon.js

@@ -1,37 +1,36 @@
-import { a, td, tr, useAtomSelector, useAtomSetter } from '@rendrjs/core';
+import { element, text, useAtomSelector, useAtomSetter } from '@rendrjs/core';
 import { makeIcon } from './RemoveIcon';
 import { dataAtom, selectedAtom } from './store';
 
 let icon = makeIcon();
-let emptyTd = td({ class: 'col-md-6' });
 
 export let Row = ({ item: { id, label } }) => {
   let setData = useAtomSetter(dataAtom);
   let setSelected = useAtomSetter(selectedAtom);
   let selected = useAtomSelector(selectedAtom, s => s === id);
 
-  return tr({
+  return element('tr', {
     class: selected ? 'danger' : undefined,
     slot: [
-      td({ class: 'col-md-1', slot: `${id}` }),
-      td({
+      element('td', { class: 'col-md-1', slot: text(`${id}`) }),
+      element('td', {
         class: 'col-md-4',
-        slot: a({
+        slot: element('a', {
           onclick: () => setSelected(id),
-          slot: label,
+          slot: text(label),
         }),
       }),
-      td({
+      element('td', {
         class: 'col-md-1',
-        slot: a({
+        slot: element('a', {
           onclick: () => setData(old => {
             old.splice(old.findIndex(d => d.id === id), 1);
             return [ ...old ];
           }),
           slot: icon,
         }),
       }),
-      emptyTd,
+      element('td', { class: 'col-md-6' }),
     ],
   });
 };

frameworks/keyed/rendrjs-atoms/src/Row.js

@@ -1,14 +1,14 @@
-import { table, tbody, rendr, useAtomValue } from '@rendrjs/core';
+import { element, component, useAtomValue } from '@rendrjs/core';
 import { dataAtom } from './store';
 import { Row } from './Row';
 
 export let Table = () => {
   let data = useAtomValue(dataAtom);
 
-  return table({
+  return element('table', {
     class: 'table table-hover table-striped test-data',
-    slot: tbody({
-      slot: data.map(item => rendr(Row, { key: item.id, item, memo: [item.label] })),
+    slot: element('tbody', {
+      slot: data.map(item => component(Row, { key: `${item.id}`, item, memo: [item.label] })),
     }),
   });
 };

frameworks/keyed/rendrjs-atoms/src/Table.js

@@ -1,4 +1,4 @@
-import { mount } from '@rendrjs/core';
+import { mount, component } from '@rendrjs/core';
 import { App } from './App';
 
-mount(document.body, App);
+mount(document.body, component(App));