Merge pull request #7814 from QwikDev/v2-context-falsy-value

fix: handle falsy value as context value

Author: wmertens

.changeset/silly-symbols-sleep.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: handle falsy value as context value

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

@@ -73,7 +73,7 @@ import {
   vnode_setProp,
   type VNodeJournal,
 } from './vnode';
-import { mapArray_get, mapArray_set } from './util-mapArray';
+import { mapArray_get, mapArray_has, mapArray_set } from './util-mapArray';
 
 /** @public */
 export function getDomContainer(element: Element | VNode): IClientContainer {
@@ -220,20 +220,17 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
 
   setContext<T>(host: HostElement, context: ContextId<T>, value: T): void {
     let ctx = this.getHostProp<Array<string | unknown>>(host, QCtxAttr);
-    if (!ctx) {
+    if (ctx == null) {
       this.setHostProp(host, QCtxAttr, (ctx = []));
     }
-    mapArray_set(ctx, context.id, value, 0);
+    mapArray_set(ctx, context.id, value, 0, true);
   }
 
   resolveContext<T>(host: HostElement, contextId: ContextId<T>): T | undefined {
     while (host) {
       const ctx = this.getHostProp<Array<string | unknown>>(host, QCtxAttr);
-      if (ctx) {
-        const value = mapArray_get(ctx, contextId.id, 0) as T;
-        if (value) {
-          return value as T;
-        }
+      if (ctx != null && mapArray_has(ctx, contextId.id, 0)) {
+        return mapArray_get(ctx, contextId.id, 0) as T;
       }
       host = this.getParentHost(host)!;
     }

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

@@ -25,16 +25,17 @@ export const mapArray_set = <T>(
   array: (T | null)[],
   key: string,
   value: T | null,
-  start: number
+  start: number,
+  allowNullValue: boolean = false
 ) => {
   const indx = mapApp_findIndx(array, key, start);
   if (indx >= 0) {
-    if (value == null) {
+    if (value == null && !allowNullValue) {
       array.splice(indx, 2);
     } else {
       array[indx + 1] = value;
     }
-  } else if (value != null) {
+  } else if (value != null || allowNullValue) {
     array.splice(indx ^ -1, 0, key as any, value);
   }
 };

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

@@ -525,7 +525,7 @@ export const _mapApp_findIndx: <T>(array: (T | null)[], key: string, start: numb
 export const _mapArray_get: <T>(array: (T | null)[], key: string, start: number) => T | null;
 
 // @internal (undocumented)
-export const _mapArray_set: <T>(array: (T | null)[], key: string, value: T | null, start: number) => void;
+export const _mapArray_set: <T>(array: (T | null)[], key: string, value: T | null, start: number, allowNullValue?: boolean) => void;
 
 // @public @deprecated (undocumented)
 export type NativeAnimationEvent = AnimationEvent;

packages/qwik/src/core/tests/use-context.spec.tsx

@@ -196,6 +196,51 @@ describe.each([
     }
   });
 
+  it('should find context with falsy value', async () => {
+    const ctxIf = createContextId<any>('if');
+    const ctxIf2 = createContextId<any>('if2');
+    const ctxIf3 = createContextId<any>('if3');
+
+    const Child = component$(() => {
+      const value = useContext(ctxIf);
+      const value2 = useContext(ctxIf2);
+      const value3 = useContext(ctxIf3);
+      return (
+        <>
+          {value}
+          {value2}
+          {value3}
+        </>
+      );
+    });
+
+    const Cmp = component$(() => {
+      useContextProvider(ctxIf, '');
+      useContextProvider(ctxIf2, false);
+      useContextProvider(ctxIf3, null);
+      return (
+        <div>
+          <Child />
+        </div>
+      );
+    });
+
+    const { vNode } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <div>
+          <Component ssr-required>
+            <Fragment ssr-required>
+              {''}
+              {''}
+              {''}
+            </Fragment>
+          </Component>
+        </div>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#4038', async () => {
       interface IMyComponent {

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

@@ -44,6 +44,7 @@ import {
   escapeHTML,
   isClassAttr,
   mapArray_get,
+  mapArray_has,
   mapArray_set,
   maybeThen,
   qError,
@@ -263,10 +264,10 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
   setContext<T>(host: HostElement, context: ContextId<T>, value: T): void {
     const ssrNode: ISsrNode = host as any;
     let ctx: Array<string | unknown> = ssrNode.getProp(QCtxAttr);
-    if (!ctx) {
+    if (ctx == null) {
       ssrNode.setProp(QCtxAttr, (ctx = []));
     }
-    mapArray_set(ctx, context.id, value, 0);
+    mapArray_set(ctx, context.id, value, 0, true);
     // Store the node which will store the context
     this.addRoot(ssrNode);
   }
@@ -275,11 +276,8 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     let ssrNode: ISsrNode | null = host as any;
     while (ssrNode) {
       const ctx: Array<string | unknown> = ssrNode.getProp(QCtxAttr);
-      if (ctx) {
-        const value = mapArray_get(ctx, contextId.id, 0) as T;
-        if (value) {
-          return value;
-        }
+      if (ctx != null && mapArray_has(ctx, contextId.id, 0)) {
+        return mapArray_get(ctx, contextId.id, 0) as T;
       }
       ssrNode = ssrNode.parentSsrNode;
     }