Registry / testing / babel-plugin-transform-hook-names

babel-plugin-transform-hook-names

JSON →
library1.0.2jsnpmunverified

Babel plugin (v1.0.2) that automatically infers and attaches names to Preact hooks for improved debugging in Preact DevTools. It transforms hook calls like useState, useReducer, useRef, and useMemo by wrapping them with addHookName, using the variable name as the hook name. Requires @babel/core >= 7.12. Lightweight and specific to Preact; no alternative plugins exist for this exact purpose. Released under MIT.

npm install babel-plugin-transform-hook-names
INSTALL
IMPORT
SIG · BABEL-PLUGIN-TRANS
B
babel-plugin-transform-hook-names
testingjavascriptv1.0.2
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

default import (plugin)
module.exports = { plugins: ['babel-plugin-transform-hook-names'] }
plugins: ['transform-hook-names']
Use full npm package name in babel config; not just the suffix
addHookName
import { addHookName } from 'preact/devtools'
import { addHookName } from 'babel-plugin-transform-hook-names'
addHookName is exported by preact/devtools, not by this plugin
Plugin programmatic use
const plugin = require('babel-plugin-transform-hook-names')
const plugin = require('babel-plugin-transform-hook-names').default
Plugin is CommonJS; no default export

Installs the Babel plugin and shows how it transforms hook calls to include names for Preact DevTools.

// Install: npm install --save-dev babel-plugin-transform-hook-names // Add to .babelrc or babel.config.js: { "plugins": ["babel-plugin-transform-hook-names"] } // Example input: import { useState, useReducer, useRef, useMemo } 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 (in bundle): // import { addHookName } from 'preact/devtools'; // ... const [text, setText] = addHookName(useState('hello'), 'text');
Debug
Known issues
gotchaPlugin only works with Preact hooks; does not support React hooks unless using preact/compat
fix
Ensure you are using preact/hooks or preact/compat; this plugin is for Preact DevTools only
affects: all
breakingRequires Babel >= 7.12; will fail silently or throw on older versions
fix
Upgrade @babel/core to >= 7.12.10
affects: <7.12
gotchaPlugin does not automatically import addHookName; you must have preact/devtools available at runtime
fix
Ensure preact/devtools is installed and imports/requires work in your build environment
affects: all
deprecatedNo known deprecations; maintainers have not released updates since v1.0.2 (latest as of 2023)
affects: all
gotchaThe plugin may not work if the variable name is not statically analyzable (e.g., dynamic destructuring)
fix
Use static variable assignments for hooks (e.g., const [foo, setFoo] = useState(...)) for the plugin to infer names
affects: all
Errors
Common errors & fixes
Error: Cannot find module 'babel-plugin-transform-hook-names'
Plugin not installed or not saved as devDependency
fix
npm install --save-dev babel-plugin-transform-hook-names
SyntaxError: Unexpected token: plugin 'babel-plugin-transform-hook-names' is missing
Babel version < 7.12
fix
Update @babel/core to version >= 7.12.10
Hook names not appearing in Preact DevTools
addHookName from preact/devtools not being called (e.g., plugin not transforming)
fix
Verify plugin is in babel config, and preact/devtools is imported at runtime
TypeError: addHookName is not a function
preact/devtools not installed or addHookName not exported in that version
fix
Ensure preact is installed and version includes addHookName (preact >= 10.5)
Upgrade
Version history
1.0.2latest on npm
Audit
Dependencies
@babel/corerequiredpeer dependency required for Babel plugin to function
Agent activity
27 hits · last 30 days
node
22
OpenAI (training)
2
Perplexity
1
Resources
babel-plugin-transform-hook-names — npm install babel-plugin-transform-hook-names · libregistry