Neutered Puppy Masquerade

    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

    Install

    npm i babel-plugin-transform-hook-names

    DownloadsWeekly Downloads

    8,510

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    50.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • sventschui
    • reznord
    • preactjs
    • developit
    • lukeed
    • prateekbh
    • harmony
    • marvinhagemeister
    • solarliner
    • jdecroock