Refactor react perf profiler for local dev, local data collection (#6186

)

.changeset/healthy-maps-watch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Add react profiler log data option to storybook globals

polaris-react/.storybook/RenderPerformanceProfiler/RenderPerformanceProfiler.tsx

@@ -1,5 +1,4 @@
 import React, {PropsWithChildren} from 'react';
-import isChromatic from 'chromatic/isChromatic';
 import {version} from '../../package.json';
 
 interface Data {
@@ -15,35 +14,26 @@ interface ProfileProps {
   kind: string;
 }
 
-const isDevelopment = process.env.NODE_ENV === 'development';
-
 const trackRenderPerformance = (data: Data) => {
   const commitSha = process.env.STORYBOOK_GITHUB_SHA
     ? process.env.STORYBOOK_GITHUB_SHA
     : 'localdev';
 
-  const body = JSON.stringify({...data, commitSha, version});
-
-  const target = isDevelopment
-    ? '//localhost:3000/api/profiler'
-    : 'https://polaris-coverage.shopifycloud.com/api/profiler';
-
-  fetch(target, {
-    method: 'POST',
-    keepalive: true,
-    mode: 'no-cors',
-    body,
-  });
+  console.log({...data, commitSha, version});
 };
 
-const Profiler = ({id, kind, children}: PropsWithChildren<ProfileProps>) => (
+export const RenderPerformanceProfiler = ({
+  id,
+  kind,
+  children,
+}: PropsWithChildren<ProfileProps>) => (
   <React.Profiler
     id={id}
     // https://reactjs.org/docs/profiler.html#onrender-callback
     onRender={(_, phase, actualDuration, baseDuration) => {
       trackRenderPerformance({
         id,
-        kind,
+        kind: kind.replace('All Components/', ''),
         phase,
         actualDuration,
         baseDuration,
@@ -53,8 +43,3 @@ const Profiler = ({id, kind, children}: PropsWithChildren<ProfileProps>) => (
     {children}
   </React.Profiler>
 );
-
-const Component = ({children}: PropsWithChildren<{}>) => <>{children}</>;
-
-export const RenderPerformanceProfiler =
-  isDevelopment || isChromatic() ? Profiler : Component;

polaris-react/.storybook/manager.js

@@ -71,13 +71,13 @@ function GridPanel(props) {
             name: 'Show grid overlay',
             description:
               'Show or hide a 4 / 12 column grid, overlaying components',
-            defaultValue: false,
+            defaultValue: 'false',
             control: {type: 'boolean'},
           },
           gridInFrame: {
             name: 'Grid in frame',
             description: 'Show grid within app frame context',
-            defaultValue: false,
+            defaultValue: 'false',
             control: {type: 'boolean'},
           },
           gridWidth: {

polaris-react/.storybook/preview.js

@@ -41,11 +41,15 @@ function GridOverlayDecorator(Story, context) {
   );
 }
 
-function RenderPerformanceProfilerDecorator(Story, context) {
+function ReactRenderProfiler(Story, context) {
+  const {profiler} = context.globals;
+  const Wrapper = profiler ? RenderPerformanceProfiler : React.Fragment;
+  const props = profiler ? {id: context.id, kind: context.kind} : {};
+
   return (
-    <RenderPerformanceProfiler id={context.id} kind={context.kind}>
+    <Wrapper {...props}>
       <Story {...context} />
-    </RenderPerformanceProfiler>
+    </Wrapper>
   );
 }
 
@@ -58,7 +62,18 @@ export const globalTypes = {
         {title: 'Disabled', value: 'false'},
         {title: 'Enabled', value: 'true'},
       ],
-      showName: true,
+      showName: 'true',
+    },
+  },
+  profiler: {
+    name: 'React.Profiler',
+    defaultValue: 'false',
+    toolbar: {
+      items: [
+        {title: 'Disabled', value: 'false'},
+        {title: 'Enabled', value: 'true'},
+      ],
+      showName: 'true',
     },
   },
 };
@@ -67,5 +82,5 @@ export const decorators = [
   GridOverlayDecorator,
   StrictModeDecorator,
   AppProviderDecorator,
-  RenderPerformanceProfilerDecorator,
+  ReactRenderProfiler,
 ];