reactjs / reactjs/react-docgen

Allow flow inference of cast variable definitions.

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

Nobody has claimed this yet.

flow
Dominant language
TypeScript
Stars
3.8k
Forks
316
Avg merge
5h 7m
Merged PRs (30d)
4

Description

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;

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.

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.

Assessment

Tech stack
javascript, react, typescript
Domain
documentation, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.