{"id":13850345,"url":"https://github.com/wavebeem/jsx-info","last_synced_at":"2025-10-12T01:17:04.605Z","repository":{"id":45667064,"uuid":"163439089","full_name":"wavebeem/jsx-info","owner":"wavebeem","description":"Displays a report of JSX component and prop usage","archived":false,"fork":false,"pushed_at":"2021-06-15T06:37:00.000Z","size":1211,"stargazers_count":92,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T10:21:34.532Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/wavebeem.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-28T18:33:06.000Z","updated_at":"2024-05-24T05:37:55.000Z","dependencies_parsed_at":"2022-09-02T19:41:58.614Z","dependency_job_id":null,"html_url":"https://github.com/wavebeem/jsx-info","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wavebeem%2Fjsx-info","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wavebeem%2Fjsx-info/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wavebeem%2Fjsx-info/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wavebeem%2Fjsx-info/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wavebeem","download_url":"https://codeload.github.com/wavebeem/jsx-info/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248759134,"owners_count":21157096,"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":[],"created_at":"2024-08-04T20:01:07.438Z","updated_at":"2025-10-12T01:16:59.586Z","avatar_url":"https://github.com/wavebeem.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# jsx-info\n\nDisplays a report of JSX component and prop usage.\n\nWatch my [demonstration][] video for more information.\n\n## Why\n\nFirst of all, I thought it would be cool to see all this info. But more\nimportantly, I think `jsx-info` can be used to help refactor your code.\n\nLet's say you have a component called `\u003cDataTable\u003e` that takes 43 different\nprops. If you needed to rewrite `\u003cDataTable\u003e` from scratch, you might not want\nto keep as many different props. Using `jsx-info` you could analyze which props\nget used the most and start porting that functionality first.\n\nIf the usage of a particular prop is very low, you might even choose to get rid\nof that prop and rewrite the calling code to use something else instead.\n\nThe intended workflow here is to run `jsx-info` and compare the data with your\nprop-types or TypeScript type definitions to find discrepencies.\n\n## Installation\n\nAutomatically install and run `jsx-info`:\n\n    $ npx jsx-info\n\n(Optional) Install locally to your project to speed up repeated usage:\n\n    $ npm i -D jsx-info\n    $ npx jsx-info\n\n## Usage\n\n    $ npx jsx-info\n\n`jsx-info` hooks into `.gitignore` files to automatically ignore files that are\nnot part of your project (typically `node_modules/` and other directories). It\ndoes not have any other way of filtering out files, currently.\n\nIf you pass additional arguments, they are JSX element names to scan for\n(instead of scanning every JSX element):\n\n    $ npx jsx-info div button React.Fragment\n\nBy default `jsx-info` starts scanning in the current directory, but you can use\na different directory like this:\n\n    $ npx jsx-info --directory app/src\n\nFind `\u003cButton kind=\"primary\"\u003e`\n\n    $ npx jsx-info --report lines --prop kind=primary Button\n\nFind all uses of the prop `id`\n\n    $ npx jsx-info --report lines --prop id\n\n## Configuration\n\nIn order to avoid repeating command line arguments as often, `jsx-info` supports\nreading command line argument defaults from a configuration file. You can either\nput defaults in a `.jsx-info.json` file or under a key named `\"jsx-info\"` in\nyour `package.json` file.\n\nEither way, your configuration should be JSON that looks like this, where every\nkey is optional:\n\n```json\n{\n  \"babelPlugins\": [\"decorators-legacy\", \"pipelineOperator\"],\n  \"directory\": \"src\",\n  \"ignore\": [\"**/__test__\", \"legacy/**\"],\n  \"files\": [\"**/*.{js,jsx,tsx}\"]\n}\n```\n\n## Documentation\n\nYou can use `jsx-info` as a JS library.\n\n```js\nconst { analyze } = require(\"jsx-info\");\n\nconst analysis = await analyze({\n  /* Options */\n});\n```\n\nOptions and data structures are documented in [api.ts][].\n\n## Note\n\n`jsx-info` strives to parse all _standard_ JS, JSX, and TypeScript syntax. This\nmeans that only stage-3 or higher\n[proposals][] will be supported. I do\nnot recommend using non-official JS syntax in your project.\n\nIf you are having problems with `jsx-info` parsing your code, please file an\nissue. There are many options I can pass to Babel's parse function, and I'm\ntrying to be conservative with how many I pass.\n\n## Contributions\n\nPlease read the [Code of Conduct][] before contributing to the project. It is\nnon-negotiable.\n\nAll types of contributions are welcome: code, documentation, questions,\nsuggestions, etc. Yes, I think questions are a form of contribution. The only\nway I can make this tool better is by getting feedback from users.\n\n## License\n\nCopyright \u0026copy; [Brian Mock][] under the [MIT License][].\n\n[brian mock]: https://www.wavebeem.com\n[demonstration]: https://youtu.be/e_vtfYJW9aM\n[code of conduct]: CODE_OF_CONDUCT.md\n[mit license]: LICENSE.md\n[proposals]: https://tc39.github.io/process-document/\n[api.ts]: src/api.ts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwavebeem%2Fjsx-info","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwavebeem%2Fjsx-info","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwavebeem%2Fjsx-info/lists"}