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 =