Include Anim()

dist/sigpro-ui.esm.js

@@ -119,11 +119,11 @@ var trackUpdate = (subs, trigger = false) => {
   if (!trigger && activeEffect && !activeEffect._disposed) {
     subs.add(activeEffect);
     (activeEffect._deps ||= new Set).add(subs);
-  } else if (trigger) {
+  } else if (trigger && subs.size > 0) {
     let hasQueue = false;
-    subs.forEach((e) => {
+    for (const e of subs) {
       if (e === activeEffect || e._disposed)
-        return;
+        continue;
       if (e._isComputed) {
         e._dirty = true;
         if (e._subs)
@@ -132,7 +132,7 @@ var trackUpdate = (subs, trigger = false) => {
         effectQueue.add(e);
         hasQueue = true;
       }
-    });
+    }
     if (hasQueue && !isFlushing && batchDepth === 0)
       queueMicrotask(flush);
   }
@@ -200,8 +200,9 @@ var $2 = (val, key = null) => {
 var $$ = (target) => {
   if (!isObj(target))
     return target;
-  if (proxyCache.has(target))
-    return proxyCache.get(target);
+  let proxy = proxyCache.get(target);
+  if (proxy)
+    return proxy;
   const subsMap = new Map;
   const getSubs = (k) => {
     let s = subsMap.get(k);
@@ -209,28 +210,30 @@ var $$ = (target) => {
       subsMap.set(k, s = new Set);
     return s;
   };
-  const proxy = new Proxy(target, {
-    get(t, k) {
+  proxy = new Proxy(target, {
+    get(t, k, receiver) {
+      if (typeof k !== "symbol")
         trackUpdate(getSubs(k));
-      return $$(t[k]);
+      return $$(Reflect.get(t, k, receiver));
     },
-    set(t, k, v) {
-      const isNew = !(k in t);
-      if (!Object.is(t[k], v)) {
-        t[k] = v;
+    set(t, k, v, receiver) {
+      const isNew = !Reflect.has(t, k);
+      const oldV = Reflect.get(t, k, receiver);
+      const result = Reflect.set(t, k, v, receiver);
+      if (result && !Object.is(oldV, v)) {
         trackUpdate(getSubs(k), true);
         if (isNew)
           trackUpdate(getSubs(ITER), true);
       }
-      return true;
+      return result;
     },
     deleteProperty(t, k) {
-      const res = Reflect.deleteProperty(t, k);
-      if (res) {
+      const result = Reflect.deleteProperty(t, k);
+      if (result) {
         trackUpdate(getSubs(k), true);
         trackUpdate(getSubs(ITER), true);
       }
-      return res;
+      return result;
     },
     ownKeys(t) {
       trackUpdate(getSubs(ITER));
@@ -517,6 +520,35 @@ Router.params = $2({});
 Router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
 Router.back = () => window.history.back();
 Router.path = () => window.location.hash.replace(/^#/, "") || "/";
+var Anim = (show, render, { enter, leave } = {}) => {
+  const wrap = Tag2("div", { style: "display:contents" });
+  let view = null;
+  const wait = (el, cb) => {
+    let done = false;
+    const finish = () => !done && (done = true, cb());
+    if (!el)
+      return finish();
+    "transitionend animationend".split(" ").map((e) => el.addEventListener(e, finish, { once: true }));
+    setTimeout(finish, 500);
+  };
+  Watch2(show, (on) => {
+    if (on && !view) {
+      const el = (view = Render(render)).container.firstChild;
+      wrap.appendChild(view.container);
+      if (enter && el) {
+        el.classList.add(enter);
+        el.clientTop;
+        el.classList.add(enter + "-active");
+        wait(el, () => el.classList.remove(enter, enter + "-active"));
+      }
+    } else if (!on && view) {
+      const el = view.container.firstChild;
+      const del = () => (view?.destroy(), view = null);
+      leave && el ? (el.classList.add(leave), wait(el, del)) : del();
+    }
+  });
+  return onUnmount(() => view?.destroy()), wrap;
+};
 var Mount2 = (comp, target) => {
   const t = typeof target === "string" ? doc.querySelector(target) : target;
   if (!t)
@@ -528,7 +560,7 @@ var Mount2 = (comp, target) => {
   MOUNTED_NODES.set(t, inst);
   return inst;
 };
-var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, Batch });
+var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, Anim, Batch });
 if (typeof window !== "undefined") {
   Object.assign(window, SigPro);
   "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));

dist/sigpro-ui.js

@@ -185,11 +185,11 @@
     if (!trigger && activeEffect && !activeEffect._disposed) {
       subs.add(activeEffect);
       (activeEffect._deps ||= new Set).add(subs);
-    } else if (trigger) {
+    } else if (trigger && subs.size > 0) {
       let hasQueue = false;
-      subs.forEach((e) => {
+      for (const e of subs) {
         if (e === activeEffect || e._disposed)
-          return;
+          continue;
         if (e._isComputed) {
           e._dirty = true;
           if (e._subs)
@@ -198,7 +198,7 @@
           effectQueue.add(e);
           hasQueue = true;
         }
-      });
+      }
       if (hasQueue && !isFlushing && batchDepth === 0)
         queueMicrotask(flush);
     }
@@ -266,8 +266,9 @@
   var $$ = (target) => {
     if (!isObj(target))
       return target;
-    if (proxyCache.has(target))
-      return proxyCache.get(target);
+    let proxy = proxyCache.get(target);
+    if (proxy)
+      return proxy;
     const subsMap = new Map;
     const getSubs = (k) => {
       let s = subsMap.get(k);
@@ -275,28 +276,30 @@
         subsMap.set(k, s = new Set);
       return s;
     };
-    const proxy = new Proxy(target, {
-      get(t, k) {
+    proxy = new Proxy(target, {
+      get(t, k, receiver) {
+        if (typeof k !== "symbol")
           trackUpdate(getSubs(k));
-        return $$(t[k]);
+        return $$(Reflect.get(t, k, receiver));
       },
-      set(t, k, v) {
-        const isNew = !(k in t);
-        if (!Object.is(t[k], v)) {
-          t[k] = v;
+      set(t, k, v, receiver) {
+        const isNew = !Reflect.has(t, k);
+        const oldV = Reflect.get(t, k, receiver);
+        const result = Reflect.set(t, k, v, receiver);
+        if (result && !Object.is(oldV, v)) {
           trackUpdate(getSubs(k), true);
           if (isNew)
             trackUpdate(getSubs(ITER), true);
         }
-        return true;
+        return result;
       },
       deleteProperty(t, k) {
-        const res = Reflect.deleteProperty(t, k);
-        if (res) {
+        const result = Reflect.deleteProperty(t, k);
+        if (result) {
           trackUpdate(getSubs(k), true);
           trackUpdate(getSubs(ITER), true);
         }
-        return res;
+        return result;
       },
       ownKeys(t) {
         trackUpdate(getSubs(ITER));
@@ -583,6 +586,35 @@
   Router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
   Router.back = () => window.history.back();
   Router.path = () => window.location.hash.replace(/^#/, "") || "/";
+  var Anim = (show, render, { enter, leave } = {}) => {
+    const wrap = Tag2("div", { style: "display:contents" });
+    let view = null;
+    const wait = (el, cb) => {
+      let done = false;
+      const finish = () => !done && (done = true, cb());
+      if (!el)
+        return finish();
+      "transitionend animationend".split(" ").map((e) => el.addEventListener(e, finish, { once: true }));
+      setTimeout(finish, 500);
+    };
+    Watch2(show, (on) => {
+      if (on && !view) {
+        const el = (view = Render(render)).container.firstChild;
+        wrap.appendChild(view.container);
+        if (enter && el) {
+          el.classList.add(enter);
+          el.clientTop;
+          el.classList.add(enter + "-active");
+          wait(el, () => el.classList.remove(enter, enter + "-active"));
+        }
+      } else if (!on && view) {
+        const el = view.container.firstChild;
+        const del = () => (view?.destroy(), view = null);
+        leave && el ? (el.classList.add(leave), wait(el, del)) : del();
+      }
+    });
+    return onUnmount(() => view?.destroy()), wrap;
+  };
   var Mount2 = (comp, target) => {
     const t = typeof target === "string" ? doc.querySelector(target) : target;
     if (!t)
@@ -594,7 +626,7 @@
     MOUNTED_NODES.set(t, inst);
     return inst;
   };
-  var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, Batch });
+  var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, Anim, Batch });
   if (typeof window !== "undefined") {
     Object.assign(window, SigPro);
     "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));

docs/sigpro-ui.min.js

@@ -185,11 +185,11 @@
     if (!trigger && activeEffect && !activeEffect._disposed) {
       subs.add(activeEffect);
       (activeEffect._deps ||= new Set).add(subs);
-    } else if (trigger) {
+    } else if (trigger && subs.size > 0) {
       let hasQueue = false;
-      subs.forEach((e) => {
+      for (const e of subs) {
         if (e === activeEffect || e._disposed)
-          return;
+          continue;
         if (e._isComputed) {
           e._dirty = true;
           if (e._subs)
@@ -198,7 +198,7 @@
           effectQueue.add(e);
           hasQueue = true;
         }
-      });
+      }
       if (hasQueue && !isFlushing && batchDepth === 0)
         queueMicrotask(flush);
     }
@@ -266,8 +266,9 @@
   var $$ = (target) => {
     if (!isObj(target))
       return target;
-    if (proxyCache.has(target))
-      return proxyCache.get(target);
+    let proxy = proxyCache.get(target);
+    if (proxy)
+      return proxy;
     const subsMap = new Map;
     const getSubs = (k) => {
       let s = subsMap.get(k);
@@ -275,28 +276,30 @@
         subsMap.set(k, s = new Set);
       return s;
     };
-    const proxy = new Proxy(target, {
-      get(t, k) {
+    proxy = new Proxy(target, {
+      get(t, k, receiver) {
+        if (typeof k !== "symbol")
           trackUpdate(getSubs(k));
-        return $$(t[k]);
+        return $$(Reflect.get(t, k, receiver));
       },
-      set(t, k, v) {
-        const isNew = !(k in t);
-        if (!Object.is(t[k], v)) {
-          t[k] = v;
+      set(t, k, v, receiver) {
+        const isNew = !Reflect.has(t, k);
+        const oldV = Reflect.get(t, k, receiver);
+        const result = Reflect.set(t, k, v, receiver);
+        if (result && !Object.is(oldV, v)) {
           trackUpdate(getSubs(k), true);
           if (isNew)
             trackUpdate(getSubs(ITER), true);
         }
-        return true;
+        return result;
       },
       deleteProperty(t, k) {
-        const res = Reflect.deleteProperty(t, k);
-        if (res) {
+        const result = Reflect.deleteProperty(t, k);
+        if (result) {
           trackUpdate(getSubs(k), true);
           trackUpdate(getSubs(ITER), true);
         }
-        return res;
+        return result;
       },
       ownKeys(t) {
         trackUpdate(getSubs(ITER));
@@ -583,6 +586,35 @@
   Router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
   Router.back = () => window.history.back();
   Router.path = () => window.location.hash.replace(/^#/, "") || "/";
+  var Anim = (show, render, { enter, leave } = {}) => {
+    const wrap = Tag2("div", { style: "display:contents" });
+    let view = null;
+    const wait = (el, cb) => {
+      let done = false;
+      const finish = () => !done && (done = true, cb());
+      if (!el)
+        return finish();
+      "transitionend animationend".split(" ").map((e) => el.addEventListener(e, finish, { once: true }));
+      setTimeout(finish, 500);
+    };
+    Watch2(show, (on) => {
+      if (on && !view) {
+        const el = (view = Render(render)).container.firstChild;
+        wrap.appendChild(view.container);
+        if (enter && el) {
+          el.classList.add(enter);
+          el.clientTop;
+          el.classList.add(enter + "-active");
+          wait(el, () => el.classList.remove(enter, enter + "-active"));
+        }
+      } else if (!on && view) {
+        const el = view.container.firstChild;
+        const del = () => (view?.destroy(), view = null);
+        leave && el ? (el.classList.add(leave), wait(el, del)) : del();
+      }
+    });
+    return onUnmount(() => view?.destroy()), wrap;
+  };
   var Mount2 = (comp, target) => {
     const t = typeof target === "string" ? doc.querySelector(target) : target;
     if (!t)
@@ -594,7 +626,7 @@
     MOUNTED_NODES.set(t, inst);
     return inst;
   };
-  var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, Batch });
+  var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, Anim, Batch });
   if (typeof window !== "undefined") {
     Object.assign(window, SigPro);
     "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));

src/sigpro.js

@@ -1,4 +1,4 @@
-// sigpro 1.2.0
+// sigpro 1.2.1
 const isFunc = f => typeof f === "function"
 const isObj = o => o && typeof o === "object"
 const isArr = Array.isArray
@@ -104,10 +104,10 @@ const trackUpdate = (subs, trigger = false) => {
   if (!trigger && activeEffect && !activeEffect._disposed) {
     subs.add(activeEffect)
       ; (activeEffect._deps ||= new Set()).add(subs)
-  } else if (trigger) {
+  } else if (trigger && subs.size > 0) {
     let hasQueue = false
-    subs.forEach(e => {
-      if (e === activeEffect || e._disposed) return
+    for (const e of subs) {
+      if (e === activeEffect || e._disposed) continue
       if (e._isComputed) {
         e._dirty = true
         if (e._subs) trackUpdate(e._subs, true)
@@ -115,7 +115,7 @@ const trackUpdate = (subs, trigger = false) => {
         effectQueue.add(e)
         hasQueue = true
       }
-    })
+    }
     if (hasQueue && !isFlushing && batchDepth === 0) queueMicrotask(flush)
   }
 }
@@ -175,36 +175,39 @@ const $ = (val, key = null) => {
 const $$ = (target) => {
   if (!isObj(target)) return target
 
-  if (proxyCache.has(target)) return proxyCache.get(target)
+  let proxy = proxyCache.get(target)
+  if (proxy) return proxy
 
   const subsMap = new Map()
   const getSubs = (k) => {
     let s = subsMap.get(k)
-    if (!s) subsMap.set(k, s = new Set())
+    if (!s) subsMap.set(k, (s = new Set()))
     return s
   }
 
-  const proxy = new Proxy(target, {
-    get(t, k) {
-      trackUpdate(getSubs(k))
-      return $$(t[k])
+  proxy = new Proxy(target, {
+    get(t, k, receiver) {
+      if (typeof k !== 'symbol') trackUpdate(getSubs(k))
+      return $$(Reflect.get(t, k, receiver))
     },
-    set(t, k, v) {
-      const isNew = !(k in t)
-      if (!Object.is(t[k], v)) {
-        t[k] = v
+    set(t, k, v, receiver) {
+      const isNew = !Reflect.has(t, k)
+      const oldV = Reflect.get(t, k, receiver)
+      const result = Reflect.set(t, k, v, receiver)
+      
+      if (result && !Object.is(oldV, v)) {
         trackUpdate(getSubs(k), true)
         if (isNew) trackUpdate(getSubs(ITER), true)
       }
-      return true
+      return result
     },
     deleteProperty(t, k) {
-      const res = Reflect.deleteProperty(t, k)
-      if (res) {
+      const result = Reflect.deleteProperty(t, k)
+      if (result) {
         trackUpdate(getSubs(k), true)
         trackUpdate(getSubs(ITER), true)
       }
-      return res
+      return result
     },
     ownKeys(t) {
       trackUpdate(getSubs(ITER))
@@ -496,6 +499,37 @@ Router.to = p => window.location.hash = p.replace(/^#?\/?/, "#/")
 Router.back = () => window.history.back()
 Router.path = () => window.location.hash.replace(/^#/, "") || "/"
 
+const Anim = (show, render, { enter, leave } = {}) => {
+  const wrap = Tag('div', { style: 'display:contents' })
+  let view = null
+
+  const wait = (el, cb) => {
+    let done = false
+    const finish = () => !done && (done = true, cb())
+    if (!el) return finish()
+    'transitionend animationend'.split(' ').map(e => el.addEventListener(e, finish, { once: true }))
+    setTimeout(finish, 500)
+  }
+
+  Watch(show, on => {
+    if (on && !view) {
+      const el = (view = Render(render)).container.firstChild
+      wrap.appendChild(view.container)
+      if (enter && el) {
+        el.classList.add(enter); el.clientTop
+        el.classList.add(enter + '-active')
+        wait(el, () => el.classList.remove(enter, enter + '-active'))
+      }
+    } else if (!on && view) {
+      const el = view.container.firstChild
+      const del = () => (view?.destroy(), view = null)
+      leave && el ? (el.classList.add(leave), wait(el, del)) : del()
+    }
+  })
+
+  return onUnmount(() => view?.destroy()), wrap
+}
+
 const Mount = (comp, target) => {
   const t = typeof target === "string" ? doc.querySelector(target) : target
   if (!t) return
@@ -506,7 +540,7 @@ const Mount = (comp, target) => {
   return inst
 }
 
-const SigPro = Object.freeze({ $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, Batch })
+const SigPro = Object.freeze({ $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, Anim, Batch })
 
 if (typeof window !== "undefined") {
   Object.assign(window, SigPro)
@@ -514,5 +548,5 @@ if (typeof window !== "undefined") {
     .split(" ").forEach(t => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c))
 }
 
-export { $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, Batch }
+export { $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, Anim, Batch }
 export default SigPro