Allow flow inference of cast variable definitions.

[jamesmfriedman]

I love this library, I use it to generate the documentation for https://jamesmfriedman.github.io/rmwc/.

If this library could detect cast expressions from Flow, it seemingly would fix any sort of style related issue for how people wanted to write their components.

I tried implementing this myself, but I just don't know enough about the codebase to make it happen.

For reference, this is what I'm currently doing to hack around this. I have a factory function that can't be detected, so I have to have a separate component that wraps it just to capture the flowtype definition. I get a lot of utility out of this library, but this is something I really wish I could fix.

BAD EXAMPLE

// @flow
// eslint-disable-next-line no-unused-vars
import * as React from 'react';
import { simpleTag } from '@rmwc/base';
import type { SimpleTagPropsT } from '@rmwc/base/simpleTag';

export type ElevationPropsT = {
  /** A number from 0 - 24 for different levels of elevation */
  z: number | string,
  /** Allows for smooth transitions between elevations when the z value changes. */
  transition?: boolean
} & SimpleTagPropsT;

const ElevationRoot = simpleTag({
  displayName: 'ElevationRoot',
  defaultProps: {
    z: 0,
    transition: false
  },
  tag: 'div',
  classNames: (props: ElevationPropsT) => [
    `mdc-elevation--z${props.z}`,
    { 'mdc-elevation-transition': props.transition }
  ],
  consumeProps: ['z', 'transition']
});

// I HAVE TO RE-WRAP THIS JUST TO MAKE IT WORK
/**
 * The Elevation Component
 */
export const Elevation: React.ComponentType<ElevationPropsT> = (
  props: ElevationPropsT
) => <ElevationRoot {...props} />;
Elevation.displayName = 'Elevation';

export default Elevation;

WHAT WOULD BE AMAZING

// @flow
// eslint-disable-next-line no-unused-vars
import * as React from 'react';
import { simpleTag } from '@rmwc/base';
import type { SimpleTagPropsT } from '@rmwc/base/simpleTag';

export type ElevationPropsT = {
  /** A number from 0 - 24 for different levels of elevation */
  z: number | string,
  /** Allows for smooth transitions between elevations when the z value changes. */
  transition?: boolean
} & SimpleTagPropsT;

// MAKE THIS WORK BECAUSE IT IS CASTING TO React.ComponentType<ElevationPropsT> 
/**
 * The Elevation Component
 */
const Elevation: React.ComponentType<ElevationPropsT> = simpleTag({
  displayName: 'Elevation',
  defaultProps: {
    z: 0,
    transition: false
  },
  tag: 'div',
  classNames: (props: ElevationPropsT) => [
    `mdc-elevation--z${props.z}`,
    { 'mdc-elevation-transition': props.transition }
  ],
  consumeProps: ['z', 'transition']
});

export default Elevation;