shablon 0.0.1-rc.6 → 0.0.1-rc.8

package/README.md

@@ -174,8 +174,6 @@ data.activity = "rest"
 Watch registers a callback function that fires on initialization and
 every time any of its evaluated `store` reactive properties change.
 
-Note that for reactive getters, initially the watch `trackedFunc` will be invoked twice because we register a second internal watcher to cache the getter value.
-
 It returns a "watcher" object that could be used to `unwatch()` the registered listener.
 
 _Optionally also accepts a second callback function that is excluded from the evaluated

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.0.1-rc.6",
+    "version": "0.0.1-rc.8",
     "name": "shablon",
     "description": "No-build JavaScript framework for Single-page applications",
     "author": "Gani Georgiev",

package/src/state.js

@@ -12,7 +12,7 @@ let pathsSubsSym = Symbol();
 let unwatchedSym = Symbol();
 let onRemoveSym = Symbol();
 let skipSym = Symbol();
-let evictedSym = Symbol();
+let detachedSym = Symbol();
 
 let pathSeparator = "/";
 
@@ -234,28 +234,26 @@ function createProxy(obj, pathWatcherIds) {
                 // if not invoked inside a watch function, call the original
                 // getter to ensure that an up-to-date value is computed
                 if (!activeWatcher) {
-                    return descriptors[prop]?.get?.call(obj);
+                    return descriptors[prop].get.call(obj);
                 }
 
                 getterProp = prop;
 
                 // replace with an internal property so that reactive statements can be cached
                 prop = "@@" + prop;
-                Object.defineProperty(obj, prop, { writable: true, enumerable: false });
             }
 
-            // evicted child?
+            // detached child?
+            let isDetached;
             if (!obj[skipSym] && obj[parentSym]) {
                 let props = [];
                 let activeObj = obj;
 
-                let isEvicted = false;
-
                 // travel up to the root proxy
                 // (aka. x.a.b*.c -> x)
                 while (activeObj?.[parentSym]) {
-                    if (activeObj[evictedSym]) {
-                        isEvicted = true;
+                    if (activeObj[detachedSym]) {
+                        isDetached = true;
                     }
 
                     props.push(activeObj[parentSym][1]);
@@ -268,9 +266,9 @@ function createProxy(obj, pathWatcherIds) {
                 // (we want: x.a.b(old).c -> x -> x.a.b(new).c)
                 //
                 // note: this technically could "leak" but for our case it should be fine
-                // because the evicted object will become again garbage collectable
+                // because the detached object will become again garbage collectable
                 // once the related watcher(s) are removed
-                if (isEvicted) {
+                if (isDetached) {
                     for (let i = props.length - 1; i >= 0; i--) {
                         activeObj[skipSym] = true;
                         let item = activeObj?.[props[i]];
@@ -321,16 +319,21 @@ function createProxy(obj, pathWatcherIds) {
 
                 let propPaths = [currentPath];
 
-                // always construct all parent paths ("x.a.b.c" => ["a", "a.b", "a.b.c"])
-                // because a store child object can be passed as argument to a function
-                // and in that case the parents proxy get trap will not be invoked,
-                // and their path will not be registered
-                if (obj[parentSym]) {
-                    let parts = currentPath.split(pathSeparator);
-                    while (parts.pop() && parts.length) {
-                        propPaths.push(parts.join(pathSeparator));
-                    }
-                }
+                // ---
+                // NB! Disable for now because of the nonblocking and delayed
+                // nature of the current MutationObserver implementation for the `onunmount` hook
+                // leading to unexpected and delayed watch calls in methods like `Array.map`.
+                // ---
+                // if (isDetached) {
+                //     // always construct all parent paths ("x.a.b.c" => ["a", "a.b", "a.b.c"])
+                //     // because a store child object can be passed as argument to a function
+                //     // and in that case the parents proxy get trap will not be invoked,
+                //     // and their path will not be registered
+                //     let parts = currentPath.split(pathSeparator);
+                //     while (parts.pop() && parts.length) {
+                //         propPaths.push(parts.join(pathSeparator));
+                //     }
+                // }
 
                 // initialize a watcher paths tracking set (if not already)
                 activeWatcher[pathsSubsSym] = activeWatcher[pathsSubsSym] || new Set();
@@ -360,14 +363,24 @@ function createProxy(obj, pathWatcherIds) {
 
                     let getFunc = descriptors[getterProp].get.bind(obj);
 
-                    let getWatcher = watch(getFunc, (result) => (receiver[prop] = result));
+                    let getWatcher = watch(getFunc, (result) => {
+                        if (!obj.hasOwnProperty(prop)) {
+                            Object.defineProperty(obj, prop, {
+                                writable: true,
+                                enumerable: false,
+                                value: result,
+                            });
+                        } else {
+                            receiver[prop] = result;
+                        }
+                    });
 
                     getWatcher[onRemoveSym] = () => {
                         descriptors[getterProp]?.watchers?.delete(watcherId);
                     };
 
                     // update with the cached get value after the above watch initialization
-                    propVal = obj[prop]
+                    propVal = obj[prop];
                 }
             }
 
@@ -381,9 +394,9 @@ function createProxy(obj, pathWatcherIds) {
 
             let oldValue = obj[prop];
 
-            // mark as "evicted" in case a proxy child object/array is being replaced
+            // mark as "detached" in case a proxy child object/array is being replaced
             if (oldValue?.[parentSym]) {
-                oldValue[evictedSym] = true;
+                oldValue[detachedSym] = true;
             }
 
             // update the stored parent reference in case of index change (e.g. unshift)

package/src/template.js

@@ -117,10 +117,12 @@ function tag(tagName, attrs = {}, ...children) {
                         return;
                     }
 
+                    const result = val(el, attr);
+
                     if (useSetAttr) {
-                        el.setAttribute(attr, val(el));
+                        el.setAttribute(attr, result);
                     } else {
-                        el[attr] = val(el);
+                        el[attr] = result;
                     }
                 });
             }