fix: undefined or null as projection child

Author: Varixo

.changeset/rotten-penguins-cough.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: undefined or null as projection child

packages/qwik/src/core/client/util-mapArray.ts

@@ -1,16 +1,12 @@
 import { assertTrue } from '../shared/error/assert';
 
-export const mapApp_findIndx = <T>(
-  elementVNode: (T | null)[],
-  key: string,
-  start: number
-): number => {
+export const mapApp_findIndx = <T>(array: (T | null)[], key: string, start: number): number => {
   assertTrue(start % 2 === 0, 'Expecting even number.');
   let bottom = (start as number) >> 1;
-  let top = (elementVNode.length - 2) >> 1;
+  let top = (array.length - 2) >> 1;
   while (bottom <= top) {
     const mid = bottom + ((top - bottom) >> 1);
-    const midKey = elementVNode[mid << 1] as string;
+    const midKey = array[mid << 1] as string;
     if (midKey === key) {
       return mid << 1;
     }
@@ -24,47 +20,43 @@ export const mapApp_findIndx = <T>(
 };
 
 export const mapArray_set = <T>(
-  elementVNode: (T | null)[],
+  array: (T | null)[],
   key: string,
   value: T | null,
   start: number
 ) => {
-  const indx = mapApp_findIndx(elementVNode, key, start);
+  const indx = mapApp_findIndx(array, key, start);
   if (indx >= 0) {
     if (value == null) {
-      elementVNode.splice(indx, 2);
+      array.splice(indx, 2);
     } else {
-      elementVNode[indx + 1] = value;
+      array[indx + 1] = value;
     }
   } else if (value != null) {
-    elementVNode.splice(indx ^ -1, 0, key as any, value);
+    array.splice(indx ^ -1, 0, key as any, value);
   }
 };
 
-export const mapApp_remove = <T>(
-  elementVNode: (T | null)[],
-  key: string,
-  start: number
-): T | null => {
-  const indx = mapApp_findIndx(elementVNode, key, start);
+export const mapApp_remove = <T>(array: (T | null)[], key: string, start: number): T | null => {
+  const indx = mapApp_findIndx(array, key, start);
   let value: T | null = null;
   if (indx >= 0) {
-    value = elementVNode[indx + 1];
-    elementVNode.splice(indx, 2);
+    value = array[indx + 1];
+    array.splice(indx, 2);
     return value;
   }
   return value;
 };
 
-export const mapArray_get = <T>(
-  elementVNode: (T | null)[],
-  key: string,
-  start: number
-): T | null => {
-  const indx = mapApp_findIndx(elementVNode, key, start);
+export const mapArray_get = <T>(array: (T | null)[], key: string, start: number): T | null => {
+  const indx = mapApp_findIndx(array, key, start);
   if (indx >= 0) {
-    return elementVNode[indx + 1] as T | null;
+    return array[indx + 1] as T | null;
   } else {
     return null;
   }
 };
+
+export const mapArray_has = <T>(array: (T | null)[], key: string, start: number): boolean => {
+  return mapApp_findIndx(array, key, start) >= 0;
+};

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

@@ -2195,6 +2195,63 @@ describe.each([
     }
   });
 
+  it('should toggle content projection from undefined or null', async () => {
+    const Wrapper = component$(() => {
+      return <Slot />;
+    });
+
+    const Cmp = component$(() => {
+      const show = useSignal(false);
+
+      return (
+        <>
+          <button
+            onClick$={() => {
+              show.value = !show.value;
+            }}
+          >
+            Click
+          </button>
+          <Wrapper>{show.value ? <div>Test</div> : undefined}</Wrapper>
+          <Wrapper>{show.value ? <div>Test</div> : null}</Wrapper>
+        </>
+      );
+    });
+
+    const { vNode, document } = await render(<Cmp />, { debug: DEBUG });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button>Click</button>
+          <Component ssr-required>
+            <Projection ssr-required></Projection>
+          </Component>
+          <Component ssr-required>
+            <Projection ssr-required></Projection>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+    await trigger(document.body, 'button', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button>Click</button>
+          <Component ssr-required>
+            <Projection ssr-required>
+              <div>Test</div>
+            </Projection>
+          </Component>
+          <Component ssr-required>
+            <Projection ssr-required>
+              <div>Test</div>
+            </Projection>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#1630', async () => {
       const Child = component$(() => <b>CHILD</b>);

packages/qwik/src/server/qwik-copy.ts

@@ -13,7 +13,12 @@
  *   lists code which we are OK to have duplicated.
  */
 
-export { mapApp_remove, mapArray_get, mapArray_set } from '../core/client/util-mapArray';
+export {
+  mapApp_remove,
+  mapArray_get,
+  mapArray_set,
+  mapArray_has,
+} from '../core/client/util-mapArray';
 export { QError, qError } from '../core/shared/error/error';
 export { SYNC_QRL } from '../core/shared/qrl/qrl-utils';
 export { ChoreType } from '../core/shared/util-chore-type';

packages/qwik/src/server/ssr-node.ts

@@ -10,6 +10,7 @@ import {
   mapApp_remove,
   mapArray_get,
   mapArray_set,
+  mapArray_has,
   ELEMENT_SEQ,
   QSlot,
   QDefaultSlot,
@@ -196,15 +197,13 @@ export class SsrComponentFrame implements ISsrComponentFrame {
   }
 
   hasSlot(slotName: string): boolean {
-    return mapArray_get(this.slots, slotName, 0) !== null;
+    return mapArray_has(this.slots, slotName, 0);
   }
 
   consumeChildrenForSlot(projectionNode: ISsrNode, slotName: string): JSXChildren | null {
     const children = mapApp_remove(this.slots, slotName, 0);
-    if (children !== null) {
-      this.componentNode.setProp(slotName, projectionNode.id);
-      projectionNode.setProp(QSlotParent, this.componentNode.id);
-    }
+    this.componentNode.setProp(slotName, projectionNode.id);
+    projectionNode.setProp(QSlotParent, this.componentNode.id);
     return children;
   }