kuveytturk / react-dts-generator Goto Github PK

View Code? Open in Web Editor NEW

19.0 3.0 5.0 808 KB

Typescript definitions for React components.

License: Apache License 2.0

TypeScript 89.65% JavaScript 10.35%

react typescript typings dts definitelytyped

react-dts-generator's Introduction

react-dts-generator

Simple .d.ts generator for React components. Try with Repl.

Installation

## npm
npm install react-dts-generator
## yarn
yarn add react-dts-generator

Usage

import { generate } from 'react-dts-generator';
const result = generate(options);

Options

`input: string`

Path of the .js file that contains React Component. react-dts-generator use the react-docgen library to generate props and methods. The input file format guideline:

Modules have to export a single component, and only that component is analyzed.
When using React.createClass, the component definition (the value passed to it) must resolve to an object literal.
When using classes, the class must either extend React.Component or define a render() method.
propTypes must be an object literal or resolve to an object literal in the same file.
The return statement in getDefaultProps must contain an object literal.

`output: string`

The .d.ts file that contains typescript definitions. If not specified output file will be exported to the same location of the input file.

`isBaseClass?: boolean`

If the input component is a base class for another component the type definition could be generated with generic prop types like below. Then, another component could pass own props to the base class definition.

Input

import React from 'react';
import PropTypes from 'prop-types';

class BaseClass extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.bar = this.bar.bind(this);
    }

    foo = () => { }
    bar() { }

    render() {
        return <div>BaseClass</div>;
    }
}

BaseClass.propTypes = {
    foo: PropTypes.any,
}

export default BaseClass;

Generate

const result = generate({
	input: 'path-to-input',
	isBaseClass: true,
});

Output

import * as React from "react";

export interface BaseClassProps {
  foo?: any;
}

export default class BaseClass<T = any> extends React.Component<T> {
  foo(): any;
  bar(): any;
}

`extends?: { includePropsAsGeneric: boolean, import: ImportType }`

If the input component inherits from another component, the base class could import from outside.

includePropsAsGeneric: boolean Should the props of the input component pass to the base class as generic?
import: ImportType Indicates where the base class located.

Input

import * as React from 'react';
import * as PropTypes from 'prop-types';
import BaseClass from './base';

class TestClass extends BaseClass {
	render() {
		return <div>TestClass</div>;
	}
}

TestClass.propTypes = {
	foo: PropTypes.any,
}

export default TestClass;

Generate

const result = generate({
	input: 'path-to-input',
	extends: {
		import: {
			default: 'BaseClass',
			from: './base',
		},
		includePropsAsGeneric: true,
	},
});

Output

import * as React from "react";
import BaseClass from "./base";

export interface TestClassProps {
  foo?: any;
}

export default class TestClass extends BaseClass<TestClassProps> {}

`propTypesComposition: ImportType[]`

If the component propTypes has composes by another component's propTypes, and typescript definitions of the other component were already generated they could be imported and generated types extend from them.

TestClass.propTypes = {
	...BaseClass.propTypes,
	foo: PropTypes.any,
}

const result = generate({
	input: 'path-to-input',
	propTypesComposition: [{
		named: 'BaseClass',
		from: '../base-props-path',
	}],
});

Samples

Checkout the baselines and tests.

Known Issues

These propTypes generated as any
- PropTypes.symbol
- PropTypes.elementType
- PropTypes.instanceOf
- PropTypes.objectOf
- PropTypes.exact
Custom propTypes is not supported.

react-dts-generator's People

Contributors

Stargazers

Watchers

Forkers

vvscode erintherad renrizzolo despegar runekingthor

react-dts-generator's Issues

Add fallback to `any` / `unknown` in case of errors in generating `.d.ts`

@KuveytTurk

In some cases, the generator fails with errors. Looks like it worth to add a fallback to any type in such cases

Publish the generator

I think the generator ready for the first release. Baselines folder has a simple set for possible PropTypes and tests cover them.

Also, I tried the generator with @KuveytTurk packages locally. If we could improve the documentation inside the code, we could get better output.

Could you pls review the repo, is there any suggestion?

Sample output

ComponentBase.d.ts

import * as React from "react";
import { ComponentSize } from "@kuveytturk/boa-base";

export interface ComponentBaseProps {
  componentSize?:
    | ComponentSize.LARGE
    | ComponentSize.MEDIUM
    | ComponentSize.SMALL
    | ComponentSize.XSMALL;
  context?: object;
  disabled?: boolean;
  id?: string;
  isVisible?: boolean;
  newLine?: boolean;
  snapKey?: string;
  snapshot?: object;
  style?: object;
  valueConstraint?: object;
  visible?: boolean;
}

export default class ComponentBase<T = any> extends React.Component<T> {
  getInstance(): this;
  getMessage(groupName: string, propertyName: string): string;
  getMessageCode(groupName: string, propertyName: string): any;
  getSnapKey(childSnapKey: string): string;
  getSnapshot(): any;
  setSnapshot(snapshot: any): any;
  isMobile(): boolean;
  isMobileOrTablet(): boolean;
  validateConstraint(): boolean;
}

And Input.d.ts

import * as React from "react";
import { ComponentBaseProps, EditorBase } from "@kuveytturk/boa-base";

export interface InputProps extends ComponentBaseProps {
  bottomLeftInfo?: string;
  bottomLeftInfoEnable?: boolean;
  bottomRightInfo?: string;
  bottomRightInfoEnable?: boolean;
  defaultValue?: any;
  disabledCounterCharacter?: string;
  errorStyle?: object;
  errorText?: string;
  floatingLabelStyle?: object;
  floatingLabelText?: string;
  formControlStyle?: object;
  fullWidth?: boolean;
  helperText?: string;
  hintText?: string;
  id?: string;
  inlineGridMode?: boolean;
  inputAlign?: "left" | "right" | "center";
  inputProps?: object;
  inputStyle?: object;
  maskedMaxLength?: number;
  maxLength?: number;
  multiLine?: boolean;
  name?: string;
  noWrap?: boolean;
  onBlur?(): void;
  onChange?(): void;
  onChangeSync?(): void;
  onClearClick?(): void;
  onFocus?(): void;
  onKeyDown?(): void;
  onKeyUp?(): void;
  onTimerFinished?(): void;
  prefixText?: any;
  rows?: number;
  rowsMax?: number;
  showClearButton?: boolean;
  showCounter?: boolean;
  suffixText?: any;
  textSelection?: object;
  timerDuration?: number;
  type?: "password" | "text" | "numeric";
  underlineShow?: boolean;
  value?: any;
}

export default class Input extends EditorBase<InputProps> {
  counterUpdate(props: any, value: any): any;
  getValue(): any;
  setValue(value: any): any;
  resetValue(): any;
  setDisable(value: any): any;
  onBlur(e: any): any;
  onChange(e: any, v: any): any;
  onFocus(e: any): any;
  setTimer(duration: any): any;
  focus(): any;
  validationToString(): any;
}

Command line interface

Hello, this project is fantastic, congratulations.

It would be interesting to be able to use the library from the command line. If it is of interest, I send a PR.