wavebeem/jsx-info

Displays a report of JSX component and prop usage

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 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

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