wip - add topological sorting

Author: kennyfrc

build/cami.cdn.js

@@ -2051,6 +2051,26 @@ var cami = (() => {
     static clearGraph() {
       _DependencyTracker.dependencyGraph.clear();
     }
+    static topologicalSort() {
+      const visited = /* @__PURE__ */ new Set();
+      const stack = [];
+      function dfs(node) {
+        visited.add(node);
+        const neighbors = _DependencyTracker.dependencyGraph.get(node) || /* @__PURE__ */ new Set();
+        for (const neighbor of neighbors) {
+          if (!visited.has(neighbor)) {
+            dfs(neighbor);
+          }
+        }
+        stack.push(node);
+      }
+      for (const node of _DependencyTracker.dependencyGraph.keys()) {
+        if (!visited.has(node)) {
+          dfs(node);
+        }
+      }
+      return stack.reverse();
+    }
   };
   __publicField(_DependencyTracker, "current", null);
   __publicField(_DependencyTracker, "dependencyGraph", /* @__PURE__ */ new Map());
@@ -2422,13 +2442,25 @@ var cami = (() => {
     const tracker = {
       addDependency: (observable) => {
         if (!dependencies.has(observable)) {
-          const subscription = observable.onValue(_runEffect);
+          const subscription = observable.onValue(() => scheduleEffect());
           dependencies.add(observable);
           subscriptions.set(observable, subscription);
         }
       }
     };
-    const _runEffect = () => {
+    const scheduleEffect = () => {
+      if (typeof window !== "undefined") {
+        requestAnimationFrame(runEffectInOrder);
+      } else {
+        queueMicrotask(runEffectInOrder);
+      }
+    };
+    const runEffectInOrder = () => {
+      const order = DependencyTracker.topologicalSort();
+      const relevantOrder = order.filter((obs) => dependencies.has(obs));
+      for (const obs of relevantOrder) {
+        obs.__applyUpdates();
+      }
       cleanup();
       DependencyTracker.current = tracker;
       try {
@@ -2445,11 +2477,7 @@ var cami = (() => {
         console.warn(error.message);
       }
     };
-    if (typeof window !== "undefined") {
-      requestAnimationFrame(_runEffect);
-    } else {
-      queueMicrotask(_runEffect);
-    }
+    scheduleEffect();
     const dispose = () => {
       subscriptions.forEach((subscription) => {
         subscription.unsubscribe();

build/cami.cdn.js.map

@@ -82,6 +82,32 @@ class DependencyTracker {
   static clearGraph() {
     DependencyTracker.dependencyGraph.clear();
   }
+
+  static topologicalSort() {
+    const visited = new Set();
+    const stack = [];
+
+    function dfs(node) {
+      visited.add(node);
+
+      const neighbors = DependencyTracker.dependencyGraph.get(node) || new Set();
+      for (const neighbor of neighbors) {
+        if (!visited.has(neighbor)) {
+          dfs(neighbor);
+        }
+      }
+
+      stack.push(node);
+    }
+
+    for (const node of DependencyTracker.dependencyGraph.keys()) {
+      if (!visited.has(node)) {
+        dfs(node);
+      }
+    }
+
+    return stack.reverse();
+  }
 }
 
 /**
@@ -496,40 +522,38 @@ const effect = function(effectFn) {
   let dependencies = new Set();
   let subscriptions = new Map();
 
-  /**
-   * The tracker object is used to keep track of dependencies for the effect function.
-   * It provides a method to add a dependency (an observable) to the dependencies set.
-   * If the observable is not already a dependency, it is added to the set and a subscription is created
-   * to run the effect function whenever the observable's value changes.
-   * This mechanism allows the effect function to respond to state changes in its dependencies.
-   */
   const tracker = {
     addDependency: (observable) => {
       if (!dependencies.has(observable)) {
-        const subscription = observable.onValue(_runEffect);
+        const subscription = observable.onValue(() => scheduleEffect());
         dependencies.add(observable);
         subscriptions.set(observable, subscription);
       }
     }
   };
 
-  /**
-   * The _runEffect function is responsible for running the effect function and managing its dependencies.
-   * Before the effect function is run, any cleanup from the previous run is performed and the current tracker
-   * is set to this tracker. This allows the effect function to add dependencies via the tracker while it is running.
-   * After the effect function has run, the current tracker is set back to null to prevent further dependencies
-   * from being added outside of the effect function.
-   * The effect function is expected to return a cleanup function, which is saved for the next run.
-   * The cleanup function, initially empty, is replaced by the one returned from effectFn (run by the observable) before each new run and on effect disposal.
-   */
-  const _runEffect = () => {
+  const scheduleEffect = () => {
+    if (typeof window !== 'undefined') {
+      requestAnimationFrame(runEffectInOrder);
+    } else {
+      queueMicrotask(runEffectInOrder);
+    }
+  };
+
+  const runEffectInOrder = () => {
+    const order = DependencyTracker.topologicalSort();
+    const relevantOrder = order.filter(obs => dependencies.has(obs));
+
+    for (const obs of relevantOrder) {
+      obs.__applyUpdates();
+    }
+
     cleanup();
     DependencyTracker.current = tracker;
     try {
       cleanup = effectFn() || (() => {});
     } catch (error) {
       console.warn(error.message);
-      // Optionally, you can add more detailed logging here
     } finally {
       DependencyTracker.current = null;
     }
@@ -541,20 +565,8 @@ const effect = function(effectFn) {
     }
   };
 
-  if (typeof window !== 'undefined') {
-    requestAnimationFrame(_runEffect);
-  } else {
-    queueMicrotask(_runEffect);
-  }
+  scheduleEffect();
 
-  /**
-   * @method
-   * @description Unsubscribes from all dependencies and runs cleanup function
-   * @returns {void}
-   * @example
-   * // Assuming `dispose` is the function returned by `effect`
-   * dispose(); // This will unsubscribe from all dependencies and run cleanup function
-   */
   const dispose = () => {
     subscriptions.forEach((subscription) => {
       subscription.unsubscribe();

build/cami.module.js

@@ -5,31 +5,33 @@ describe('Integers are Observable - CounterElement', () => {
     counter = document.createElement('counter-test');
     document.body.appendChild(counter);
     await window.customElements.whenDefined('counter-test');
-    await counter.updateComplete;
-    await new Promise(resolve => setTimeout(resolve, 50));
   });
 
   afterEach(() => {
     document.body.removeChild(counter);
   });
 
-  it('increments count', () => {
+  const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+  it('increments count', async () => {
     const incrementButton = counter.querySelector('button:nth-child(2)');
     incrementButton.click();
     incrementButton.click();
+    await wait(50); // Add a small delay
     const countDiv = counter.querySelector('div');
     expect(countDiv.textContent).toEqual(`Count: 2`);
   });
 
-  it('decrements count', () => {
+  it('decrements count', async () => {
     const decrementButton = counter.querySelector('button:nth-child(1)');
     decrementButton.click();
     decrementButton.click();
+    await wait(50); // Add a small delay
     const countDiv = counter.querySelector('div');
     expect(countDiv.textContent).toEqual(`Count: -2`);
   });
 
-  it('renders count correctly', () => {
+  it('renders count correctly', async () => {
     const countDiv = counter.querySelector('div');
     expect(countDiv.textContent).toEqual(`Count: ${counter.count}`);
   });