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

autodocs should keep indentation in @example #2512

Closed
KutnerUri opened this issue Mar 29, 2020 · 4 comments · Fixed by #2577
Closed

autodocs should keep indentation in @example #2512

KutnerUri opened this issue Mar 29, 2020 · 4 comments · Fixed by #2577
Labels
area/docs-parsing automated docs parsing in bit type/bug

Comments

@KutnerUri
Copy link
Contributor

KutnerUri commented Mar 29, 2020

See: https://bit.dev/kutner/temp/atom/eva-icon-font?version=1.0.0

When exporting a component, the @example loses its indentation.

Example in jsdocs:

/**
 * @example
 * <html>
 *   <head>
 *     <EvaIconFont query='aqq93z' />
 *   <head>
 * </html>
 */

Example from API

(https://api.bit.dev/component/kutner/temp/atom/eva-icon-font?version=1.0.0)

"raw": "<html>\n<head>\n<EvaIconFont query='aqq93z' />\n<head>\n</html>",

I expect the API example to keep the same linebreaks and indentation as the source code.

In addition, we need to specify language @example.
A couple of times I wanted to show scss usage, but I always got .tsx highlight.

Specifications

  • Bit version: 14.7.6
  • Node version: 12.12
  • npm / yarn version: 1.22
  • Platform: MacOS
@KutnerUri KutnerUri added type/bug area/docs-parsing automated docs parsing in bit labels Mar 29, 2020
@davidfirst
Copy link
Member

@KutnerUri , isn't an issue in bit.dev? I just created a component with the example below and ran bit show, I can see the example correctly with indentations.

Screen Shot 2020-04-10 at 10 23 05 PM

@KutnerUri
Copy link
Contributor Author

I'm still getting it without spaces, and 95% sure it's happening in the CLI.
I can't explain why or when it is happening. Some components get spaces, some don't.
Doesn't seem to matter if it's tabs or spaces.

Now it is happening in this component:
https://bit.dev/bit/evangelist/marketing/comment-carousel (should have tabs before the objects)

@GiladShoham
Copy link
Member

@davidfirst I've imported the component @KutnerUri mentioned (https://bit.dev/bit/evangelist/marketing/comment-carousel)
it seems like the tabs have lost. (using bit cat-object)

"examples": [
        {
          "raw": "const bitTestimonials = [\n{ name: 'Barbra', description: 'head of barbering', content: 'Great scissors!', avatar: '...', }\n{ name: 'Roberto', description: 'Robber of Bertos', content: 'Easy to carry.', avatar: '...', }\n];\n\n<CommentCarousel content={bitTestimonials} />",
          "code": "const bitTestimonials = [\n{ name: 'Barbra', description: 'head of barbering', content: 'Great scissors!', avatar: '...', }\n{ name: 'Roberto', description: 'Robber of Bertos', content: 'Easy to carry.', avatar: '...', }\n];\n<CommentCarousel content={bitTestimonials} />"
        }
      ]

it might be during the export / import?
It's weird

@davidfirst
Copy link
Member

I found the issue.
For non-react components, it was working.
For react components, the data passed to docgen was different (without the asterisks), and as such, it should have worked with unwrap: false. See the PR above for the complete fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/docs-parsing automated docs parsing in bit type/bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants