{"_id":"@custardcream/babel-plugin-react-effect-namer","_rev":"2-c1c41b408c339d2ed54551d5a2b3aa94","name":"@custardcream/babel-plugin-react-effect-namer","dist-tags":{"experimental":"0.0.2-experimental.0","latest":"0.0.3"},"versions":{"0.0.2-experimental.0":{"name":"@custardcream/babel-plugin-react-effect-namer","version":"0.0.2-experimental.0","keywords":["babel","plugin","react","effect","hook"],"author":{"name":"custardcream98"},"license":"MIT","_id":"@custardcream/babel-plugin-react-effect-namer@0.0.2-experimental.0","maintainers":[{"name":"custardcream98","email":"custardcream@kakao.com"}],"homepage":"https://github.com/custardcream98/babel-plugin-react-effect-namer#readme","bugs":{"url":"https://github.com/custardcream98/babel-plugin-react-effect-namer/issues"},"dist":{"shasum":"9188f3f1dcb6dd84db8252c9c9f58e3fdd486281","tarball":"https://registry.npmjs.org/@custardcream/babel-plugin-react-effect-namer/-/babel-plugin-react-effect-namer-0.0.2-experimental.0.tgz","fileCount":2,"integrity":"sha512-ku0at16+/fugJ+7N5UempkvrQnid7gA8ks+LhLE5dtwD05j5mIQMlXoGuqMfS/SS64GxoAceE9x2P2PUGmFb1g==","signatures":[{"sig":"MEQCIFnJnn0NdY6FVF03MmiUuMhNaw+GUm7QELL1k/6gz413AiBW7BkWuDhTfvZAgGGCXKUQjQ0TmifAO8WZClxj5KQdNg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4385},"main":"dist/index.js","_from":"file:custardcream-babel-plugin-react-effect-namer-0.0.2-experimental.0.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./package.json":"./package.json"},"scripts":{"test":"vitest","build":"tsc","changeset":"changeset","changeset:pre":"changeset pre","changeset:publish":"changeset publish","changeset:version":"changeset version"},"_npmUser":{"name":"custardcream98","email":"custardcream@kakao.com"},"_resolved":"/private/var/folders/4v/r704pd8j23x6lvhrfbwvk89r0000gn/T/53655ff8098d32f721747408e6de3edb/custardcream-babel-plugin-react-effect-namer-0.0.2-experimental.0.tgz","_integrity":"sha512-ku0at16+/fugJ+7N5UempkvrQnid7gA8ks+LhLE5dtwD05j5mIQMlXoGuqMfS/SS64GxoAceE9x2P2PUGmFb1g==","repository":{"url":"git+https://github.com/custardcream98/babel-plugin-react-effect-namer.git","type":"git"},"_npmVersion":"10.9.0","description":"Babel plugin for naming effect hook callbacks","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.0.6","@babel/cli":"^7.26.4","typescript":"^5.7.3","@babel/core":"^7.26.9","@types/node":"^22.13.4","@babel/types":"^7.26.9","@changesets/cli":"^2.28.0","@types/babel__core":"^7.20.5","@babel/preset-react":"^7.26.3"},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-react-effect-namer_0.0.2-experimental.0_1739899810210_0.6623838052897648","host":"s3://npm-registry-packages-npm-production"}},"0.0.2-experimental.1":{"name":"@custardcream/babel-plugin-react-effect-namer","version":"0.0.2-experimental.1","keywords":["babel","plugin","react","effect","hook"],"author":{"name":"custardcream98"},"license":"MIT","_id":"@custardcream/babel-plugin-react-effect-namer@0.0.2-experimental.1","maintainers":[{"name":"custardcream98","email":"custardcream@kakao.com"}],"homepage":"https://github.com/custardcream98/babel-plugin-react-effect-namer#readme","bugs":{"url":"https://github.com/custardcream98/babel-plugin-react-effect-namer/issues"},"dist":{"shasum":"ed72c2a2c13e458573bdbf91965da5a0015f8767","tarball":"https://registry.npmjs.org/@custardcream/babel-plugin-react-effect-namer/-/babel-plugin-react-effect-namer-0.0.2-experimental.1.tgz","fileCount":10,"integrity":"sha512-eH2H09NMjMHUwUyDD8rbzc6NCmG8KCBhkpfFPKeUv5ehiXe9pfmAe8mefSxIn0Y4FngUo2Rz77mrr1VHrUnn/Q==","signatures":[{"sig":"MEUCID+mHEkXyc1S1fZ3AxCamFaZ4wy3yS25kPsy7ajM9g1yAiEA9JksldEmkp39LQkCU3pdJEbyLJkgkLvyl1ldEZyeGRc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21497},"main":"dist/index.js","_from":"file:custardcream-babel-plugin-react-effect-namer-0.0.2-experimental.1.tgz","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./package.json":"./package.json"},"scripts":{"test":"vitest","build":"tsc","changeset":"changeset","changeset:pre":"changeset pre","changeset:publish":"changeset publish","changeset:version":"changeset version"},"_npmUser":{"name":"custardcream98","email":"custardcream@kakao.com"},"_resolved":"/private/var/folders/4v/r704pd8j23x6lvhrfbwvk89r0000gn/T/37f663a6d7f757c507704f73fb1b0889/custardcream-babel-plugin-react-effect-namer-0.0.2-experimental.1.tgz","_integrity":"sha512-eH2H09NMjMHUwUyDD8rbzc6NCmG8KCBhkpfFPKeUv5ehiXe9pfmAe8mefSxIn0Y4FngUo2Rz77mrr1VHrUnn/Q==","repository":{"url":"git+https://github.com/custardcream98/babel-plugin-react-effect-namer.git","type":"git"},"_npmVersion":"10.9.0","description":"Babel plugin for naming effect hook callbacks","directories":{},"_nodeVersion":"22.11.0","_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.0.6","@babel/cli":"^7.26.4","typescript":"^5.7.3","@babel/core":"^7.26.9","@types/node":"^22.13.4","@babel/types":"^7.26.9","@changesets/cli":"^2.28.0","@types/babel__core":"^7.20.5","@babel/preset-react":"^7.26.3"},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-react-effect-namer_0.0.2-experimental.1_1739900600428_0.7736922074773915","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@custardcream/babel-plugin-react-effect-namer","version":"0.0.3","description":"Babel plugin for naming effect hook callbacks","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":"./dist/index.js","./package.json":"./package.json"},"keywords":["babel","plugin","react","effect","hook"],"repository":{"type":"git","url":"git+https://github.com/custardcream98/babel-plugin-react-effect-namer.git"},"author":{"name":"custardcream98"},"license":"MIT","devDependencies":{"@babel/cli":"^7.26.4","@babel/preset-react":"^7.26.3","@babel/types":"^7.26.9","@changesets/cli":"^2.28.0","@eslint/js":"^9.20.0","@types/babel__core":"^7.20.5","@types/node":"^22.13.4","eslint":"^9.20.1","eslint-plugin-perfectionist":"^4.9.0","globals":"^15.15.0","husky":"^9.1.7","lint-staged":"^15.4.3","tsup":"^8.3.6","typescript":"^5.7.3","typescript-eslint":"^8.24.1","vitest":"^3.0.6"},"dependencies":{"@babel/core":"^7.26.9"},"scripts":{"format":"prettier --write .","lint":"eslint .","lint:fix":"eslint --fix .","typecheck":"tsc --noEmit","test":"vitest","test:ci":"vitest --run","changeset":"changeset","build":"tsup src/index.ts","changeset:pre":"changeset pre","changeset:version":"changeset version","changeset:publish":"changeset publish","release":"npm run build && changeset publish"},"_id":"@custardcream/babel-plugin-react-effect-namer@0.0.3","bugs":{"url":"https://github.com/custardcream98/babel-plugin-react-effect-namer/issues"},"homepage":"https://github.com/custardcream98/babel-plugin-react-effect-namer#readme","_integrity":"sha512-cu7Ev2UI8oTSp7XbQDynQTHTuTHmFgHYEfL6xLwBC/IXlZ92VEmXTIwMg7ll/bpDGzMRgH1YEm5r/FRAoWyCEQ==","_resolved":"/private/var/folders/4v/r704pd8j23x6lvhrfbwvk89r0000gn/T/50b065becd1bb17077eb42fe7f4fe3a9/custardcream-babel-plugin-react-effect-namer-0.0.3.tgz","_from":"file:custardcream-babel-plugin-react-effect-namer-0.0.3.tgz","_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-cu7Ev2UI8oTSp7XbQDynQTHTuTHmFgHYEfL6xLwBC/IXlZ92VEmXTIwMg7ll/bpDGzMRgH1YEm5r/FRAoWyCEQ==","shasum":"0e7b7e4bf52fc57c6d65da292460a30d54532f97","tarball":"https://registry.npmjs.org/@custardcream/babel-plugin-react-effect-namer/-/babel-plugin-react-effect-namer-0.0.3.tgz","fileCount":10,"unpackedSize":23512,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDVwMgWZdhaTNVR1rmaT2vfeajAppXAvj5N6RXnfywJJgIhAMlJTlkQcO7vtOPFMohOZETrtOPZ53ty4jZSUYFv5Gme"}]},"_npmUser":{"name":"custardcream98","email":"custardcream@kakao.com"},"directories":{},"maintainers":[{"name":"custardcream98","email":"custardcream@kakao.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/babel-plugin-react-effect-namer_0.0.3_1739902460385_0.42872122341411356"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-18T17:30:10.118Z","modified":"2025-02-18T18:14:20.759Z","0.0.2-experimental.0":"2025-02-18T17:30:10.399Z","0.0.2-experimental.1":"2025-02-18T17:43:20.646Z","0.0.3":"2025-02-18T18:14:20.570Z"},"bugs":{"url":"https://github.com/custardcream98/babel-plugin-react-effect-namer/issues"},"author":{"name":"custardcream98"},"license":"MIT","homepage":"https://github.com/custardcream98/babel-plugin-react-effect-namer#readme","keywords":["babel","plugin","react","effect","hook"],"repository":{"type":"git","url":"git+https://github.com/custardcream98/babel-plugin-react-effect-namer.git"},"description":"Babel plugin for naming effect hook callbacks","maintainers":[{"name":"custardcream98","email":"custardcream@kakao.com"}],"readme":"
\n
\n\n

@custardcream/babel-plugin-react-effect-namer

\n

\n A Babel plugin that transforms anonymous callback functions in React's effect hooks\n
\n into named functions to improve debugging and readability.\n

\n\n

\n \"Package\n

\n\n
\n
\n\n- **Better Debuggability:** Meaningful function names help generate clearer stack traces.\n- **Enhanced Readability:** Cleaner, self-documenting code.\n- **Non-Intrusive:** Only transforms callbacks that are anonymous.\n\n---\n\n## Overview\n\nThis plugin automatically transforms anonymous callbacks passed to React's `useEffect` and `useLayoutEffect` into named functions. Providing explicit names results in clearer stack traces during debugging and makes your code easier to understand.\n\n---\n\n## Features\n\n- **Transforms Arrow Functions:** Converts arrow functions into named function expressions.\n- **Transforms Anonymous Function Expressions:** Converts standard anonymous functions to named ones.\n- **Unique Naming:** Automatically assigns unique names (e.g., `MyComponent_useEffect_1`, `MyComponent_useEffect_2`) when multiple effects are present.\n- **Safe Transformations:** Leaves already named functions untouched.\n\n![devtools example](./devtools.png)\n\nYou can check effect hook names on stack traces.\n\n---\n\n## Installation\n\n```bash\nnpm install --save-dev @custardcream/babel-plugin-react-effect-namer\n```\n\n---\n\n## Usage\n\nConfigure Babel to use the plugin. Here’s an example using a `babel.config.js`:\n\n```js\nmodule.exports = {\n plugins: ['@custardcream/babel-plugin-react-effect-namer'],\n};\n```\n\nOnce configured, any React component using `useEffect` or `useLayoutEffect` with an anonymous callback will be transformed.\n\n---\n\n## Examples\n\n### 1. Transforming an Arrow Function Callback\n\n**Before transformation:**\n\n```jsx\nimport React, { useEffect } from 'react';\n\nfunction MyComponent() {\n useEffect(() => {\n console.log('Effect run');\n }, []);\n\n return
Hello
;\n}\n```\n\n**After transformation (the actual output might vary in formatting):**\n\n```jsx\nimport React, { useEffect } from 'react';\n\nfunction MyComponent() {\n const MyComponent_useEffect_1 = () => {\n console.log('Effect run');\n };\n\n useEffect(MyComponent_useEffect_1, []);\n\n return
Hello
;\n}\n```\n\n### 2. Transforming an Anonymous Function Expression\n\n**Before transformation:**\n\n```jsx\nimport React, { useEffect } from 'react';\n\nfunction MyComponent() {\n useEffect(function () {\n console.log('Effect run');\n }, []);\n\n return
Hello
;\n}\n```\n\n**After transformation:**\n\n```jsx\nimport React, { useEffect } from 'react';\n\nfunction MyComponent() {\n function MyComponent_useEffect_1() {\n console.log('Effect run');\n }\n\n useEffect(MyComponent_useEffect_1, []);\n\n return
Hello
;\n}\n```\n\n### 3. Handling Multiple Effect Hook Calls\n\nWhen a component has more than one effect hook call, the plugin assigns unique names to each callback.\n\n**Before transformation:**\n\n```jsx\nimport React, { useEffect } from 'react';\n\nfunction MyComponent() {\n useEffect(() => {\n console.log('First effect');\n }, []);\n\n useEffect(() => {\n console.log('Second effect');\n }, []);\n\n return
Hello
;\n}\n```\n\n**After transformation:**\n\n```jsx\nuseEffect(MyComponent_useEffect_1, []);\nuseEffect(MyComponent_useEffect_2, []);\n```\n","readmeFilename":"README.md"}