Addon-docs: Fix React Suspense in source snippets.

[zhyd1997]

Issue: #11554

What I did

add <React.Suspense> support in `source snippets.

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]

Refactored PR: #19785

[shilman]

Thanks for fixing this @zhyd1997 !! Is there a full list of these "known symbols" somewhere & can we do all of them in this PR?

[shilman]

Any ideas why the <div> is not showing up?

[zhyd1997]

Hi @shilman

I submitted a refactor PR: #19785 to handle other "know symbols", but have some issues on CI, you can check it.

[zhyd1997]

Uhh, div, sorry, it's my problem, I will add it when I come back my office.

[zhyd1997]

Actually It works for new creat-react-app when I added them in bundled code, I will figure out why the test passed with wrong snapshot.

[zhyd1997]

Hi @shilman!

with the help of @JReinhold on Discord, I have fixed the CI errors on PR #19785

• added a new react type support -- StrictMode, other types will be added later, and
• in my opinion, the div missing is another issue...

so could we talk about the feature/bug on PR #19785 ?

Update:

why the <div> is not showing up?

I think it's related to react-element-to-jsx-string library: #18269 (comment)

Reproduce:

import React, { createElement } from 'react';
import reactElementToJSXString from 'react-element-to-jsx-string';

function SuspenseComponent(props: any) {
  return (
    <React.Suspense fallback={null}>
      <div>{props.children}</div>
    </React.Suspense>
  );
}

console.log(reactElementToJSXString(createElement(SuspenseComponent, {}, 'I am Suspense'), {}));
// -------- log ----------
<SuspenseComponent>
  I am Suspense
</SuspenseComponent>

[ndelangen]

@zhyd1997 Is the other PR a replacement for this one?

Can I close this PR, then?

[zhyd1997]

Hi @ndelangen

The replacement: #19785