# component-metadata-typescript-loader

> Webpack loader to parse typescript React component metadata from source code.

Latest version **1.0.2** (published 2019-06-03) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install component-metadata-typescript-loader
pnpm add component-metadata-typescript-loader
yarn add component-metadata-typescript-loader
bun add component-metadata-typescript-loader
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-06-03 |
| First published | 2019-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 22.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Kingller Tang |
| Maintainers | kingller |
| Keywords | react, docgen, webpack, component, metadata, typescript, loader |

## Links

- npm: https://www.npmjs.com/package/component-metadata-typescript-loader
- Repository: https://github.com/kingller/component-metadata-typescript-loader
- Issues: https://github.com/kingller/component-metadata-typescript-loader/issues
- npm.io page: https://npm.io/package/component-metadata-typescript-loader

## Dependencies (3)

- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [react-docgen-typescript](https://npm.io/package/react-docgen-typescript.md) ^1.12.3
- [@webpack-contrib/schema-utils](https://npm.io/package/@webpack-contrib/schema-utils.md) ^1.0.0-beta.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2019-06-03
- 1.0.1 — 2019-04-26
- 1.0.0 — 2019-04-25

## README

# component-metadata-typescript-loader
A Webpack loader for extracting React Component metadata (props, comments jsDoclets, etc) defined in TypeScript. 
Helpful for get documentation information from React components, it uses 
[react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) 
to parse and return JSON metadata when requiring a file.

## Installation

```sh
$ npm install --save component-metadata-typescript-loader
```

## Usage

Generally you will want to use the inline request syntax for using this loader,
instead of adding it to your config file.

```js
var metadata = require('component-metadata-typescript-loader!./some/my-component');

metadata.componentDocs[0] // { props, description, displayName }
```

### Instruction

The loader will parse out any jsDoc style from either component or propType comment blocks. You can
access them from `metadata.componentDocs[0].props`

- `@required` will mark a prop as required as if you had used `string.isRequired` for the propType.
- `@type`: overrides the type name of the prop, also accepts the following syntax for enums
or `oneOf` props `('foo'|'bar'|'baz')`
- `@defaultValue`: for manually specifying a default value for a prop.

### Exporting Components

**It is important** to export your component using a named export for docgen information to be generated properly.

---

`TicTacToeCell.tsx`:

```javascript
import React, { Component } from "react";
import * as styles from "./TicTacToeCell.css";

interface Props {
  /**
   * Value to display, either empty (" ") or "X" / "O".
   *
   * @default " "
   **/
  value?: " " | "X" | "O";

  /** Cell position on game board. */
  position: { x: number, y: number };

  /** Called when an empty cell is clicked. */
  onClick?: (x: number, y: number) => void;
}

/**
 * TicTacToe game cell. Displays a clickable button when the value is " ",
 * otherwise displays "X" or "O".
 */
// Notice the named export here, this is required for docgen information
// to be generated correctly.
export class TicTacToeCell extends Component<Props> {
  handleClick = () => {
    const {
      position: { x, y },
      onClick,
    } = this.props;
    if (!onClick) return;

    onClick(x, y);
  };

  render() {
    const { value = " " } = this.props;
    const disabled = value !== " ";
    const classes = `${styles.button} ${disabled ? styles.disabled : ""}`;

    return (
      <button
        className={classes}
        disabled={disabled}
        onClick={this.handleClick}
      >
        {value}
      </button>
    );
  }
}

// Component can still be exported as default.
export default TicTacToeCell;
```

## Limitations

This plugin makes use of the project:
https://github.com/styleguidist/react-docgen-typescript.
It is subject to the same limitations.

### Export Names

Component docgen information can not be
generated for components that are only exported as default. You can work around
the issue by exporting the component using a named export.

```javascript
import * as React from "react";

interface ColorButtonProps {
  /** Buttons background color */
  color: "blue" | "green";
}

/** A button with a configurable background color. */
export const ColorButton: React.SFC<ColorButtonProps> = props => (
  <button
    style={{
      padding: 40,
      color: "#eee",
      backgroundColor: props.color,
      fontSize: "2rem",
    }}
  >
    {props.children}
  </button>
);

export default ColorButton;
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

---
_Source: https://npm.io/package/component-metadata-typescript-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._