Merge branch 'Nefsen402-destam-dom'

Author: krausest

frameworks/keyed/destam-dom/package-lock.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "dev": "rollup -c -w",
+    "build": "rollup -c",
     "build-prod": "rollup -c --environment production"
   },
   "author": "Alexander Orzechowski",
@@ -20,7 +21,7 @@
   },
   "dependencies": {
     "destam": "^0.1.0",
-    "destam-dom": "^0.4.0"
+    "destam-dom": "^0.6.0"
   },
   "devDependencies": {
     "@babel/parser": "^7.24.1",

frameworks/keyed/destam-dom/package.json

@@ -10,6 +10,7 @@ const createTransform = (name, transform, jsx) => ({
   transform(code, id) {
     if (id.endsWith('.js') || (jsx && id.endsWith('.jsx'))) {
       const transformed = transform(code, {
+        util_import: 'destam-dom',
         sourceFileName: id,
         plugins: id.endsWith('.jsx') ? ['jsx'] : [],
       });

frameworks/keyed/destam-dom/rollup.config.js

@@ -42,26 +42,31 @@ const App = () => {
     clear = () => {
       array.splice(0, array.length);
     },
-    remove = row => {
-      const idx = array.indexOf(row);
+    remove = idx => {
       array.splice(idx, 1);
+    },
+    select = idx => {
+      selected.set(array[idx]);
     };
 
   function appendData(count) {
-    array.push(...Array.from(Array(count), () => {
+    const arr = Array(count);
+    for (let i = 0; i < count; i++) {
       let label = Observer.mutable(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`);
 
       const dom =
         <tr class={selected.map(sel => sel === dom ? "danger": "")}>
           <td class='col-md-1' $textContent={ idCounter++ } />
-          <td class='col-md-4'><a $onclick={() => selected.set(dom)} $textContent={ label } /></td>
-          <td class='col-md-1'><a $onclick={() => remove(dom)}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
+          <td class='col-md-4'><a $clickHandler={1} $textContent={ label } /></td>
+          <td class='col-md-1'><a $clickHandler={2}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
           <td class='col-md-6'/>
         </tr>;
 
       dom.label = label;
-      return dom;
-    }));
+      arr[i] = dom;
+    }
+
+    array.push(...arr);
   }
 
   return <div class='container'>
@@ -76,7 +81,19 @@ const App = () => {
         <Button id='swaprows' text='Swap Rows' fn={ swapRows } />
       </div></div>
     </div></div>
-    <table class='table table-hover table-striped test-data'><tbody>
+    <table class='table table-hover table-striped test-data'><tbody $onclick={ev => {
+        let handler;
+        let e = ev.target;
+        while (e.parentElement.tagName !== "TBODY") {
+          if (e.clickHandler) handler = e.clickHandler;
+          e = e.parentElement;
+        }
+
+        if (!handler) return;
+
+        let i = Array.prototype.indexOf.call(e.parentElement.children, e);
+        [null, select, remove][handler](i);
+    }}>
       {array}
     </tbody></table>
     <span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />