children: PropTypes.node about babel-plugin-flow-react-proptypes HOT 18 CLOSED

What would that look like as a flow annotation?

from babel-plugin-flow-react-proptypes.

That's what I'm asking. I'd love to be able to define my propTypes in Flow,
but this would be a huge limitation if you can't do it.

On Wed, 28 Sep 2016, 16:43 Frankie Bagnardi, [email protected]
wrote:

What would that look like as a flow annotation?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#48 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABy6lzdtFai7NJUb1T42WSAb_CYy7QGVks5quvu6gaJpZM4KJW57
.

from babel-plugin-flow-react-proptypes.

From the react docs

    // Anything that can be rendered: numbers, strings, elements or an array
    // (or fragment) containing these types.
    optionalNode: React.PropTypes.node,

So the prop would be a pretty complicated union type annotation. If there's an easier way to write this that's valid in flow we can add special support.

The best thing for now is probably to mark it as any, which means anything except undefined (or null, I think).

from babel-plugin-flow-react-proptypes.

any will do for now. Can you add that to the README and maybe someone will
come up with a better solution.

On Wed, 28 Sep 2016, 18:54 Frankie Bagnardi, [email protected]
wrote:

From the react docs

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: React.PropTypes.node,

So the prop would be a pretty complicated union type annotation. If
there's an easier way to write this that's valid in flow we can add special
support.

The best thing for now is probably to mark it as any, which means
anything except undefined (or null, I think).

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#48 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABy6l9EjP92IZ31DixLzRNh9Ty94G1TPks5quxo6gaJpZM4KJW57
.

from babel-plugin-flow-react-proptypes.

I'm not going to put it in the readme, but hopefully someone else asks about it in an issue, and comes with solutions 😄

from babel-plugin-flow-react-proptypes.

The simplest way is to use

children: any

or maybe

children: React$Element

from babel-plugin-flow-react-proptypes.

Thanks, @MoOx. Where does React$Element come from? I see in #14 you use ReactElement. I stole your code and dropped it into a common _types.js file:

export type ReactComponentState = {
  [key: string]: any
}

export type ReactElement = any

export type ReactNode = (
  state: ReactComponentState,
  setState: (state: ReactComponentState) => void
) => ReactElement

It might be worth it for this lib to export these. Even if it's just export type ReactNode = any, at least we would have a placeholder we could use for now.

from babel-plugin-flow-react-proptypes.

It should more be React$Element.
This comes from React core (not sure from where, but it's used here https://github.com/facebook/react/blob/16ac141f44583bd59f95f5b420a66bfcef01865e/flow/environment.js#L20)

from babel-plugin-flow-react-proptypes.

Isn't that just for elements, being objects with properties {type, props, key, ref}?

from babel-plugin-flow-react-proptypes.

Yeah so maybe...

children: number | string | React$Element<any> | Array<number | string | React$Element<any>>

But it will become complicated to handle...

from babel-plugin-flow-react-proptypes.

The thing is... you can already kinda do that. The only thing special you need to do is make a file types.js:

export type ReactNode = 
  number
  | string
  | {type: string | function, props: object, key?: any, ref?: string | function}
  | Array

And then import that in your component

import type {ReactNode} from './types';
type FooProps = {
  x: ReactNode
}

So us adding extra support for it doesn't really change anything. Unless we want to do a string match on GenericTypeAnnotation for 'ReactNode' or similar... which is gross and won't work well if you're actually using flow as a type checker.

from babel-plugin-flow-react-proptypes.

Actually that doesn't work currently, it seems to ignore the type annotation, likely because it's not an object.

from babel-plugin-flow-react-proptypes.

I don't have experience with flow or Babel internals, but that's what I was
thinking. You export ReactNode and transform to PrppTypes.Node.

On Fri, 30 Sep 2016, 00:06 Frankie Bagnardi, [email protected]
wrote:

Actually that doesn't work currently, it seems to ignore the type
annotation, likely because it's not an object.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#48 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABy6lzSKmjL3t3b_tGVgVhdmKbbrG4Ftks5qvLTvgaJpZM4KJW57
.

from babel-plugin-flow-react-proptypes.

Cool. I don't know when I'll have time to work on this. Feel free to send a PR if you have the time.

from babel-plugin-flow-react-proptypes.

This seems to work for me:

import type { Children } from 'react';

type Props = {
  children: Children,
};

EDIT: Granted, under the hood the type definition that the react module is exporting is just Children: any so in practice it's not much different than using any.

from babel-plugin-flow-react-proptypes.

I've been using { children?: React.Element<*> } as a node analog.

from babel-plugin-flow-react-proptypes.

I think this should be working these days - if you use a shared exported type, you will get what you need.

from babel-plugin-flow-react-proptypes.

@mhaas fixed this, so try the latest version and let us know if you have any issues.

from babel-plugin-flow-react-proptypes.