Update imports

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

@@ -19,21 +19,21 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "kr-observable": "2.0.0",
-    "preact": "^10.25.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "kr-observable": "3.0.8",
+    "preact": "^10.25.0"
   },
   "devDependencies": {
-    "@rollup/plugin-alias": "^5.1.1",
     "@babel/core": "7.21.8",
+    "@babel/plugin-transform-react-jsx": "^7.27.1",
     "@babel/preset-env": "7.21.5",
     "@babel/preset-react": "7.18.6",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "25.0.0",
     "@rollup/plugin-node-resolve": "15.0.2",
     "@rollup/plugin-replace": "5.0.2",
     "@rollup/plugin-terser": "0.4.3",
+    "babel-preset-preact": "^2.0.0",
     "rollup": "3.22.0"
   }
 }

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

@@ -12,21 +12,15 @@ const plugins = [
     'process.env.NODE_ENV': JSON.stringify('production'),
   }),
   babel({
-    exclude: 'node_modules/**',
-    babelHelpers: 'bundled',
+    babelHelpers: "bundled",
+    exclude: "node_modules/**",
     presets: [
-      // '@babel/preset-env',
-      ['@babel/preset-react', { runtime: 'automatic' }],
+      ['@babel/preset-react', {
+        runtime: 'automatic',
+        importSource: 'preact'
+      }]
     ],
   }),
-  alias({
-    entries:[
-      { find: 'react', replacement: 'preact/compat' },
-      { find: 'react-dom', 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

@@ -1,8 +1,7 @@
-import { createRoot } from 'react-dom/client';
-import { observer } from 'kr-observable';
+import { render } from "preact";
+import { observer } from 'kr-observable/preact';
 import { Row } from './Row';
 import { rowsStore } from './RowsStore';
-import { Fragment } from "react";
 
 const Button = ({ children, id, onClick }) => {
   return (
@@ -20,17 +19,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>
-  )
+      )
 })
 
 
@@ -87,5 +82,5 @@ function Main() {
   );
 }
 
+render(<Main />, document.getElementById('main'));
 
-createRoot(document.getElementById('main')).render(<Main />);

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

@@ -1,15 +1,15 @@
-import { observer } from 'kr-observable';
+import { observer } from 'kr-observable/preact';
 import { rowsStore } from "./RowsStore";
 
 export const Row = observer(function row({ data }) {
   return (
     <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"
@@ -21,3 +21,4 @@ export const Row = observer(function row({ data }) {
     </tr>
   );
 });
+

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

@@ -5,8 +5,8 @@ export class RowsStore extends Observable {
   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,13 +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.rows.forEach(row => row.selected = row.id === +e.target.id)
+  select(id) {
+    this.rows.forEach(row => row.selected = row.id === id)
   };
 
   runLots() {
@@ -47,4 +48,5 @@ export class RowsStore extends Observable {
 }
 
 
-export const rowsStore = new RowsStore()
+
+export const rowsStore = new RowsStore()

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

@@ -19,7 +19,7 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "kr-observable": "2.0.0",
+    "kr-observable": "3.0.8",
     "react": "19.0.0",
     "react-dom": "19.0.0"
   },

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

@@ -1,9 +1,7 @@
 import { createRoot } from 'react-dom/client';
-import { observer } from 'kr-observable';
+import { observer } from 'kr-observable/react';
 import { Row } from './Row';
 import { rowsStore } from './RowsStore';
-import { Fragment } from "react";
-
 
 const Button = ({ children, id, onClick }) => {
   return (
@@ -85,3 +83,5 @@ function Main() {
 
 
 createRoot(document.getElementById('main')).render(<Main />);
+
+

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

@@ -1,4 +1,4 @@
-import { observer } from 'kr-observable';
+import { observer } from 'kr-observable/react';
 import { rowsStore } from "./RowsStore";
 
 export const Row = observer(function row({ data }) {

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

@@ -70,7 +70,7 @@ export const buildData = (count) => {
     data.push(makeObservable({
       id: id++,
       label: `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`,
-      selected: false
+      selected: false,
     }, ignore, shallow))
   }
   // const t1 = performance.now();