feat: migrate v8 to v9 TypeScript DX (no build needed) #22604

Hotell · 2022-04-22T10:55:51Z

We will implement packages grouping within our monorepo so it's easier to navigate and understand from consumers what library lives where.

Based on this decision we decided to not branch out v9. There has been various reasonings but one of them was to migrate v9 DX to v8 packages.

This PR is the 1st (most difficult) step 🔥.

Current Behavior

TS DX in v8 packages

doesn't work automatically.
to be able to to work with proper intellisense and up to date error reporting you need to build whole v8 dependency tree, for both packages and applications

TS setup

most of packages use weak TS compiler flag thus are not properly handling potential mistakes in code that haven't been exposed "yet"
packages are using ECMA features that don't reflect the actual typescript setup, which might be an ticking bomb for consumers

New Behavior

Demo:

Following demo showcases immediate TS feedback between react-examples and react without any manual builds 🍿.

react-examples-v9-ts-dx.mov

all v8 packages and apps have been migrated to leverage TS path aliases for "no build needed" DX as we use for v9

exception is public-docsite application which contains around 250 TS errors, that are not easily fixable. This is caused mainly by not having turned on most crucial TS compiler flag "strictNullChecks" in the project.

TS setup improvements

all packages use strict TS mode 🙌
new tsconfig.base.v8.json needs to turn off strictFunctionTypes which triggers around 400 TS errors in react package
most packages now use isolatedModules which enforces leveraging type for exports thus improving tree-shakeability
most of v8 packages use es2015 compile target instead of es5. Until now it was not exposed by global leaking types that v8 packages leverage features beyond E5. The ECMA features used goes up to ES2017 in some packages !
- v8 currently uses:
  - Object.values
  - String.prototype.includes
  - Set
  - Map
  - WeakMap
  - others

3. just scripts build update

just task ts will now apply same behaviour like for v9 when running build

Related Issue(s)

Fixes partially #TODO

