npmpackage.info

Gathering detailed insights and metrics for react-docgen-typescript-dumi-tmp

Other packages similar to react-docgen-typescript-dumi-tmp

react-docgen-typescript

2.2.2

[![Build Status](https://github.com/styleguidist/react-docgen-typescript/actions/workflows/nodejs.yml/badge.svg)](https://github.com/styleguidist/react-docgen-typescript/actions/workflows/nodejs.yml)

@storybook/react-docgen-typescript-plugin

1.0.1

A webpack plugin to inject react typescript docgen information.

react-docgen-typescript-plugin

1.0.8

A webpack plugin to inject react typescript docgen information.

react-docgen-typescript-loader

3.7.2

Webpack loader to generate docgen information from TypeScript React components.

Gathering detailed insights and metrics for react-docgen-typescript-dumi-tmp

react-docgen-typescript-dumi-tmp

A simple parser for react properties defined in typescript instead of propTypes.

1.22.1-0

1,191

MIT

TypeScript

4.99 kB

991,795 3.2

Installations

npm install react-docgen-typescript-dumi-tmp

Score

85.9

Supply Chain

99.6

Quality

74.8

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

5

Total

274

Closed

57

Merged

212

Issues

Open

9

Total

236

Closed

227

Releases

v2.2.2

Published on 11 Dec 2021

v2.2.1

Published on 01 Dec 2021

v2.1.1

Published on 09 Oct 2021

v2.1.0

Published on 01 Aug 2021

v2.0.0

Published on 09 Jun 2021

v1.22.0

Published on 04 Apr 2021

View all 71 releases

Developer

styleguidist

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

15.6.0

NPM Version

7.4.0 Statistics

1,191 Stars

576 Commits

252 Forks

9 Watching

12 Branches

72 Contributors

Updated on 18 Nov 2024

Bundle Size

16.46 kB

Minified

4.99 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

991,795

Last day

67.1%

1,537

Compared to previous day

Last week

-18.1%

8,963

Compared to previous week

Last month

141.7%

27,470

Compared to previous month

Last year

-41.8%

179,982

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

typescript

Dev Dependencies

@types/chai @types/lodash @types/mocha @types/node @types/prop-types @types/react @types/source-map-support chai eslint husky install lint-staged lodash mocha prettier prop-types react source-map-support typescript

Versions

react-docgen-typescript

A simple parser for React properties defined in TypeScript instead of propTypes.

It can be used with React Styleguidist.

Installation

1npm install --save-dev react-docgen-typescript

Usage

To parse a file for docgen information use the parse function.

1const docgen = require("react-docgen-typescript");
2
3const options = {
4  savePropValueAsString: true,
5};
6
7// Parse a file for docgen info
8docgen.parse("./path/to/component", options);

If you want to customize the typescript configuration or docgen options, this package exports a variety of ways to create custom parsers.

1const docgen = require("react-docgen-typescript");
2
3// Create a parser with the default typescript config and custom docgen options
4const customParser = docgen.withDefaultConfig(options);
5
6const docs = customParser.parse("./path/to/component");
7
8// Create a parser with the custom typescript and custom docgen options
9const customCompilerOptionsParser = docgen.withCompilerOptions(
10  { esModuleInterop: true },
11  options
12);
13
14// Create a parser with using your typescript config
15const tsConfigParser = docgen.withCustomConfig("./tsconfig.json", {
16  savePropValueAsString: true,
17});

React Styleguidist integration

Include following line in your styleguide.config.js:

1module.exports = {
2  propsParser: require("react-docgen-typescript").withDefaultConfig([
3    parserOptions,
4  ]).parse,
5};

or if you want to use custom tsconfig file

1module.exports = {
2  propsParser: require("react-docgen-typescript").withCustomConfig(
3    "./tsconfig.json",
4    [parserOptions]
5  ).parse,
6};

Options

`propFilter`

The propFilter option allows you to omit certain props from documentation generation.

You can either provide and object with some of our pre-configured filters:

1interface FilterOptions {
2  skipPropsWithName?: string[] | string;
3  skipPropsWithoutDoc?: boolean;
4}
5
6const options = {
7  propFilter: {
8    skipPropsWithName: ['as', 'id'];
9    skipPropsWithoutDoc: true;
10  }
11}

If you do not want to print out all the HTML attributes of a component typed like the following:

1const MyComponent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ()...

you can provide a propFilter function and do the filtering logic yourself.

1type PropFilter = (prop: PropItem, component: Component) => boolean;
2
3const options = {
4  propFilter: (prop: PropItem, component: Component) => {
5    if (prop.declarations !== undefined && prop.declarations.length > 0) {
6      const hasPropAdditionalDescription = prop.declarations.find((declaration) => {
7        return !declaration.fileName.includes("node_modules");
8      });
9
10      return Boolean(hasPropAdditionalDescription);
11    }
12
13    return true;
14  },
15};

Note: children without a doc comment will not be documented.

`componentNameResolver`

1(exp: ts.Symbol, source: ts.SourceFile) => string | undefined | null | false;

If a string is returned, then the component will use that name. Else it will fallback to the default logic of parser.

`shouldExtractLiteralValuesFromEnum`: boolean

If set to true, string enums and unions will be converted to docgen enum format. Useful if you use Storybook and want to generate knobs automatically using addon-smart-knobs.

`shouldExtractValuesFromUnion`: boolean

If set to true, every unions will be converted to docgen enum format.

`shouldSortUnions`: boolean

When used in combination with shouldExtractValuesFromUnion or shouldExtractLiteralValuesFromEnum, sorts union members in string-sort order when set to true. This is useful for ensuring the same order of members every time.

`skipChildrenPropWithoutDoc`: boolean (default: `true`)

If set to false the docs for the children prop will be generated even without an explicit description.

`shouldRemoveUndefinedFromOptional`: boolean

If set to true, types that are optional will not display " | undefined" in the type.

`savePropValueAsString`: boolean

If set to true, defaultValue to props will be string. Example:

1Component.defaultProps = {
2  counter: 123,
3  disabled: false,
4};

Will return:

1  counter: {
2      defaultValue: '123',
3      required: true,
4      type: 'number'
5  },
6  disabled: {
7      defaultValue: 'false',
8      required: true,
9      type: 'boolean'
10  }

Styled components example:

1componentNameResolver: (exp, source) =>
2  exp.getName() === "StyledComponentClass" && getDefaultExportForFile(source);

The parser exports getDefaultExportForFile helper through its public API.

Example

In the example folder you can see React Styleguidist integration.

Warning: only named exports are supported. If your project uses default exports, you still need to include named exports for react-docgen-typescript.

The component Column.tsx

1import * as React from "react";
2import { Component } from "react";
3
4/**
5 * Column properties.
6 */
7export interface IColumnProps {
8  /** prop1 description */
9  prop1?: string;
10  /** prop2 description */
11  prop2: number;
12  /**
13   * prop3 description
14   */
15  prop3: () => void;
16  /** prop4 description */
17  prop4: "option1" | "option2" | "option3";
18}
19
20/**
21 * Form column.
22 */
23export class Column extends Component<IColumnProps, {}> {
24  render() {
25    return <div>Test</div>;
26  }
27}

Will generate the following stylesheet:

Stylesheet example

The functional component Grid.tsx

1import * as React from "react";
2
3/**
4 * Grid properties.
5 */
6export interface IGridProps {
7  /** prop1 description */
8  prop1?: string;
9  /** prop2 description */
10  prop2: number;
11  /**
12   * prop3 description
13   */
14  prop3: () => void;
15  /** Working grid description */
16  prop4: "option1" | "option2" | "option3";
17}
18
19/**
20 * Form Grid.
21 */
22export const Grid = (props: IGridProps) => {
23  const smaller = () => {
24    return;
25  };
26  return <div>Grid</div>;
27};

Will generate the following stylesheet:

Stylesheet example

Contributions

The typescript is pretty complex and there are many different ways how to define components and their props so it's realy hard to support all these use cases. That means only one thing, contributions are highly welcome. Just keep in mind that each PR should also include tests for the part it's fixing.

Thanks to all contributors without their help there wouldn't be a single bug fixed or feature implemented. Check the contributors tab to find out more. All those people supported this project. THANK YOU!

Thanks to others

The integration with React Styleguidist wouldn't be possible without Vyacheslav Slinko pull request #118 at React Styleguidist.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

7

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

75 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7

Score

3.2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-docgen-typescript-dumi-tmp

Other packages similar to react-docgen-typescript-dumi-tmp

react-docgen-typescript-dumi-tmp

Installations

Score

Pull Requests

5

274

57

212

Issues

9

236

227

Releases

Developer

styleguidist

Developer Guide

CommonJS

Yes

15.6.0

7.4.0

Statistics

Bundle Size

16.46 kB

4.99 kB

Languages

Total Downloads

991,795

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

react-docgen-typescript

Installation

Usage

React Styleguidist integration

Options

propFilter

componentNameResolver

shouldExtractLiteralValuesFromEnum: boolean

shouldExtractValuesFromUnion: boolean

shouldSortUnions: boolean

skipChildrenPropWithoutDoc: boolean (default: true)

shouldRemoveUndefinedFromOptional: boolean

savePropValueAsString: boolean

Example

Contributions

Thanks to others

10

10

10

7

0

0

0

0

0

0

0

0

0

3.2

/10

`propFilter`

`componentNameResolver`

`shouldExtractLiteralValuesFromEnum`: boolean

`shouldExtractValuesFromUnion`: boolean

`shouldSortUnions`: boolean

`skipChildrenPropWithoutDoc`: boolean (default: `true`)

`shouldRemoveUndefinedFromOptional`: boolean

`savePropValueAsString`: boolean