Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A suggestion to improve documentation a bit #645

Closed
ilya-pyatin opened this issue Oct 16, 2017 · 3 comments
Closed

A suggestion to improve documentation a bit #645

ilya-pyatin opened this issue Oct 16, 2017 · 3 comments

Comments

@ilya-pyatin
Copy link

Hello:

I am new to styleguidist, yesterday tried to use it on the project I am currently working on. And I had an issue which I resolved for some time. The issue is that I added an example of a component in a Readme.md like it is suggested, and I had the following error displayed instead of the example:

"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of PreviewComponent."

It was not clear for me why the error appeared. I've tried some ideas like changing Webpack version to 3, but in the end it appeared that the issue was that my component was exported not as a default. So it was like this:

export class Component ...

and changing it to this solved the issue:

export default class Component ...

So my suggestion is to mention this detail in the documentation. The detail that Readme.md expects a component be exported as default.

Thank you

@sapegin
Copy link
Member

sapegin commented Oct 16, 2017

Feel free to send a pull request ;-)

@ilya-pyatin
Copy link
Author

Actually I'm not sure if it is required that a component is exported as default.

There are a lot of components on my project that are exported not as default so it would be great if there was a way to keep them as is and be able to write examples.

So far I haven't found such way in the docs. I have searched the source code and have found that there is a switch in the Examples component with case 'code' and case 'markdown', so I would assume that there is an alternative way of specifying an example apart from creating an .md file. But again, I have not found any description of the way in the docs.

Unfortunately I don't have much time to search the source code to find an answer myself, so I would appreciate any help with this.

And again, if there is an alternative way of specifying component examples, it would be great to have it documented.

Thanks

@sapegin
Copy link
Member

sapegin commented Oct 17, 2017

Actually I'm not sure if it is required that a component is exported as default.
it would be great if there was a way to keep them as is and be able to write examples.

According to the code it may work, but this code needs more tests and comments:

/**
* Expose component as global variables.
*
* @param {Object} component
*/
export function globalizeComponent(component) {
if (!component.name) {
return;
}
global[component.name] =
!component.props.path || component.props.path === 'default'
? component.module.default || component.module
: component.module[component.props.path];

Feel free to improve that.

So far I haven't found such way in the docs. I have searched the source code and have found that there is a switch in the Examples component with case 'code' and case 'markdown', so I would assume that there is an alternative way of specifying an example apart from creating an .md file.

Not sure how you’ve come to this conclusion ;-) code and markdown here are parts of your Markdown file that should be rendered as interactive example or static text.

And again, if there is an alternative way of specifying component examples, it would be great to have it documented.

Looks like you’re mixing two things here: exporting components and specifying examples. Please create a separate issue for the latter issue (it looks very similar to #621).

@sapegin sapegin closed this as completed Apr 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants