Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/viijay-kr/ts-transform-react-display-name
Typescript transformer plugin for appending display name property to React Components.
https://github.com/viijay-kr/ts-transform-react-display-name
jsx react transformer typescript
Last synced: 13 days ago
JSON representation
Typescript transformer plugin for appending display name property to React Components.
- Host: GitHub
- URL: https://github.com/viijay-kr/ts-transform-react-display-name
- Owner: Viijay-Kr
- Created: 2024-05-20T15:49:22.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-21T07:36:44.000Z (9 months ago)
- Last Synced: 2024-11-30T15:13:46.495Z (2 months ago)
- Topics: jsx, react, transformer, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ts-transform-react-display-name
- Size: 79.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ts-transform-react-display-name
Typescript [transformer](https://github.com/itsdouges/typescript-transformer-handbook) plugin for appending [display name](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) property to React Components.
Works with [tspc](https://github.com/nonara/ts-patch), [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader#getcustomtransformers-string--program-tsprogram--tscustomtransformers--undefined-defaultundefined), [ts-loader](https://github.com/TypeStrong/ts-loader#getcustomtransformers), (until typescript comes up with built in [support](https://github.com/microsoft/TypeScript/issues/54276)).
## Supports
- [Arrow function components](https://github.com/Viijay-Kr/ts-transform-react-display-name/blob/main/examples/arrow_functions.tsx)
- [Normal function components](https://github.com/Viijay-Kr/ts-transform-react-display-name/blob/main/examples/function_components.tsx)
- [Forward ref components](https://github.com/Viijay-Kr/ts-transform-react-display-name/blob/main/examples/forwardref_like.tsx)
- [Memoized components](https://github.com/Viijay-Kr/ts-transform-react-display-name/blob/main/examples/memo_like.tsx)
- [Return Expression Variations](https://github.com/Viijay-Kr/ts-transform-react-display-name/blob/main/examples/return_expression_like.tsx)
## Usage
### Prerequisites
`npm install tspc ts-transform-react-display-name -D`
### TS Config
```json
{
"compilerOptions": {
"plugins": [
{
"transform": "ts-transform-react-display-name",
"prefix": "YOUR_PREFERRED_PREFIX"
}
]
}
}
```
### Run
Run `tspc` instead of `tsc`. The emitted files should be transformed with display name property
## Example
### Input
```tsx
// Component.tsx
import * as React from "react";
export const ArrowComponent = () => {
const InnerArrowComponent: React.FC = () =>
;
return (
<>
Hello from typescript transformer
>
);
};
export const ArrowComponentSpan = () => {
return
Hello from typescript transformer
;
};
```
### Output
```js
...
ArrowComponent.displayName = "TSTransform_ArrowComponent";
ArrowComponentSpan.displayName = "TSTransform_ArrowComponentSpan";
```
### Contributing
install dependencies:
```bash
bun install
```
To run:
```bash
bun run build:examples
```
To build Library:
```bash
bun run build
```