chore(react-theme): Migrate to new DX by miroslavstastny · Pull Request #18655 · microsoft/fluentui

miroslavstastny · 2021-06-22T10:29:07Z

Pull request checklist

Addresses an existing issue: Part of migration: migrate converged packages to new DX (1st stage) #18579
Include a change request file using $ yarn change

Description of changes

react-theme migrated using yarn nx workspace-generator migrate-converged-pkg --name='@fluentui/react-theme'
added configuration for api-extractor, updates theme exports to make the extractor happy

packages/react-theme/package.json

size-auditor · 2021-06-22T10:40:27Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 35595426665827aee8852de4b2587f689bc0d759 (build)

miroslavstastny · 2021-06-22T10:55:19Z

packages/react-theme/src/themes/teams/darkTheme.ts

+import { Theme } from '../../types';

-export const teamsDarkTheme = createTeamsDarkTheme(brandTeams);
+export const teamsDarkTheme: Theme = createTeamsDarkTheme(brandTeams);


Desperate fix for api-extractor.

Without explicitly typing the variable, typescript generates the following .d.ts:

export declare const webLightTheme: import("../..").Theme;

which api-extractor fails on:

interesting !

~~what's the normal source import of that Theme ?~~

import { createHighContrastTheme } from '../../utils/createHighContrastTheme';

we have node ../../scripts/typescript/normalize-import which normalizes this TS anomaly (fixed in TS 4.3 )

packages/react-theme/config/api-extractor.json

miroslavstastny · 2021-06-22T11:58:47Z

/azp run

azure-pipelines · 2021-06-22T11:59:12Z

Azure Pipelines successfully started running 3 pipeline(s).

packages/react-theme/config/api-extractor.json

packages/react-theme/package.json

