docz: Bugs and bugs around react-docgen

@pedronauck Hi when do you think you will be releasing v0.14?

In the next release (v0.14) I’ll introduce a new way to parse props using react-docgen. Instead of using a babel plugin for prop-types and a loader for typescript, everything now is centralized in a process using data server:

https://github.com/pedronauck/docz/blob/v0.14/core/docz-core/src/states/props.ts

With these changes, I think that we will improve a lot the performance since all props extracting logic will not belong to webpack anymore.

I’ll finish the v0.14 that will have some other improvements, then I came back here to test and close this issue 🙏

Are there plans to allow the Props component to work with prop types that are imported from another file and spread into a component’s propTypes? I just tried on 1.0.0-rc.7 and it didn’t work.

// utils.js
export const color = () => {
    // ...
}

color.propTypes = {
    color: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.arrayOf(PropTypes.string)
    ]),
};

// Button.js
import React from 'react';
import PropTypes from 'prop-types';

import { color } from '../path/to/utils';

export const Button = props => {
    // ...
};

Button.propTypes = {
    ...color.propTypes, // <- it would be awesome if this showed up in the props table
};

export default Button;

It seems like there was some attempt to get it working here?

@pedronauck I agree that the handler you linked is pretty outdated, but it seems like other, newer packages have tried to solve the same problem, like react-docgen-imported-proptype-handler which is already referenced in the docz code here, but commented out.

Was there an issue when you tried using it before?

I’m releasing some new release candidate today @100ideas, one of your problems I think that is fixed!

Hey guys, I put the @guilhermedecampo solution inside docz, see if is good now 🙏

This handler should fix this issue @rfoel, but since the newest version of react-docgen it doesn’t work anymore, need to be updated, but I think that the owner of the repo dropped it out of the project.

Hey guys I had the same problem with the react-docgen-typescript-loader passing all the props of react on docz because I’m using styled-components. I searched a bit and found a config for this. And because docz is extensible as f I could update the bundler config. Top @pedronauck 🚀 .

  modifyBundlerConfig: config => ({
    ...config,
    module: {
      ...config.module,
      rules: config.module.rules.map(rule => ({
        ...rule,
        use: rule.use.map(ruleUse =>
          ruleUse.loader.includes('react-docgen-typescript-loader')
            ? {
                ...ruleUse,
                options: {
                  propFilter: prop => {
                    if (prop.parent == null) return true
                    return !prop.parent.fileName.includes('node_modules')
                  },
                },
              }
            : ruleUse,
        ),
      })),
    },
  }),

I was able to apply custom config via docrc:

modifyBundlerConfig: config => {
    const jsxPluginIndex = config.plugins.findIndex(plugin => plugin.config.id === 'jsx');
    const { loaders } = config.plugins[jsxPluginIndex].config;
    const docGenLoaderIndex = loaders.findIndex(loader => /react-docgen-typescript-loader/.test(loader.loader));
    const docGenLoader = loaders[docGenLoaderIndex];

    docGenLoader.options = {
      tsconfigPath: './tsconfig.json'
    };

    return config;
  }

That’s good, but unfortunately it’s only working with react-docgen-typescript-loader 3.0.0-rc.0 as v2 does not parse options correctly .

Would you consider updating react-docgen-typescript-loader to ^3.0.0-rc.0 ? I think that would solve many issues for typescript users when props table renders empty (as they need to provide their own tsconfig not use default one from react-docgen-typescript)