React generates documents automatically through comments

Time:2020-3-22

Recently, I found some document generation tools and found thisReact StyleguidistThe corresponding documents can be generated automatically through comments, which is very convenient for react library

install

npm i -D react-styleguidist

// or

yarn add -D react-styleguidist

Typescript support

npm i -D react-docgen-typescript

To configure

This example uses CRA to create projects, and other projects are also supported by click reference

Create under root folderstyleguide.config.jsfile
You can use the following configuration

const path = require('path')

const packagePath = path.resolve(
    __dirname,
    'package.json'
)
const packageFile = require(packagePath)


module.exports = {
    Webbackconfig: require ('. / config / webback. Config'), // the path of webback can be created by using the one in the project or webback blocks
    Components: 'Src / component / * *. TSX', // write to the document of the corresponding directory
    propsParser: require('react-docgen-typescript').withCustomConfig(
        './tsconfig.json'
    ). parse, // used to support TSX
    Verbose: true, // print details
    updateDocs(docs, file) {
        if (docs.doclets.version) {
            const version = packageFile.version

            docs.doclets.version = version
            docs.tags.version[0].description = version
        }

        return docs
    }, // use the version of package.json when using @ version
    Version: packagefile.version, // same as the previous version using package.json
    Usagemode: 'expand', // automatically open the zoom of the document
    Pagepersection: true, // whether to display one component per page
    Title: "document name" // document name
}

For more specific configuration items, please refer to this reference

Writing notes

Example 1:

import React from 'react';

interface IProps {
  /**
   * user name
   */
  name: string
  /**
   * age
   */
  age?: number
  /**
   * work
   * @default doctor
   */
  work?: string
  /**
   *Change name
   * @param name
   */
  changeName?: (name: string) => void
}

/**
 *Person component
 * @version package.json
 *Display of @ visiblename person component name
 */
function Person(props: IProps) {
  return <div>Person</div>
}

export default Person;

Add use case:

    import Person from './Person';
    <Person name="grewer"/>

Legend:

React generates documents automatically through comments

Example 2:

import React from 'react';

interface IProps {
  type: 'submit' | 'button'

  /**
   * Size
   *@ deprecated use size2 instead
   */
  size?: 'small' | 'default'

  /**
   *New size
   * @since 1.1.0
   * @default large
   */
  size2?: 'small' | 'large'
}

/**
 *@ link [antd button] (https://ant.design/components/button-cn/) can be viewed
 */
class Button extends React.Component<IProps, any> {
  static config = {
    Desc: "this is the static attribute"
  }

  /**
   *Click event
   * @public
   */
  clickHandle = (ev: Event) => {
    console.log('!')
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return <div>{this.props.children}</div>
  }
}


export default Button;

Legend:

React generates documents automatically through comments

Result

Use the following command to create a web service and modify the document online:

styleguidist server

Use the following command to package a document project

styleguidist build

If the library is on GitHub, it can be openedGitHub PagesFunction, submit the document package to GitHub;
View the result page of this example:

https://grewer.github.io/styleguidist-boilerplate/styleguide/

epilogue

When you use react to develop and want to write documents, React StyleguidistAbsolutely one of the best
If your library is on GitHub, you can generate your document site immediately

Recommended Today

Spacemacs learning notes

install git clone https://github.com/syl20bnr/spacemacs ~/.emacs.d pacman -S emacs Change software source, edit.spacemacs, reference. Add the following code to the.spacemacsIndotspacemacs/user-init() (setq configuration-layer–elpa-archives ‘((“melpa-cn” . “http://mirrors.tuna.tsinghua.edu.cn/elpa/melpa/”) (“org-cn” . “http://mirrors.tuna.tsinghua.edu.cn/elpa/org/”) (“gnu-cn” . “http://mirrors.tuna.tsinghua.edu.cn/elpa/gnu/”))) basic editing new file spc f f e path Save edits spc f s :w Close buffer spc b d Install the corresponding syntax extension […]