Function processElement

src/jsx/renderer.ts:17–65

* pre-process the element tree, expanding all components and layouts

(element: JSXNode, context: RenderContext)

 * pre-process the element tree, expanding all components and layouts
 */
function processElement(element: JSXNode, context: RenderContext): JSXNode {
  if (element == null || typeof element === 'boolean') return null;
  if (typeof element === 'string' || typeof element === 'number') {
    return element;
  }
  if (Array.isArray(element)) {
    return element
      .map((child) => processElement(child, context))
      .filter(Boolean);
  }

  // layout component
  if (isLayoutComponent(element)) {
    const layoutResult = performLayout(element, context);
    return processElement(layoutResult, context);
  }

  // expand function components
  if (typeof element.type === 'function') {
    const rendered = element.type(element.props);
    return processElement(rendered, context);
  }

  // process children
  const children = getRenderableChildrenOf(element)
    .map((child) => processElement(child, context))
    .filter(Boolean) as RenderableNode[];

  // process Fragment
  if (element.type === Fragment) {
    return children;
  }

  // process Defs, collect defs content
  if (element.type === DefsSymbol) {
    children.forEach((child) => {
      if (typeof child === 'object' && child.props.id) {
        context.defs.set(child.props.id, child);
      }
    });
    return null;
  }

  if (children.length) {
    return cloneElement(element, { children });
  }

  return element;
}

/**
 * render a single element to string