handle undefined and null used as Text

Author: sudo-barun

jsx-runtime.js

@@ -13,7 +13,7 @@ export function jsxs(tagName, attributesWithChildren, key) {
     if (Array.isArray(children)) {
         childrenArray = children.flat();
     }
-    else if (children === undefined) {
+    else if (children === undefined || children === null) {
         childrenArray = [];
     }
     else if (typeof children === 'string') {
@@ -22,7 +22,9 @@ export function jsxs(tagName, attributesWithChildren, key) {
     else {
         childrenArray = [children];
     }
-    childrenArray = (childrenArray).map(child => {
+    childrenArray = childrenArray
+        .filter(child => !(child === undefined || child === null))
+        .map(child => {
         if (typeof child === 'object' && child !== null) {
             if (Array.isArray(child)) {
                 throw new Error(`child is array`);

jsx-runtime.ts

@@ -14,7 +14,7 @@ const listenerRegexAt = /^@(.+)$/;
 export
 function jsxs(
 	tagName: string|(new(...args: unknown[]) => Component),
-	attributesWithChildren: {[attributeName: string]: unknown, children?: undefined|string|Component|ComponentChildren},
+	attributesWithChildren: {[attributeName: string]: unknown, children?: undefined|null|string|Component|ComponentChildren},
 	key?: number
 ) {
 	let { children, ...attributes } = attributesWithChildren;
@@ -26,15 +26,17 @@ function jsxs(
 
 	if (Array.isArray(children)) {
 		childrenArray = children.flat();
-	} else if (children === undefined) {
+	} else if (children === undefined || children === null) {
 		childrenArray = [];
 	} else if (typeof children === 'string') {
 		childrenArray = [new TextComponent(children)];
 	} else {
 		childrenArray = [children];
 	}
 
-	childrenArray = (childrenArray).map(child => {
+	childrenArray = childrenArray
+	.filter(child => !(child === undefined || child === null))
+	.map(child => {
 		if (typeof child === 'object' && child !== null) {
 			if (Array.isArray(child)) {
 				throw new Error(`child is array`);
@@ -87,7 +89,7 @@ function jsxs(
 export
 function jsx(
 	_tagName: string|(new(...args: unknown[])=>Component),
-	_attributesWithChildren: {[attributeName: string]: unknown, children?: undefined|string|Component|ComponentChildren},
+	_attributesWithChildren: {[attributeName: string]: unknown, children?: undefined|null|string|Component|ComponentChildren},
 	_key?: number
 ) {
 	return jsxs.apply(null, arguments as unknown as Parameters<typeof jsx>);

jsx.d.ts

@@ -43,10 +43,10 @@ export namespace JSX {
 					>,
 				'<>'?: Subscriber<HTMLElement>|Subscriber<SVGElement>|Subscriber<MathMLElement>,
 				children?:
-					| string|number|bigint|Supplier<string|number|bigint>
+					| string|number|bigint|null|undefined|Supplier<string|number|bigint|null|undefined>
 					| ComponentChild
 					| Array<
-						| string|number|bigint|Supplier<string|number|bigint>
+						| string|number|bigint|null|undefined|Supplier<string|number|bigint|null|undefined>
 						| ComponentChild | ComponentChildren
 					>
 				,
@@ -80,10 +80,10 @@ export namespace JSX {
 					| Subscriber<HTMLElement>|Subscriber<SVGElement>|Subscriber<MathMLElement>
 
 					// children
-					| string|number|bigint|Supplier<string|number|bigint>
+					| string|number|bigint|null|undefined|Supplier<string|number|bigint|null|undefined>
 					| ComponentChild
 					| Array<
-						| string|number|bigint|Supplier<string|number|bigint>
+						| string|number|bigint|null|undefined|Supplier<string|number|bigint|null|undefined>
 						| ComponentChild | ComponentChildren
 					>
 			}