Merge pull request #7953 from QwikDev/v2-memory-perf

perf: scheduler and rendering improvements

Author: wmertens

packages/docs/src/routes/api/qwik-testing/api.json

@@ -178,7 +178,7 @@
         }
       ],
       "kind": "Function",
-      "content": "```typescript\nexport declare function ssrRenderToDom(jsx: JSXOutput, opts?: {\n    debug?: boolean;\n    raw?: boolean;\n}): Promise<{\n    container: _DomContainer;\n    document: Document;\n    vNode: _VirtualVNode | null;\n    getStyles: () => Record<string, string | string[]>;\n}>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\n{ debug?: boolean; raw?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;{ container: \\_DomContainer; document: Document; vNode: \\_VirtualVNode \\| null; getStyles: () =&gt; Record&lt;string, string \\| string\\[\\]&gt;; }&gt;",
+      "content": "```typescript\nexport declare function ssrRenderToDom(jsx: JSXOutput, opts?: {\n    debug?: boolean;\n    raw?: boolean;\n}): Promise<{\n    container: _DomContainer;\n    document: Document;\n    vNode: _VNode | null;\n    getStyles: () => Record<string, string | string[]>;\n}>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\n{ debug?: boolean; raw?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;{ container: \\_DomContainer; document: Document; vNode: \\_VNode \\| null; getStyles: () =&gt; Record&lt;string, string \\| string\\[\\]&gt;; }&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/rendering.unit-util.tsx",
       "mdFile": "core.ssrrendertodom.md"
     },
@@ -223,7 +223,7 @@
         }
       ],
       "kind": "Function",
-      "content": "```typescript\nexport declare function vnode_fromJSX(jsx: JSXOutput): {\n    vParent: _ElementVNode;\n    vNode: _VNode | null;\n    document: _QDocument;\n    container: ClientContainer;\n};\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\n{ vParent: \\_ElementVNode; vNode: \\_VNode \\| null; document: \\_QDocument; container: ClientContainer; }",
+      "content": "```typescript\nexport declare function vnode_fromJSX(jsx: JSXOutput): {\n    vParent: _ElementVNode | _VirtualVNode;\n    vNode: _VNode | null;\n    document: _QDocument;\n    container: ClientContainer;\n};\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\n{ vParent: \\_ElementVNode \\| \\_VirtualVNode; vNode: \\_VNode \\| null; document: \\_QDocument; container: ClientContainer; }",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/vdom-diff.unit-util.ts",
       "mdFile": "core.vnode_fromjsx.md"
     },

packages/docs/src/routes/api/qwik-testing/index.mdx

@@ -439,7 +439,7 @@ export declare function ssrRenderToDom(
 ): Promise<{
   container: _DomContainer;
   document: Document;
-  vNode: _VirtualVNode | null;
+  vNode: _VNode | null;
   getStyles: () => Record<string, string | string[]>;
 }>;
 ```
@@ -485,7 +485,7 @@ _(Optional)_
 
 **Returns:**
 
-Promise&lt;\{ container: \_DomContainer; document: Document; vNode: \_VirtualVNode \| null; getStyles: () =&gt; Record&lt;string, string \| string[]&gt;; }&gt;
+Promise&lt;\{ container: \_DomContainer; document: Document; vNode: \_VNode \| null; getStyles: () =&gt; Record&lt;string, string \| string[]&gt;; }&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/rendering.unit-util.tsx)
 
@@ -597,7 +597,7 @@ Promise&lt;void&gt;
 
 ```typescript
 export declare function vnode_fromJSX(jsx: JSXOutput): {
-  vParent: _ElementVNode;
+  vParent: _ElementVNode | _VirtualVNode;
   vNode: _VNode | null;
   document: _QDocument;
   container: ClientContainer;
@@ -632,7 +632,7 @@ JSXOutput
 
 **Returns:**
 
-\{ vParent: \_ElementVNode; vNode: \_VNode \| null; document: \_QDocument; container: ClientContainer; }
+\{ vParent: \_ElementVNode \| \_VirtualVNode; vNode: \_VNode \| null; document: \_QDocument; container: ClientContainer; }
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/vdom-diff.unit-util.ts)
 

