Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Allow flow inference of cast variable definitions.

Open
#297 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
38/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale

Research direction

The issue provides no repository file, test, or entry point. Start by tracing how react-docgen detects component definitions and Flow type annotations, using the two Elevation examples as inputs; done means the cast assignment is detected as a component and its props type is extracted without the wrapper.

Written by the indexing model from the issue text.

Description

flow

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;
Dominant language
TypeScript
Stars
3.8k
Forks
316
Avg merge
3h 28m
Merged PRs (30d)
6

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reactjs/react-docgen

All issues in reactjs/react-docgen

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.