{"_id":"react-display-name-plugin","_rev":"2-ee6eed441a819a95a5a228d5c90b941d","name":"react-display-name-plugin","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"react-display-name-plugin","version":"1.0.0","keywords":["webpack","vite","plugin","react","displayname","react-devtools","component-names","production","minified","vite-plugin","webpack-plugin","typescript","types"],"author":{"url":"https://github.com/niranjan94","name":"Niranjan Rajendran","email":"niranjan@mockingjay.io"},"license":"MIT","_id":"react-display-name-plugin@1.0.0","maintainers":[{"name":"niranjan94","email":"me@niranjan.io"}],"homepage":"https://github.com/mockingjay-io/react-display-name-plugin#readme","bugs":{"url":"https://github.com/mockingjay-io/react-display-name-plugin/issues"},"dist":{"shasum":"51b877587f0860c9898aaa1551ff1e2321709e95","tarball":"https://registry.npmjs.org/react-display-name-plugin/-/react-display-name-plugin-1.0.0.tgz","fileCount":16,"integrity":"sha512-JTNU6tI4qy19oxsk63krlVcePoARdXVu3aag3vpfEEpxHtlo0abCrOUBP+pSakU6/oZo2DsuqTkjVaaWrrjT8w==","signatures":[{"sig":"MEQCICCmYLVI2HvmKBj297eSZtlmjaU+UKf7L3IaHkTkAZ2GAiBmCaR0dX4tHY7v8CYGM15uTWxPwuOWQNtlSUVHSJaVng==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33576},"main":"index.js","types":"index.d.ts","gitHead":"7c8a5cf8e41cc4963f7aa093acada8ed7dcb3916","private":false,"scripts":{"lint":"eslint","test":"node --experimental-vm-modules node_modules/jest/bin/jest.js && pnpm -r build","build":"eslint","watch":"webpack-dev-server --hot --inline --progress --colors"},"_npmUser":{"name":"niranjan94","email":"me@niranjan.io"},"repository":{"url":"git+https://github.com/mockingjay-io/react-display-name-plugin.git","type":"git"},"_npmVersion":"11.5.1","description":"Build plugin that preserves React component names in production bundles for DevTools. Supports Webpack and Vite.","directories":{},"_nodeVersion":"24.6.0","dependencies":{"minimatch":"7.4.6","acorn-walk":"8.3.4","classnames":"^2.5.1","@emotion/react":"^11.14.0"},"_hasShrinkwrap":false,"devDependencies":{"raf":"^3.4.1","jest":"^29.7.0","vite":"^5.0.0","acorn":"^8.15.0","react":"^17.0.2","eslint":"~9.39.1","lodash":"^4.17.19","preact":"^10.27.2","core-js":"^2.5.7","globals":"^15.15.0","webpack":"^5.102.1","react-dom":"^17.0.2","@eslint/js":"^9.39.1","css-loader":"^6.11.0","prop-types":"^15.7.2","typescript":"^5.9.3","@babel/core":"^7.28.5","@types/node":"^24.10.0","babel-loader":"^8.4.1","react-router":"^6.30.1","style-loader":"^4.0.0","@emotion/core":"^11.0.0","@types/webpack":"^5.28.0","todomvc-common":"^1.0.5","@emotion/styled":"^11.14.1","react-bootstrap":"^2.10.10","todomvc-app-css":"^2.1.2","react-router-dom":"^5.3.4","@babel/preset-env":"^7.28.5","use-onclickoutside":"^0.3.0","@babel/preset-react":"^7.28.5","@emotion/styled-base":"^11.0.0","babel-plugin-react-require":"^3.1.3","@emotion/babel-preset-css-prop":"^11.12.0","@babel/plugin-transform-react-jsx":"^7.27.1","@babel/plugin-proposal-private-methods":"^7.18.6","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-transform-react-display-name":"^7.28.0","@babel/plugin-proposal-private-property-in-object":"^7.21.11"},"peerDependencies":{"vite":">=2.0.0","webpack":"5.x"},"peerDependenciesMeta":{"vite":{"optional":true},"webpack":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-display-name-plugin_1.0.0_1762256479963_0.5780310451394919","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"react-display-name-plugin","version":"1.0.1","description":"Build plugin that preserves React component names in production bundles for DevTools. Supports Webpack and Vite.","main":"index.js","types":"index.d.ts","private":false,"repository":{"type":"git","url":"git+https://github.com/mockingjay-io/react-display-name-plugin.git"},"keywords":["webpack","vite","plugin","react","displayname","react-devtools","component-names","production","minified","vite-plugin","webpack-plugin","typescript","types"],"author":{"name":"Niranjan Rajendran","email":"niranjan@mockingjay.io","url":"https://github.com/niranjan94"},"license":"MIT","bugs":{"url":"https://github.com/mockingjay-io/react-display-name-plugin/issues"},"homepage":"https://github.com/mockingjay-io/react-display-name-plugin#readme","devDependencies":{"@babel/core":"^7.28.5","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-private-methods":"^7.18.6","@babel/plugin-proposal-private-property-in-object":"^7.21.11","@babel/plugin-transform-react-display-name":"^7.28.0","@babel/plugin-transform-react-jsx":"^7.27.1","@babel/preset-env":"^7.28.5","@babel/preset-react":"^7.28.5","@emotion/babel-preset-css-prop":"^11.12.0","@emotion/core":"^11.0.0","@emotion/styled":"^11.14.1","@emotion/styled-base":"^11.0.0","@eslint/js":"^9.39.1","@types/node":"^24.10.0","@types/webpack":"^5.28.0","@vitejs/plugin-react":"^5.1.0","@vitest/coverage-v8":"^4.0.6","acorn":"^8.15.0","babel-loader":"^8.4.1","babel-plugin-react-require":"^3.1.3","core-js":"^2.5.7","css-loader":"^6.11.0","eslint":"~9.39.1","globals":"^15.15.0","lodash":"^4.17.19","preact":"^10.27.2","prop-types":"^15.7.2","raf":"^3.4.1","react":"^17.0.2","react-bootstrap":"^2.10.10","react-dom":"^17.0.2","react-router":"^6.30.1","react-router-dom":"^5.3.4","style-loader":"^4.0.0","todomvc-app-css":"^2.1.2","todomvc-common":"^1.0.5","typescript":"^5.9.3","use-onclickoutside":"^0.3.0","vite":"^5.0.0","vitest":"^4.0.6","webpack":"^5.102.1","@emotion/react":"^11.14.0","classnames":"^2.5.1"},"peerDependencies":{"vite":">=2.0.0","webpack":"5.x"},"peerDependenciesMeta":{"webpack":{"optional":true},"vite":{"optional":true}},"dependencies":{"acorn-walk":"8.3.4","minimatch":"7.4.6"},"scripts":{"watch":"webpack-dev-server --hot --inline --progress --colors","test":"vitest && pnpm -r build","lint":"eslint","build":"eslint"},"_id":"react-display-name-plugin@1.0.1","_integrity":"sha512-C6Y5gJm3eljKz/5q4tMv6unAqC5Q9gJbYFSNTktt5LdQMd0SGJQZAY8DiRF66QKGu2aH6KiCQJlYY2HyldiWUw==","_resolved":"/tmp/f2632e53c3ea3ed8dab02902e60c2c93/react-display-name-plugin-1.0.1.tgz","_from":"file:react-display-name-plugin-1.0.1.tgz","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-C6Y5gJm3eljKz/5q4tMv6unAqC5Q9gJbYFSNTktt5LdQMd0SGJQZAY8DiRF66QKGu2aH6KiCQJlYY2HyldiWUw==","shasum":"830290f5f9f51ac89fe9242bacf6fdb21a31a943","tarball":"https://registry.npmjs.org/react-display-name-plugin/-/react-display-name-plugin-1.0.1.tgz","fileCount":16,"unpackedSize":34139,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD2T8ALr2t6aSIlXemApgIBajHfRUYJtVJdGBqx6xEi+wIgDQu4bkagvWp4U+VqUV9nJe36dD+BM5MRjdQgD/vomMI="}]},"_npmUser":{"name":"niranjan94","email":"me@niranjan.io"},"directories":{},"maintainers":[{"name":"niranjan94","email":"me@niranjan.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-display-name-plugin_1.0.1_1762258835448_0.40299505444502604"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-04T11:41:19.961Z","modified":"2025-11-04T12:20:35.861Z","1.0.0":"2025-11-04T11:41:20.176Z","1.0.1":"2025-11-04T12:20:35.646Z"},"bugs":{"url":"https://github.com/mockingjay-io/react-display-name-plugin/issues"},"author":{"name":"Niranjan Rajendran","email":"niranjan@mockingjay.io","url":"https://github.com/niranjan94"},"license":"MIT","homepage":"https://github.com/mockingjay-io/react-display-name-plugin#readme","keywords":["webpack","vite","plugin","react","displayname","react-devtools","component-names","production","minified","vite-plugin","webpack-plugin","typescript","types"],"repository":{"type":"git","url":"git+https://github.com/mockingjay-io/react-display-name-plugin.git"},"description":"Build plugin that preserves React component names in production bundles for DevTools. Supports Webpack and Vite.","maintainers":[{"name":"niranjan94","email":"me@niranjan.io"}],"readme":"[![Build and Test](https://github.com/mockingjay-io/react-display-name-plugin/actions/workflows/build-and-test.yml/badge.svg)](https://github.com/mockingjay-io/react-display-name-plugin/actions/workflows/build-and-test.yml)\n[![codecov](https://codecov.io/gh/mockingjay-io/react-display-name-plugin/graph/badge.svg?token=X8XYSPSGI4)](https://codecov.io/gh/mockingjay-io/react-display-name-plugin)\n[![NPM Version](https://img.shields.io/npm/v/react-display-name-plugin)](https://www.npmjs.com/package/react-display-name-plugin)\n\n# React displayName Plugin\n\n**react-display-name-plugin** is a build plugin for both Webpack and Vite that makes your custom\nReact components visible within React Dev Tools and other tools that rely on the displayName parameter.\n\n_Note: This package supports Webpack 5 and Vite 2+. For older versions (Webpack 4), see the legacy package [@mockingjay-io/webpack-react-component-name](https://github.com/mockingjay-io/webpack-react-component-name)._\n\nNormally React component names are minified during compilation. This plugin\nmakes these component names available in production bundles by hooking into\nyour build tool's compilation process, traversing the AST looking for React component\ndefinitions, and updating the emitted source code to populate the\n[displayName](https://reactjs.org/docs/react-component.html#displayname)\nproperty. This is the property that, when populated, is used by the React Dev\nTools extension to determine the name of a component.\n\nSince we emit a `displayName` property value for each React component definition\n(critically, **not** every React component _instance_), using this plugin will\nresult in a small size increase to your production bundles.\n\n## Installation\n\n1. Install via your preferred package manager:\n\n```bash\nnpm install react-display-name-plugin --save-dev\n```\n\n### For Webpack\n\n2. Import and add the plugin to your Webpack configuration:\n\n```js\nconst ReactDisplayNamePlugin = require('react-display-name-plugin/webpack');\n\nmodule.exports = {\n  // ... other config\n  plugins: [\n    new ReactDisplayNamePlugin({\n      parseDependencies: true,\n    })\n  ],\n};\n```\n\n**Next.js users** have to add this within `next.config.js`/`next.config.mjs`/`next.config.ts`. Examples available [here](https://github.com/mockingjay-io/react-display-name-plugin/tree/main/examples).\n\n### For Vite\n\n2. Import and add the plugin to your Vite configuration:\n\n```js\n// vite.config.js / vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactDisplayNamePlugin from 'react-display-name-plugin/vite';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactDisplayNamePlugin({\n      parseDependencies: true,\n    })\n  ],\n});\n```\n\n**Note:** The Vite plugin should be placed after the React plugin in your plugins array, as it needs to run after JSX transformation.\n\n### Core Utilities (Advanced)\n\nFor building custom plugins for other bundlers, you can import the core utilities directly:\n\n```js\nconst {\n  detectReactComponents,\n  generateDisplayNameCode\n} = require('react-display-name-plugin');\nconst { parse } = require('acorn');\n\nconst code = 'function MyComponent() { return <div>Hello</div>; }';\nconst ast = parse(code, { ecmaVersion: 'latest', sourceType: 'module' });\n\ndetectReactComponents(ast, (node) => {\n  const componentName = node.id.name;\n  const injectionCode = generateDisplayNameCode(componentName);\n  console.log(injectionCode); // ;try{MyComponent.displayName=\"MyComponent\";}catch(e){}\n});\n```\n\n**Available Utilities:**\n- `detectReactComponents(ast, callback)` - Walks an AST and detects React components\n- `generateDisplayNameCode(componentName)` - Generates displayName injection code\n- `argumentCreatesElement(argument)` - Checks if AST node is React.createElement\n- `argumentJsx(argument)` - Checks if AST node is JSX transform output (_jsx, _jsxs)\n- `shouldAddDisplayName(node)` - Checks if a node should have displayName added\n\n## Options\n\n```json\n{\n  \"parseDependencies\": false,\n  \"include\": [],\n  \"exclude\": []\n}\n```\n\n### parseDependencies\n\nType: `boolean`\nDefault: `false`\n\nIf set true, the plugin will name the components exported from node_modules.\n\n### include\n\nType: `(string | RegExp | (path: string) => boolean)[]` Default: `[]`\n\nIf the path matches any of the elements in this array, it will be included if it isn't explicitly excluded.\n\nIf the item is a `string`, it will use standard glob syntax. If the item is a Regular Expression, the path will be tested against it. If the item is a function, the path will be passed into it for testing.\n\n### exclude\n\nType: `(string | RegExp | (path: string) => boolean)[]` Default: `[]`\n\nIf the path matches any of the elements in this array, it will be excluded.\n\nIf the item is a `string`, it will use standard glob syntax. If the item is a Regular Expression, the path will be tested against it. If the item is a function, the path will be passed into it for testing.\n\nA truthy result will be excluded.\n\n## Troubleshooting\n\nAs you probably know, there is more than one way to define a React component. This\nplugin attempts to detect every possible way of defining a component, but there may\nbe some we've missed. See the `/examples` directory and the unit tests for examples\nof the different permutations of React component definitions that we currently support.\n\nIf we are not detecting one of your components, please either file an Issue containing\nexample source for a component which is not detected, or feel free to open a PR with\nthe fix.\n\n## Note for Next.js users\n\nIn Next.js the plugin may cause warnings like `[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item` to be generated. These warnings are safe to ignore without any further action. But if you'd like to supress these warnings, as an interim solution, the following snippet can be added to your webpack config.\n\n```js\nconst webpackComponentNamesAppenderCacheWarning =\n  /Skipped not serializable cache item.*ModuleAppenderDependency/i;\n\nconfig.infrastructureLogging = {\n  stream: {\n    write: (message) => {\n      if (webpackComponentNamesAppenderCacheWarning.test(message)) {\n        return;\n      }\n      process.stderr.write(message);\n    },\n  },\n};\n```\n\n## License\n\nThis project is licensed under the terms of the MIT license. See `LICENSE.md` for more info.\n","readmeFilename":"README.md"}