If a child node is falsifying, we don't render it (as React does)

Author: forman

chartlets.js/src/lib/components/Box.tsx

@@ -8,10 +8,10 @@ export interface BoxProps extends Omit<BoxState, "type"> {
   onChange: ComponentChangeHandler;
 }
 
-export function Box({ id, style, children: components, onChange }: BoxProps) {
+export function Box({ id, style, children, onChange }: BoxProps) {
   return (
     <MuiBox id={id} style={style}>
-      <ComponentChildren components={components} onChange={onChange} />
+      <ComponentChildren nodes={children} onChange={onChange} />
     </MuiBox>
   );
 }

chartlets.js/src/lib/components/ComponentChildren.tsx

@@ -1,30 +1,31 @@
 import { type ComponentChangeHandler } from "@/lib/types/state/event";
 import {
-  type ComponentItem,
+  type ComponentNode,
   isComponentState,
 } from "@/lib/types/state/component";
 import { Component } from "./Component";
 
 export interface ComponentChildrenProps {
-  components?: ComponentItem[];
+  nodes?: ComponentNode[];
   onChange: ComponentChangeHandler;
 }
 
-export function ComponentChildren({
-  components,
-  onChange,
-}: ComponentChildrenProps) {
-  if (!components || components.length === 0) {
+export function ComponentChildren({ nodes, onChange }: ComponentChildrenProps) {
+  if (!nodes || nodes.length === 0) {
     return null;
   }
   return (
     <>
-      {components.map((item, index) => {
-        if (isComponentState(item)) {
-          const key = item.id || index;
-          return <Component key={key} {...item} onChange={onChange} />;
+      {nodes.map((node, index) => {
+        if (isComponentState(node)) {
+          const key = node.id || index;
+          return <Component key={key} {...node} onChange={onChange} />;
+        } else if (typeof node === "string") {
+          return node;
+        } else if (!node) {
+          // This is ok, just as with React, don't render
         } else {
-          return item;
+          console.warn("chartlets: invalid child node encountered:", node);
         }
       })}
     </>

chartlets.js/src/lib/components/Typography.tsx

@@ -8,15 +8,10 @@ export interface TypographyProps extends Omit<TypographyState, "type"> {
   onChange: ComponentChangeHandler;
 }
 
-export function Typography({
-  id,
-  style,
-  children: components,
-  onChange,
-}: TypographyProps) {
+export function Typography({ id, style, children, onChange }: TypographyProps) {
   return (
     <MuiTypography id={id} style={style}>
-      <ComponentChildren components={components} onChange={onChange} />
+      <ComponentChildren nodes={children} onChange={onChange} />
     </MuiTypography>
   );
 }

chartlets.js/src/lib/types/state/component.ts

@@ -10,22 +10,30 @@ export type ComponentType =
   | "Select"
   | "Typography";
 
+export type ComponentNode =
+  | ComponentState
+  | string
+  | 0
+  | false
+  | null
+  | undefined;
+
 export interface ComponentState {
+  // TODO: Rename to tag, so we can also have
+  //   (Html)ElementState along with ComponentState
   type: ComponentType;
-  label?: string;
-  children?: ComponentItem[];
+  children?: ComponentNode[];
   // common HTML attributes
   id?: string;
   name?: string;
   value?: boolean | string | number;
   style?: CSSProperties;
   disabled?: boolean;
+  label?: string;
 }
 
-export type ComponentItem = ComponentState | string;
-
 export interface ContainerState extends ComponentState {
-  children: ComponentItem[];
+  children: ComponentNode[];
 }
 
 export type SelectOption =

chartlets.py/chartlets/component.py

@@ -31,7 +31,7 @@ class Component(ABC):
     label: str | None = None
     """HTML `label` attribute. Optional."""
 
-    children: list[Union["Component", str]] | None = None
+    children: list[Union["Component", str, None]] | None = None
     """Children used by many specific components. Optional."""
 
     @property