reactjs / reactjs/react-docgen
Allow flow inference of cast variable definitions.
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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