perf: small improvements for element and component render

Author: Varixo

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

@@ -277,7 +277,6 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
           if (typeof value == 'string') {
             const projection = this.vNodeLocate(value);
             props[i + 1] = projection;
-            projection.getSlotParent();
           }
         }
       }

packages/qwik/src/core/client/vnode-diff.ts

@@ -51,7 +51,6 @@ import {
   vnode_getDomParentVNode,
   vnode_getElementName,
   vnode_getFirstChild,
-  vnode_getNode,
   vnode_getProjectionParentComponent,
   vnode_getProps,
   vnode_getText,
@@ -453,7 +452,7 @@ export const vnode_diff = (
   }
 
   function expectSlot() {
-    const vHost = vnode_getProjectionParentComponent(vParent, container.rootVNode);
+    const vHost = vnode_getProjectionParentComponent(vParent);
 
     const slotNameKey = getSlotNameKey(vHost);
     // console.log('expectSlot', JSON.stringify(slotNameKey));
@@ -668,15 +667,16 @@ export const vnode_diff = (
     }
     const key = jsx.key;
     if (key) {
-      element.setAttribute(ELEMENT_KEY, key);
       (vNewNode as ElementVNode).setProp(ELEMENT_KEY, key);
     }
 
     // append class attribute if styleScopedId exists and there is no class attribute
-    const classAttributeExists =
-      hasClassAttr(jsx.varProps) || (jsx.constProps && hasClassAttr(jsx.constProps));
-    if (!classAttributeExists && scopedStyleIdPrefix) {
-      element.setAttribute('class', scopedStyleIdPrefix);
+    if (scopedStyleIdPrefix) {
+      const classAttributeExists =
+        hasClassAttr(jsx.varProps) || (jsx.constProps && hasClassAttr(jsx.constProps));
+      if (!classAttributeExists) {
+        element.setAttribute('class', scopedStyleIdPrefix);
+      }
     }
 
     vnode_insertBefore(journal, vParent as ElementVNode, vNewNode as ElementVNode, vCurrent);
@@ -693,7 +693,7 @@ export const vnode_diff = (
 
     const element = container.document.createElementNS(elementNamespace, elementName);
     vNewNode = vnode_newElement(element, elementName);
-    (vNewNode as ElementVNode).flags |= elementNamespaceFlag;
+    vNewNode.flags |= elementNamespaceFlag;
     return element;
   }
 
@@ -702,7 +702,6 @@ export const vnode_diff = (
       vCurrent && vnode_isElementVNode(vCurrent) && elementName === vnode_getElementName(vCurrent);
     const jsxKey: string | null = jsx.key;
     let needsQDispatchEventPatch = false;
-    const currentFile = getFileLocationFromJsx(jsx.dev);
     if (!isSameElementName || jsxKey !== getKey(vCurrent)) {
       // So we have a key and it does not match the current node.
       // We need to do a forward search to find it.
@@ -735,22 +734,23 @@ export const vnode_diff = (
     }
     const vNode = (vNewNode || vCurrent) as ElementVNode;
 
-    const element = (vNode as ElementVNode).element as QElement;
+    const element = vNode.element as QElement;
     if (!element.vNode) {
       element.vNode = vNode;
     }
 
     needsQDispatchEventPatch =
-      setBulkProps(vNode, jsxAttrs, currentFile) || needsQDispatchEventPatch;
+      setBulkProps(vNode, jsxAttrs, (isDev && getFileLocationFromJsx(jsx.dev)) || null) ||
+      needsQDispatchEventPatch;
     if (needsQDispatchEventPatch) {
       // Event handler needs to be patched onto the element.
       if (!element.qDispatchEvent) {
         element.qDispatchEvent = (event: Event, scope: QwikLoaderEventScope) => {
           const eventName = event.type;
           const eventProp = ':' + scope.substring(1) + ':' + eventName;
           const qrls = [
-            (vNode as ElementVNode).getProp<QRL>(eventProp, null),
-            (vNode as ElementVNode).getProp<QRL>(HANDLER_PREFIX + eventProp, null),
+            vNode.getProp<QRL>(eventProp, null),
+            vNode.getProp<QRL>(HANDLER_PREFIX + eventProp, null),
           ];
           let returnValue = false;
           qrls.flat(2).forEach((qrl) => {
@@ -778,7 +778,7 @@ export const vnode_diff = (
   function setBulkProps(
     vnode: ElementVNode,
     srcAttrs: ClientAttrs,
-    currentFile?: string | null
+    currentFile: string | null
   ): boolean {
     vnode_ensureElementInflated(vnode);
     const dstAttrs = vnode_getProps(vnode) as ClientAttrs;
@@ -792,12 +792,12 @@ export const vnode_diff = (
 
     const record = (key: string, value: any) => {
       if (key.startsWith(':')) {
-        (vnode as ElementVNode).setProp(key, value);
+        vnode.setProp(key, value);
         return;
       }
 
       if (key === 'ref') {
-        const element = vnode_getNode(vnode) as Element;
+        const element = vnode.element;
         if (isSignal(value)) {
           value.value = element;
           return;
@@ -815,7 +815,7 @@ export const vnode_diff = (
         value = trackSignalAndAssignHost(value, vnode, key, container, NON_CONST_SUBSCRIPTION_DATA);
       }
 
-      (vnode as ElementVNode).setAttr(
+      vnode.setAttr(
         key,
         value !== null ? serializeAttribute(key, value, scopedStyleIdPrefix) : null,
         journal
@@ -1059,8 +1059,12 @@ export const vnode_diff = (
           ELEMENT_PROPS,
           container.$getObjectById$
         );
-        const propsAreDifferent = propsDiffer(jsxProps, vNodeProps);
-        shouldRender = shouldRender || propsAreDifferent;
+        let propsAreDifferent = false;
+        if (!shouldRender) {
+          propsAreDifferent = propsDiffer(jsxProps, vNodeProps);
+          shouldRender = shouldRender || propsAreDifferent;
+        }
+
         if (shouldRender) {
           if (propsAreDifferent) {
             if (vNodeProps) {

packages/qwik/src/core/client/vnode-impl.ts

@@ -7,26 +7,26 @@ import {
   type VNodeJournal,
 } from './vnode';
 import type { ChoreArray } from './chore-array';
+import { _EFFECT_BACK_REF } from '../reactive-primitives/types';
+import { BackRef } from '../reactive-primitives/cleanup';
 
 /** @internal */
-export abstract class VNode {
-  props: (string | null | boolean)[] | null = null;
+export abstract class VNode extends BackRef {
+  props: unknown[] | null = null;
   slotParent: VNode | null = null;
   // scheduled chores for this vnode
   chores: ChoreArray | null = null;
   // blocked chores for this vnode
   blockedChores: ChoreArray | null = null;
 
-  getSlotParent(): VNode | null {
-    return this.slotParent;
-  }
-
   constructor(
     public flags: VNodeFlags,
     public parent: ElementVNode | VirtualVNode | null,
     public previousSibling: VNode | null | undefined,
     public nextSibling: VNode | null | undefined
-  ) {}
+  ) {
+    super();
+  }
 
   getProp<T>(key: string, getObject: ((id: string) => any) | null): T | null {
     const type = this.flags;

packages/qwik/src/core/client/vnode.ts

@@ -1968,17 +1968,14 @@ const isElement = (node: any): node is Element =>
  * @param rootVNode
  * @returns
  */
-export const vnode_getProjectionParentComponent = (
-  vHost: VNode,
-  rootVNode: ElementVNode
-): VirtualVNode | null => {
+export const vnode_getProjectionParentComponent = (vHost: VNode): VirtualVNode | null => {
   let projectionDepth = 1;
   while (projectionDepth--) {
     while (
       vHost &&
       (vnode_isVirtualVNode(vHost) ? vHost.getProp(OnRenderProp, null) === null : true)
     ) {
-      const qSlotParent = vHost.getSlotParent();
+      const qSlotParent = vHost.slotParent;
       const vProjectionParent = vnode_isVirtualVNode(vHost) && qSlotParent;
       if (vProjectionParent) {
         // We found a projection, so we need to go up one more level.

packages/qwik/src/core/qwik.core.api.md

@@ -1839,8 +1839,10 @@ export class _VirtualVNode extends _VNode {
 // @public (undocumented)
 export type VisibleTaskStrategy = 'intersection-observer' | 'document-ready' | 'document-idle';
 
+// Warning: (ae-forgotten-export) The symbol "BackRef" needs to be exported by the entry point index.d.ts
+//
 // @internal (undocumented)
-export abstract class _VNode {
+export abstract class _VNode extends BackRef {
     constructor(flags: _VNodeFlags, parent: _ElementVNode | _VirtualVNode | null, previousSibling: _VNode | null | undefined, nextSibling: _VNode | null | undefined);
     // (undocumented)
     blockedChores: ChoreArray | null;
@@ -1855,15 +1857,13 @@ export abstract class _VNode {
     // (undocumented)
     getProp<T>(key: string, getObject: ((id: string) => any) | null): T | null;
     // (undocumented)
-    getSlotParent(): _VNode | null;
-    // (undocumented)
     nextSibling: _VNode | null | undefined;
     // (undocumented)
     parent: _ElementVNode | _VirtualVNode | null;
     // (undocumented)
     previousSibling: _VNode | null | undefined;
     // (undocumented)
-    props: (string | null | boolean)[] | null;
+    props: unknown[] | null;
     // (undocumented)
     setAttr(key: string, value: string | null | boolean, journal: VNodeJournal | null): void;
     // (undocumented)

packages/qwik/src/core/shared/utils/scoped-styles.ts

@@ -6,12 +6,7 @@ export const styleContent = (styleId: string): string => {
 };
 
 export function hasClassAttr(props: Props): boolean {
-  for (const key in props) {
-    if (Object.prototype.hasOwnProperty.call(props, key) && isClassAttr(key)) {
-      return true;
-    }
-  }
-  return false;
+  return 'class' in props || 'className' in props;
 }
 
 export function isClassAttr(key: string): boolean {