diff --git a/packages/jsx/src/index.test.tsx b/packages/jsx/src/index.test.tsx index 3409b5e8e..97edf8c37 100644 --- a/packages/jsx/src/index.test.tsx +++ b/packages/jsx/src/index.test.tsx @@ -262,4 +262,35 @@ test('linked list', () => { // assert.not.ok(isConnected(ctx, jsxList)) }) +test('boolean, null, null and empty string children', () => { + const { h, hf } = setup() + +const emptyAtom = atom('', 'empty') +const emptyValue = '' +const trueAtom = atom(true, 'true') +const trueValue = true +const falseAtom = atom(false, 'false') +const falseValue = false +const nullAtom = atom(null, 'null') +const nullValue = null +const undefinedAtom = atom(undefined, 'undefined') +const undefinedValue = undefined + +const element =
+ {emptyAtom} + {emptyValue} + {trueAtom} + {trueValue} + {falseAtom} + {falseValue} + {nullAtom} + {nullValue} + {undefinedAtom} + {undefinedValue} +
+ + assert.is(element.childNodes.length, 5) + assert.is(element.textContent, '') +}) + test.run() diff --git a/packages/jsx/src/index.ts b/packages/jsx/src/index.ts index 7f21a777b..64930b102 100644 --- a/packages/jsx/src/index.ts +++ b/packages/jsx/src/index.ts @@ -32,6 +32,8 @@ type DomApis = Pick< | 'DocumentFragment' > +const isFalsy = (value: unknown): value is JSX.Falsy => typeof value === 'boolean' || value === '' || value == null + let unsubscribesMap = new WeakMap>() let unlink = (parent: any, un: Unsubscribe) => { // check the connection in the next tick @@ -241,7 +243,7 @@ export const reatomJsx = (ctx: Ctx, DOM: DomApis = globalThis.window) => { } } else { // TODO more tests - innerChild.textContent = String(v) + innerChild.textContent = isFalsy(v) ? '' : String(v) } } } catch (e) { @@ -251,7 +253,7 @@ export const reatomJsx = (ctx: Ctx, DOM: DomApis = globalThis.window) => { if (error) throw error unlink(element, un) element.appendChild(innerChild) - } else { + } else if (!isFalsy(child)) { element.appendChild( isObject(child) && 'nodeType' in child ? (child as JSX.Element) diff --git a/packages/jsx/src/jsx.d.ts b/packages/jsx/src/jsx.d.ts index 5cf8dcd28..b788dacdb 100644 --- a/packages/jsx/src/jsx.d.ts +++ b/packages/jsx/src/jsx.d.ts @@ -1,4 +1,4 @@ -/* +/* Respectfully copied from https://github.com/ryansolid/dom-expressions/blob/ae71a417aa13b33517082628aff09513629df8b2/packages/dom-expressions/src/jsx.d.ts */ @@ -17,6 +17,8 @@ type ElementsAttributesAtomMaybe> = { } export namespace JSX { + type Falsy = boolean | '' | null | undefined + type Element = HTMLElement | SVGElement type ElementPrimitiveChildren =