Skip to content

chore: enable proper type checking within all just.config.ts and its dependents#25852

Merged
Hotell merged 6 commits into
microsoft:masterfrom
Hotell:hotell/build/scripts/ts-solution-config-v7
Dec 23, 2022
Merged

chore: enable proper type checking within all just.config.ts and its dependents#25852
Hotell merged 6 commits into
microsoft:masterfrom
Hotell:hotell/build/scripts/ts-solution-config-v7

Conversation

@Hotell

@Hotell Hotell commented Nov 30, 2022

Copy link
Copy Markdown
Contributor

Pre-requirement:

Previous Behavior

  • just.config.ts with all its dep tree is not giving proper DX/is not validated against anything

New Behavior

  • all just configs with its logic is being type-checked on CI and also users get correct DX in their IDEs/editors
  • new ci step added to PR pipelines

Related Issue(s)

@Hotell Hotell changed the title Hotell/build/scripts/ts solution config v7 chore: enable proper type checking within all just.config.ts and its dependents Nov 30, 2022
@codesandbox-ci

codesandbox-ci Bot commented Nov 30, 2022

Copy link
Copy Markdown

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 10c20e1:

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

@fabricteam

fabricteam commented Nov 30, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1650 1681 5000
Button mount 1182 1203 5000
FluentProvider mount 1979 1989 5000
FluentProviderWithTheme mount 798 784 10
FluentProviderWithTheme virtual-rerender 750 725 10
FluentProviderWithTheme virtual-rerender-with-unmount 788 789 10
MakeStyles mount 2314 2323 50000
Persona mount 3787 3691 5000
SpinButton mount 3179 3202 5000

@fabricteam

fabricteam commented Nov 30, 2022

Copy link
Copy Markdown
Collaborator

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 2 screenshots

✅ There was 0 screenshots added, 2 screenshots removed, 1043 screenshots unchanged, 0 screenshots with different dimensions and 0 screenshots with visible difference.

unknown 2 screenshots
Image Name Diff(in Pixels) Image Type
Pivot - Overflow.Tabs - RTL.Narrow - Last tab selected.chromium.png 0 Removed
Pivot - Overflow.Tabs - RTL.Narrow - Overflow menu.chromium.png 0 Removed

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

@fabricteam

fabricteam commented Nov 30, 2022

Copy link
Copy Markdown
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam

