refactor: improve error handling in effect function

nuxodin · May 9, 2024 · c243aeb · c243aeb
1 parent f669d3a
commit c243aeb
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 3 deletions.
diff --git a/drivers/htmlElementAttributes.js b/drivers/htmlElementAttributes.js
@@ -0,0 +1,59 @@
+import { Item, item } from '../item.js';
+
+
+// todo, weakmap for caching?
+const all = new WeakMap();
+
+export function attributes(element) {
+
+    if (all.has(element)) return all.get(element);    
+
+    const root = item();
+
+    all.set(element, root);
+
+    root.ChildClass = AttributeItem;
+
+    // initial data
+    for (const attr of element.attributes) {
+        root.item(attr.name).set(attr.value);
+    }
+
+    // dom changes
+    new MutationObserver(mutations => {
+        for (const mutation of mutations) {
+            if (mutation.type === 'attributes') {
+                if (mutation.target !== element) console.error('what?');
+                const name = mutation.attributeName;
+                const value = element.getAttribute(name);
+                value === null ? root.item(name).remove() : root.item(name).set(value);
+            }
+        }
+    }).observe(element, { attributes: true });
+
+    // item changes
+    root.addEventListener('changeIn', ({detail}) => {
+        if (detail.add) return;
+        if (detail.remove) {
+            element.removeAttribute(detail.remove.key);
+            return;
+        }
+        if (detail.item.parent === root) {
+            element.setAttribute(detail.item.key, detail.value);
+            return;
+        }
+        console.error('what?');
+    });
+
+    return root;
+}    
+
+class AttributeItem extends Item {
+    constructor(root, key) {
+        super(root, key);
+    }
+    $set(value) {
+        super.$set(String(value));
+    }
+    ChildClass = false;
+}
diff --git a/drivers/htmlElementAttributes.test.html b/drivers/htmlElementAttributes.test.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Test</title>
+    <script src="https://cdn.jsdelivr.net/gh/nuxodin/lazyfill@main/mod.min.js"></script>
+
+    <link rel=stylesheet href="http://gcdn.li/u2ui/u2/css/classless/full.css">
+    <link rel=stylesheet href="http://gcdn.li/u2ui/u2/css/classless/simple.css">
+
+<body>
+
+
+<section>
+    <h1>Html Attributes Test</h1>
+
+    <figure style="padding:2rem">
+        <input type="text" name="xyz" id="testElement" value="" placeholder="Name">
+    </figure>
+
+    <br><br>
+
+    <table id="table"></table>
+
+    <script type=module>
+    import {effect} from '../item.js';
+    import {render, html, htmlFor} from 'https://unpkg.com/uhtml@4.4.7/keyed.js';
+
+    import {attributes} from "./htmlElementAttributes.js";
+
+    const root = attributes(testElement);
+
+    effect(() => {
+        render(table, html`
+            <thead>
+                <tr>
+                    <th> Name
+                    <th> Value
+            <tbody>
+                <tr>
+                    <td> <input id=inp style="width:100%">
+                    <td> <button onclick="${()=>{root.item(inp.value).set(''); inp.value=''}}">add</button></td>
+                </tr>
+            ${[...root].map(item => {
+                return html`
+                    <tr>
+                        <td> ${item.key}
+                        <td> <input oninput="${({target})=>{item.set(target.value)  }}" .value="${item.value}">
+                        <td> <button onclick="${()=>{item.remove()}}">delete</button>
+                `;
+            })}
+        `);
+    });
+
+    </script>
+
+</section>
diff --git a/item.js b/item.js
@@ -166,8 +166,8 @@ export function effect(fn){ // async?
         fn.parent = outer;
     }
     currentEffect = fn;
-    fn(); // await, so that signals in async functions are collected?
-    currentEffect = outer;
+    try { fn(); } // await, so that signals in async functions are collected?
+    finally { currentEffect = outer; }
     return () => fn.disposed = true
 }
 
@@ -190,7 +190,8 @@ function batch(effect) {
         batches.forEach(fn => {
             if (batches.has(fn?.parent)) return; // its parent has also to run, so it will run anyway
             currentEffect = fn; // effect() called inside fn(callback) has to know his parent effect
-            fn(); // TODO? fn(fn) to rerun effect? https://github.com/nuxodin/item.js/issues/2
+            // todo? try
+            fn(); // TODO? fn({rerun:fn}) to rerun effect? https://github.com/nuxodin/item.js/issues/2
         });
         batches = null; // restart collecting
     });

diff --git a/tests/effect.html b/tests/effect.html
@@ -28,6 +28,13 @@ <h1>Test</h1>
 
     effect(()=>{
 
+        // try {
+        //     effect(()=>log("error:" + itm.item('outer').value + asdf))
+        // } catch(e){
+        //     log("error in effect:" + e.message);
+        // }
+
+
         effect(()=>{
             log("deeper effect (bevore inner), value:" + itm.item('deeper').value);
         });