Add support for composed component via HOC

[likeSerge]

Hi! We are using HOC and react-styleguidist on project. We expect to see all exported components in react-styleguidist documentation, but actually HOC-derived components are not loaded.

Version of "react-docgen-typescript": "0.0.5"

Here is our styleguidist.conf.js:

const path = require('path');
const webpackDevConf = require('./webpack-dev.conf');
module.exports = {
    title: 'Documentation',
    components: './../src/**/*.component.tsx',
    ignore:[
        '**/core/**'
    ],
    serverHost: 'localhost',
    serverPort: 3000,
    styleguideDir: path.resolve(__dirname, './../styleguide'),
    webpackConfig: webpackDevConf,
    propsParser: require('react-docgen-typescript').parse
};

And example of Component export using HOC:

import { timerHOC } from './timerHOC';
export const TimerDesktop = ( props: TimerDesktopProps) => {
    return (
        <div className="timer-desktop">
            ...
        </div>
    );
};
export const Timer = timerHOC(TimerDesktop);
export default Timer;

[pvasek]

This requires a bigger refactoring of existing code but it's definitely something we should support. I have already started with that refactoring to implement this use case but haven't finished it yet. I will try to do that this week.

[likeSerge]

Thanks, that will be great!

[pvasek]

Version v0.0.9 which include HOC support has been just published.

[likeSerge]

Thanks for your work! But it looks that solution works only if hoc function is located in same file as HocComponent. I tried to move hoc function to separate file from your example and imported it and got error: "Module build failed: TypeError: Cannot read property 'methods' of null"
Can you please check it?

[pvasek]

You are right, I didn't test it with HOC function defined outside of the file. Unfortunately, it doesn't seem to be a quick fix.

[pvasek]

Tried to use kind of workaround to fix that issue. Let's see how that works. It's version 0.0.10.

[likeSerge]

Thanks again! Now it works with HOC from external functions, but problem is that it works only if you return same component as passed in args:

export function hoc<T>(Component: T): T {
    // do whatever you need but return the same type T
    return Component as T;
}

And the idea of HOCs is to extend component you passed with new props or wrap it in new component. So something like this will not work:

export function hoc<T>(Component: T): T {
    class NewComponent extends React.Component<{}, {}> {
        render() {
            return (
                <Component/>
            );
        }
    }
    return NewComponent as T;
}

[pvasek]

That should work. You don't need to return the same instance just the type should be the same. The second case should work but you will probably need to cast it to any first.
return NewComponent as any as T

In current implementation (after I added that workaround) you event don't need to do that because it uses only the input argument, that means this should work as well:

export function hoc<T>(Component: T): any {
    class NewComponent extends React.Component<{}, {}> {
        render() {
            return (
                <Component/>
            );
        }
    }
    return NewComponent;
}

But this doesn't need to work in the future once the proper solution is in the place.

[likeSerge]

Yes, this works with 'any' when I dont pass any props to Component. But when I return:

return (
        <Component prop1={testProp}/>
 );

then build fails with error: 'Module build failed: TypeError: Cannot read property 'methods' of null'

[pvasek]

Sorry, I didn noticed you are passing no props. I will add that test case as well.

[likeSerge]

Can you give any update about the state of this issue, please ?