babel-plugin-transform-hook-names

KO | EN

gitlite — search

#javascript #python #react #llm #go #machine-learning #rust #linux #docker #java #awesome #cli #pytorch #ios

babel-plugin-transform-hook-names

(★ 8)

Add custom hook names for devtools

babel-plugin-transform-hook-names 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# babel-plugin-transform-hook-names

A babel plugin to automatically infer hook names from your code and show them in the [Preact Devtools](https://preactjs.github.io/preact-devtools/) extension.

Before:

![Screenshot of Preact devtools without this plugin](https://raw.githubusercontent.com/preactjs/babel-plugin-transform-hook-names/main/screenshot-before.png)

After:

![Screenshot of Preact devtools with this plugin](https://raw.githubusercontent.com/preactjs/babel-plugin-transform-hook-names/main/screenshot-after.png)

Requires: Babel >= 7.12

## Usage

Install `babel-plugin-transform-hook-names` in your project:

```bash
npm install --save-dev babel-plugin-transform-hook-names
# or via yarn
yarn add -D babel-plugin-transform-hook-names
```

Then add it to your babel configuration:

```json
{
	"plugins": ["babel-plugin-transform-hook-names"]
}
```

## How does it work?

The way it works is that each hook is wrapped with a function that is passed the same name as the variable:

Input:

```js
// Works for "preact/compat" or "react" too
import { useState, useReducer, useRef } from "preact/hooks";

function Foo() {
	const [text, setText] = useState("hello");
	const [counter, increment] = useReducer(c => c + 1, 0);
	const rootElement = useRef();
	const memo = useMemo(() => text.toUpperCase(), ["text"]);
}
```

Output:

```js
import { addHookName } from "preact/devtools";
import { useState, useReducer, useRef } from "preact/hooks";

function Foo() {
	const [text, setText] = addHookName(useState("hello"), "text");
	const [counter, increment] = addHookName(
		useReducer(c => c + 1, 0),
		"counter",
	);
	const rootElement = addHookName(useRef(), "rootElement");
	const memo = addHookName(
		useMemo(() => text.toUpperCase(), ["text"]),
		"memo",
	);
}
```

## License

MIT, see the [LICENSE file](./LICENSE)

babel-plugin-transform-hook-names

babel-plugin-transform-hook-names 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

babel-plugin-transform-hook-names

babel-plugin-transform-hook-names 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README