Addon-docs: Fix exotic React components in Source block #12638
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…/ memo & forwardRef exotic components Prev. would just do as <[object Object]>.. because it didn't know where to lookup the inner render function's name.
andezzat
changed the title
andezzat
force-pushed
the
fix/react-component-name
branch
from
5efc1ff to
77ec4c6
Compare
ndelangen
approved these changes
Oct 1, 2020
andezzat
commented
Oct 1, 2020
shilman
requested changes
Oct 3, 2020
There was a problem hiding this comment.
Hey @andezzat !! Thanks so much for putting this together -- will make a ton of people happy. Unfortunately, I added a test case to official-storybook and it doesn't seem to be working end-to-end. You can find that in the latest commit on this branch.
Would you mind:
- looking into this specific case
- adding more test cases to official-storybook
- reconciling the official-storybook behavior and the jest test cases (look great, but somehow don't line up)
shilman
changed the title
shilman
changed the title
…xample Component should be fed directly to React.memo|forwardRef functions so that displayName is set. Previously was passing an anonymous arrow fn...
shilman
reviewed
Oct 5, 2020
examples/official-storybook/stories/addon-docs/react-forward-ref.stories.js
Outdated
Show resolved
Hide resolved
shilman
added
the
patch:yes
shilman
added
the
patch:done
shilman
added a commit
that referenced
this pull request
Oct 5, 2020
Addon-docs: Fix exotic React components in Source block
|
This appears to be broken:
It seems to originate from export const ForwardRefButtonInnerPropTypes = forwardRef(BaseButton);
|
|
cc @andezzat can you take a look ☝️ |
|
Ah yes, I should've made a new component w/ proper |
This was referenced Nov 12, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The Problem
React Memo & ForwardRef exotic components would show up in the code snippet of storybook as
<[object Object]>because it didn't know where to lookup the inner render function's name.This is a bug in the library Storybook uses to render JSX into a string: algolia/react-element-to-jsx-string#352
What I did
I stole the default
displayNameFnfrom the original library hereAnd added what it needed to fetch Memo & ForwardRef component's names.
How to test
Maybe? I have no idea
No
No
If your answer is yes to any of these, please make sure to include it in your PR.