packages/qwik/src/core/client/chore-array.ts

@@ -0,0 +1,146 @@
+import { AsyncComputedSignalImpl } from '../reactive-primitives/impl/async-computed-signal-impl';
+import { StoreHandler } from '../reactive-primitives/impl/store';
+import { assertFalse } from '../shared/error/assert';
+import { isQrl } from '../shared/qrl/qrl-utils';
+import type { Chore } from '../shared/scheduler';
+import {
+  ssrNodeDocumentPosition,
+  vnode_documentPosition,
+} from '../shared/scheduler-document-position';
+import { ChoreType } from '../shared/util-chore-type';
+import type { ISsrNode } from '../ssr/ssr-types';
+import { vnode_isVNode } from './vnode';
+
+export class ChoreArray extends Array<Chore> {
+  add(value: Chore): number {
+    /// We need to ensure that the `queue` is sorted by priority.
+    /// 1. Find a place where to insert into.
+    const idx = sortedFindIndex(this, value);
+
+    if (idx < 0) {
+      /// 2. Insert the chore into the queue.
+      this.splice(~idx, 0, value);
+      return idx;
+    }
+
+    const existing = this[idx];
+    /**
+     * When a derived signal is updated we need to run vnode_diff. However the signal can update
+     * multiple times during component execution. For this reason it is necessary for us to update
+     * the chore with the latest result of the signal.
+     */
+    if (existing.$payload$ !== value.$payload$) {
+      existing.$payload$ = value.$payload$;
+    }
+    return idx;
+  }
+
+  delete(value: Chore) {
+    // const idx = this.sortedFindIndex(this, value);
+    // if (idx >= 0) {
+    //   this.splice(idx, 1);
+    // }
+    // return idx;
+    const idx = this.indexOf(value);
+    if (idx >= 0) {
+      this.splice(idx, 1);
+    }
+    return idx;
+  }
+}
+
+export function sortedFindIndex(sortedArray: Chore[], value: Chore): number {
+  /// We need to ensure that the `queue` is sorted by priority.
+  /// 1. Find a place where to insert into.
+  let bottom = 0;
+  let top = sortedArray.length;
+  while (bottom < top) {
+    const middle = bottom + ((top - bottom) >> 1);
+    const midChore = sortedArray[middle];
+    const comp = choreComparator(value, midChore);
+    if (comp < 0) {
+      top = middle;
+    } else if (comp > 0) {
+      bottom = middle + 1;
+    } else {
+      // We already have the host in the queue.
+      return middle;
+    }
+  }
+  return ~bottom;
+}
+
+/**
+ * Compares two chores to determine their execution order in the scheduler's queue.
+ *
+ * @param a - The first chore to compare
+ * @param b - The second chore to compare
+ * @returns A number indicating the relative order of the chores. A negative number means `a` runs
+ *   before `b`.
+ */
+export function choreComparator(a: Chore, b: Chore): number {
+  const macroTypeDiff = (a.$type$ & ChoreType.MACRO) - (b.$type$ & ChoreType.MACRO);
+  if (macroTypeDiff !== 0) {
+    return macroTypeDiff;
+  }
+
+  const aHost = a.$host$;
+  const bHost = b.$host$;
+
+  if (aHost !== bHost && aHost !== null && bHost !== null) {
+    if (vnode_isVNode(aHost) && vnode_isVNode(bHost)) {
+      // we are running on the client.
+      const hostDiff = vnode_documentPosition(aHost, bHost);
+      if (hostDiff !== 0) {
+        return hostDiff;
+      }
+    } else {
+      assertFalse(vnode_isVNode(aHost), 'expected aHost to be SSRNode but it is a VNode');
+      assertFalse(vnode_isVNode(bHost), 'expected bHost to be SSRNode but it is a VNode');
+      const hostDiff = ssrNodeDocumentPosition(aHost as ISsrNode, bHost as ISsrNode);
+      if (hostDiff !== 0) {
+        return hostDiff;
+      }
+    }
+  }
+
+  const microTypeDiff = (a.$type$ & ChoreType.MICRO) - (b.$type$ & ChoreType.MICRO);
+  if (microTypeDiff !== 0) {
+    return microTypeDiff;
+  }
+  // types are the same
+
+  const idxDiff = toNumber(a.$idx$) - toNumber(b.$idx$);
+  if (idxDiff !== 0) {
+    return idxDiff;
+  }
+
+  // If the host is the same (or missing), and the type is the same,  we need to compare the target.
+  if (a.$target$ !== b.$target$) {
+    if (isQrl(a.$target$) && isQrl(b.$target$) && a.$target$.$hash$ === b.$target$.$hash$) {
+      return 0;
+    }
+    // 1 means that we are going to process chores as FIFO
+    return 1;
+  }
+
+  // ensure that the effect chores are scheduled for the same target
+  // TODO: can we do this better?
+  if (
+    a.$type$ === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS &&
+    b.$type$ === ChoreType.RECOMPUTE_AND_SCHEDULE_EFFECTS &&
+    ((a.$target$ instanceof StoreHandler && b.$target$ instanceof StoreHandler) ||
+      (a.$target$ instanceof AsyncComputedSignalImpl &&
+        b.$target$ instanceof AsyncComputedSignalImpl)) &&
+    a.$payload$ !== b.$payload$
+  ) {
+    return 1;
+  }
+
+  // The chores are the same and will run only once
+  return 0;
+}
+
+function toNumber(value: number | string): number {
+  return typeof value === 'number' ? value : -1;
+}

