{"id":20789988,"url":"https://github.com/runreflect/webpack-react-component-name","last_synced_at":"2025-05-05T19:52:46.071Z","repository":{"id":36995223,"uuid":"284245950","full_name":"runreflect/webpack-react-component-name","owner":"runreflect","description":"Webpack plugin that makes your custom React components visible within React Dev Tools and accessible by the React selector logic built into Reflect","archived":false,"fork":false,"pushed_at":"2022-08-17T16:03:56.000Z","size":307,"stargazers_count":18,"open_issues_count":3,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-24T00:02:11.782Z","etag":null,"topics":["plugin","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/runreflect.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-01T11:22:21.000Z","updated_at":"2025-02-18T03:08:42.000Z","dependencies_parsed_at":"2022-08-19T00:10:51.725Z","dependency_job_id":null,"html_url":"https://github.com/runreflect/webpack-react-component-name","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runreflect%2Fwebpack-react-component-name","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runreflect%2Fwebpack-react-component-name/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runreflect%2Fwebpack-react-component-name/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runreflect%2Fwebpack-react-component-name/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/runreflect","download_url":"https://codeload.github.com/runreflect/webpack-react-component-name/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252405972,"owners_count":21742689,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plugin","react","webpack"],"created_at":"2024-11-17T15:30:31.951Z","updated_at":"2025-05-05T19:52:46.048Z","avatar_url":"https://github.com/runreflect.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Overview\n\n**webpack-react-component-name** is a Webpack plugin that makes your custom\nReact components visible within React Dev Tools and accessible by the React\nselector logic built into [Reflect](https://reflect.run).\n\n*Note: This branch contains the version of this plugin that is compatible with\nWebpack 5. For support for Webpack 4, see version 4.x of this plugin in our \n[Releases](https://github.com/runreflect/webpack-react-component-name/releases) list.*\n\nNormally React component names are minified during compilation.  This plugin\nmakes these component names available in production bundles by hooking into\nWebpack'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 npm:\n\n```\nnpm install webpack-react-component-name -save-dev\n```\n\n2. Add the plugin to your Webpack configuration:\n\n```\n  plugins: [\n    new WebpackReactComponentNamePlugin()\n  ],\n```\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\n### include \nType: `(string | RegExp | (path: string) =\u003e 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 \nType: `(string | RegExp | (path: string) =\u003e 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## 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## License\n\nThis project is licensed under the terms of the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunreflect%2Fwebpack-react-component-name","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frunreflect%2Fwebpack-react-component-name","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunreflect%2Fwebpack-react-component-name/lists"}