fabricteam · 2021-06-22T12:26:23Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	771	776	5000
BaseButton	mount	857	876	5000
Breadcrumb	mount	2609	2610	1000
ButtonNext	mount	515	512	5000
Checkbox	mount	1496	1489	5000
CheckboxBase	mount	1241	1249	5000
ChoiceGroup	mount	4610	4603	5000
ComboBox	mount	953	1007	1000
CommandBar	mount	10084	9984	1000
ContextualMenu	mount	6169	6214	1000
DefaultButton	mount	1105	1081	5000
DetailsRow	mount	3653	3689	5000
DetailsRowFast	mount	3605	3625	5000
DetailsRowNoStyles	mount	3418	3493	5000
Dialog	mount	2065	2103	1000
DocumentCardTitle	mount	134	126	1000
Dropdown	mount	3236	3193	5000
FluentProviderNext	mount	7186	7159	5000
FocusTrapZone	mount	1793	1791	5000
FocusZone	mount	1778	1758	5000
IconButton	mount	1680	1710	5000
Label	mount	319	324	5000
Layer	mount	1742	1745	5000
Link	mount	436	451	5000
MakeStyles	mount	1826	1831	50000
MenuButton	mount	1431	1391	5000
MessageBar	mount	1964	1970	5000
Nav	mount	3175	3149	1000
OverflowSet	mount	1024	1016	5000
Panel	mount	2048	2101	1000
Persona	mount	800	803	1000
Pivot	mount	1406	1347	1000
PrimaryButton	mount	1265	1239	5000
Rating	mount	7509	7436	5000
SearchBox	mount	1296	1295	5000
Shimmer	mount	2475	2449	5000
Slider	mount	1955	1900	5000
SpinButton	mount	4840	4921	5000
Spinner	mount	431	419	5000
SplitButton	mount	3108	3124	5000
Stack	mount	485	482	5000
StackWithIntrinsicChildren	mount	1461	1468	5000
StackWithTextChildren	mount	4331	4365	5000
SwatchColorPicker	mount	9825	9999	5000
Tabs	mount	1381	1375	1000
TagPicker	mount	2494	2335	5000
TeachingBubble	mount	11717	11783	5000
Text	mount	409	409	5000
TextField	mount	1381	1330	5000
ThemeProvider	mount	1165	1161	5000
ThemeProvider	virtual-rerender	587	579	5000
Toggle	mount	785	797	5000
buttonNative	mount	105	108	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	172	157	1.1:1
AvatarMinimalPerf.default	198	189	1.05:1
SkeletonMinimalPerf.default	357	339	1.05:1
AccordionMinimalPerf.default	152	146	1.04:1
BoxMinimalPerf.default	341	328	1.04:1
LabelMinimalPerf.default	381	367	1.04:1
TableMinimalPerf.default	394	379	1.04:1
AttachmentSlotsPerf.default	1058	1026	1.03:1
ListNestedPerf.default	551	535	1.03:1
RadioGroupMinimalPerf.default	445	432	1.03:1
AnimationMinimalPerf.default	404	395	1.02:1
CarouselMinimalPerf.default	461	454	1.02:1
CheckboxMinimalPerf.default	2720	2659	1.02:1
DialogMinimalPerf.default	751	734	1.02:1
DropdownMinimalPerf.default	3069	2999	1.02:1
LayoutMinimalPerf.default	363	356	1.02:1
LoaderMinimalPerf.default	685	672	1.02:1
SegmentMinimalPerf.default	339	332	1.02:1
TextMinimalPerf.default	343	335	1.02:1
DividerMinimalPerf.default	343	338	1.01:1
DropdownManyItemsPerf.default	666	661	1.01:1
GridMinimalPerf.default	326	324	1.01:1
InputMinimalPerf.default	1235	1220	1.01:1
ListCommonPerf.default	603	597	1.01:1
PopupMinimalPerf.default	561	556	1.01:1
PortalMinimalPerf.default	176	175	1.01:1
IconMinimalPerf.default	581	577	1.01:1
TableManyItemsPerf.default	1865	1846	1.01:1
TooltipMinimalPerf.default	969	957	1.01:1
TreeMinimalPerf.default	778	771	1.01:1
VideoMinimalPerf.default	604	598	1.01:1
AlertMinimalPerf.default	268	268	1:1
ButtonOverridesMissPerf.default	1636	1639	1:1
ChatMinimalPerf.default	645	643	1:1
EmbedMinimalPerf.default	4007	3992	1:1
ItemLayoutMinimalPerf.default	1191	1196	1:1
ListMinimalPerf.default	493	493	1:1
ProviderMergeThemesPerf.default	1650	1651	1:1
ProviderMinimalPerf.default	944	940	1:1
RefMinimalPerf.default	231	230	1:1
CustomToolbarPrototype.default	3698	3691	1:1
ToolbarMinimalPerf.default	905	903	1:1
AttachmentMinimalPerf.default	149	151	0.99:1
DatepickerMinimalPerf.default	5258	5292	0.99:1
FormMinimalPerf.default	386	391	0.99:1
HeaderMinimalPerf.default	348	352	0.99:1
HeaderSlotsPerf.default	726	730	0.99:1
ImageMinimalPerf.default	376	378	0.99:1
MenuMinimalPerf.default	825	836	0.99:1
MenuButtonMinimalPerf.default	1537	1553	0.99:1
SplitButtonMinimalPerf.default	3649	3669	0.99:1
StatusMinimalPerf.default	663	671	0.99:1
ButtonSlotsPerf.default	524	536	0.98:1
CardMinimalPerf.default	525	538	0.98:1
ChatWithPopoverPerf.default	334	341	0.98:1
ListWith60ListItems.default	600	614	0.98:1
RosterPerf.default	1105	1123	0.98:1
ReactionMinimalPerf.default	366	374	0.98:1
ButtonMinimalPerf.default	155	160	0.97:1
TextAreaMinimalPerf.default	465	480	0.97:1
ChatDuplicateMessagesPerf.default	285	296	0.96:1
FlexMinimalPerf.default	275	285	0.96:1
SliderMinimalPerf.default	1500	1557	0.96:1

…hore/react-theme-dx � Conflicts: � jest.config.js � nx.json � workspace.json

layershifter · 2021-07-01T11:16:54Z

/azp run

azure-pipelines · 2021-07-01T11:19:31Z

Azure Pipelines successfully started running 3 pipeline(s).

