perf: add base perf examples (#2164)

* chore: sort yarn perf table

* perf: add base perf examples

* refactor: base perf to minimal perf

* fix: typo

* revert CSF, it breaks maximized view, screener, and codesandbox

* fix tooltip minimal example

Author: levithomason

build/gulp/tasks/perf.ts

@@ -99,10 +99,13 @@ const createMarkdownTable = (
 
   return markdownTable([
     ['Example', ...fieldLabels],
-    ..._.map(exampleMeasures, (exampleMeasure, exampleName) => [
-      exampleName,
-      ...fieldValues[exampleName],
-    ]),
+    ..._.sortBy(
+      _.map(exampleMeasures, (exampleMeasure, exampleName) => [
+        exampleName,
+        ...fieldValues[exampleName],
+      ]),
+      row => -row[fields.indexOf('median')],
+    ),
   ])
 }
 

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -429,13 +429,13 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
 
   render() {
     const {
-      component,
       children,
       currentCode,
       currentCodeLanguage,
       currentCodePath,
       error,
       description,
+      defaultExport,
       onError,
       title,
       wasCodeChanged,
@@ -519,7 +519,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                       resolver={importResolver}
                     />
                   ) : (
-                    React.createElement(component)
+                    React.createElement(defaultExport)
                   )}
                 </VariableResolver>
               </Provider>

docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts

@@ -4,10 +4,11 @@ import * as React from 'react'
 
 import { ExampleSource } from 'docs/src/types'
 import { componentAPIs as APIdefinitions, ComponentAPIs } from './componentAPIs'
-import getExampleModule from './getExampeSource'
+import getExampleModule from './getExampeModule'
 
 export type ComponentSourceManagerRenderProps = ComponentSourceManagerState & {
-  component: React.ElementType
+  defaultExport: React.ElementType
+  namedExports: { [key: string]: React.ElementType }
   handleCodeAPIChange: (newApi: keyof ComponentAPIs) => void
   handleCodeChange: (newCode: string) => void
   handleCodeFormat: () => void
@@ -23,7 +24,8 @@ export type ComponentSourceManagerProps = {
 }
 
 type ComponentSourceManagerAPIs = ComponentAPIs<{
-  component: React.ElementType
+  defaultExport: React.ElementType
+  namedExports: { [key: string]: React.ElementType }
   sourceCode: ExampleSource | undefined
   supported: boolean
 }>
@@ -54,7 +56,8 @@ export default class ComponentSourceManager extends React.Component<
 
       return {
         ...definition,
-        component: module && module.component,
+        defaultExport: module && module.defaultExport,
+        namedExports: module && module.namedExports,
         sourceCode: module ? module.source : '',
         supported: !!module,
       }
@@ -139,7 +142,8 @@ export default class ComponentSourceManager extends React.Component<
   render() {
     return this.props.children({
       ...this.state,
-      component: this.state.componentAPIs[this.state.currentCodeAPI].component,
+      defaultExport: this.state.componentAPIs[this.state.currentCodeAPI].defaultExport,
+      namedExports: this.state.componentAPIs[this.state.currentCodeAPI].namedExports,
       handleCodeAPIChange: this.handleCodeAPIChange,
       handleCodeChange: this.handleCodeChange,
       handleCodeFormat: this.handleCodeFormat,

docs/src/components/ComponentDoc/ComponentSourceManager/getExampeSource.ts renamed to docs/src/components/ComponentDoc/ComponentSourceManager/getExampeModule.ts

@@ -7,15 +7,22 @@ import { componentAPIs, ComponentAPIs } from './componentAPIs'
 const getExampleModule = (
   examplePath: string,
   componentAPI: keyof ComponentAPIs,
-): { component: React.ElementType; source: ExampleSource } | undefined => {
+):
+  | {
+      defaultExport: React.ElementType
+      namedExports: { [key: string]: React.ElementType }
+      source: ExampleSource
+    }
+  | undefined => {
   const fileSuffix = componentAPIs[componentAPI].fileSuffix
 
   const sourcePath = `${examplePath.replace(/^components/, '.')}${fileSuffix}.source.json`
   const modulePath = `./${examplePath}${fileSuffix}.tsx`
 
   try {
     return {
-      component: examplesContext(modulePath).default,
+      defaultExport: examplesContext(modulePath).default,
+      namedExports: examplesContext(modulePath),
       source: exampleSourcesContext(sourcePath),
     }
   } catch (e) {

docs/src/examples/components/Accordion/Performance/AccordionMinimal.perf.tsx

@@ -0,0 +1,9 @@
+import { Accordion } from '@fluentui/react'
+import * as React from 'react'
+
+const AccordionMinimalPerf = () => <Accordion />
+
+AccordionMinimalPerf.iterations = 5000
+AccordionMinimalPerf.filename = 'AccordionMinimal.perf.tsx'
+
+export default AccordionMinimalPerf

docs/src/examples/components/Alert/Performance/AlertMinimal.perf.tsx

@@ -0,0 +1,9 @@
+import { Alert } from '@fluentui/react'
+import * as React from 'react'
+
+const AlertMinimalPerf = () => <Alert />
+
+AlertMinimalPerf.iterations = 5000
+AlertMinimalPerf.filename = 'AlertMinimal.perf.tsx'
+
+export default AlertMinimalPerf

docs/src/examples/components/Animation/Performance/AnimationMinimal.perf.tsx

@@ -0,0 +1,9 @@
+import { Animation } from '@fluentui/react'
+import * as React from 'react'
+
+const AnimationMinimalPerf = () => <Animation />
+
+AnimationMinimalPerf.iterations = 5000
+AnimationMinimalPerf.filename = 'AnimationMinimal.perf.tsx'
+
+export default AnimationMinimalPerf

docs/src/examples/components/Attachment/Performance/Attachment.perf.tsx

@@ -0,0 +1,9 @@
+import { Attachment } from '@fluentui/react'
+import * as React from 'react'
+
+const AttachmentMinimalPerf = () => <Attachment />
+
+AttachmentMinimalPerf.iterations = 5000
+AttachmentMinimalPerf.filename = 'AttachmentMinimal.perf.tsx'
+
+export default AttachmentMinimalPerf

docs/src/examples/components/Attachment/Performance/AttachmentMinimal.perf.tsx

@@ -0,0 +1,18 @@
+import { Attachment } from '@fluentui/react'
+import * as React from 'react'
+
+const AttachmentSlotsPerf = () => (
+  <Attachment
+    actionable
+    icon="table"
+    header="Document.docx"
+    description="800 Kb"
+    action={{ icon: 'more', title: 'More Action' }}
+    progress={33}
+  />
+)
+
+AttachmentSlotsPerf.iterations = 5000
+AttachmentSlotsPerf.filename = 'AttachmentSlots.perf.tsx'
+
+export default AttachmentSlotsPerf

docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx

@@ -0,0 +1,9 @@
+import { Avatar } from '@fluentui/react'
+import * as React from 'react'
+
+const AvatarMinimalPerf = () => <Avatar />
+
+AvatarMinimalPerf.iterations = 5000
+AvatarMinimalPerf.filename = 'AvatarMinimal.perf.tsx'
+
+export default AvatarMinimalPerf

docs/src/examples/components/Avatar/Performance/AvatarMinimal.perf.tsx

@@ -0,0 +1,9 @@
+import { Box } from '@fluentui/react'
+import * as React from 'react'
+
+const BoxMinimalPerf = () => <Box />
+
+BoxMinimalPerf.iterations = 5000
+BoxMinimalPerf.filename = 'BoxMinimal.perf.tsx'
+
+export default BoxMinimalPerf

docs/src/examples/components/Box/Performance/BoxMinimal.perf.tsx

@@ -0,0 +1,9 @@
+import { Button } from '@fluentui/react'
+import * as React from 'react'
+
+const ButtonMinimalPerf = () => <Button />
+
+ButtonMinimalPerf.iterations = 5000
+ButtonMinimalPerf.filename = 'ButtonMinimal.perf.tsx'
+
+export default ButtonMinimalPerf

docs/src/examples/components/Button/Performance/Button.perf.tsx

@@ -0,0 +1,21 @@
+import { Button } from '@fluentui/react'
+import * as React from 'react'
+
+const ButtonSlotsPerf = () => (
+  <Button
+    icon="play"
+    content="Click here"
+    loader={{
+      delay: 200,
+      inline: true,
+      label: 'Loading',
+      labelPosition: 'end',
+      size: 'smallest',
+    }}
+  />
+)
+
+ButtonSlotsPerf.iterations = 5000
+ButtonSlotsPerf.filename = 'ButtonSlots.perf.tsx'
+
+export default ButtonSlotsPerf

docs/src/examples/components/Button/Performance/ButtonMinimal.perf.tsx

@@ -8,7 +8,7 @@ const Performance = () => (
     <ComponentPerfExample
       title="Default"
       description="A default test."
-      examplePath="components/Button/Performance/Button.perf"
+      examplePath="components/Button/Performance/ButtonSlots.perf"
     />
   </NonPublicSection>
 )

docs/src/examples/components/Button/Performance/ButtonSlots.perf.tsx

@@ -0,0 +1,9 @@
+import { Carousel } from '@fluentui/react'
+import * as React from 'react'
+
+const CarouselMinimalPerf = () => <Carousel />
+
+CarouselMinimalPerf.iterations = 5000
+CarouselMinimalPerf.filename = 'CarouselMinimal.perf.tsx'
+
+export default CarouselMinimalPerf

docs/src/examples/components/Button/Performance/index.tsx

@@ -12,7 +12,7 @@ const janeAvatar = {
   status: { color: 'green', icon: 'stardust-checkmark' },
 }
 
-const ChatExample = () => {
+const ChatDuplicateMessagesPerf = () => {
   return (
     <Provider
       theme={{
@@ -48,4 +48,7 @@ const ChatExample = () => {
   )
 }
 
-export default ChatExample
+ChatDuplicateMessagesPerf.iterations = 5000
+ChatDuplicateMessagesPerf.filename = 'ChatDuplicateMessages.perf.tsx'
+
+export default ChatDuplicateMessagesPerf

docs/src/examples/components/Carousel/Performance/CarouselMinimal.perf.tsx

@@ -0,0 +1,9 @@
+import { Chat } from '@fluentui/react'
+import * as React from 'react'
+
+const ChatMinimalPerf = () => <Chat />
+
+ChatMinimalPerf.iterations = 5000
+ChatMinimalPerf.filename = 'ChatMinimal.perf.tsx'
+
+export default ChatMinimalPerf

docs/src/examples/components/Chat/Performance/Chat.perf.tsx renamed to docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx

@@ -1,7 +1,7 @@
 import { Accessibility, Avatar, Chat, Menu, Provider, menuAsToolbarBehavior } from '@fluentui/react'
 import * as _ from 'lodash'
-import * as React from 'react'
 import cx from 'classnames'
+import * as React from 'react'
 
 const avatars = {
   ade:
@@ -96,7 +96,7 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
   }
 }
 
-const ChatWithPopover = () => {
+const ChatWithPopoverPerf = () => {
   return (
     <Provider
       theme={{
@@ -166,4 +166,7 @@ const ChatWithPopover = () => {
   )
 }
 
-export default ChatWithPopover
+ChatWithPopoverPerf.iterations = 5000
+ChatWithPopoverPerf.filename = 'ChatWithPopover.perf.tsx'
+
+export default ChatWithPopoverPerf

docs/src/examples/components/Chat/Performance/ChatMinimal.perf.tsx

@@ -6,13 +6,13 @@ import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection'
 const Performance = () => (
   <NonPublicSection title="Performance">
     <ComponentPerfExample
-      title="Default"
-      description="A default test."
-      examplePath="components/Chat/Performance/Chat.perf"
+      title="Duplicate Messages"
+      description="Chat with many duplicate messages."
+      examplePath="components/Chat/Performance/ChatDuplicateMessages.perf"
     />
     <ComponentPerfExample
       title="Chat with popover"
-      description="Chat with actions menu in a popover"
+      description="Chat with actions menu in a popover."
       examplePath="components/Chat/Performance/ChatWithPopover.perf"
     />
   </NonPublicSection>

docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx

@@ -0,0 +1,9 @@
+import { Checkbox } from '@fluentui/react'
+import * as React from 'react'
+
+const CheckboxMinimalPerf = () => <Checkbox />
+
+CheckboxMinimalPerf.iterations = 5000
+CheckboxMinimalPerf.filename = 'CheckboxMinimal.perf.tsx'
+
+export default CheckboxMinimalPerf

docs/src/examples/components/Chat/Performance/index.tsx

@@ -0,0 +1,9 @@
+import { Dialog } from '@fluentui/react'
+import * as React from 'react'
+
+const DialogMinimalPerf = () => <Dialog />
+
+DialogMinimalPerf.iterations = 5000
+DialogMinimalPerf.filename = 'DialogMinimal.perf.tsx'
+
+export default DialogMinimalPerf

docs/src/examples/components/Checkbox/Performance/CheckboxMinimal.perf.tsx

@@ -0,0 +1,9 @@
+import { Divider } from '@fluentui/react'
+import * as React from 'react'
+
+const DividerMinimalPerf = () => <Divider />
+
+DividerMinimalPerf.iterations = 5000
+DividerMinimalPerf.filename = 'DividerMinimal.perf.tsx'
+
+export default DividerMinimalPerf

docs/src/examples/components/Dialog/Performance/DialogMinimal.perf.tsx

@@ -8,7 +8,7 @@ const Performance = () => (
     <ComponentPerfExample
       title="Default"
       description="A default test."
-      examplePath="components/Divider/Performance/Divider.perf"
+      examplePath="components/Divider/Performance/DividerMinimal.perf"
     />
   </NonPublicSection>
 )

docs/src/examples/components/Divider/Performance/Divider.perf.tsx

@@ -0,0 +1,9 @@
+import { Dropdown } from '@fluentui/react'
+import * as React from 'react'
+
+const DropdownMinimalPerf = () => <Dropdown />
+
+DropdownMinimalPerf.iterations = 5000
+DropdownMinimalPerf.filename = 'DropdownMinimal.perf.tsx'
+
+export default DropdownMinimalPerf

docs/src/examples/components/Divider/Performance/DividerMinimal.perf.tsx

@@ -0,0 +1,9 @@
+import { Embed } from '@fluentui/react'
+import * as React from 'react'
+
+const EmbedMinimalPerf = () => <Embed />
+
+EmbedMinimalPerf.iterations = 5000
+EmbedMinimalPerf.filename = 'EmbedMinimal.perf.tsx'
+
+export default EmbedMinimalPerf