About imported types not beeing processed

[csaunier]

Hello everybody.

I inaugurate this discussion section because i think I'm not really facing an issue here 🙂 .

I'm working on my company component library, and the need of a custom documentation has emerged.
And in this library we have some types that are shared among components.

For example :

types.js :

import propTypes from "prop-types"

export const exportedTypes = {
  baz: propTypes.bool.isRequired
}

Button.jsx :

import React from "react"
import propTypes from "prop-types"
import { exportedTypes } from "./types";

export const Button = () => {
  return <button>Yolo</button>
}

Button.propTypes = {
  ...exportedTypes,
  foo: propTypes.number.isRequired
}

I've seen this large PR #464 from @phated (sorry to ping you here :) ), I'm well using "react-docgen": "^6.0.0-alpha.0", but i can't figure how to make this working.

I'm testing with npx react-docgen src/Button/Button.jsx, but this is not printing imported types.
I've done a test repository if this can help : https://github.com/csaunier/test-react-docgen

Can someone show me how to make it work ?
Or perhaps i misunderstood #464 purpose ?

Thanks !

[danez]

By default it is not enabled. The cli currently also has no way of enabling it. In order to make it work at the moment you would need to write your own script, something along these lines:

const docgen = require('react-docgen');
const src = require('fs').readFileSync('src/Button/Button.jsx');

const componentInfo = docgen.parse(src, null, null, { importer: docgen.importers.makeFsImporter() } );

console.log(componentInfo);

[csaunier]

Thanks for answering @danez 🙂

But this is not working, using API and changing default importer in option doesn't change the output.

Here what i got, no baz property (and no errors) :

DOCGEN =  { description: '',
  displayName: 'Button',
  methods: [],
  props: { foo: { type: [Object], required: true, description: '' } },
  composes: [ './types' ] }

[phated]

Fwiw, my primary implementation was against a massive TypeScript codebase, so I didn't test it against prop-types. You may need to contribute to it.

[csaunier]

So after checkouting and saw that test suits was 🟢 with importing prop-types, it appears that the filename property is indicated in README.md, is indeed highly recommended 🙂

So for posterity, correct script is :

const docgen = require('react-docgen');
const path = 'src/Button/Button.jsx'
const src = require('fs').readFileSync(path);

const componentInfo = docgen.parse(src, null, null, { 
  importer: docgen.importers.makeFsImporter(),
  filename: path
} );

console.log(componentInfo);

and output is 🎉 :

{ description: '',
  displayName: 'Button',
  methods: [],
  props:
   { baz: { type: [Object], required: true, description: '' },
     foo: { type: [Object], required: true, description: '' } 
  } 
}

Thanks @danez @phated

[danez]

Nice, good to know.