Async JSX function returns #21885

import * as JSXML from './lib/JSXML';

const AsyncComponent = async (props: { something: number }) => {
  return new Promise(resolve => {
    setTimeout(
      () =>
        resolve(
          <div>
            {props.something}
          </div>,
        ),
      10,
    );
  });
};


async function main(): Promise<void> {

  const tree = await (<div>
      <AsyncComponent something={5}/>
    </div>);

  console.log(tree);
}

main();

declare global {
  namespace JSX {
    // tslint:disable:no-empty-interface
    interface Element extends JSXElement {}
    interface ElementAttributesProperty {
      props: {};
    }
    interface ElementChildrenAttribute {
      children: {};
    }
    interface IntrinsicElements {
      div: any;
    }
  }
}

export type JSXFactory = {
  (props: object, context?: any): JSXElement | undefined | Promise<JSXElement | undefined>;
  context?: any;
};

export interface JSXElement<Props = any, Type = string | JSXFactory> {
  type: Type;
  props: Props;
  children: JSXElement[];
}

export function createElement<Props>(
  type: string | JSXFactory,
  props: Props & {},
  ...children: JSXElement[],
): JSXElement<Props> {
  const childrenToPass = flatten<JSXElement>(children).filter(Boolean);

  return {
    type,
    props,
    children: childrenToPass,
  };
}

function flatten<T>(item: any): T[] {
  return Array.isArray(item) ? [].concat.apply([], item.map(flatten)) : item;
}

import * as JSXML from './lib/JSXML';

const AsyncComponent = async (props: { something: number }) => {
  return new Promise(resolve => {
    setTimeout(
      () =>
        resolve(
          JSXML.createElement('div',null, props.something)
        ),
      10,
    );
  });
};


async function main(): Promise<void> {

  const tree = await (JSXML.createElement('div', null,
                         JSXML.createElement(AsyncComponent, { something: 5 })
                       ));

  console.log(tree);
}

main();