Conditional Render in jsx

components.tsx

import { ReactNode } from 'react';

export const Main = ({ active }: { active: boolean }) => {
  return <p>my component {active ? 'active' : 'de-active'}</p>;
};

export const Skeleton = ({ count }: { count: number }) => {
  return <p>skeleton x{count}</p>;
};

export const ColorFull = ({
  color,
  children,
}: {
  color: string;
  children: ReactNode;
}) => {
  return <p style={{ color }}>Text with color:={children}</p>;
};

Z.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import {
  ReactNode,
  RefAttributes,
  cloneElement,
  createElement,
  isValidElement,
} from 'react';

export default function Z() {
  const elementSymbols = Symbol('elements');
  const fallbackSymbol = Symbol('fallback');
  return {
    [elementSymbols]: [] as ReactNode[],
    [fallbackSymbol]: null as any,
    __add(item: ReactNode) {
      this[elementSymbols].push(item);
    },

    fallback(...args: any) {
      this[fallbackSymbol] = args;
      return this;
    },

    $: function $add<
      TRenderer extends ((props: any, ref: any) => ReactNode) | ReactNode,
    >(
      condition: boolean,
      renderer: TRenderer,
      props?: TRenderer extends (
        props: infer TProps,
        ref?: unknown,
      ) => ReactNode
        ? TProps
        : Record<string, unknown>,
      ref?: TRenderer extends (props: unknown, ref?: infer TRef) => ReactNode
        ? TRef
        : RefAttributes<unknown>,
    ) {
      if (condition) {
        this[elementSymbols].push(
          this.__elementRetriever(renderer, props, ref),
        );
      }

      return this;
    },
    __elementRetriever<
      TRenderer extends ((props: any, ref: unknown) => ReactNode) | ReactNode,
    >(
      renderer: TRenderer,
      props:
        | (TRenderer extends (props: infer TProps, ref?: unknown) => ReactNode
            ? TProps
            : Record<string, any>)
        | undefined,
      ref: RefAttributes<unknown> | undefined,
    ) {
      if (isValidElement(renderer)) return cloneElement(renderer, props);
      if (typeof renderer === 'function') return renderer(props, ref);
      if (typeof renderer === 'string') {
        if (props) return createElement(renderer, props);
        return renderer;
      }
    },

    [Symbol.iterator]: function* () {
      if (!this[elementSymbols].length && this[fallbackSymbol]) {
        yield this.__elementRetriever(
          ...(this[fallbackSymbol] as Parameters<
            typeof this.__elementRetriever
          >),
        );
        return;
      }

      for (const element of this[elementSymbols]) {
        yield element;
      }
    },
  };
}

ZApp.tsx

import { ColorFull, Main, Skeleton } from './components.tsx';
import Z from './z.tsx';

export default function App() {
  return Z()
    .$(true, Main, { active: true }) // Will render <Main active={ture} />
    .$(false, 'Hello text content') // Won't render this Text-Node
    .$(true, 'h1', {                // Will render <h1 {...props} />
      'data-attr': 'my-attribute',
      'data-source': null,
      children: <ColorFull color="red">Hello Red Children</ColorFull>,
    })
    .$(true, <ColorFull color="yellow">Hello Yellow ELement</ColorFull>)  // Will render the element
    .fallback(Skeleton, { count: 3 });
}