feat(jsx): handle falsy like React

artalar · Jun 6, 2024 · 6ac9e60 · 6ac9e60
1 parent fc58024
commit 6ac9e60
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git 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 = <div>
+  {emptyAtom}
+  {emptyValue}
+  {trueAtom}
+  {trueValue}
+  {falseAtom}
+  {falseValue}
+  {nullAtom}
+  {nullValue}
+  {undefinedAtom}
+  {undefinedValue}
+</div>
+
+  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
@@ -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<HTMLElement, Array<Fn>>()
 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
@@ -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<T extends Record<keyof any, any>> = {
 }
 
 export namespace JSX {
+  type Falsy = boolean | '' | null | undefined
+
   type Element = HTMLElement | SVGElement
 
   type ElementPrimitiveChildren =