Async JSX function returns

[dyst5422]

Search Terms:
JSX async promise class functional
Code

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();

JSXML.ts

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;
}

Expected behavior:

This should compile without errors to

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();

Actual behavior:

The JSX call to AsyncComponent gives the error JSX element class does not support attributes because it does not have a 'props' property.

It seems that TS believes the AsyncComponent to be a class instead of an async function.

[mhegazy]

This should be covered by #21699. Today we have some logic in the compiler that is tightly coupled to JSX.Element type. With #21699, we plan on making the rerun type of an SFC be anything as declare in the factory function. this should allow an SFC to be a string (react 16), or an array, a promise, or really any type.

[dyst5422]

My search skills need work.