wavebeem/jsx-info

Displays a report of JSX component and prop usage

jsx-info

Displays a report of JSX component and prop usage.

Watch my demonstration video for more information.

Why

First of all, I thought it would be cool to see all this info. But more importantly, I think jsx-info can be used to help refactor your code.

Let's say you have a component called <DataTable> that takes 43 different props. If you needed to rewrite <DataTable> from scratch, you might not want to keep as many different props. Using jsx-info you could analyze which props get used the most and start porting that functionality first.

If the usage of a particular prop is very low, you might even choose to get rid of that prop and rewrite the calling code to use something else instead.

The intended workflow here is to run jsx-info and compare the data with your prop-types or TypeScript type definitions to find discrepencies.

Installation

Automatically install and run jsx-info:

$ npx jsx-info

(Optional) Install locally to your project to speed up repeated usage:

$ npm i -D jsx-info
$ npx jsx-info

Usage

$ npx jsx-info

jsx-info hooks into .gitignore files to automatically ignore files that are not part of your project (typically node_modules/ and other directories). It does not have any other way of filtering out files, currently.

If you pass additional arguments, they are JSX element names to scan for (instead of scanning every JSX element):

$ npx jsx-info div button React.Fragment

By default jsx-info starts scanning in the current directory, but you can use a different directory like this:

$ npx jsx-info --directory app/src

Find <Button kind="primary">

$ npx jsx-info --report lines --prop kind=primary Button

Find all uses of the prop id

$ npx jsx-info --report lines --prop id

Configuration

In order to avoid repeating command line arguments as often, jsx-info supports reading command line argument defaults from a configuration file. You can either put defaults in a .jsx-info.json file or under a key named "jsx-info" in your package.json file.

Either way, your configuration should be JSON that looks like this, where every key is optional:

{
  "babelPlugins": ["decorators-legacy", "pipelineOperator"],
  "directory": "src",
  "ignore": ["**/__test__", "legacy/**"],
  "files": ["**/*.{js,jsx,tsx}"]
}

Documentation

You can use jsx-info as a JS library.

const { analyze } = require("jsx-info");

const analysis = await analyze({
  /* Options */
});

Options and data structures are documented in api.ts.

Note

jsx-info strives to parse all standard JS, JSX, and TypeScript syntax. This means that only stage-3 or higher proposals will be supported. I do not recommend using non-official JS syntax in your project.

If you are having problems with jsx-info parsing your code, please file an issue. There are many options I can pass to Babel's parse function, and I'm trying to be conservative with how many I pass.

Contributions

Please read the Code of Conduct before contributing to the project. It is non-negotiable.

All types of contributions are welcome: code, documentation, questions, suggestions, etc. Yes, I think questions are a form of contribution. The only way I can make this tool better is by getting feedback from users.

License

Copyright © Brian Mock under the MIT License.

jsx-info's Issues

Add option to return prop values

I'm using this package with jest to check that all used strings by react-intl are in file with localization.

So, I'm using this package to find all <FormattedMessage id="..." defaultMessage="..."> component usage, extract it by id and compare that this id is exist in all localized files.

Unfortunately, analyze() method doesn't include prop values and almost methods are private, so I'm using too dirty way to use your package with rewire package :)

// All methods are private, so rewire is needed to access into them
const jsxInfoApi = rewire('jsx-info/dist/src/api');

const parseJsxInfo = jsxInfoApi.__get__('parse');
const createPropJsxInfo = jsxInfoApi.__get__('createProp');

...

const filenames = await globby([
    'containers/**/*.jsx',
    'components/**/*.jsx',
    'mappings.jsx',
  ], {
    absolute: true,
    onlyFiles: true,
    gitignore: true,
    ignore: [],
    cwd: directory,
  });

  filenames.forEach((filename) => {
    try {
      const code = fs.readFileSync(path.resolve(directory, filename), 'utf8');

      parseJsxInfo(code, {
        babelPlugins: [],
        typescript: filename.endsWith('.tsx') || filename.endsWith('.ts'),
        onlyComponents: [
          'FormattedMessage',
          'CustomHeadingComponent',
          'FormRow',
          'DataRow',
          'InfoRow',
        ],
        onComponent: ({ node }) => {
          node.openingElement.attributes.forEach((propNode) => {
            const propValue = propNode.value.value;
            const propName = createPropJsxInfo(propNode);

            // ... here propName is validated and propValue is used
          });
        },
      });
    } catch (error) {
      throw error;
    }
  });

It covers 99% of my cases, except variables.

What do you think is better?

1. Update analyze() method to include prop values as well? It might be good, but how to deal with non-string props?
2. To export private methods?
3. Keep as is :)

Thanks for this awesome package!

Add ability to search for one component

For example npx jsx-info --component Link would output the usage of component only

Add option to show lines where each prop is used for one component

There should be a mode like --mode lines or something that shows filename and line numbers (ideally in a format that vscode lets you cmd-click) along with context, so you can see WHERE and HOW each prop i used for a given component

Add config file support

It's annoying to have to re-issue command line arguments. The current solution of storing options inside an npm script and using npm run jsx-info instead of npx jsx-info just isn't as nice.

Let's use cosmiconfig to load a configuuration file.

https://www.npmjs.com/package/cosmiconfig