diff --git a/build/gulp/tasks/perf.ts b/build/gulp/tasks/perf.ts index ea97d337be..b253aaea0c 100644 --- a/build/gulp/tasks/perf.ts +++ b/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')], + ), ]) } diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index bcf9058881..1b00c7d9f9 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -429,13 +429,13 @@ class ComponentExample extends React.Component ) : ( - React.createElement(component) + React.createElement(defaultExport) )} diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts index 6b6217fafd..4d391a0a32 100644 --- a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts +++ b/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, diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/getExampeSource.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/getExampeModule.ts similarity index 71% rename from docs/src/components/ComponentDoc/ComponentSourceManager/getExampeSource.ts rename to docs/src/components/ComponentDoc/ComponentSourceManager/getExampeModule.ts index f4a114b0df..6ff1187a10 100644 --- a/docs/src/components/ComponentDoc/ComponentSourceManager/getExampeSource.ts +++ b/docs/src/components/ComponentDoc/ComponentSourceManager/getExampeModule.ts @@ -7,7 +7,13 @@ 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` @@ -15,7 +21,8 @@ const getExampleModule = ( try { return { - component: examplesContext(modulePath).default, + defaultExport: examplesContext(modulePath).default, + namedExports: examplesContext(modulePath), source: exampleSourcesContext(sourcePath), } } catch (e) { diff --git a/docs/src/examples/components/Accordion/Performance/AccordionMinimal.perf.tsx b/docs/src/examples/components/Accordion/Performance/AccordionMinimal.perf.tsx new file mode 100644 index 0000000000..a6ef6d8f88 --- /dev/null +++ b/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 = () => + +AccordionMinimalPerf.iterations = 5000 +AccordionMinimalPerf.filename = 'AccordionMinimal.perf.tsx' + +export default AccordionMinimalPerf diff --git a/docs/src/examples/components/Alert/Performance/AlertMinimal.perf.tsx b/docs/src/examples/components/Alert/Performance/AlertMinimal.perf.tsx new file mode 100644 index 0000000000..f76faff8bf --- /dev/null +++ b/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 = () => + +AlertMinimalPerf.iterations = 5000 +AlertMinimalPerf.filename = 'AlertMinimal.perf.tsx' + +export default AlertMinimalPerf diff --git a/docs/src/examples/components/Animation/Performance/AnimationMinimal.perf.tsx b/docs/src/examples/components/Animation/Performance/AnimationMinimal.perf.tsx new file mode 100644 index 0000000000..0ab3cb9276 --- /dev/null +++ b/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 = () => + +AnimationMinimalPerf.iterations = 5000 +AnimationMinimalPerf.filename = 'AnimationMinimal.perf.tsx' + +export default AnimationMinimalPerf diff --git a/docs/src/examples/components/Attachment/Performance/Attachment.perf.tsx b/docs/src/examples/components/Attachment/Performance/Attachment.perf.tsx deleted file mode 100644 index 2d6d5faabf..0000000000 --- a/docs/src/examples/components/Attachment/Performance/Attachment.perf.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Attachment } from '@fluentui/react' -import * as React from 'react' - -const AttachmentPerf = () => - -AttachmentPerf.iterations = 1000 - -export default AttachmentPerf diff --git a/docs/src/examples/components/Attachment/Performance/AttachmentMinimal.perf.tsx b/docs/src/examples/components/Attachment/Performance/AttachmentMinimal.perf.tsx new file mode 100644 index 0000000000..0aebe2ba55 --- /dev/null +++ b/docs/src/examples/components/Attachment/Performance/AttachmentMinimal.perf.tsx @@ -0,0 +1,9 @@ +import { Attachment } from '@fluentui/react' +import * as React from 'react' + +const AttachmentMinimalPerf = () => + +AttachmentMinimalPerf.iterations = 5000 +AttachmentMinimalPerf.filename = 'AttachmentMinimal.perf.tsx' + +export default AttachmentMinimalPerf diff --git a/docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx b/docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx new file mode 100644 index 0000000000..4c940c1b27 --- /dev/null +++ b/docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx @@ -0,0 +1,18 @@ +import { Attachment } from '@fluentui/react' +import * as React from 'react' + +const AttachmentSlotsPerf = () => ( + +) + +AttachmentSlotsPerf.iterations = 5000 +AttachmentSlotsPerf.filename = 'AttachmentSlots.perf.tsx' + +export default AttachmentSlotsPerf diff --git a/docs/src/examples/components/Avatar/Performance/AvatarMinimal.perf.tsx b/docs/src/examples/components/Avatar/Performance/AvatarMinimal.perf.tsx new file mode 100644 index 0000000000..18f50a6b3b --- /dev/null +++ b/docs/src/examples/components/Avatar/Performance/AvatarMinimal.perf.tsx @@ -0,0 +1,9 @@ +import { Avatar } from '@fluentui/react' +import * as React from 'react' + +const AvatarMinimalPerf = () => + +AvatarMinimalPerf.iterations = 5000 +AvatarMinimalPerf.filename = 'AvatarMinimal.perf.tsx' + +export default AvatarMinimalPerf diff --git a/docs/src/examples/components/Box/Performance/BoxMinimal.perf.tsx b/docs/src/examples/components/Box/Performance/BoxMinimal.perf.tsx new file mode 100644 index 0000000000..153160c7b7 --- /dev/null +++ b/docs/src/examples/components/Box/Performance/BoxMinimal.perf.tsx @@ -0,0 +1,9 @@ +import { Box } from '@fluentui/react' +import * as React from 'react' + +const BoxMinimalPerf = () => + +BoxMinimalPerf.iterations = 5000 +BoxMinimalPerf.filename = 'BoxMinimal.perf.tsx' + +export default BoxMinimalPerf diff --git a/docs/src/examples/components/Button/Performance/Button.perf.tsx b/docs/src/examples/components/Button/Performance/Button.perf.tsx deleted file mode 100644 index c9875f445c..0000000000 --- a/docs/src/examples/components/Button/Performance/Button.perf.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Button } from '@fluentui/react' -import * as React from 'react' - -const ButtonPerf = () =>