Merge pull request #7448 from QwikDev/v2-vnode-refs

fix: don't execute QRLs for elements marked as deleted

Author: Varixo

.changeset/strange-bottles-sleep.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: don't execute QRLs for elements marked as deleted

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

@@ -83,25 +83,6 @@ export function getDomContainerFromQContainerElement(qContainerElement: Element)
   let container = qElement.qContainer;
   if (!container) {
     container = new DomContainer(qElement);
-
-    const containerAttributes: Record<string, string> = {};
-    if (qElement) {
-      const attrs = qElement.attributes;
-      if (attrs) {
-        for (let index = 0; index < attrs.length; index++) {
-          const attr = attrs[index];
-          if (attr.name === Q_PROPS_SEPARATOR) {
-            continue;
-          }
-          containerAttributes[attr.name] = attr.value;
-        }
-      }
-    }
-    (container as DomContainer).$serverData$ = { containerAttributes };
-
-    qElement.setAttribute(QContainerAttr, QContainerValue.RESUMED);
-
-    qElement.qContainer = container;
   }
   return container;
 }
@@ -163,22 +144,23 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
     this.$instanceHash$ = element.getAttribute(QInstanceAttr)!;
     this.qManifestHash = element.getAttribute(QManifestHashAttr)!;
     this.rootVNode = vnode_newUnMaterializedElement(this.element);
-    // These are here to initialize all properties at once for single class transition
-    this.$rawStateData$ = null!;
-    this.$stateData$ = null!;
+    this.$rawStateData$ = [];
+    this.$stateData$ = [];
     const document = this.element.ownerDocument as QDocument;
     if (!document.qVNodeData) {
       processVNodeData(document);
     }
-    this.$rawStateData$ = [];
-    this.$stateData$ = [];
+    this.$qFuncs$ = getQFuncs(document, this.$instanceHash$) || EMPTY_ARRAY;
+    this.$setServerData$();
+    element.setAttribute(QContainerAttr, QContainerValue.RESUMED);
+    element.qContainer = this;
+
     const qwikStates = element.querySelectorAll('script[type="qwik/state"]');
     if (qwikStates.length !== 0) {
       const lastState = qwikStates[qwikStates.length - 1];
       this.$rawStateData$ = JSON.parse(lastState.textContent!);
       this.$stateData$ = wrapDeserializerProxy(this, this.$rawStateData$) as unknown[];
     }
-    this.$qFuncs$ = getQFuncs(document, this.$instanceHash$) || EMPTY_ARRAY;
   }
 
   $setRawState$(id: number, vParent: ElementVNode | VirtualVNode): void {
@@ -372,4 +354,21 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
       this.$journal$.push(VNodeJournalOpCode.Insert, this.document.head, null, styleElement);
     }
   }
+
+  // TODO: should be moved to the Qwik Router?
+  /** Set the server data for the Qwik Router. */
+  private $setServerData$(): void {
+    const containerAttributes: Record<string, string> = {};
+    const attrs = this.element.attributes;
+    if (attrs) {
+      for (let index = 0; index < attrs.length; index++) {
+        const attr = attrs[index];
+        if (attr.name === Q_PROPS_SEPARATOR) {
+          continue;
+        }
+        containerAttributes[attr.name] = attr.value;
+      }
+    }
+    this.$serverData$ = { containerAttributes };
+  }
 }

packages/qwik/src/core/client/queue-qrl.ts

@@ -3,8 +3,7 @@ import type { QRLInternal } from '../shared/qrl/qrl-class';
 import { ChoreType } from '../shared/util-chore-type';
 import { getInvokeContext } from '../use/use-core';
 import { useLexicalScope } from '../use/use-lexical-scope.public';
-import { _getQContainerElement, getDomContainer } from './dom-container';
-import type { ElementVNode } from './types';
+import { getDomContainer } from './dom-container';
 
 /**
  * This is called by qwik-loader to schedule a QRL. It has to be synchronous.
@@ -15,8 +14,14 @@ export const queueQRL = (...args: unknown[]) => {
   // This will already check container
   const [runQrl] = useLexicalScope<[QRLInternal<(...args: unknown[]) => unknown>]>();
   const context = getInvokeContext();
-  const hostElement = context.$hostElement$ as ElementVNode;
-  const container = getDomContainer(hostElement);
+  const hostElement = context.$hostElement$;
+
+  if (!hostElement) {
+    // silently ignore if there is no host element, the element might have been removed
+    return;
+  }
+
+  const container = getDomContainer(context.$element$!);
 
   const scheduler = container.$scheduler$;
   if (!scheduler) {

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

@@ -46,6 +46,7 @@ import type { HostElement, QElement, QwikLoaderEventScope, qWindow } from '../sh
 import { DEBUG_TYPE, QContainerValue, VirtualType } from '../shared/types';
 import type { DomContainer } from './dom-container';
 import {
+  ElementVNodeProps,
   VNodeFlags,
   VNodeProps,
   type ClientAttrKey,
@@ -739,11 +740,14 @@ export const vnode_diff = (
       mapArray_set(jsxAttrs, ELEMENT_KEY, jsxKey, 0);
     }
     const vNode = (vNewNode || vCurrent) as ElementVNode;
+
+    const element = vNode[ElementVNodeProps.element] as QElement;
+    element.vNode = new WeakRef(vNode);
+
     needsQDispatchEventPatch =
       setBulkProps(vNode, jsxAttrs, currentFile) || needsQDispatchEventPatch;
     if (needsQDispatchEventPatch) {
       // Event handler needs to be patched onto the element.
-      const element = vnode_getNode(vNode) as QElement;
       if (!element.qDispatchEvent) {
         element.qDispatchEvent = (event: Event, scope: QwikLoaderEventScope) => {
           const eventName = event.type;