From 88f60380bc392b287b82b57259fa6b88137a8919 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Teemu=20P=C3=A4=C3=A4kk=C3=B6nen?=
 <paakkonen.teemu@gmail.com>
Date: Sun, 10 Nov 2024 23:49:44 +0200
Subject: [PATCH] Add support for null/undefined values in array classnames

---
 package-lock.json                      |  4 ++--
 src/kaiku.ts                           | 11 ++++++++++-
 test/__snapshots__/kaiku.spec.tsx.snap |  4 ++++
 test/kaiku.spec.tsx                    | 18 ++++++++++++++++++
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e41a695..63c2e17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "kaiku",
-  "version": "1.25.1",
+  "version": "1.25.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "kaiku",
-      "version": "1.25.1",
+      "version": "1.25.2",
       "license": "MIT",
       "devDependencies": {
         "@babel/plugin-transform-async-to-generator": "^7.24.7",
diff --git a/src/kaiku.ts b/src/kaiku.ts
index 06ab7dd..2c43cdc 100644
--- a/src/kaiku.ts
+++ b/src/kaiku.ts
@@ -254,7 +254,12 @@ type Render = <PropertiesT extends DefaultProps>(
   rootElement: HTMLElement | SVGElement
 ) => void
 
-type ClassNames = string | { [key: string]: boolean } | ClassNames[]
+type ClassNames =
+  | undefined
+  | null
+  | string
+  | { [key: string]: boolean }
+  | ClassNames[]
 
 //
 //  Generic utilities
@@ -1161,6 +1166,10 @@ const destroyLazyUpdates = (instance: HtmlElementInstance) => {
 ///////////////
 
 const stringifyClassNames = (names: ClassNames): string => {
+  if (names === null || typeof names === 'undefined') {
+    return ''
+  }
+
   if (typeof names === 'string') {
     return names
   }
diff --git a/test/__snapshots__/kaiku.spec.tsx.snap b/test/__snapshots__/kaiku.spec.tsx.snap
index 9a93b03..4de96d7 100644
--- a/test/__snapshots__/kaiku.spec.tsx.snap
+++ b/test/__snapshots__/kaiku.spec.tsx.snap
@@ -14,6 +14,10 @@ exports[`kaiku should be able to access this.props 1`] = `"<div>hello</div>"`;
 
 exports[`kaiku should be able to inject raw HTML 1`] = `"<div><div>foo<span>bar</span></div></div>"`;
 
+exports[`kaiku should handle array of classnames including \`null\` 1`] = `"<div class=\\"\\"></div>"`;
+
+exports[`kaiku should handle array of classnames including \`undefined\` 1`] = `"<div class=\\"\\"></div>"`;
+
 exports[`kaiku should handle changing rootNode.firstChild 1`] = `"<div>Hello, I am a div tag!</div>"`;
 
 exports[`kaiku should handle changing rootNode.firstChild 2`] = `"<span>Hello, I am a span tag!</span>"`;
diff --git a/test/kaiku.spec.tsx b/test/kaiku.spec.tsx
index 8411abb..1e1f3ef 100644
--- a/test/kaiku.spec.tsx
+++ b/test/kaiku.spec.tsx
@@ -1945,4 +1945,22 @@ describe('kaiku', () => {
     render(<App />, rootNode)
     expect(rootNode.innerHTML).toMatchSnapshot()
   })
+
+  it('should handle array of classnames including `undefined`', async () => {
+    const App = () => {
+      return <div class={[undefined]} />
+    }
+
+    render(<App />, rootNode)
+    expect(rootNode.innerHTML).toMatchSnapshot()
+  })
+
+  it('should handle array of classnames including `null`', async () => {
+    const App = () => {
+      return <div class={[null]} />
+    }
+
+    render(<App />, rootNode)
+    expect(rootNode.innerHTML).toMatchSnapshot()
+  })
 })