Performance improvement

frameworks/keyed/preact-kr-observable/package.json

@@ -19,7 +19,7 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "kr-observable": "1.0.39",
+    "kr-observable": "2.0.0",
     "preact": "^10.25.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"

frameworks/keyed/preact-kr-observable/rollup.config.mjs

@@ -38,7 +38,7 @@ export default defineConfig({
   input: 'src/Main.jsx',
   output: {
     file: 'dist/main.js',
-    format: 'commonjs',
+    // format: 'commonjs',
   },
   plugins,
 });

frameworks/keyed/preact-kr-observable/src/RowsStore.js

@@ -2,7 +2,7 @@ import { Observable } from 'kr-observable';
 import { buildData } from './data';
 
 export class RowsStore extends Observable {
-  static shallow = ['rows']
+  static shallow = new Set(['rows'])
   rows = [];
 
   delete(e) {

frameworks/keyed/preact-kr-observable/src/data.js

@@ -64,14 +64,14 @@ const random = (max) => Math.round(Math.random() * 1000) % max;
 
 export const buildData = (count) => {
   const data = [];
+  const ignore = new Set(['id'])
+  const shallow = new Set(['label', 'selected'])
   for (let i = 0; i < count; i++) {
-    const d = {
+    data.push(makeObservable({
       id: id++,
       label: `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`,
       selected: false
-    }
-
-    data.push(makeObservable(d, ['id']))
+    }, ignore, shallow))
   }
   return data;
 };

frameworks/keyed/react-kr-observable/package.json

@@ -19,9 +19,9 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "kr-observable": "1.0.39",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "kr-observable": "2.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.21.8",

frameworks/keyed/react-kr-observable/rollup.config.mjs

@@ -8,13 +8,13 @@ import terser from '@rollup/plugin-terser';
 const plugins = [
   commonjs(),
   replace({
-    'process.env.NODE_ENV': JSON.stringify('production'),
+    'process.env.NODE_ENV': JSON.stringify('production'), //production
   }),
   babel({
     exclude: 'node_modules/**',
-    babelHelpers: 'bundled',
+    // babelHelpers: 'bundled',
     presets: [
-      '@babel/preset-env',
+      // '@babel/preset-env',
       ['@babel/preset-react', { runtime: 'automatic' }],
     ],
   }),
@@ -29,7 +29,7 @@ export default defineConfig({
   input: 'src/Main.jsx',
   output: {
     file: 'dist/main.js',
-    format: 'iife',
+    // format: 'iife',
   },
   plugins,
 });

frameworks/keyed/react-kr-observable/src/Row.jsx

@@ -6,10 +6,10 @@ export const Row = observer(function row({ data }) {
     <tr className={data.selected ? 'danger' : ''}>
       <td className="col-md-1">{data.id}</td>
       <td className="col-md-4">
-        <a id={data.id} onClick={rowsStore.select}>{data.label}</a>
+        <a id={data.id} onClick={() => rowsStore.select(data.id)}>{data.label}</a>
       </td>
       <td className="col-md-1">
-        <a onClick={rowsStore.delete}>
+        <a onClick={() => rowsStore.delete(data.id)}>
           <span
             id={data.id}
             className="glyphicon glyphicon-remove"

frameworks/keyed/react-kr-observable/src/RowsStore.js

@@ -2,11 +2,11 @@ import { Observable } from 'kr-observable';
 import { buildData } from './data';
 
 export class RowsStore extends Observable {
-  static shallow = ['rows']
+  static shallow = new Set(['rows'])
   rows = [];
 
-  delete(e) {
-    const rowIndexToDelete = this.rows.findIndex((row) => row.id === +e.target.id);
+  delete(id) {
+    const rowIndexToDelete = this.rows.findIndex(row => row.id === id);
     this.rows.splice(rowIndexToDelete, 1);
   };
 
@@ -19,14 +19,14 @@ export class RowsStore extends Observable {
   };
 
   update() {
-    for (let i = 0; i < this.rows.length; i += 10) {
+    const length = this.rows.length;
+    for (let i = 0; i < length; i += 10) {
       this.rows[i].label += ' !!!';
     }
   };
 
-  select(e) {
-    // this.selectedRowId = rowId;
-    this.rows.forEach(row => row.selected = row.id === +e.target.id)
+  select(id) {
+    this.rows.forEach(row => row.selected = row.id === id)
   };
 
   runLots() {
@@ -49,4 +49,4 @@ export class RowsStore extends Observable {
 
 
 
-export const rowsStore = new RowsStore()
+export const rowsStore = new RowsStore()

frameworks/keyed/react-kr-observable/src/data.js

@@ -43,7 +43,7 @@ const colours = [
 ];
 
 const nouns = [
-  'table',
+  'pencil',
   'chair',
   'house',
   'bbq',
@@ -64,12 +64,16 @@ const random = (max) => Math.round(Math.random() * 1000) % max;
 
 export const buildData = (count) => {
   const data = [];
+  const ignore = new Set(['id'])
+  const shallow = new Set(['label', 'selected'])
   for (let i = 0; i < count; i++) {
     data.push(makeObservable({
       id: id++,
       label: `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`,
       selected: false
-    }, ['id']))
+    }, ignore, shallow))
   }
+  // const t1 = performance.now();
+  // console.log(`Call to doSomething took ${t1 - t0} milliseconds.`);
   return data;
 };