Add possible null and undefined as classes to createElement

Author: ZhukV

CHANGELOG.md

@@ -1,6 +1,11 @@
 CHANGELOG
 =========
 
+v1.0.10
+-------
+
+* Add possible pass classes as `null` or `undefined` to `createElement`.
+
 v1.0.9
 ------
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@fivelab/web-utils",
-    "version": "1.0.9",
+    "version": "1.0.10",
     "private": false,
     "type": "module",
     "description": "The helpers for easy manipulate with dom.",

package.json

@@ -12,7 +12,7 @@ export type CommonOptions = {
 };
 
 export type BaseOptions = CommonOptions & {
-    classList?: string[];
+    classList?: Array<string | null | undefined>;
     style?: Partial<CSSStyleDeclaration>;
 } & ContentOptions;
 
@@ -118,7 +118,8 @@ export function createElement(tag: string, options: BaseOptions = {}): HTMLEleme
     }
 
     if (options.classList && options.classList.length) {
-        el.classList.add(...options.classList);
+        const classes = options.classList.filter((e): e is string => Boolean(e));
+        el.classList.add(...classes);
     }
 
     if (options.dataset) {

src/dom/create-element.ts

@@ -13,6 +13,14 @@ describe('create element', () => {
         expect([...el.classList]).toEqual(expect.arrayContaining(['a', 'b']));
     });
 
+    it('creates element with null and undefined classes', () => {
+        const el = createElement('div', {
+            classList: ['a', null, 'c', undefined, 'b']
+        });
+
+        expect([...el.classList]).toEqual(expect.arrayContaining(['a', 'c', 'b']));
+    });
+
     it('sets textContent (including empty string)', () => {
         const el1 = createElement('span', { text: 'hello' });
         expect(el1.textContent).toBe('hello');