improve the dojo keyed implementation

Author: agubler

frameworks/keyed/dojo/src/App.ts

@@ -1,5 +1,5 @@
 import { create, v, w } from '@dojo/framework/core/vdom';
-import Row from './Row';
+import RowContainer from './RowContainer';
 import Buttons from './Buttons';
 import store from  './Store';
 
@@ -16,18 +16,18 @@ export default factory(function App({ middleware: { store }}) {
 		{ id: 'swaprows', label: 'Swap Rows', onClick: store.swapRows }
 	];
 
-	const rows = store.ids.map((id) => {
-		return w(Row, {
-			id,
-			key: id,
+	const rows = store.chunks().map((ids, i) => {
+		return w(RowContainer, {
+			ids,
+			key: i,
 			onSelect: store.select
 		});
 	});
 
 	return v('div', { key: 'root', classes: [ 'container' ] }, [
 		w(Buttons, { buttonConfigs }),
 		v('table', { classes: [ 'table', 'table-hover', 'table-striped', 'test-data' ] }, [
-			v('tbody', rows)
+			rows.length ? v('tbody', rows) : null
 		]),
 		v('span', { classes: [ 'preloadicon', 'glyphicon', 'glyphicon-remove' ] })
 	]);

frameworks/keyed/dojo/src/RowContainer.ts

@@ -0,0 +1,21 @@
+import { create, w } from '@dojo/framework/core/vdom';
+import Row from './Row';
+
+export interface RowContainerProperties {
+	ids: string;
+	onSelect: any;
+}
+
+const factory = create().properties<RowContainerProperties>();
+
+export default factory(function RowContainer({ properties }) {
+    const { ids, onSelect } = properties();
+    console.count('container');
+	return (JSON.parse(ids) as number[]).map((id: number) => {
+		return w(Row, {
+			id,
+			key: id,
+			onSelect
+		});
+	});
+});

frameworks/keyed/dojo/src/Store.ts

@@ -115,6 +115,14 @@ export default factory(({ properties, middleware: { invalidator }}) => {
 		get ids(): number[] {
 			return Array.from(ids);
 		},
+		chunks(size = 500): string[] {
+			const ids = this.ids;
+			const chunks: string[] =[];
+			for (let i = 0; i< ids.length; i+=size) {
+				chunks.push(JSON.stringify(ids.slice(i,i+size)));
+			}
+			return chunks;
+		},
 		get item(): Item | undefined {
 			return data[widgetKey];
 		},