fix(v2): fix toggle named projection

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

@@ -64,7 +64,7 @@ import {
   vnode_setProp,
   type VNodeJournal,
 } from './vnode';
-import { vnode_diff } from './vnode-diff';
+import { isSlotProp, vnode_diff } from './vnode-diff';
 
 /** @public */
 export function getDomContainer(element: Element | ElementVNode): IClientContainer {
@@ -289,7 +289,7 @@ export class DomContainer extends _SharedContainer implements IClientContainer,
       vNode[VNodeProps.flags] |= VNodeFlags.Resolved;
       for (let i = vnode_getPropStartIndex(vNode); i < vNode.length; i = i + 2) {
         const prop = vNode[i] as string;
-        if (!prop.startsWith('q:')) {
+        if (isSlotProp(prop)) {
           const value = vNode[i + 1];
           if (typeof value == 'string') {
             vNode[i + 1] = this.$vnodeLocate$(value);

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

@@ -84,6 +84,7 @@ import {
   vnode_setProp,
   vnode_setText,
   vnode_truncate,
+  vnode_walkVNode,
   type VNodeJournal,
 } from './vnode';
 import { getNewElementNamespaceData } from './vnode-namespace';
@@ -396,7 +397,7 @@ export const vnode_diff = (
         // we need to create empty projections for all the slots to remove unused slots content
         for (let i = vnode_getPropStartIndex(host); i < host.length; i = i + 2) {
           const prop = host[i] as string;
-          if (!prop.startsWith('q:')) {
+          if (isSlotProp(prop)) {
             const slotName = prop;
             projections.push(slotName);
             projections.push(createProjectionJSXNode(slotName));
@@ -1027,7 +1028,7 @@ export const vnode_diff = (
     if (host) {
       for (let i = vnode_getPropStartIndex(host); i < host.length; i = i + 2) {
         const prop = host[i] as string;
-        if (!prop.startsWith('q:')) {
+        if (isSlotProp(prop)) {
           const value = host[i + 1];
           container.setHostProp(vNewNode, prop, value);
         }
@@ -1189,8 +1190,7 @@ export function cleanup(container: ClientContainer, vNode: VNode) {
         const attrs = vCursor;
         for (let i = VirtualVNodeProps.PROPS_OFFSET; i < attrs.length; i = i + 2) {
           const key = attrs[i] as string;
-          if (!key.startsWith(':') && !key.startsWith('q:')) {
-            // any prop which does not start with `:` or `q:` is a content-projection prop.
+          if (!isParentSlotProp(key) && isSlotProp(key)) {
             const value = attrs[i + 1];
             if (value) {
               attrs[i + 1] = null; // prevent infinite loop
@@ -1220,6 +1220,17 @@ export function cleanup(container: ClientContainer, vNode: VNode) {
           vCursor = vFirstChild;
           continue;
         }
+      } else if (vCursor === vNode) {
+        /**
+         * If it is a projection and we are at the root, then we should only walk the children to
+         * materialize the projection content. This is because we could have references in the vnode
+         * refs map which need to be materialized before cleanup.
+         */
+        const vFirstChild = vnode_getFirstChild(vCursor);
+        if (vFirstChild) {
+          vnode_walkVNode(vFirstChild);
+          return;
+        }
       }
     }
     // Out of children
@@ -1233,10 +1244,7 @@ export function cleanup(container: ClientContainer, vNode: VNode) {
       vCursor = vNextSibling;
       continue;
     }
-    if (vCursor === vNode) {
-      // we are back where we started, we are done.
-      return;
-    }
+
     // Out of siblings, go to parent
     vParent = vnode_getParent(vCursor);
     while (vParent) {
@@ -1274,6 +1282,14 @@ function cleanupStaleUnclaimedProjection(journal: VNodeJournal, projection: VNod
   }
 }
 
+export function isSlotProp(prop: string): boolean {
+  return !prop.startsWith('q:');
+}
+
+function isParentSlotProp(prop: string): boolean {
+  return prop.startsWith(QSlotParent);
+}
+
 /**
  * This marks the property as immutable. It is needed for the QRLs so that QwikLoader can get a hold
  * of them. This character must be `:` so that the `vnode_getAttr` can ignore them.

packages/qwik/src/core/v2/client/vnode-namespace.ts

@@ -205,10 +205,6 @@ function vnode_cloneElementWithNamespace(
       vCursor = vNextSibling;
       continue;
     }
-    if (vCursor === elementVNode) {
-      // we are back where we started, we are done.
-      return rootElement;
-    }
     // Out of siblings, go to parent
     vParent = vnode_getParent(vCursor);
     while (vParent) {

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

@@ -400,6 +400,53 @@ export const vnode_ensureElementInflated = (vnode: VNode) => {
   }
 };
 
+/** Walks the VNode tree and materialize it using `vnode_getFirstChild`. */
+export function vnode_walkVNode(vNode: VNode) {
+  let vCursor: VNode | null = vNode;
+  // Depth first traversal
+  if (vnode_isTextVNode(vNode)) {
+    // Text nodes don't have subscriptions or children;
+    return;
+  }
+  let vParent: VNode | null = null;
+  do {
+    const vFirstChild = vnode_getFirstChild(vCursor);
+    if (vFirstChild) {
+      vCursor = vFirstChild;
+      continue;
+    }
+    // Out of children
+    if (vCursor === vNode) {
+      // we are where we started, this means that vNode has no children, so we are done.
+      return;
+    }
+    // Out of children, go to next sibling
+    const vNextSibling = vnode_getNextSibling(vCursor);
+    if (vNextSibling) {
+      vCursor = vNextSibling;
+      continue;
+    }
+    // Out of siblings, go to parent
+    vParent = vnode_getParent(vCursor);
+    while (vParent) {
+      if (vParent === vNode) {
+        // We are back where we started, we are done.
+        return;
+      }
+      const vNextParentSibling = vnode_getNextSibling(vParent);
+      if (vNextParentSibling) {
+        vCursor = vNextParentSibling;
+        break;
+      }
+      vParent = vnode_getParent(vParent);
+    }
+    if (vParent == null) {
+      // We are done.
+      return;
+    }
+  } while (true as boolean);
+}
+
 export function vnode_getDOMChildNodes(
   journal: VNodeJournal,
   root: VNode,
@@ -614,10 +661,10 @@ export const vnode_locate = (rootVNode: ElementVNode, id: string | Element): VNo
     refElement = id;
   }
   assertDefined(refElement, 'Missing refElement.');
-  if (!Array.isArray(refElement)) {
+  if (!vnode_isVNode(refElement)) {
     assertTrue(
       containerElement.contains(refElement),
-      'refElement must be a child of containerElement.'
+      `Couldn't find the element inside the container while locating the VNode.`
     );
     // We need to find the vnode.
     let parent = refElement;

packages/qwik/src/core/v2/tests/projection.spec.tsx

@@ -1865,8 +1865,7 @@ describe.each([
       );
     });
 
-    // TODO(slot): fix this test
-    it.skip('#2688 - case 2', async () => {
+    it('#2688 - case 2', async () => {
       const Switch = component$((props: { name: string }) => {
         return <Slot name={props.name} />;
       });

starters/e2e/e2e.slot.e2e.ts

@@ -212,8 +212,7 @@ test.describe("slot", () => {
       await expect(modalContent).not.toBeHidden();
     });
 
-    // TODO(v2): fix this
-    test.skip("issue 2688", async ({ page }) => {
+    test("issue 2688", async ({ page }) => {
       const result = page.locator("#issue-2688-result");
       const button = page.locator("#issue-2688-button");
       const count = page.locator("#btn-count");