added preact+kr-observable and update react+kr-observable

Author: nihil-pro

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

@@ -11,15 +11,15 @@
     "dev": "rollup -c -w",
     "build-prod": "rollup -c --environment production"
   },
-  "author": "Maxim Molochkov",
+  "author": "Roman Constantin",
   "license": "Apache-2.0",
   "homepage": "https://github.com/krausest/js-framework-benchmark",
   "repository": {
     "type": "git",
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "kr-observable": "1.0.30",
+    "kr-observable": "1.0.3-5.beta-9",
     "preact": "^10.25.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"

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

@@ -23,7 +23,8 @@ const plugins = [
     entries:[
       { find: 'react', replacement: 'preact/compat' },
       { find: 'react-dom', replacement: 'preact/compat' },
-      { find: 'react/jsx-runtime', replacement: 'preact/compat' }
+      { find: 'react/jsx-runtime', replacement: 'preact/compat' },
+      { find: 'use-sync-external-store', replacement: 'preact/compat' }
     ]
   }),
   nodeResolve({ extensions: ['.js', '.jsx'] }),

frameworks/keyed/preact-kr-observable/src/Main.jsx

@@ -40,7 +40,7 @@ function Main() {
       <div className="jumbotron">
         <div className="row">
           <div className="col-md-6">
-            <h1>React + kr-observable</h1>
+            <h1>Preact + kr-observable</h1>
           </div>
 
           <div className="col-md-6">

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

@@ -19,7 +19,7 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "kr-observable": "1.0.30",
+    "kr-observable": "1.0.3-5.beta-9",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

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

@@ -20,17 +20,13 @@ const Button = ({ children, id, onClick }) => {
 };
 
 const RowList = observer(function list() {
-  return (
-    <Fragment>
-      {rowsStore.rows.map(row => (
+  return rowsStore.rows.map(row => (
           <Row
             key={row.id}
             data={row}
           />
         )
-      )}
-    </Fragment>
-  )
+      )
 })
 
 

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

@@ -6,11 +6,12 @@ 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 onClick={() => rowsStore.select(data.id)}>{data.label}</a>
+        <a id={data.id} onClick={rowsStore.select}>{data.label}</a>
       </td>
       <td className="col-md-1">
-        <a onClick={() => rowsStore.delete(data.id)}>
+        <a onClick={rowsStore.delete}>
           <span
+            id={data.id}
             className="glyphicon glyphicon-remove"
             aria-hidden="true"
           ></span>

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

@@ -4,8 +4,8 @@ import { buildData } from './data';
 export class RowsStore extends Observable {
   rows = [];
 
-  delete(rowIdToDelete) {
-    const rowIndexToDelete = this.rows.findIndex((row) => row.id === rowIdToDelete);
+  delete(e) {
+    const rowIndexToDelete = this.rows.findIndex((row) => row.id === +e.target.id);
     this.rows.splice(rowIndexToDelete, 1);
   };
 
@@ -23,8 +23,9 @@ export class RowsStore extends Observable {
     }
   };
 
-  select(rowId) {
-    this.rows.forEach(row => row.selected = row.id === rowId)
+  select(e) {
+    // this.selectedRowId = rowId;
+    this.rows.forEach(row => row.selected = row.id === +e.target.id)
   };
 
   runLots() {