feat(cursors): fix infinity loop and finding next dirty child

Author: Varixo

packages/qwik/src/core/shared/cursor/chore-execution.ts

@@ -165,6 +165,8 @@ export function executeComponentChore(vNode: VNode, container: Container): Value
   const isServer = isServerPlatform();
   const props = container.getHostProp<Props | null>(host, ELEMENT_PROPS) || null;
 
+  vNode.dirty &= ~ChoreBits.COMPONENT;
+
   const result = safeCall(
     () => executeComponent(container, host, host, componentQRL, props),
     (jsx) => {
@@ -188,9 +190,6 @@ export function executeComponentChore(vNode: VNode, container: Container): Value
     }
   );
 
-  // Clear the COMPONENT bit after execution
-  vNode.dirty &= ~ChoreBits.COMPONENT;
-
   if (isPromise(result)) {
     return result as Promise<void>;
   }

packages/qwik/src/core/shared/cursor/cursor-queue.ts

@@ -51,17 +51,15 @@ export function getHighestPriorityCursor(): Cursor | null {
  * @param cursor - The cursor to remove
  */
 export function removeCursorFromQueue(cursor: Cursor): void {
+  cursor.flags &= ~VNodeFlags.Cursor;
   const index = globalCursorQueue.indexOf(cursor);
   if (index !== -1) {
     // Move last element to the position of the element to remove, then pop
     const lastIndex = globalCursorQueue.length - 1;
     if (index !== lastIndex) {
       globalCursorQueue[index] = globalCursorQueue[lastIndex];
     }
-    const removed = globalCursorQueue.pop();
-    if (removed) {
-      removed.flags &= ~VNodeFlags.Cursor;
-    }
+    globalCursorQueue.pop();
   }
 }
 

packages/qwik/src/core/shared/cursor/cursor-walker.ts

@@ -65,10 +65,13 @@ export function processCursorQueue(
 ): void {
   isNextTickScheduled = false;
 
+  console.log('processCursorQueue');
+
   let cursor: Cursor | null = null;
   while ((cursor = getHighestPriorityCursor())) {
+    console.log('while loop');
     walkCursor(cursor, options);
-    if (!cursor.dirty) {
+    if (!(cursor.dirty & ChoreBits.DIRTY_MASK)) {
       removeCursorFromQueue(cursor);
     }
   }
@@ -90,6 +93,7 @@ function findContainerForCursor(cursor: Cursor): Container {
   }
   return getDomContainer(element!);
 }
+let globalCount = 0;
 
 /**
  * Walks a cursor through the vDOM tree, processing dirty vNodes in depth-first order.
@@ -127,13 +131,18 @@ export function walkCursor(cursor: Cursor, options: WalkOptions): void {
     return;
   }
 
+  globalCount++;
+  if (globalCount > 100) {
+    throw new Error('Infinite loop detected in cursor walker');
+  }
+
   const container = findContainerForCursor(cursor);
   // Get starting position (resume from last position or start at root)
   let currentVNode: VNode | null = null;
 
   let count = 0;
   while ((currentVNode = getCursorPosition(cursor))) {
-    if (count++ > 500000) {
+    if (count++ > 100) {
       throw new Error('Infinite loop detected in cursor walker');
     }
     // Check time budget (only for DOM, not SSR)
@@ -185,7 +194,7 @@ export function walkCursor(cursor: Cursor, options: WalkOptions): void {
     if (result && isPromise(result)) {
       // Store promise on cursor and pause
       setVNodePromise(cursor, result);
-      // pauseCursor(cursor, currentVNode);
+      pauseCursor(cursor, currentVNode);
 
       result
         .then(() => {
@@ -218,33 +227,33 @@ export function walkCursor(cursor: Cursor, options: WalkOptions): void {
 /** @returns Next vNode to process, or null if traversal is complete */
 function getNextVNode(): VNode | null {
   if (dirtyChildrenStack.length > 0) {
-    const last = dirtyChildrenStack[dirtyChildrenStack.length - 1];
-    const lastIndex = ++last.index;
+    const nextItem = dirtyChildrenStack[dirtyChildrenStack.length - 1];
 
-    const dirtyChildren = last.parent.dirtyChildren;
+    const dirtyChildren = nextItem.parent.dirtyChildren;
     if (!dirtyChildren) {
       return null;
     }
+    let currentIndex = nextItem.index++;
 
-    if (lastIndex < dirtyChildren.length) {
-      const nextVNode = dirtyChildren[lastIndex];
+    if (currentIndex < dirtyChildren.length) {
+      const nextVNode = dirtyChildren[currentIndex];
       if (nextVNode.dirty) {
         return nextVNode;
       } else {
-        const found = findDirtyChild(last, lastIndex, dirtyChildren.length);
+        const found = findDirtyChild(nextItem, currentIndex);
         if (found) {
           return found;
         }
       }
     } else {
       // no more dirty children, wrap around to check earlier children
-      const found = findDirtyChild(last, 0, last.index);
+      const found = findDirtyChild(nextItem, 0);
       if (found) {
         return found;
       }
       dirtyChildrenStack.pop();
       // children are no longer dirty
-      last.parent.dirty &= ~ChoreBits.CHILDREN;
+      nextItem.parent.dirty &= ~ChoreBits.CHILDREN;
       return getNextVNode();
     }
   }
@@ -260,13 +269,9 @@ function getNextVNode(): VNode | null {
  * @param end - End index (exclusive)
  * @returns The first dirty child found, or null if none found
  */
-function findDirtyChild(
-  last: { parent: VNode; index: number },
-  start: number,
-  end: number
-): VNode | null {
+function findDirtyChild(last: { parent: VNode; index: number }, start: number): VNode | null {
   const dirtyChildren = last.parent.dirtyChildren!;
-  for (let i = start; i < end; i++) {
+  for (let i = start; i < dirtyChildren.length; i++) {
     const child = dirtyChildren[i];
     if (child.dirty) {
       last.index = i;