Merge pull request #7446 from QwikDev/v2-insert-before-and-error-handling

fix: inserting new node edge case and creating error overlay

Author: wmertens

.changeset/cyan-bottles-speak.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: creating error overlay

.changeset/tame-glasses-explain.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: inserting new node edge case

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

@@ -200,15 +200,19 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
         }
         errorDiv.setAttribute('q:key', '_error_');
         const journal: VNodeJournal = [];
-        vnode_getDOMChildNodes(journal, vHost).forEach((child) => errorDiv.appendChild(child));
-        const vErrorDiv = vnode_newElement(errorDiv, 'error-host');
+
+        const vErrorDiv = vnode_newElement(errorDiv, 'errored-host');
+
+        vnode_getDOMChildNodes(journal, vHost, true).forEach((child) => {
+          vnode_insertBefore(journal, vErrorDiv, child, null);
+        });
         vnode_insertBefore(journal, vHost, vErrorDiv, null);
         vnode_applyJournal(journal);
       }
 
       if (err && err instanceof Error) {
         if (!('hostElement' in err)) {
-          (err as any)['hostElement'] = host;
+          (err as any)['hostElement'] = String(host);
         }
       }
       if (!isRecoverable(err)) {

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

@@ -491,21 +491,6 @@ export const vnode_diff = (
       // All is good.
       // console.log('  NOOP', String(vCurrent));
     } else {
-      const parent = vnode_getParent(vProjectedNode);
-      const isAlreadyProjected =
-        !!parent && !(vnode_isElementVNode(parent) && vnode_getElementName(parent) === QTemplate);
-      if (isAlreadyProjected && vParent !== parent) {
-        /**
-         * The node is already projected, but structure has been changed. In next steps we will
-         * insert the vProjectedNode at the end. However we will find existing projection elements
-         * (from already projected THE SAME projection as vProjectedNode!) during
-         * vnode_insertBefore. We need to remove vnode from the vnode tree to avoid referencing it
-         * to self and cause infinite loop. Don't remove it from DOM to avoid additional operations
-         * and flickering.
-         */
-        vnode_remove(journal, parent, vProjectedNode, false);
-      }
-
       // move from q:template to the target node
       vnode_insertBefore(
         journal,

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

@@ -965,11 +965,29 @@ export const vnode_insertBefore = (
   if (vnode_isElementVNode(parent)) {
     ensureMaterialized(parent);
   }
+  const newChildCurrentParent = newChild[VNodeProps.parent];
   if (newChild === insertBefore) {
     // invalid insertBefore. We can't insert before self reference
     // prevent infinity loop and putting self reference to next sibling
-    insertBefore = null;
+    if (newChildCurrentParent) {
+      // early return, as the newChild is already in the tree and we are already in the correct position
+      return;
+    } else {
+      // if the newChild is not in the tree, than we insert it at the end of the list
+      insertBefore = null;
+    }
+  }
+
+  // ensure that the previous node is unlinked.
+  if (
+    newChildCurrentParent &&
+    (newChild[VNodeProps.previousSibling] ||
+      newChild[VNodeProps.nextSibling] ||
+      newChildCurrentParent !== parent)
+  ) {
+    vnode_remove(journal, newChildCurrentParent, newChild, false);
   }
+
   let adjustedInsertBefore: VNode | null = null;
   if (insertBefore == null) {
     if (vnode_isVirtualVNode(parent)) {
@@ -1013,17 +1031,6 @@ export const vnode_insertBefore = (
       );
   }
 
-  // ensure that the previous node is unlinked.
-  const newChildCurrentParent = newChild[VNodeProps.parent];
-  if (
-    newChildCurrentParent &&
-    (newChild[VNodeProps.previousSibling] ||
-      newChild[VNodeProps.nextSibling] ||
-      (vnode_isElementVNode(newChildCurrentParent) && newChildCurrentParent !== parent))
-  ) {
-    vnode_remove(journal, newChildCurrentParent, newChild, false);
-  }
-
   // link newChild into the previous/next list
   const vNext = insertBefore;
   const vPrevious = vNext