feat(cursors): migrate to single cursor prop

Author: Varixo

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

@@ -24,7 +24,6 @@ import type { ValueOrPromise } from '../utils/types';
 import type { Container, HostElement } from '../types';
 import type { VNode } from '../vnode/vnode';
 import { VNodeFlags, type ClientContainer } from '../../client/types';
-import type { Cursor } from './cursor';
 import type { NodeProp } from '../../reactive-primitives/subscription-data';
 import { isSignal, scheduleEffects } from '../../reactive-primitives/utils';
 import type { Signal } from '../../reactive-primitives/signal.public';
@@ -33,7 +32,7 @@ import type { ISsrNode, SSRContainer } from '../../ssr/ssr-types';
 import type { ElementVNode } from '../vnode/element-vnode';
 import { VNodeOperationType } from '../vnode/enums/vnode-operation-type.enum';
 import type { JSXOutput } from '../jsx/types/jsx-node';
-import { getAfterFlushTasks, setAfterFlushTasks, setExtraPromises } from './cursor-props';
+import { type CursorData } from './cursor-props';
 import { invoke, newInvokeContext } from '../../use/use-core';
 import type { WrappedSignalImpl } from '../../reactive-primitives/impl/wrapped-signal-impl';
 import { SignalFlags } from '../../reactive-primitives/types';
@@ -58,7 +57,7 @@ import { SignalFlags } from '../../reactive-primitives/types';
 export function executeTasks(
   vNode: VNode,
   container: Container,
-  cursor: Cursor
+  cursorData: CursorData
 ): ValueOrPromise<void> {
   vNode.dirty &= ~ChoreBits.TASKS;
 
@@ -71,7 +70,6 @@ export function executeTasks(
 
   // Execute all tasks in sequence
   let taskPromise: Promise<void> | undefined;
-  let extraPromises: Promise<void>[] | undefined;
 
   for (const item of elementSeq) {
     if (item instanceof Task) {
@@ -88,12 +86,7 @@ export function executeTasks(
         runResource(task as ResourceDescriptor<TaskFn>, container, vNode);
       } else if (task.$flags$ & TaskFlags.VISIBLE_TASK) {
         // VisibleTasks: store for execution after flush (don't execute now)
-        let visibleTasks = getAfterFlushTasks(cursor);
-        if (!visibleTasks) {
-          visibleTasks = [];
-          setAfterFlushTasks(cursor, visibleTasks);
-        }
-        visibleTasks.push(task);
+        (cursorData.afterFlushTasks ||= []).push(task);
       } else {
         // Regular tasks: chain promises only between each other
         const result = runTask(task, container, vNode);
@@ -103,17 +96,15 @@ export function executeTasks(
               ? taskPromise.then(() => result as Promise<void>)
               : (result as Promise<void>);
           } else {
-            extraPromises ||= [];
+            // TODO: set extrapromises on vNode instead of cursorData if server
+            const extraPromises = (cursorData.extraPromises ||= []);
             extraPromises.push(result as Promise<void>);
           }
         }
       }
     }
   }
 
-  if (extraPromises) {
-    setExtraPromises(isServerPlatform() ? vNode : cursor, extraPromises);
-  }
   return taskPromise;
 }
 

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

@@ -2,14 +2,8 @@ import { runTask } from '../../use/use-task';
 import { QContainerValue, type Container } from '../types';
 import { dangerouslySetInnerHTML, QContainerAttr } from '../utils/markers';
 import { VNodeOperationType } from '../vnode/enums/vnode-operation-type.enum';
-import type { VNode } from '../vnode/vnode';
 import type { Cursor } from './cursor';
-import {
-  getAfterFlushTasks,
-  getCursorJournal,
-  setAfterFlushTasks,
-  setCursorJournal,
-} from './cursor-props';
+import { getCursorData, type CursorData } from './cursor-props';
 
 /**
  * Executes the flush phase for a cursor.
@@ -18,12 +12,13 @@ import {
  * @param container - The container to execute the flush phase for
  */
 export function executeFlushPhase(cursor: Cursor, container: Container): void {
-  flushChanges(cursor);
-  executeAfterFlush(container, cursor);
+  const cursorData = getCursorData(cursor)!;
+  flushChanges(cursorData);
+  executeAfterFlush(container, cursorData);
 }
 
-function flushChanges(vNode: VNode): void {
-  const journal = getCursorJournal(vNode);
+function flushChanges(cursorData: CursorData): void {
+  const journal = cursorData.journal;
   if (!journal || journal.length === 0) {
     return;
   }
@@ -74,19 +69,19 @@ function flushChanges(vNode: VNode): void {
       }
     }
   }
-  setCursorJournal(vNode, null);
+  cursorData.journal = null;
 }
 
-function executeAfterFlush(container: Container, cursor: Cursor): void {
-  const visibleTasks = getAfterFlushTasks(cursor);
+function executeAfterFlush(container: Container, cursorData: CursorData): void {
+  const visibleTasks = cursorData.afterFlushTasks;
   if (!visibleTasks || visibleTasks.length === 0) {
     return;
   }
   for (const visibleTask of visibleTasks) {
     const task = visibleTask;
     runTask(task, container, task.$el$);
   }
-  setAfterFlushTasks(cursor, null);
+  cursorData.afterFlushTasks = null;
 }
 
 const isBooleanAttr = (element: Element, key: string): boolean => {

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

@@ -1,6 +1,4 @@
-import { VNodeFlags } from '../../client/types';
 import type { VNode } from '../vnode/vnode';
-import type { Props } from '../jsx/jsx-runtime';
 import { isCursor } from './cursor';
 import { removeCursorFromQueue } from './cursor-queue';
 import type { Container } from '../types';
@@ -12,71 +10,16 @@ import { resolveCursor } from './cursor-walker';
  * Keys used to store cursor-related data in vNode props. These are internal properties that should
  * not conflict with user props.
  */
-const CURSOR_PRIORITY_KEY = ':priority';
-const CURSOR_POSITION_KEY = ':position';
-const CURSOR_CHILD_KEY = ':childIndex';
-const CURSOR_CONTAINER_KEY = ':cursorContainer';
-const VNODE_PROMISE_KEY = ':promise';
-const CURSOR_EXTRA_PROMISES_KEY = ':extraPromises';
-const CURSOR_JOURNAL_KEY = ':journal';
-const CURSOR_AFTER_FLUSH_TASKS_KEY = ':afterFlushTasks';
+const CURSOR_DATA_KEY = ':cursor';
 
-/**
- * Gets the priority of a cursor vNode.
- *
- * @param vNode - The cursor vNode
- * @returns The priority, or null if not a cursor
- */
-export function getCursorPriority(vNode: VNode): number | null {
-  if (!(vNode.flags & VNodeFlags.Cursor)) {
-    return null;
-  }
-  const props = vNode.props as Props;
-  return (props[CURSOR_PRIORITY_KEY] as number) ?? null;
-}
-
-/**
- * Sets the priority of a cursor vNode.
- *
- * @param vNode - The vNode to set priority on
- * @param priority - The priority value
- */
-export function setCursorPriority(vNode: VNode, priority: number): void {
-  const props = (vNode.props ||= {});
-  props[CURSOR_PRIORITY_KEY] = priority;
-}
-
-/**
- * Gets the current cursor position from a cursor vNode.
- *
- * @param vNode - The cursor vNode
- * @returns The cursor position, or null if at root or not a cursor
- */
-export function getCursorPosition(vNode: VNode): VNode | null {
-  if (!(vNode.flags & VNodeFlags.Cursor)) {
-    return null;
-  }
-  const props = vNode.props;
-  return (props?.[CURSOR_POSITION_KEY] as VNode | null) ?? null;
-}
-
-/**
- * Set the next child to process index in a vNode.
- *
- * @param vNode - The vNode
- * @param childIndex - The child index to set
- */
-export function setNextChildIndex(vNode: VNode, childIndex: number): void {
-  const props = vNode.props as Props;
-  // We could also add a dirtycount to avoid checking all children after completion
-  // perf: we could also use dirtychild index 0 for the index instead
-  props[CURSOR_CHILD_KEY] = childIndex;
-}
-
-/** Gets the next child to process index from a vNode. */
-export function getNextChildIndex(vNode: VNode): number | null {
-  const props = vNode.props as Props;
-  return (props[CURSOR_CHILD_KEY] as number) ?? null;
+export interface CursorData {
+  afterFlushTasks: Task[] | null;
+  extraPromises: Promise<void>[] | null;
+  journal: VNodeJournal | null;
+  container: Container;
+  position: VNode | null;
+  priority: number;
+  promise: Promise<void> | null;
 }
 
 /**
@@ -87,158 +30,70 @@ export function getNextChildIndex(vNode: VNode): number | null {
  */
 export function setCursorPosition(
   container: Container,
-  vNode: VNode,
+  cursorData: CursorData,
   position: VNode | null
 ): void {
-  const props = vNode.props as Props;
-  props[CURSOR_POSITION_KEY] = position;
+  cursorData.position = position;
   if (position && isCursor(position)) {
-    mergeCursors(container, vNode, position);
+    mergeCursors(container, cursorData, position);
   }
 }
 
-function mergeCursors(container: Container, newCursor: VNode, oldCursor: VNode): void {
+function mergeCursors(container: Container, newCursorData: CursorData, oldCursor: VNode): void {
   // delete from global cursors queue
   removeCursorFromQueue(oldCursor);
   resolveCursor(container);
+  const oldCursorData = getCursorData(oldCursor)!;
   // merge after flush tasks
-  const oldAfterFlushTasks = getAfterFlushTasks(oldCursor);
+  const oldAfterFlushTasks = oldCursorData.afterFlushTasks;
   if (oldAfterFlushTasks && oldAfterFlushTasks.length > 0) {
-    const newAfterFlushTasks = getAfterFlushTasks(newCursor);
+    const newAfterFlushTasks = newCursorData.afterFlushTasks;
     if (newAfterFlushTasks) {
       newAfterFlushTasks.push(...oldAfterFlushTasks);
     } else {
-      setAfterFlushTasks(newCursor, oldAfterFlushTasks);
+      newCursorData.afterFlushTasks = oldAfterFlushTasks;
     }
   }
   // merge extra promises
-  const oldExtraPromises = getExtraPromises(oldCursor);
+  const oldExtraPromises = oldCursorData.extraPromises;
   if (oldExtraPromises && oldExtraPromises.length > 0) {
-    const newExtraPromises = getExtraPromises(newCursor);
+    const newExtraPromises = newCursorData.extraPromises;
     if (newExtraPromises) {
       newExtraPromises.push(...oldExtraPromises);
     } else {
-      setExtraPromises(newCursor, oldExtraPromises);
+      newCursorData.extraPromises = oldExtraPromises;
     }
   }
   // merge journal
-  const oldJournal = getCursorJournal(oldCursor);
+  const oldJournal = oldCursorData.journal;
   if (oldJournal && oldJournal.length > 0) {
-    const newJournal = getCursorJournal(newCursor);
+    const newJournal = newCursorData.journal;
     if (newJournal) {
       newJournal.push(...oldJournal);
     } else {
-      setCursorJournal(newCursor, oldJournal);
+      newCursorData.journal = oldJournal;
     }
   }
 }
 
 /**
- * Gets the blocking promise from a vNode.
- *
- * @param vNode - The vNode
- * @returns The promise, or null if none or not a cursor
- */
-export function getVNodePromise(vNode: VNode): Promise<void> | null {
-  const props = vNode.props;
-  return (props?.[VNODE_PROMISE_KEY] as Promise<void> | null) ?? null;
-}
-
-/**
- * Sets the blocking promise on a vNode.
- *
- * @param vNode - The vNode
- * @param promise - The promise to set, or null to clear
- */
-export function setVNodePromise(vNode: VNode, promise: Promise<void> | null): void {
-  const props = (vNode.props ||= {});
-  props[VNODE_PROMISE_KEY] = promise;
-}
-
-/**
- * Gets extra promises from a vNode.
- *
- * @param vNode - The vNode
- * @returns The extra promises set
- */
-export function getExtraPromises(vNode: VNode): Promise<void>[] | null {
-  const props = vNode.props;
-  return (props?.[CURSOR_EXTRA_PROMISES_KEY] as Promise<void>[] | null) ?? null;
-}
-
-/**
- * Sets extra promises on a vNode.
- *
- * @param vNode - The vNode
- * @param extraPromises - The extra promises set, or null to clear
- */
-export function setExtraPromises(vNode: VNode, extraPromises: Promise<void>[] | null): void {
-  const props = (vNode.props ||= {});
-  props[CURSOR_EXTRA_PROMISES_KEY] = extraPromises;
-}
-
-/**
- * Sets the cursor container on a vNode.
- *
- * @param vNode - The vNode
- * @param container - The container to set
- */
-export function setCursorContainer(vNode: VNode, container: Container): void {
-  const props = (vNode.props ||= {});
-  props[CURSOR_CONTAINER_KEY] = container;
-}
-
-/**
- * Gets the cursor container from a vNode.
- *
- * @param vNode - The vNode
- * @returns The container, or null if none or not a cursor
- */
-export function getCursorContainer(vNode: VNode): Container | null {
-  const props = vNode.props;
-  return (props?.[CURSOR_CONTAINER_KEY] as Container | null) ?? null;
-}
-
-/**
- * Sets the cursor journal on a vNode.
- *
- * @param vNode - The vNode
- * @param journal - The journal to set
- */
-export function setCursorJournal(vNode: VNode, journal: VNodeJournal | null): void {
-  const props = (vNode.props ||= {});
-  props[CURSOR_JOURNAL_KEY] = journal;
-}
-
-/**
- * Gets the cursor journal from a vNode.
- *
- * @param vNode - The vNode
- * @returns The journal, or null if none or not a cursor
- */
-export function getCursorJournal(vNode: VNode): VNodeJournal | null {
-  const props = vNode.props;
-  return (props?.[CURSOR_JOURNAL_KEY] as VNodeJournal | null) ?? null;
-}
-
-/**
- * Gets the after flush tasks from a vNode.
+ * Gets the cursor data from a vNode.
  *
  * @param vNode - The vNode
- * @returns The after flush tasks, or null if none or not a cursor
+ * @returns The cursor data, or null if none or not a cursor
  */
-export function getAfterFlushTasks(vNode: VNode): Task[] | null {
+export function getCursorData(vNode: VNode): CursorData | null {
   const props = vNode.props;
-  return (props?.[CURSOR_AFTER_FLUSH_TASKS_KEY] as Task[] | null) ?? null;
+  return (props?.[CURSOR_DATA_KEY] as CursorData | null) ?? null;
 }
 
 /**
- * Sets the after flush tasks on a vNode.
+ * Sets the cursor data on a vNode.
  *
  * @param vNode - The vNode
- * @param afterFlushTasks - The after flush tasks to set, or null to clear
+ * @param cursorData - The cursor data to set, or null to clear
  */
-export function setAfterFlushTasks(vNode: VNode, afterFlushTasks: Task[] | null): void {
+export function setCursorData(vNode: VNode, cursorData: CursorData | null): void {
   const props = (vNode.props ||= {});
-  props[CURSOR_AFTER_FLUSH_TASKS_KEY] = afterFlushTasks;
+  props[CURSOR_DATA_KEY] = cursorData;
 }