Merge branch 'nihil-pro-master'

Author: krausest

frameworks/keyed/preact-kr-observable/package-lock.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.39",
     "preact": "^10.25.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"

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

@@ -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/rollup.config.mjs

@@ -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/preact-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/preact-kr-observable/src/Row.jsx

@@ -2,10 +2,11 @@ import { Observable } from 'kr-observable';
 import { buildData } from './data';
 
 export class RowsStore extends Observable {
+  static shallow = ['rows']
   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 +24,8 @@ export class RowsStore extends Observable {
     }
   };
 
-  select(rowId) {
-    this.rows.forEach(row => row.selected = row.id === rowId)
+  select(e) {
+    this.rows.forEach(row => row.selected = row.id === +e.target.id)
   };
 
   runLots() {
@@ -45,4 +46,5 @@ export class RowsStore extends Observable {
   };
 }
 
+
 export const rowsStore = new RowsStore()