codesandbox-ci · 2021-07-01T12:47:59Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 39e2158:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

msft-fluent-ui-bot · 2021-07-02T07:40:05Z

🎉@fluentui/react-theme@v9.0.0-alpha.16 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-02T07:40:08Z

🎉@fluentui/react-tabster@v9.0.0-alpha.38 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-02T07:40:14Z

🎉@fluentui/react-portal@v9.0.0-alpha.25 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-02T07:40:23Z

🎉@fluentui/react-shared-contexts@v9.0.0-alpha.16 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-02T07:40:38Z

🎉@fluentui/react-positioning@v9.0.0-alpha.31 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-02T07:40:47Z

🎉@fluentui/react-make-styles@v9.0.0-alpha.45 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-02T07:40:56Z

🎉@fluentui/jest-serializer-make-styles@v9.0.0-alpha.21 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-07-02T07:41:20Z

🎉@fluentui/babel-make-styles@v9.0.0-alpha.21 has been released which incorporates this pull request.:tada:

Handy links:

chore(react-theme): Migrate to new DX

4a467f8

miroslavstastny requested a review from a team as a code owner June 22, 2021 10:29

msft-fluent-ui-bot assigned miroslavstastny Jun 22, 2021

miroslavstastny commented Jun 22, 2021

View reviewed changes

packages/react-theme/package.json Outdated Show resolved Hide resolved

miroslavstastny added 2 commits June 22, 2021 12:50

fix api-extractor

a60edb6

Change files

365d7d0

miroslavstastny force-pushed the chore/react-theme-dx branch from bd2e9c7 to 365d7d0 Compare June 22, 2021 10:51

miroslavstastny commented Jun 22, 2021

View reviewed changes

packages/react-theme/config/api-extractor.json Show resolved Hide resolved

miroslavstastny added 2 commits June 22, 2021 13:11

add missing Jest setup

5876a19

remove unnecessary jest-serializer-make-styles

633722d

Hotell reviewed Jun 22, 2021

View reviewed changes

packages/react-theme/config/api-extractor.json Show resolved Hide resolved

packages/react-theme/config/api-extractor.json Show resolved Hide resolved

packages/react-theme/package.json Outdated Show resolved Hide resolved

packages/react-theme/package.json Outdated Show resolved Hide resolved

miroslavstastny added 3 commits June 22, 2021 15:05

fix path in build:local

66ce5ea

Merge remote-tracking branch 'upstream/master' into chore/react-theme-dx

181a3e0

add schema to api-extractor.json

0ddb1da

Hotell approved these changes Jun 23, 2021

View reviewed changes

layershifter mentioned this pull request Jun 28, 2021

migration: migrate converged packages to new DX (1st stage) #18579

Closed

32 tasks

Merge branch 'master' of https://github.com/microsoft/fluentui into c…

7986b92

…hore/react-theme-dx � Conflicts: � jest.config.js � nx.json � workspace.json

Merge branch 'master' into chore/react-theme-dx

39e2158

layershifter merged commit 7222c05 into microsoft:master Jul 1, 2021

layershifter deleted the chore/react-theme-dx branch July 1, 2021 13:08

Conversation

miroslavstastny commented Jun 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Uh oh!

Uh oh!

size-auditor bot commented Jun 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

miroslavstastny Jun 22, 2021

Choose a reason for hiding this comment

Uh oh!

Hotell Jun 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

miroslavstastny commented Jun 22, 2021

Uh oh!

azure-pipelines bot commented Jun 22, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented Jun 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

layershifter commented Jul 1, 2021

Uh oh!

azure-pipelines bot commented Jul 1, 2021

Uh oh!

codesandbox-ci bot commented Jul 1, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 2, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 2, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 2, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 2, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 2, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 2, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 2, 2021

Uh oh!

msft-fluent-ui-bot commented Jul 2, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

miroslavstastny commented Jun 22, 2021 •

edited

Loading

size-auditor bot commented Jun 22, 2021 •

edited

Loading

Hotell Jun 22, 2021 •

edited

Loading

fabricteam commented Jun 22, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)