transform JSX.Element to React$Node or React.Node

[villesau]

Hi, great work with Flowgen!

I tried to convert some React component definitions yesterday that has JSX.Element types. I think proper way to handle these types is to transform them to React$Node or React.Node automatically instead of global$JSX$Element. I think it's safe assumption in Flow since Flow assumes all the JSX to be React anyways, which means only JSX you can have in Flow codebase is React. Where this kind of logic would belong in the code base if I would want to give it a try?

Here is an example input and output of current behaviour:

Input:

/// <reference types="react" />
import * as React from 'react';
declare class Button extends React.PureComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
    active?: boolean;
    children?: string | JSX.Element;
    fullWidth?: boolean;
    icon?: JSX.Element;
    small?: boolean;
    large?: boolean;
    primary?: boolean;
    secondary?: boolean;
    destructive?: boolean;
    linkDefault?: boolean;
    link?: boolean;
    loading?: boolean;
}> {
    render(): JSX.Element;
}
export default Button;

Output:

import * as React from "react";
declare class Button
  mixins React.PureComponent<
      React.ButtonHTMLAttributes<HTMLButtonElement> & {
        active?: boolean,
        children?: string | global$JSX$Element,
        fullWidth?: boolean,
        icon?: global$JSX$Element,
        small?: boolean,
        large?: boolean,
        primary?: boolean,
        secondary?: boolean,
        destructive?: boolean,
        linkDefault?: boolean,
        link?: boolean,
        loading?: boolean
      }
    > 
  render(): global$JSX$Element;
}
declare export default typeof Button;

[orta]

Yeah, I agree 👍

[villesau]

The current output is pretty broken in many ways. Desired output for above would be roughly something like this:

declare class Button extends React$PureComponent<
HTMLButtonElement &
{
  active?: boolean,
  children?: string | React$Node,
  fullWidth?: boolean,
  icon?: React$Node,
  small?: boolean,
  large?: boolean,
  primary?: boolean,
  secondary?: boolean,
  destructive?: boolean,
  linkDefault?: boolean,
  link?: boolean,
  loading?: boolean
}> {
  render(): React$Node; // Even this is not perhaps needed as React$Component have it by default
}

So there are actually quite a bunch what needs to be mapped from TS to Flow when transforming component definitions. React.ButtonHTMLAttributes<HTMLButtonElement> is also something that might not have 1:1 equivalent.

How would you approach implementing better React support?

[goodmind]

@villesau I tried React.ElementProps<'button'> but it is just doesn't typecheck
https://flow.org/try/#0JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdAJlrgDbKVxtroCyAngCEArjBgQAdnCwAPGFgmN02PDAB0ABWGUAwiUgSFMADwASAKIzVxlfjXnWWEEY3EwqYwHIARqPETPAD5guABvOgBfBlxJVHgsOABeOGMBETFJOEZgVGRvR0ZE0IBGCLgAekC6IA

[villesau]

HTMLButtonElement is also a valid type: https://github.com/facebook/flow/blob/v0.94.0/lib/dom.js#L3297
https://flow.org/en/docs/react/refs/

And it's roughly same as ButtonHTMLAttributes:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1808

[goodmind]

@villesau its not jsx props, they should be camelCase. Someone should pick up this PR facebook/flow#6727 to typecheck native elements first

[villesau]

On the other hand in the mean time this should be sufficient: ReactDOM$HTMLElementJSXIntrinsic<HTMLButtonElement, ReactDOM$HTMLElementProps>

https://github.com/facebook/flow/pull/6727/files#diff-ce626ccb6b8eb922c17388db8d33cbabR281

[goodmind]

Fixed in #77

[goodmind]

@villesau but this is types from PR :)
Now button is completely untyped
button: {instance: HTMLButtonElement, props: {children?: React$Node, [key: string]: any}},

[villesau]

Yeah exactly. If it's not yet part of Flow builtin libdefs, it's still possible to type without.