fabricteam · 2022-04-22T13:54:23Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`priority-overflow` createOverflowManager	`2.936 kB` `1.212 kB`
`react-divider` Divider	`15.455 kB` `5.57 kB`
`react-image` Image	`10.179 kB` `3.995 kB`
`react-label` Label	`8.441 kB` `3.541 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.676 kB` `6.61 kB`
`react-theme` Teams: Light theme	`18.492 kB` `5.3 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 1cb4002d46236c724a274ff5abafc1c1e99397e2}

fabricteam · 2022-04-22T13:59:55Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1255	1274	5000
Button	mount	762	764	5000
FluentProvider	mount	2141	2166	5000
FluentProviderWithTheme	mount	412	380	10
FluentProviderWithTheme	virtual-rerender	389	366	10
FluentProviderWithTheme	virtual-rerender-with-unmount	429	451	10
MakeStyles	mount	1991	1937	50000

…liases setup

codesandbox-ci · 2022-04-22T16:27:05Z

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 61e4df4:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

Hotell · 2022-04-22T16:31:12Z

scripts/tasks/ts.ts

+  const tsConfig = JSON.parse(fs.readFileSync(resolveCwd(tsConfigProjectRoot), 'utf-8'));
+  const isUsingV8pathAliases = tsConfig.extends && tsConfig.extends.includes('tsconfig.base.v8.json');
+
+  if (isUsingTsSolutionConfigs || isUsingV8pathAliases) {


TODO: polish this

Hotell · 2022-04-22T16:31:40Z

typings/environment/index.d.ts

@@ -5,6 +5,8 @@ declare namespace NodeJS {
    LAGE_PACKAGE_NAME?: string;
    CI?: string;
    TF_BUILD?: string;
+    LOCAL?: string;


add docs that this is used only in v8

fabricteam · 2022-04-22T16:43:17Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
CheckboxMinimalPerf.default	3727	2253	1.65:1
LayoutMinimalPerf.default	306	255	1.2:1
DividerMinimalPerf.default	290	253	1.15:1
SkeletonMinimalPerf.default	285	247	1.15:1
TreeWith60ListItems.default	137	120	1.14:1
AlertMinimalPerf.default	223	198	1.13:1
AccordionMinimalPerf.default	114	103	1.11:1
ProviderMergeThemesPerf.default	1055	949	1.11:1
AvatarMinimalPerf.default	167	154	1.08:1
GridMinimalPerf.default	289	271	1.07:1
AttachmentMinimalPerf.default	125	118	1.06:1
ChatDuplicateMessagesPerf.default	255	241	1.06:1
HeaderSlotsPerf.default	612	576	1.06:1
MenuMinimalPerf.default	684	644	1.06:1
FormMinimalPerf.default	337	321	1.05:1
PortalMinimalPerf.default	144	137	1.05:1
SplitButtonMinimalPerf.default	3703	3529	1.05:1
BoxMinimalPerf.default	257	246	1.04:1
LabelMinimalPerf.default	317	306	1.04:1
RefMinimalPerf.default	175	168	1.04:1
TreeMinimalPerf.default	657	631	1.04:1
ButtonOverridesMissPerf.default	1231	1196	1.03:1
DropdownMinimalPerf.default	2567	2491	1.03:1
TextAreaMinimalPerf.default	400	388	1.03:1
ToolbarMinimalPerf.default	801	774	1.03:1
TooltipMinimalPerf.default	860	838	1.03:1
DialogMinimalPerf.default	645	634	1.02:1
ImageMinimalPerf.default	312	306	1.02:1
RadioGroupMinimalPerf.default	368	362	1.02:1
TextMinimalPerf.default	278	273	1.02:1
CardMinimalPerf.default	463	460	1.01:1
DatepickerMinimalPerf.default	4893	4822	1.01:1
LoaderMinimalPerf.default	574	566	1.01:1
TableMinimalPerf.default	330	327	1.01:1
AttachmentSlotsPerf.default	854	852	1:1
ChatMinimalPerf.default	586	587	1:1
DropdownManyItemsPerf.default	557	556	1:1
InputMinimalPerf.default	1074	1069	1:1
ListCommonPerf.default	521	522	1:1
SegmentMinimalPerf.default	289	289	1:1
CustomToolbarPrototype.default	2238	2240	1:1
VideoMinimalPerf.default	551	550	1:1
AnimationMinimalPerf.default	402	405	0.99:1
EmbedMinimalPerf.default	3381	3405	0.99:1
FlexMinimalPerf.default	234	236	0.99:1
ItemLayoutMinimalPerf.default	929	952	0.98:1
RosterPerf.default	905	925	0.98:1
IconMinimalPerf.default	507	515	0.98:1
TableManyItemsPerf.default	1558	1582	0.98:1
ListWith60ListItems.default	530	546	0.97:1
SliderMinimalPerf.default	1291	1336	0.97:1
ButtonSlotsPerf.default	432	452	0.96:1
ProviderMinimalPerf.default	319	333	0.96:1
ListNestedPerf.default	406	427	0.95:1
ChatWithPopoverPerf.default	275	295	0.93:1
CarouselMinimalPerf.default	348	380	0.92:1
HeaderMinimalPerf.default	261	285	0.92:1
MenuButtonMinimalPerf.default	1265	1376	0.92:1
PopupMinimalPerf.default	472	514	0.92:1
StatusMinimalPerf.default	502	546	0.92:1
ListMinimalPerf.default	373	427	0.87:1
ReactionMinimalPerf.default	310	924	0.34:1
ButtonMinimalPerf.default	132	405	0.33:1

msft-fluent-ui-bot · 2022-09-26T12:00:04Z

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.

msft-fluent-ui-bot · 2023-03-09T18:00:03Z

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.

msft-fluent-ui-bot assigned miroslavstastny Apr 22, 2022

Hotell force-pushed the hotell/build/migrate-v8-to-v9-ts-dx branch from cf3f172 to 5b552aa Compare April 22, 2022 13:47

Hotell added 3 commits April 22, 2022 17:51

chore(v8-dx): setup ts path aliases for all v8 libraries

8d22d4b

chore(v8-dx): fix all TS errors exposed by enablign stricter checks

b39663a

chore(scripts): fix TS errors exposed by v8 packages

4bea154

Hotell force-pushed the hotell/build/migrate-v8-to-v9-ts-dx branch from 506d0da to 4bea154 Compare April 22, 2022 15:52

Hotell added Area: Build System Fluent UI react (v8) Issues about @fluentui/react (v8) labels Apr 22, 2022

Hotell added 2 commits April 22, 2022 18:12

fixup! chore(v8-dx): setup ts path aliases for all v8 libraries

c213d37

feat(scripts): update ts just task compilation to work with v8 path a…

61e4df4

…liases setup

Hotell commented Apr 22, 2022

View reviewed changes

Hotell unassigned miroslavstastny Apr 29, 2022

msft-fluent-ui-bot added the Resolution: Soft Close Soft closing inactive issues over a certain period label Sep 26, 2022

msft-fluent-ui-bot closed this Sep 26, 2022

Hotell reopened this Oct 10, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Oct 10, 2022

Hotell mentioned this pull request Nov 25, 2022

chore: introduce TS path aliases for improved DX in v8 #25778

Merged

msft-fluent-ui-bot closed this Mar 9, 2023

Hotell reopened this Mar 9, 2023

github-actions bot removed this from the October Project Cycle Q4 2022 milestone Mar 9, 2023

github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: migrate v8 to v9 TypeScript DX (no build needed) #22604

feat: migrate v8 to v9 TypeScript DX (no build needed) #22604

Hotell commented Apr 22, 2022 •

edited

Loading

fabricteam commented Apr 22, 2022 •

edited

Loading

fabricteam commented Apr 22, 2022 •

edited

Loading

codesandbox-ci bot commented Apr 22, 2022

Hotell Apr 22, 2022

Hotell Apr 22, 2022

fabricteam commented Apr 22, 2022

msft-fluent-ui-bot commented Sep 26, 2022

msft-fluent-ui-bot commented Mar 9, 2023

feat: migrate v8 to v9 TypeScript DX (no build needed) #22604

Are you sure you want to change the base?

feat: migrate v8 to v9 TypeScript DX (no build needed) #22604

Conversation

Hotell commented Apr 22, 2022 • edited Loading

Current Behavior

New Behavior

3. just scripts build update

Related Issue(s)

fabricteam commented Apr 22, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Apr 22, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

codesandbox-ci bot commented Apr 22, 2022

Hotell Apr 22, 2022

Choose a reason for hiding this comment

Hotell Apr 22, 2022

Choose a reason for hiding this comment

fabricteam commented Apr 22, 2022

Perf Analysis (@fluentui/react-northstar)

msft-fluent-ui-bot commented Sep 26, 2022

msft-fluent-ui-bot commented Mar 9, 2023

Hotell commented Apr 22, 2022 •

edited

Loading

fabricteam commented Apr 22, 2022 •

edited

Loading

fabricteam commented Apr 22, 2022 •

edited

Loading

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

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