babel-plugin-transform-hook-names

1.0.2 • Public • Published

babel-plugin-transform-hook-names

A babel plugin to automatically infer hook names from your code and show them in the Preact Devtools extension.

Before:

Screenshot of Preact devtools without this plugin

After:

Screenshot of Preact devtools with this plugin

Requires: Babel >= 7.12

Usage

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

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:

{
	"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:

// 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:

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

Dependencies (0)

    Dev Dependencies (13)

    Package Sidebar

    Install

    npm i babel-plugin-transform-hook-names

    Weekly Downloads

    48,175

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    50.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • rschristian
    • drewigg
    • reznord
    • preactjs
    • developit
    • marvinhagemeister
    • jdecroock
    • sventschui