fabricteam commented Nov 30, 2022

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
554 B
348 B
priority-overflow
createOverflowManager
3.153 kB
1.299 kB
react-accordion
Accordion (including children components)
79.673 kB
24.57 kB
react-alert
Alert
84.15 kB
21.28 kB
react-avatar
Avatar
51.083 kB
14.289 kB
react-avatar
AvatarGroup
15.006 kB
6.009 kB
react-avatar
AvatarGroupItem
67.313 kB
18.585 kB
react-badge
Badge
23.357 kB
7.361 kB
react-badge
CounterBadge
24.247 kB
7.643 kB
react-badge
PresenceBadge
24.001 kB
7.049 kB
react-button
Button
32.923 kB
8.61 kB
react-button
CompoundButton
39.953 kB
9.933 kB
react-button
MenuButton
37.611 kB
9.942 kB
react-button
SplitButton
45.057 kB
11.323 kB
react-button
ToggleButton
48.753 kB
10.715 kB
react-card
Card - All
77.54 kB
22.326 kB
react-card
Card
72.484 kB
20.915 kB
react-card
CardFooter
8.617 kB
3.62 kB
react-card
CardHeader
10.382 kB
4.258 kB
react-card
CardPreview
9.424 kB
3.97 kB
react-checkbox
Checkbox
28.65 kB
9.09 kB
react-checkbox
CheckboxField
35.067 kB
10.89 kB
react-combobox
Combobox (including child components)
78.698 kB
25.203 kB
react-combobox
ComboboxField
75.901 kB
25.152 kB
react-combobox
Dropdown (including child components)
77.946 kB
25.146 kB
react-components
react-components: Button, FluentProvider & webLightTheme
59.381 kB
16.465 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
187.521 kB
52.637 kB
react-components
react-components: FluentProvider & webLightTheme
33.843 kB
11.129 kB
react-dialog
Dialog (including children components)
83.035 kB
24.76 kB
react-divider
Divider
16.515 kB
5.921 kB
react-image
Image
10.836 kB
4.283 kB
react-infobutton
InfoButton
118.366 kB
35.486 kB
react-input
Input
24.194 kB
7.89 kB
react-input
InputField
33.408 kB
10.584 kB
react-label
Label
9.394 kB
3.88 kB
react-link
Link
11.862 kB
4.885 kB
react-menu
Menu (including children components)
118.242 kB
36.527 kB
react-menu
Menu (including selectable components)
121.311 kB
37.057 kB
react-overflow
hooks only
11.004 kB
4.188 kB
react-persona
Persona
57.12 kB
15.945 kB
react-popover
Popover
104.11 kB
32.062 kB
react-portal
Portal
10.697 kB
3.938 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
react-positioning
usePositioning
19.868 kB
7.432 kB
react-progress
ProgressBar
13.155 kB
5.048 kB
react-progress
ProgressField
22.461 kB
7.919 kB
react-provider
FluentProvider
15.91 kB
5.931 kB
react-radio
Radio
31.827 kB
10.316 kB
react-radio
RadioGroup
14.304 kB
5.72 kB
react-radio
RadioGroupField
23.604 kB
8.65 kB
react-select
Select
23.474 kB
8.017 kB
react-select
SelectField
31.731 kB
10.256 kB
react-slider
Slider
32.091 kB
10.183 kB
react-slider
SliderField
41.113 kB
12.903 kB
react-spinbutton
SpinButton
44.502 kB
12.812 kB
react-spinbutton
SpinButtonField
52.784 kB
15.085 kB
react-spinner
Spinner
20.013 kB
6.446 kB
react-switch
Switch
33.427 kB
10.581 kB
react-switch
SwitchField
39.745 kB
12.362 kB
react-text
Text - Default
11.838 kB
4.625 kB
react-text
Text - Wrappers
15.148 kB
5.06 kB
react-textarea
Textarea
25.733 kB
8.328 kB
react-textarea
TextareaField
34.949 kB
11.012 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
30.908 kB
6.714 kB
react-theme
Teams: Light theme
17.776 kB
5.141 kB
react-tooltip
Tooltip
42.143 kB
14.79 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 0ba1e7e3d1804a407efd9b58fdb38318f1d99447

@fabricteam

fabricteam commented Nov 30, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1151 1154 5000
Breadcrumb mount 2698 2728 1000
Checkbox mount 2566 2456 5000
CheckboxBase mount 2332 2242 5000
ChoiceGroup mount 4334 4428 5000
ComboBox mount 1166 1241 1000
CommandBar mount 9073 9070 1000
ContextualMenu mount 11267 11032 1000
DefaultButton mount 1303 1378 5000
DetailsRow mount 3313 3541 5000
DetailsRowFast mount 3601 3537 5000
DetailsRowNoStyles mount 3409 3326 5000
Dialog mount 2923 3001 1000
DocumentCardTitle mount 561 559 1000
Dropdown mount 3034 3062 5000
FocusTrapZone mount 1905 1923 5000
FocusZone mount 1908 1875 5000
GroupedList mount 1788 2018 2
GroupedList virtual-rerender 1068 1075 2
GroupedList virtual-rerender-with-unmount 1554 1639 2
GroupedListV2 mount 546 543 2
GroupedListV2 virtual-rerender 548 525 2
GroupedListV2 virtual-rerender-with-unmount 573 504 2
IconButton mount 1896 1892 5000
Label mount 719 685 5000
Layer mount 4173 4127 5000
Link mount 782 765 5000
MenuButton mount 1545 1523 5000
MessageBar mount 2336 2097 5000
Nav mount 3076 3023 1000
OverflowSet mount 1338 1318 5000
Panel mount 2485 2509 1000
Persona mount 1204 1277 1000
Pivot mount 1659 1575 1000
PrimaryButton mount 1417 1477 5000
Rating mount 6810 6619 5000
SearchBox mount 1403 1350 5000
Shimmer mount 2600 2760 5000
Slider mount 1940 1949 5000
SpinButton mount 4200 4308 5000
Spinner mount 789 728 5000
SplitButton mount 2910 2895 5000
Stack mount 770 828 5000
StackWithIntrinsicChildren mount 2130 2191 5000
StackWithTextChildren mount 4574 4572 5000
SwatchColorPicker mount 9876 9837 5000
TagPicker mount 2604 2420 5000
TeachingBubble mount 83925 82883 5000
Text mount 710 697 5000
TextField mount 1601 1556 5000
ThemeProvider mount 1405 1544 5000
ThemeProvider virtual-rerender 1042 1033 5000
ThemeProvider virtual-rerender-with-unmount 2036 2071 5000
Toggle mount 1110 1101 5000
buttonNative mount 551 534 5000

