Addon-docs: Support <StrictMode /> and <Suspense /> in source viewer

[zhyd1997]

Issue: #11554

What I did

Refactor:

storybook/code/renderers/react/src/docs/jsxDecorator.tsx

Lines 77 to 92 in 9a07fcb

	const displayNameDefaults =
	typeof options.displayName === 'string'
	? { showFunctions: true, displayName: () => options.displayName }
	: {
	// To get exotic component names resolving properly
	displayName: (el: any): string =>
	el.type.displayName ||
	(el.type === Symbol.for('react.profiler') ? 'Profiler' : null) ||
	getDocgenSection(el.type, 'displayName') ||
	(el.type.name !== '_default' ? el.type.name : null) ||
	(typeof el.type === 'function' ? 'No Display Name' : null) ||
	(isForwardRef(el.type) ? el.type.render.name : null) ||
	(isMemo(el.type) ? el.type.type.name : null) ||
	el.type,
	};

So that we will not write redundant code here:

https://github.com/algolia/react-element-to-jsx-string/blob/984f26908c17cea134fa53d17ac51f179e5195b2/src/parser/parseReactElement.js#L47-L77

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[zhyd1997]

Major Change: displayNameDefaults.displayName should be undefined if getDocgenSection returns null:

storybook/code/lib/docs-tools/src/argTypes/docgen/utils/docgenInfo.ts

Lines 14 to 16 in 9a07fcb

	export function getDocgenSection(component: Component, section: string): any {
	return hasDocgen(component) ? component.__docgenInfo[section] : null;
	}

and then the logic will be handled by react-element-to-jsx-string:

https://github.com/algolia/react-element-to-jsx-string/blob/984f26908c17cea134fa53d17ac51f179e5195b2/src/parser/parseReactElement.js#L47-L77

We don't need to rewrite redundant code here.

[zhyd1997]

Hi @shilman

I need your help with why test-runner-sandboxes failed on CircleCI, I have no idea about that...

Update:

the error
Cannot read properties of undefined (reading '__docgenInfo')
is thrown out from here:

storybook/code/lib/docs-tools/src/argTypes/docgen/utils/docgenInfo.ts

Line 15 in 9a07fcb

return hasDocgen(component) ? component.__docgenInfo[section] : null;

the code is React.ReactElement type, which has no __docgenInfo property, I will figure it out...

storybook/code/renderers/react/src/docs/jsxDecorator.tsx

Lines 43 to 49 in 6e927f3

	export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
	if (typeof code === 'undefined') {
	logger.warn('Too many skip or undefined component');
	return null;
	}
	let renderedJSX = code;

[ndelangen]

Having difficulty understanding this ticket & PR, @IanVS @andezzat @shilman can you help? I think if any of you feel confident this is the right thing to do, this can be merged!

[fizz3r]

@IanVS, @andezzat @shilman , any update on this PR? Still seeing the issue mentioned in #11554.

[ndelangen]

@shilman This PR is over a year old, what do you think of this PR / code-change?

I'm tempted to just proceed. I'll re-target the base branch, merge the base branch in, and see what happens.
I'd be real nice if we had a test / story demonstrating this though.

If CI fails, then I do not have the resources to get this merged, and will likely have to close, unless @zhyd1997 has interest in getting CI green at that point.

cc: @JReinhold

[zhyd1997]

Hi @ndelangen @shilman @IanVS @kasperpeulen @valentinpalkovic

Anything I can do on my side to improve the code confidence? 👀

[JReinhold]

I don't know much about this code path TBH, but I like the tests and everything is passing, so I'm okay with merging it.