├── .eslintrc.js ├── .eslintrc.json ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE.md ├── README.md ├── __tests__ ├── __snapshots__ │ └── api.test.ts.snap └── api.test.ts ├── fixtures ├── basic │ └── main.js ├── decorators │ └── main.js ├── empty │ └── .gitkeep ├── error │ └── main.js ├── line-report │ └── main.js ├── prop-usage │ ├── main.js │ └── multiplePropTypes.js └── ts │ └── main.tsx ├── jest.config.ts ├── package-lock.json ├── package.json ├── src ├── api.ts ├── assertNever.ts ├── cli.ts ├── jsx-info.ts ├── main.ts ├── printer.ts ├── sleep.ts └── types.d.ts └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | node: true, 5 | es6: true, 6 | }, 7 | parser: "@typescript-eslint/parser", 8 | extends: [ 9 | "eslint:recommended", 10 | "plugin:@typescript-eslint/recommended", 11 | ], 12 | plugins: ["@typescript-eslint"], 13 | rules: { 14 | curly: "error", 15 | "consistent-return": "error", 16 | "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }], 17 | "no-console": "warn", 18 | "@typescript-eslint/no-use-before-define": "off", 19 | "@typescript-eslint/no-explicit-any": "off", 20 | "@typescript-eslint/explicit-function-return-type": "off", 21 | "@typescript-eslint/camelcase": "off", 22 | "@typescript-eslint/no-empty-function": "off", 23 | "@typescript-eslint/explicit-module-boundary-types": "warn", 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 2018, 4 | "sourceType": "module" 5 | }, 6 | "env": { 7 | "node": true, 8 | "es6": true 9 | }, 10 | "extends": "eslint:recommended" 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .vscode 4 | jsx-info-*.tgz 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "node" 4 | - "lts/*" 5 | script: 6 | - npm run eslint 7 | - npm run prettier 8 | - npm test 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v3.1.0 2 | 3 | - Added `propValue` field `LineInfo` 4 | 5 | # v3.0.1 6 | 7 | - Fixes a bug where most props were ignored when searching by prop 8 | 9 | # v3.0.0 10 | 11 | - Removes accidentally exported function `parse` 12 | 13 | # v2.1.2 14 | 15 | - Adds missing TypeScript types 16 | 17 | # v2.1.1 18 | 19 | - Fixes a bug where prop usage wasn't collected 20 | 21 | # v2.1.0 22 | 23 | - Adds support for `--prop '!propName'` to search for all usages of a component 24 | where `propName` is not used 25 | - Adds support for `--prop 'propName!=value'` to search for all usages of a 26 | component where `propName`'s value is **not** `value` 27 | 28 | # v2.0.0 29 | 30 | - Adds a full JS API for library usage 31 | - Changes `--add-babel-plugin a --add-babel-plugin b` to `--babel-plugins a b` 32 | - Changes `--ignore a --ignore b` to `--ignore a b` 33 | - Changes `--files a --files b` to `--files a b` 34 | - Changes `jsx-info a b c` to `jsx-info --components a b c` 35 | - Changes `jsx-info` to `jsx-info --components "*"` 36 | - Running `jsx-info` with missing arguments now enters interactive mode 37 | - Removes the `--sort <...>` flag 38 | 39 | # v1.6.1 40 | 41 | - Crash fix 42 | 43 | # v1.6.0 44 | 45 | - Adds `--report lines --prop ` option 46 | - Adds config file support 47 | 48 | # v1.5.0 49 | 50 | - Prop usage graphs are now relative to the number of component usages, rather 51 | than relative to the number of total props used across all component usages. 52 | This means that a "full" prop bar corresponds to a prop used in every usage of 53 | that component. 54 | 55 | # v1.4.0 56 | 57 | - Fixes number alignment for 4+ digit numbers 58 | - Shows the number of files scanned, and how long it took 59 | 60 | # v1.3.0 61 | 62 | - Adds `--report <...>` flag 63 | - Adds `--sort <...>` flag 64 | - Improves loading spinner 65 | 66 | # v1.2.3 67 | 68 | - Fixes crash if there were no `--add-babel-plugin` flags 69 | 70 | # v1.2.2 71 | 72 | - No changes 73 | 74 | # v1.2.1 75 | 76 | - Fixes crash if there were no `--ignore` flags 77 | 78 | # v1.2.0 79 | 80 | - Adds `--ignore ` flag 81 | - Makes `--files ` flag repeatable 82 | 83 | # v1.1.0 84 | 85 | - Adds `--color` flag 86 | - Adds `--no-color` flag 87 | - Adds `--no-progress` flag 88 | - Adds `--add-babel-plugin ` flag 89 | - Improves parse error formatting 90 | - Adds suggestions on which Babel plugins to add 91 | 92 | # v1.0.1 93 | 94 | - Updates package.json to point at the GitHub repo 95 | - Corrects typo in keywords 96 | 97 | # v1.0.0 98 | 99 | - Initial release 100 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at brian@mockbrian.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Brian Mock 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jsx-info 2 | 3 | Displays a report of JSX component and prop usage. 4 | 5 | Watch my [demonstration][] video for more information. 6 | 7 | ## Why 8 | 9 | First of all, I thought it would be cool to see all this info. But more 10 | importantly, I think `jsx-info` can be used to help refactor your code. 11 | 12 | Let's say you have a component called `` that takes 43 different 13 | props. If you needed to rewrite `` from scratch, you might not want 14 | to keep as many different props. Using `jsx-info` you could analyze which props 15 | get used the most and start porting that functionality first. 16 | 17 | If the usage of a particular prop is very low, you might even choose to get rid 18 | of that prop and rewrite the calling code to use something else instead. 19 | 20 | The intended workflow here is to run `jsx-info` and compare the data with your 21 | prop-types or TypeScript type definitions to find discrepencies. 22 | 23 | ## Installation 24 | 25 | Automatically install and run `jsx-info`: 26 | 27 | $ npx jsx-info 28 | 29 | (Optional) Install locally to your project to speed up repeated usage: 30 | 31 | $ npm i -D jsx-info 32 | $ npx jsx-info 33 | 34 | ## Usage 35 | 36 | $ npx jsx-info 37 | 38 | `jsx-info` hooks into `.gitignore` files to automatically ignore files that are 39 | not part of your project (typically `node_modules/` and other directories). It 40 | does not have any other way of filtering out files, currently. 41 | 42 | If you pass additional arguments, they are JSX element names to scan for 43 | (instead of scanning every JSX element): 44 | 45 | $ npx jsx-info div button React.Fragment 46 | 47 | By default `jsx-info` starts scanning in the current directory, but you can use 48 | a different directory like this: 49 | 50 | $ npx jsx-info --directory app/src 51 | 52 | Find `