chore(jest-serializer-make-styles): migrate to new DX by layershifter · Pull Request #18719 · microsoft/fluentui

layershifter · 2021-06-25T12:28:11Z

Pull request checklist

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

Description of changes

Migration of package to new DX.

Changes that were done:

nx.json: in tags "web" was changed to "node"
jest-serializer-make-styles/jest-setup.js was renamed to jest-serializer-make-styles/config/tests.js (it's a single converged package with jest-setup.js as I see)
jest-serializer-make-styles/tsconfig.json#compilerOptions.lib are set to ["ES2017", "DOM"] as it was before migration

…hore/jest-mk-dx � Conflicts: � jest.config.js � tsconfig.base.json

layershifter · 2021-06-25T12:41:46Z

`api-extractor` issue

There is a problem with inconsistency in commands 👇

`yarn workspace @fluentui/jest-serializer-make-styles build:local`

Will create jest-serializer-make-styles/etc/jest-serializer-make-styles.api.md

`yarn workspace @fluentui/jest-serializer-make-styles build`

Will not create jest-serializer-make-styles/etc/jest-serializer-make-styles.api.md.

As I see that it's intentionally not included to build steps for Node packages:

fluentui/scripts/just.config.ts

Line 122 in 8e42137

task('build:node-lib', series('clean', 'copy', 'ts:commonjs-only')).cached();

fluentui/scripts/just.config.ts

Lines 124 to 133 in 8e42137

    
           task( 
        
             'build', 
        
             series( 
        
               'clean', 
        
               'copy', 
        
               'sass', 
        
               'ts', 
        
               condition('api-extractor', () => !getJustArgv().min), 
        
             ), 
        
           ).cached();

I don't have any opinions about it and opened for suggestions 🙄

size-auditor · 2021-06-25T12:47:59Z

Asset size changes

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

Baseline commit: 8e4213771125700755b773f27987d5c82e8f18a7 (build)

fabricteam · 2021-06-25T13:01:51Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	799	783	5000
BaseButton	mount	876	880	5000
Breadcrumb	mount	2601	2623	1000
ButtonNext	mount	507	527	5000
Checkbox	mount	1493	1474	5000
CheckboxBase	mount	1255	1266	5000
ChoiceGroup	mount	4678	4590	5000
ComboBox	mount	970	1010	1000
CommandBar	mount	10177	10064	1000
ContextualMenu	mount	6174	6184	1000
DefaultButton	mount	1105	1110	5000
DetailsRow	mount	3669	3675	5000
DetailsRowFast	mount	3651	3720	5000
DetailsRowNoStyles	mount	3495	3480	5000
Dialog	mount	2085	2099	1000
DocumentCardTitle	mount	133	137	1000
Dropdown	mount	3132	3157	5000
FocusTrapZone	mount	1787	1745	5000
FocusZone	mount	1786	1810	5000
IconButton	mount	1707	1700	5000
Label	mount	322	344	5000
Layer	mount	1779	1752	5000
Link	mount	460	457	5000
MakeStyles	mount	1800	1776	50000
MenuButton	mount	1454	1428	5000
MessageBar	mount	1972	2012	5000
Nav	mount	3240	3167	1000
OverflowSet	mount	1031	1028	5000
Panel	mount	2024	2074	1000
Persona	mount	818	816	1000
Pivot	mount	1352	1392	1000
PrimaryButton	mount	1243	1244	5000
Rating	mount	7394	7357	5000
SearchBox	mount	1267	1304	5000
Shimmer	mount	2503	2480	5000
Slider	mount	1949	1944	5000
SpinButton	mount	4807	4878	5000
Spinner	mount	412	426	5000
SplitButton	mount	3115	3145	5000
Stack	mount	508	494	5000
StackWithIntrinsicChildren	mount	1479	1478	5000
StackWithTextChildren	mount	4447	4419	5000
SwatchColorPicker	mount	10046	10040	5000
Tabs	mount	1391	1362	1000
TagPicker	mount	2338	2367	5000
TeachingBubble	mount	11774	11757	5000
Text	mount	417	405	5000
TextField	mount	1362	1382	5000
ThemeProvider	mount	1155	1170	5000
ThemeProvider	virtual-rerender	596	595	5000
ThemeProviderNext	mount	7108	7065	5000
Toggle	mount	800	796	5000
buttonNative	mount	110	112	5000

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

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AccordionMinimalPerf.default	141	144	0.98:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	170	158	1.08:1
RefMinimalPerf.default	244	229	1.07:1
AvatarMinimalPerf.default	203	194	1.05:1
BoxMinimalPerf.default	356	338	1.05:1
ChatWithPopoverPerf.default	349	332	1.05:1
FormMinimalPerf.default	407	388	1.05:1
PortalMinimalPerf.default	182	173	1.05:1
SegmentMinimalPerf.default	343	328	1.05:1
ButtonSlotsPerf.default	543	523	1.04:1
DropdownManyItemsPerf.default	683	658	1.04:1
FlexMinimalPerf.default	286	275	1.04:1
HeaderSlotsPerf.default	750	724	1.04:1
ImageMinimalPerf.default	377	364	1.04:1
TextAreaMinimalPerf.default	504	483	1.04:1
TreeMinimalPerf.default	788	761	1.04:1
AttachmentMinimalPerf.default	148	144	1.03:1
DialogMinimalPerf.default	753	732	1.03:1
PopupMinimalPerf.default	566	552	1.03:1
TableMinimalPerf.default	405	395	1.03:1
TextMinimalPerf.default	338	329	1.03:1
AlertMinimalPerf.default	269	263	1.02:1
ChatMinimalPerf.default	643	630	1.02:1
CheckboxMinimalPerf.default	2718	2672	1.02:1
DropdownMinimalPerf.default	3061	2999	1.02:1
EmbedMinimalPerf.default	4065	3998	1.02:1
GridMinimalPerf.default	342	334	1.02:1
ListMinimalPerf.default	504	492	1.02:1
LoaderMinimalPerf.default	680	668	1.02:1
SkeletonMinimalPerf.default	352	345	1.02:1
TableManyItemsPerf.default	1862	1834	1.02:1
AnimationMinimalPerf.default	407	402	1.01:1
AttachmentSlotsPerf.default	1043	1035	1.01:1
CardMinimalPerf.default	534	531	1.01:1
ItemLayoutMinimalPerf.default	1212	1200	1.01:1
ProviderMinimalPerf.default	937	925	1.01:1
RadioGroupMinimalPerf.default	447	443	1.01:1
ReactionMinimalPerf.default	370	367	1.01:1
SliderMinimalPerf.default	1518	1499	1.01:1
SplitButtonMinimalPerf.default	3624	3576	1.01:1
StatusMinimalPerf.default	664	657	1.01:1
CustomToolbarPrototype.default	3707	3675	1.01:1
TooltipMinimalPerf.default	966	959	1.01:1
ButtonOverridesMissPerf.default	1643	1645	1:1
CarouselMinimalPerf.default	438	439	1:1
HeaderMinimalPerf.default	347	346	1:1
MenuMinimalPerf.default	838	835	1:1
MenuButtonMinimalPerf.default	1549	1544	1:1
IconMinimalPerf.default	602	601	1:1
ToolbarMinimalPerf.default	904	903	1:1
DatepickerMinimalPerf.default	5257	5332	0.99:1
LabelMinimalPerf.default	371	373	0.99:1
LayoutMinimalPerf.default	366	371	0.99:1
ProviderMergeThemesPerf.default	1627	1644	0.99:1
VideoMinimalPerf.default	609	615	0.99:1
ListWith60ListItems.default	627	638	0.98:1
InputMinimalPerf.default	1215	1249	0.97:1
ListNestedPerf.default	513	530	0.97:1
RosterPerf.default	1134	1170	0.97:1
ButtonMinimalPerf.default	155	162	0.96:1
ChatDuplicateMessagesPerf.default	268	280	0.96:1
DividerMinimalPerf.default	350	363	0.96:1
ListCommonPerf.default	581	607	0.96:1

Hotell · 2021-06-28T10:19:03Z

nx.json

    "@fluentui/font-icons-mdl2": { "implicitDependencies": [] },
    "@fluentui/foundation-legacy": { "implicitDependencies": [] },
-    "@fluentui/jest-serializer-make-styles": { "implicitDependencies": [] },
+    "@fluentui/jest-serializer-make-styles": { "tags": ["vNext", "platform:node"], "implicitDependencies": [] },


Hotell · 2021-06-28T13:51:17Z

api-extractor issue

nice gotcha! I'd keep it consistent for new DX. But feel free to remove it for this package (build:local) and api MD outpout.

Action point:

Let's discuss this on vbuild or tech sync meeting.

layershifter · 2021-06-28T14:24:38Z

nice gotcha! I'd keep it consistent for new DX. But feel free to remove it for this package (build:local) and api MD outpout.

I will keep it for now to be consistent, based on #18747 it could be changed.

The single risk that I see currently is that API can become out of sync (as we don't run it on CI), but as we have an issue to track the problem it's not a big deal.

Hotell · 2021-06-28T15:51:49Z

The single risk that I see currently is that API can become out of sync (as we don't run it on CI), but as we have an issue to track the problem it's not a big deal.

yeah. That's gonna change in upcoming build work. thanks !

layershifter added 2 commits June 25, 2021 14:26

chore(jest-serializer-make-styles): migrate to new DX

ba7f413

Change files

5af782c

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

layershifter added 3 commits June 25, 2021 14:28

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

347c0a4

…hore/jest-mk-dx � Conflicts: � jest.config.js � tsconfig.base.json

fix merge issue

09b4e0d

add extractor file

17e4a03

layershifter marked this pull request as ready for review June 25, 2021 12:41

layershifter requested a review from a team as a code owner June 25, 2021 12:41

layershifter requested a review from Hotell June 25, 2021 12:42

layershifter mentioned this pull request Jun 25, 2021

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

Closed

32 tasks

layershifter added the Area: Build System label Jun 28, 2021

Hotell approved these changes Jun 28, 2021

View reviewed changes

Hotell mentioned this pull request Jun 28, 2021

new dx (1st stage): api-extractor issue for node packages #18747

Closed

layershifter merged commit 78099d1 into master Jun 28, 2021

layershifter deleted the chore/jest-mk-dx branch June 28, 2021 15:52

layershifter mentioned this pull request Jul 13, 2021

chore: create a package for makeStyles Webpack loader #18905

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(jest-serializer-make-styles): migrate to new DX#18719

chore(jest-serializer-make-styles): migrate to new DX#18719
layershifter merged 5 commits intomasterfrom
chore/jest-mk-dx

layershifter commented Jun 25, 2021 •

edited

Loading

Uh oh!

layershifter commented Jun 25, 2021 •

edited

Loading

Uh oh!

size-auditor bot commented Jun 25, 2021

Uh oh!

fabricteam commented Jun 25, 2021

Uh oh!

Hotell Jun 28, 2021

Uh oh!

Hotell commented Jun 28, 2021

Uh oh!

layershifter commented Jun 28, 2021

Uh oh!

Hotell commented Jun 28, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

layershifter commented Jun 25, 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!

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

Uh oh!

api-extractor issue

yarn workspace @fluentui/jest-serializer-make-styles build:local

yarn workspace @fluentui/jest-serializer-make-styles build

Uh oh!

size-auditor bot commented Jun 25, 2021

Asset size changes

Uh oh!

fabricteam commented Jun 25, 2021

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

Uh oh!

Hotell Jun 28, 2021

Choose a reason for hiding this comment

Uh oh!

Hotell commented Jun 28, 2021

Uh oh!

layershifter commented Jun 28, 2021

Uh oh!

Hotell commented Jun 28, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

layershifter commented Jun 25, 2021 •

edited

Loading

layershifter commented Jun 25, 2021 •

edited

Loading

`api-extractor` issue

`yarn workspace @fluentui/jest-serializer-make-styles build:local`

`yarn workspace @fluentui/jest-serializer-make-styles build`

Perf Analysis (`@fluentui/react`)

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