Merge branch 'main' of https://github.com/efflore/ui-element into main

Author: estherbrunner

README.md

@@ -2,6 +2,15 @@
 /* === Internal === */
 // hold the currently active effect
 let active;
+/**
+ * Run all effects in the provided set
+ *
+ * @param {Set<UIEffects>} effects
+ */
+const autorun = (effects) => {
+    for (const effect of effects)
+        effect.run();
+};
 /* === Exported functions === */
 /**
  * Check if a given variable is a function
@@ -35,10 +44,7 @@ const cause = (value) => {
         value = isFunction(updater) && !isState(updater)
             ? updater(old)
             : updater;
-        if (!Object.is(value, old)) {
-            for (const effect of state.effects)
-                effect();
-        }
+        !Object.is(value, old) && autorun(state.effects);
     };
     return state;
 };
@@ -47,16 +53,28 @@ const cause = (value) => {
  *
  * @since 0.1.0
  * @param {() => any} fn - existing state to derive from
- * @returns {() => any} derived state
+ * @param {boolean} [memo=false] - whether to use memoization
+ * @returns {UIComputed<any>} derived state
  */
-const derive = (fn) => {
+const derive = (fn, memo = false) => {
+    let value;
+    let dirty = true;
     const computed = () => {
+        active && computed.effects.add(active);
+        if (memo && !dirty)
+            return value;
         const prev = active;
         active = computed;
-        const value = fn();
+        value = fn();
+        dirty = false;
         active = prev;
         return value;
     };
+    computed.effects = new Set(); // set of listeners
+    computed.run = () => {
+        dirty = true;
+        memo && autorun(computed.effects);
+    };
     return computed;
 };
 /**
@@ -74,15 +92,14 @@ const effect = (fn) => {
             !targets.has(element) && targets.set(element, new Set());
             targets.get(element).add(domFn);
         });
+        for (const domFns of targets.values()) {
+            for (const domFn of domFns)
+                domFn();
+        }
         active = prev;
-        (targets.size || cleanup) && queueMicrotask(() => {
-            for (const domFns of targets.values()) {
-                for (const domFn of domFns)
-                    domFn();
-            }
-            isFunction(cleanup) && cleanup();
-        });
+        isFunction(cleanup) && queueMicrotask(cleanup);
     };
+    next.run = () => next();
     next.targets = targets;
     next();
 };