@Hotell Hotell force-pushed the hotell/build/scripts/ts-solution-config-v7 branch from d651a46 to 2fa953a Compare December 21, 2022 15:26
@size-auditor

size-auditor Bot commented Dec 21, 2022

Copy link
Copy Markdown

Asset size changes

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

Baseline commit: 0ba1e7e3d1804a407efd9b58fdb38318f1d99447 (build)

@fabricteam

fabricteam commented Dec 21, 2022

Copy link
Copy Markdown
Collaborator

🕵 FluentUI-v0 No visual regressions between this PR and main

@Hotell Hotell force-pushed the hotell/build/scripts/ts-solution-config-v7 branch from 877bced to a125a6b Compare December 21, 2022 16:18

// copied from scripts/just.config.js with addition of generate-json
task('build', series('clean', 'copy', 'sass', 'generate-json', 'ts')).cached();
task('build', series('clean', 'copy', 'sass', 'generate-json', 'ts')).cached!();

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

whilst using ! is deprecated and should be avoided, this is caused by bad just types, so sticking with ! instead of nodejs standard ?

@@ -1,4 +1,6 @@
import { preset, task, resolveCwd } from '@fluentui/scripts';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - parallel-webpack has no types

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could write types manually for this package but I decided to not do so ATM (its the only usage in whole repo)

Comment thread tsconfig.json
@@ -1,4 +1,8 @@
{
"extends": "@tsconfig/node14/tsconfig.json",
"include": ["./{apps,packages}/*/just.config.ts"]

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this never worked (bash expansion)

@Hotell Hotell marked this pull request as ready for review December 21, 2022 20:14
@Hotell Hotell requested a review from a team as a code owner December 21, 2022 20:14
Comment thread apps/perf-test-react-components/tsconfig.json
Comment thread apps/perf-test-react-components/tasks/perf-test.ts Outdated
Comment thread apps/perf-test/tasks/perf-test.ts Outdated

while (packagesToResolve.length) {
const pkg = packagesToResolve.shift();
const pkg = packagesToResolve.shift() as string;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this cast needed? typescript should know that it's a string from line 9

@Hotell Hotell Dec 23, 2022

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shift() returns T or undefined if array is empty, which in our case will never happen. but with existing construct TS cannot understand that that situation never happens, thus the assertion (which will not throw runtime error)

image

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

refactored the code to contain less assertions 10c20e1

@Hotell Hotell merged commit 613f784 into microsoft:master Dec 23, 2022
@Hotell Hotell deleted the hotell/build/scripts/ts-solution-config-v7 branch December 23, 2022 15:47
@Hotell

Hotell commented Dec 23, 2022

Copy link
Copy Markdown
Contributor Author

admin merged with all checks passing as got approvals from all core teams

q1b pushed a commit to q1b/fluentui that referenced this pull request Jan 24, 2023
…dependents (microsoft#25852)

* chore: enable strict checking in all just-config files and their dependencies

* ci: enable type checking of just.configs

* generate change files
Hotell added a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
…dependents (microsoft#25852)

* chore: enable strict checking in all just-config files and their dependencies

* ci: enable type checking of just.configs

* generate change files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants