Merge pull request #19004 from zhyd1997/fix/support-profiler-use-in-c…

…omponent

Addon-docs: Fix React Profiler in source snippets

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

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-import React, { createElement, FC, PropsWithChildren } from 'react';
+import React, { createElement, FC, Profiler, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import { addons, useEffect } from '@storybook/addons';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
@@ -137,6 +137,23 @@ describe('renderJsx', () => {
     `);
   });
 
+  it('Profiler', () => {
+    function ProfilerComponent(props: any) {
+      return (
+        <Profiler id="profiler-test" onRender={() => {}}>
+          <div>{props.children}</div>
+        </Profiler>
+      );
+    }
+
+    expect(renderJsx(createElement(ProfilerComponent, {}, 'I am Profiler'), {}))
+      .toMatchInlineSnapshot(`
+        <ProfilerComponent>
+          I am Profiler
+        </ProfilerComponent>
+    `);
+  });
+
   it('should not add default props to string if the prop value has not changed', () => {
     const Container = ({ className, children }: { className: string; children: string }) => {
       return <div className={className}>{children}</div>;

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

@@ -79,6 +79,7 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
           // 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) ||
@@ -119,7 +120,7 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
     return string;
   }).join('\n');
 
-  return result.replace(/function\s+noRefCheck\(\)\s+\{\}/, '() => {}');
+  return result.replace(/function\s+noRefCheck\(\)\s+\{\}/g, '() => {}');
 };
 
 const defaultOpts = {