Skip to content

chore: introduce more barrel file apis within /scripts #26125

Merged
Hotell merged 9 commits intomicrosoft:masterfrom
Hotell:hotell/build/scripts/ts-solution-config-v16
Jan 4, 2023
Merged

chore: introduce more barrel file apis within /scripts #26125
Hotell merged 9 commits intomicrosoft:masterfrom
Hotell:hotell/build/scripts/ts-solution-config-v16

Conversation

@Hotell
Copy link
Contributor

@Hotell Hotell commented Dec 28, 2022

New Behavior

Following sub-folders now follow barrel/public API pattern

  • /cypress
  • /dangerjs
  • /gulp

Additional changes:

  • /babel encapsulates custom plugin under /babel/plugins folder
  • tag vNext script moved from /beachball to /executors
  • /cypress is now decoupled from v8 and improves type definitions so less churn is needed when used
  • gulp config within northstar and monorepo root has been unified/normalized

Related Issue(s)

@Hotell Hotell marked this pull request as draft December 28, 2022 17:35
@Hotell Hotell changed the title Hotell/build/scripts/ts solution config v16 chore: introduce more barrel file api within /scripts Dec 28, 2022
@size-auditor
Copy link

size-auditor bot commented Dec 28, 2022

Asset size changes

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

Baseline commit: 2c38f1e4ae07b2b60df596efe11015a68f166dbf (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 28, 2022

📊 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)
80.097 kB
24.712 kB
react-alert
Alert
84.612 kB
21.445 kB
react-avatar
Avatar
51.515 kB
14.449 kB
react-avatar
AvatarGroup
15.42 kB
6.167 kB
react-avatar
AvatarGroupItem
67.733 kB
18.746 kB
react-badge
Badge
23.78 kB
7.542 kB
react-badge
CounterBadge
24.67 kB
7.825 kB
react-badge
PresenceBadge
24.437 kB
7.189 kB
react-button
Button
33.354 kB
8.779 kB
react-button
CompoundButton
40.384 kB
10.127 kB
react-button
MenuButton
38.043 kB
10.096 kB
react-button
SplitButton
45.488 kB
11.501 kB
react-button
ToggleButton
49.184 kB
10.875 kB
react-card
Card - All
77.975 kB
22.496 kB
react-card
Card
72.92 kB
21.108 kB
react-card
CardFooter
9.04 kB
3.807 kB
react-card
CardHeader
10.805 kB
4.443 kB
react-card
CardPreview
9.847 kB
4.159 kB
react-checkbox
Checkbox
29.081 kB
9.258 kB
react-checkbox
CheckboxField
35.51 kB
11.026 kB
react-combobox
Combobox (including child components)
79.959 kB
25.572 kB
react-combobox
ComboboxField
77.155 kB
25.536 kB
react-combobox
Dropdown (including child components)
79.205 kB
25.496 kB
react-components
react-components: Button, FluentProvider & webLightTheme
59.812 kB
16.62 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
188.779 kB
53.034 kB
react-components
react-components: FluentProvider & webLightTheme
34.276 kB
11.309 kB
react-dialog
Dialog (including children components)
83.459 kB
24.913 kB
react-divider
Divider
16.938 kB
6.103 kB
react-image
Image
11.259 kB
4.473 kB
react-infobutton
InfoButton
119.624 kB
35.891 kB
react-input
Input
24.617 kB
8.059 kB
react-input
InputField
33.839 kB
10.73 kB
react-label
Label
9.817 kB
4.067 kB
react-link
Link
12.285 kB
5.063 kB
react-menu
Menu (including children components)
119.492 kB
36.913 kB
react-menu
Menu (including selectable components)
122.561 kB
37.436 kB
react-overflow
hooks only
11.004 kB
4.188 kB
react-persona
Persona
57.552 kB
16.102 kB
react-popover
Popover
105.36 kB
32.451 kB
react-portal
Portal
11.12 kB
4.096 kB
react-portal-compat
PortalCompatProvider
6.069 kB
2.053 kB
react-positioning
usePositioning
20.694 kB
7.691 kB
react-progress
ProgressBar
13.578 kB
5.235 kB
react-progress
ProgressField
22.892 kB
8.057 kB
react-provider
FluentProvider
16.343 kB
6.11 kB
react-radio
Radio
32.247 kB
10.468 kB
react-radio
RadioGroup
14.718 kB
5.886 kB
react-radio
RadioGroupField
24.024 kB
8.796 kB
react-select
Select
23.902 kB
8.187 kB
react-select
SelectField
32.162 kB
10.406 kB
react-slider
Slider
32.52 kB
10.357 kB
react-slider
SliderField
41.544 kB
13.046 kB
react-spinbutton
SpinButton
44.933 kB
12.97 kB
react-spinbutton
SpinButtonField
53.229 kB
15.232 kB
react-spinner
Spinner
20.445 kB
6.621 kB
react-switch
Switch
33.865 kB
10.735 kB
react-switch
SwitchField
40.176 kB
12.514 kB
react-text
Text - Default
12.261 kB
4.819 kB
react-text
Text - Wrappers
15.571 kB
5.23 kB
react-textarea
Textarea
26.156 kB
8.508 kB
react-textarea
TextareaField
35.38 kB
11.157 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
43.405 kB
15.166 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 2c38f1e4ae07b2b60df596efe11015a68f166dbf

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 28, 2022

🕵 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
Collaborator

fabricteam commented Dec 28, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1268 1267 5000
Button mount 903 913 5000
FluentProvider mount 1521 1473 5000
FluentProviderWithTheme mount 584 580 10
FluentProviderWithTheme virtual-rerender 525 540 10
FluentProviderWithTheme virtual-rerender-with-unmount 579 570 10
MakeStyles mount 1938 1925 50000
Persona mount 2830 2772 5000
SpinButton mount 2372 2334 5000

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 28, 2022

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1429 1410 5000
Breadcrumb mount 3512 3482 1000
Checkbox mount 3141 3128 5000
CheckboxBase mount 2770 2776 5000
ChoiceGroup mount 5218 5166 5000
ComboBox mount 1465 1471 1000
CommandBar mount 11154 11157 1000
ContextualMenu mount 12679 12802 1000
DefaultButton mount 1596 1624 5000
DetailsRow mount 4219 4260 5000
DetailsRowFast mount 4235 4230 5000
DetailsRowNoStyles mount 4084 4084 5000
Dialog mount 3599 3613 1000
DocumentCardTitle mount 678 693 1000
Dropdown mount 3747 3797 5000
FocusTrapZone mount 2389 2413 5000
FocusZone mount 2337 2353 5000
GroupedList mount 2218 2475 2
GroupedList virtual-rerender 1335 1321 2
GroupedList virtual-rerender-with-unmount 1959 1945 2
GroupedListV2 mount 669 683 2
GroupedListV2 virtual-rerender 647 655 2
GroupedListV2 virtual-rerender-with-unmount 655 677 2
IconButton mount 2216 2217 5000
Label mount 863 869 5000
Layer mount 5073 5079 5000
Link mount 977 980 5000
MenuButton mount 1969 1969 5000
MessageBar mount 2718 2716 5000
Nav mount 3812 3832 1000
OverflowSet mount 1592 1561 5000
Panel mount 2989 2950 1000
Persona mount 1559 1522 1000
Pivot mount 1940 1950 1000
PrimaryButton mount 1798 1792 5000
Rating mount 8130 8179 5000
SearchBox mount 1758 1783 5000
Shimmer mount 3353 3333 5000
Slider mount 2484 2483 5000
SpinButton mount 5463 5453 5000
Spinner mount 936 961 5000
SplitButton mount 3638 3678 5000
Stack mount 968 973 5000
StackWithIntrinsicChildren mount 2751 2729 5000
StackWithTextChildren mount 5668 5628 5000
SwatchColorPicker mount 12347 12239 5000
TagPicker mount 3018 3095 5000
TeachingBubble mount 97753 97134 5000
Text mount 933 927 5000
TextField mount 1862 1896 5000
ThemeProvider mount 1797 1793 5000
ThemeProvider virtual-rerender 1265 1268 5000
ThemeProvider virtual-rerender-with-unmount 2526 2542 5000
Toggle mount 1302 1313 5000
buttonNative mount 653 654 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 28, 2022

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 e3ddca0:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 28, 2022

🕵 fluentuiv9 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 28, 2022

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

@Hotell Hotell force-pushed the hotell/build/scripts/ts-solution-config-v16 branch 2 times, most recently from c91d3dd to 520db7d Compare December 29, 2022 17:48
@@ -1,6 +0,0 @@
// https://github.com/gulpjs/gulp-cli#configuration
module.exports = {
Copy link
Contributor Author

@Hotell Hotell Dec 29, 2022

Choose a reason for hiding this comment

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

this was redundant, we use now only .gulp from repo root

@DustyTheBot
Copy link

DustyTheBot commented Dec 29, 2022

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against e3ddca0

@Hotell Hotell force-pushed the hotell/build/scripts/ts-solution-config-v16 branch 2 times, most recently from 6d1a8f5 to 27994a1 Compare December 30, 2022 12:20
@Hotell Hotell changed the title chore: introduce more barrel file api within /scripts chore: introduce more barrel file apis within /scripts Dec 30, 2022
@Hotell Hotell marked this pull request as ready for review December 30, 2022 13:25
@Hotell Hotell requested a review from a team as a code owner December 30, 2022 13:25
@@ -1,3 +1,3 @@
import baseConfig from '@fluentui/scripts/cypress/cypress.config';
import { baseConfig } from '@fluentui/scripts/cypress';
Copy link
Member

Choose a reason for hiding this comment

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

QQ: Is there anything that will prevent us from using import baseConfig from '@fluentui/scripts/cypress/cypress.config';?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

all these sub-folders will be packaged as last step (including export maps as well ) - which should throw error on such import. we wont do type rolluping for internal packages as that doesn't make much sense. we can enable lint rule to ban deep imports in those.

@@ -1 +1 @@
module.exports = require('@fluentui/scripts/gulp/.gulp');
module.exports = require('../../../.gulp');
Copy link
Member

Choose a reason for hiding this comment

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

Can you please explain why we don't use module.exports = require('@fluentui/scripts/gulp/.gulp');? To avoid @fluentui/scripts/gulp/.gulp import or is there another reason?

Can we do module.exports = require('@fluentui/scripts/gulp').gulpConfig instead?

Copy link
Contributor Author

@Hotell Hotell Jan 3, 2023

Choose a reason for hiding this comment

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

the pattern used is based on -> global monorepo particular tool configs should live in monorepo root.

From package perspective you would probably not export global tool configuration as part of package public api.
Last but not least it nicely aligns with per package gulpfile.ts which also follows pattern mentioned in 1st sentence and adds uniformity.

What I was expecting was that gulp is smart enough and will find .gulp.js in monorepo root, thus no need for this at all. unfortunately that's not the case :(

@Hotell Hotell force-pushed the hotell/build/scripts/ts-solution-config-v16 branch from 3d5f5fd to e3ddca0 Compare January 3, 2023 12:56
@Hotell Hotell merged commit abae9f7 into microsoft:master Jan 4, 2023
@Hotell Hotell deleted the hotell/build/scripts/ts-solution-config-v16 branch January 4, 2023 11:04
q1b pushed a commit to q1b/fluentui that referenced this pull request Jan 24, 2023
…6125)

* refactor: use only public api for scripts/project-test

* refactor: use only public api for scripts/dangerjs

* refactor(scripts): normalize /scripts/babel plugin

* refactor(scripts): normalize /scripts/cypress to use barrel api and remove react-fui v8 dependency

* generate change files

* refactor(scripts): move tagVnext to /executors to match domain boundary/purpose

* refactor(scripts): normalize /scripts/gulp to use barrel api

* refactor(scripts): move serve to /gulp/tasks to match domain boundary/purpose and prepare @scripts imports for packaging

* chore(scripts): remove reduntant fields from package.json
Hotell added a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
…6125)

* refactor: use only public api for scripts/project-test

* refactor: use only public api for scripts/dangerjs

* refactor(scripts): normalize /scripts/babel plugin

* refactor(scripts): normalize /scripts/cypress to use barrel api and remove react-fui v8 dependency

* generate change files

* refactor(scripts): move tagVnext to /executors to match domain boundary/purpose

* refactor(scripts): normalize /scripts/gulp to use barrel api

* refactor(scripts): move serve to /gulp/tasks to match domain boundary/purpose and prepare @scripts imports for packaging

* chore(scripts): remove reduntant fields from package.json
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.

8 participants