Update signals

Author: JoviDeCroock

frameworks/keyed/preact-signals/package-lock.json

@@ -19,7 +19,7 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "@preact/signals": "^1.3.1",
+    "@preact/signals": "^2.3.1",
     "preact": "^10.25.2"
   },
   "devDependencies": {

frameworks/keyed/preact-signals/package.json

@@ -1,4 +1,5 @@
-import { signal, batch } from "@preact/signals";
+import { signal, batch, useComputed } from "@preact/signals";
+import { For } from "@preact/signals/utils";
 import { render, h } from "preact";
 
 let idCounter = 1;
@@ -109,8 +110,8 @@ const run = () => {
   swapRows = () => {
     const d = data.value.slice();
     if (d.length > 998) {
-      let tmp = d[1];
-      d[1] = d[998];
+      let tmp = {...d[1]};
+      d[1] = {...d[998]};
       d[998] = tmp;
       data.value = d;
     }
@@ -124,6 +125,24 @@ const run = () => {
     selected.value = id;
   };
 
+const Row = ({ id, label }) => {
+  const rowClass = useComputed(() => selected.value === id ? "danger" : "");
+  return (
+    <tr class={rowClass}>
+      <td class="col-md-1" textContent={id} />
+      <td class="col-md-4">
+        <a onClick={() => select(id)} textContent={label} />
+      </td>
+      <td class="col-md-1">
+        <a onClick={() => remove(id)}>
+          <span class="glyphicon glyphicon-remove" aria-hidden="true" />
+        </a>
+      </td>
+      <td class="col-md-6" />
+    </tr>
+  )
+}
+
 const App = () => {
   return (
     <div class="container">
@@ -146,20 +165,9 @@ const App = () => {
       </div>
       <table class="table table-hover table-striped test-data">
         <tbody>
-          {data.value.map((row) => (
-            <tr key={row.id} class={selected.value === row.id ? "danger" : ""}>
-              <td class="col-md-1" textContent={row.id} />
-              <td class="col-md-4">
-                <a onClick={() => select(row.id)} textContent={row.label} />
-              </td>
-              <td class="col-md-1">
-                <a onClick={() => remove(row.id)}>
-                  <span class="glyphicon glyphicon-remove" aria-hidden="true" />
-                </a>
-              </td>
-              <td class="col-md-6" />
-            </tr>
-          ))}
+          <For each={data}>
+            {(row) => <Row key={row.id} id={row.id} label={row.label} />}
+          </For>
         </tbody>
       </table>
       <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />