# babel-plugin-transform-hook-names

> Babel plugin to add hook names for Preact devtools

Latest version **1.0.2** (published 2021-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-transform-hook-names
pnpm add babel-plugin-transform-hook-names
yarn add babel-plugin-transform-hook-names
bun add babel-plugin-transform-hook-names
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-03-22 |
| First published | 2021-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 49.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | The Preact Authors |
| Maintainers | reznord, preactjs, developit, lukeed, prateekbh, harmony, marvinhagemeister, solarliner, jdecroock |
| Keywords | babel, hook, preact, devtools |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-transform-hook-names
- Repository: https://github.com/preactjs/babel-plugin-transform-hook-names
- Homepage: https://github.com/preactjs/babel-plugin-transform-hook-names#readme
- Issues: https://github.com/preactjs/babel-plugin-transform-hook-names/issues
- npm.io page: https://npm.io/package/babel-plugin-transform-hook-names

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2021-03-22
- 1.0.1 — 2021-02-02
- 1.0.0 — 2021-01-23

## README

# 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](./screenshot-before.png)

After:

![Screenshot of Preact devtools with this plugin](./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)

---
_Source: https://npm.io/package/babel-plugin-transform-hook-names · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._