Use class signals

Author: twharmon

frameworks/keyed/thyn/package-lock.json

@@ -13,9 +13,9 @@
   },
   "devDependencies": {
     "vite": "6.3.5",
-    "@thyn/vite-plugin": "0.0.175"
+    "@thyn/vite-plugin": "0.0.218"
   },
   "dependencies": {
-    "@thyn/core": "0.0.175"
+    "@thyn/core": "0.0.218"
   }
 }

frameworks/keyed/thyn/package.json

@@ -2,16 +2,16 @@
   import {data, buildData, selected} from "./state.thyn.js";
   import Row from "./Row.thyn";
 
-  const add = () => data(d => [...d, ...buildData(1000)]);
-  const clear = () => data([]);
-  const partialUpdate = () => {for (let i = 0, d = data(), len = d.length; i < len; i += 10) d[i].label(l => l + " !!!")};
+  const add = () => data.update(d => [...d, ...buildData(1000)]);
+  const clear = () => data.set([]);
+  const partialUpdate = () => {for (let i = 0, d = data.get(), len = d.length; i < len; i += 10) d[i].label.update(l => l + " !!!")};
   const run = () => {
-    data(buildData(1000));
+    data.set(buildData(1000));
   };
   const runLots = () => {
-    data(buildData(10000));
+    data.set(buildData(10000));
   };
-  const swapRows = () => data(d => {
+  const swapRows = () => data.update(d => {
     if (d.length > 998) {
       const clone = d.slice();
       const tmp = clone[1];
@@ -59,7 +59,7 @@
   </div>
   <table class="table table-hover table-striped test-data">
     <tbody>
-      <Row #for={row in data()} row={row} />
+      <Row #for={row in data.get()} row={row} />
     </tbody>
   </table>
   <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>

frameworks/keyed/thyn/src/App.thyn

@@ -1,19 +1,18 @@
 <script>
-  import {selected, data } from "./state.thyn.js";
+  import { selected, data } from "./state.thyn.js";
 
-  const {row} = $props;
-  const {id, label} = row;
+  const { row: { id, label } } = $props;
 </script>
 
-<tr class={selected() === id ? 'danger' : undefined}>
+<tr class={selected.get() === id ? 'danger' : undefined}>
   <td class="col-md-1">{{ id }}</td>
   <td class="col-md-4">
-    <a onclick={() => selected(id)}>{{ label() }}</a>
+    <a onclick={() => selected.set(id)}>{{ label.get() }}</a>
   </td>
   <td class="col-md-1">
-    <a onclick={() => data(d => {
+    <a onclick={() => data.update(d => {
       const clone = d.slice();
-      clone.splice(clone.indexOf(row), 1);
+      clone.splice(clone.findIndex(r => r.id === id), 1);
       return clone;
     })}>
       <span class="glyphicon glyphicon-remove" aria-hidden="true" />