packages/qwik/src/core/client/dom-container.ts

@@ -25,7 +25,6 @@ import {
   QLocaleAttr,
   QManifestHashAttr,
   QScopedStyle,
-  QSlotParent,
   QStyle,
   QStyleSelector,
   Q_PROPS_SEPARATOR,
@@ -42,32 +41,26 @@ import type { ContextId } from '../use/use-context';
 import { processVNodeData } from './process-vnode-data';
 import {
   VNodeFlags,
-  VNodeProps,
   type ContainerElement,
-  type ElementVNode,
   type ClientContainer as IClientContainer,
   type QDocument,
-  type VNode,
-  type VirtualVNode,
 } from './types';
 import { mapArray_get, mapArray_has, mapArray_set } from './util-mapArray';
 import {
   VNodeJournalOpCode,
   vnode_applyJournal,
   vnode_createErrorDiv,
   vnode_getDomParent,
-  vnode_getNextSibling,
-  vnode_getParent,
-  vnode_getProp,
   vnode_getProps,
   vnode_insertBefore,
   vnode_isElementVNode,
+  vnode_isVNode,
   vnode_isVirtualVNode,
   vnode_locate,
   vnode_newUnMaterializedElement,
-  vnode_setProp,
   type VNodeJournal,
 } from './vnode';
+import type { ElementVNode, VirtualVNode, VNode } from './vnode-impl';
 
 /** @public */
 export function getDomContainer(element: Element | VNode): IClientContainer {
@@ -89,7 +82,7 @@ export function getDomContainerFromQContainerElement(qContainerElement: Element)
 
 /** @internal */
 export function _getQContainerElement(element: Element | VNode): Element | null {
-  const qContainerElement: Element | null = Array.isArray(element)
+  const qContainerElement: Element | null = vnode_isVNode(element)
     ? (vnode_getDomParent(element, true) as Element)
     : element;
   return qContainerElement.closest(QContainerSelector);
@@ -175,13 +168,13 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     return inflateQRL(this, parseQRL(qrl)) as QRL<T>;
   }
 
-  handleError(err: any, host: HostElement | null): void {
+  handleError(err: any, host: VNode | null): void {
     if (qDev && host) {
       if (typeof document !== 'undefined') {
         const vHost = host as VirtualVNode;
         const journal: VNodeJournal = [];
-        const vHostParent = vnode_getParent(vHost) as VirtualVNode | ElementVNode | undefined;
-        const vHostNextSibling = vnode_getNextSibling(vHost);
+        const vHostParent = vHost.parent;
+        const vHostNextSibling = vHost.nextSibling as VNode | null;
         const vErrorDiv = vnode_createErrorDiv(document, vHost, err, journal);
         // If the host is an element node, we need to insert the error div into its parent.
         const insertHost = vnode_isElementVNode(vHost) ? vHostParent || vHost : vHost;
@@ -207,15 +200,15 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     errorStore.error = err;
   }
 
-  setContext<T>(host: HostElement, context: ContextId<T>, value: T): void {
+  setContext<T>(host: VNode, context: ContextId<T>, value: T): void {
     let ctx = this.getHostProp<Array<string | unknown>>(host, QCtxAttr);
     if (ctx == null) {
       this.setHostProp(host, QCtxAttr, (ctx = []));
     }
     mapArray_set(ctx, context.id, value, 0, true);
   }
 
-  resolveContext<T>(host: HostElement, contextId: ContextId<T>): T | undefined {
+  resolveContext<T>(host: VNode, contextId: ContextId<T>): T | undefined {
     while (host) {
       const ctx = this.getHostProp<Array<string | unknown>>(host, QCtxAttr);
       if (ctx != null && mapArray_has(ctx, contextId.id, 0)) {
@@ -226,27 +219,27 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     return undefined;
   }
 
-  getParentHost(host: HostElement): HostElement | null {
-    let vNode = vnode_getParent(host as any);
+  getParentHost(host: VNode): VNode | null {
+    let vNode: VNode | null = host.parent;
     while (vNode) {
       if (vnode_isVirtualVNode(vNode)) {
-        if (vnode_getProp(vNode, OnRenderProp, null) !== null) {
-          return vNode as any as HostElement;
+        if (vNode.getProp(OnRenderProp, null) !== null) {
+          return vNode;
         }
         vNode =
-          vnode_getParent(vNode) ||
+          vNode.parent ||
           // If virtual node, than it could be a slot so we need to read its parent.
-          vnode_getProp<VNode>(vNode, QSlotParent, this.vNodeLocate);
+          vNode.slotParent;
       } else {
-        vNode = vnode_getParent(vNode);
+        vNode = vNode.parent;
       }
     }
     return null;
   }
 
   setHostProp<T>(host: HostElement, name: string, value: T): void {
     const vNode: VirtualVNode = host as any;
-    vnode_setProp(vNode, name, value);
+    vNode.setProp(name, value);
   }
 
   getHostProp<T>(host: HostElement, name: string): T | null {
@@ -265,12 +258,12 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
         getObjectById = parseInt;
         break;
     }
-    return vnode_getProp(vNode, name, getObjectById);
+    return vNode.getProp(name, getObjectById);
   }
 
   ensureProjectionResolved(vNode: VirtualVNode): void {
-    if ((vNode[VNodeProps.flags] & VNodeFlags.Resolved) === 0) {
-      vNode[VNodeProps.flags] |= VNodeFlags.Resolved;
+    if ((vNode.flags & VNodeFlags.Resolved) === 0) {
+      vNode.flags |= VNodeFlags.Resolved;
       const props = vnode_getProps(vNode);
       for (let i = 0; i < props.length; i = i + 2) {
         const prop = props[i] as string;
@@ -279,7 +272,6 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
           if (typeof value == 'string') {
             const projection = this.vNodeLocate(value);
             props[i + 1] = projection;
-            vnode_getProp(projection, QSlotParent, (id) => this.vNodeLocate(id));
           }
         }
       }

packages/qwik/src/core/client/process-vnode-data.ts

@@ -1,6 +1,7 @@
 // NOTE: we want to move this function to qwikloader, and therefore this function should not have any external dependencies
 import { VNodeDataChar, VNodeDataSeparator } from '../shared/vnode-data-types';
-import type { ContainerElement, ElementVNode, QDocument } from './types';
+import type { ContainerElement, QDocument } from './types';
+import type { ElementVNode } from './vnode-impl';
 
 /**
  * Process the VNodeData script tags and store the VNodeData in the VNodeDataMap.