chore: migrate whole repo to webpack 5#24542
Conversation
|
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 88616f2:
|
Asset size changes
Baseline commit: 7ab1b2af48066e24961610b68762683c4698eb00 (build) |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1272 | 1279 | 5000 | |
| Button | mount | 931 | 939 | 5000 | |
| FluentProvider | mount | 1483 | 1494 | 5000 | |
| FluentProviderWithTheme | mount | 581 | 580 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 541 | 534 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 569 | 582 | 10 | |
| MakeStyles | mount | 1913 | 1938 | 50000 | |
| SpinButton | mount | 2379 | 2338 | 5000 |
Perf Analysis (
|
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| ButtonMinimalPerf.default | 151 | 132 | 1.14:1 |
| IconMinimalPerf.default | 588 | 563 | 1.04:1 |
| AnimationMinimalPerf.default | 482 | 468 | 1.03:1 |
| LabelMinimalPerf.default | 344 | 335 | 1.03:1 |
| SegmentMinimalPerf.default | 311 | 303 | 1.03:1 |
| TableMinimalPerf.default | 365 | 354 | 1.03:1 |
| BoxMinimalPerf.default | 305 | 300 | 1.02:1 |
| ButtonOverridesMissPerf.default | 1023 | 1000 | 1.02:1 |
| ChatDuplicateMessagesPerf.default | 221 | 217 | 1.02:1 |
| FormMinimalPerf.default | 334 | 327 | 1.02:1 |
| GridMinimalPerf.default | 298 | 292 | 1.02:1 |
| InputMinimalPerf.default | 867 | 847 | 1.02:1 |
| ItemLayoutMinimalPerf.default | 985 | 967 | 1.02:1 |
| ListMinimalPerf.default | 461 | 452 | 1.02:1 |
| ListNestedPerf.default | 472 | 465 | 1.02:1 |
| MenuMinimalPerf.default | 743 | 732 | 1.02:1 |
| SkeletonMinimalPerf.default | 308 | 301 | 1.02:1 |
| TextAreaMinimalPerf.default | 407 | 399 | 1.02:1 |
| VideoMinimalPerf.default | 609 | 595 | 1.02:1 |
| AttachmentMinimalPerf.default | 123 | 122 | 1.01:1 |
| AvatarMinimalPerf.default | 167 | 166 | 1.01:1 |
| DividerMinimalPerf.default | 315 | 311 | 1.01:1 |
| DropdownMinimalPerf.default | 2172 | 2151 | 1.01:1 |
| FlexMinimalPerf.default | 243 | 240 | 1.01:1 |
| HeaderMinimalPerf.default | 317 | 315 | 1.01:1 |
| LoaderMinimalPerf.default | 513 | 506 | 1.01:1 |
| PortalMinimalPerf.default | 138 | 136 | 1.01:1 |
| RadioGroupMinimalPerf.default | 391 | 389 | 1.01:1 |
| ReactionMinimalPerf.default | 331 | 328 | 1.01:1 |
| RefMinimalPerf.default | 187 | 185 | 1.01:1 |
| StatusMinimalPerf.default | 606 | 602 | 1.01:1 |
| CustomToolbarPrototype.default | 2180 | 2158 | 1.01:1 |
| TreeMinimalPerf.default | 708 | 704 | 1.01:1 |
| AttachmentSlotsPerf.default | 868 | 864 | 1:1 |
| ButtonSlotsPerf.default | 421 | 422 | 1:1 |
| CarouselMinimalPerf.default | 354 | 354 | 1:1 |
| ChatMinimalPerf.default | 635 | 636 | 1:1 |
| CheckboxMinimalPerf.default | 1541 | 1536 | 1:1 |
| DatepickerMinimalPerf.default | 4699 | 4709 | 1:1 |
| DialogMinimalPerf.default | 685 | 686 | 1:1 |
| EmbedMinimalPerf.default | 2634 | 2636 | 1:1 |
| LayoutMinimalPerf.default | 316 | 315 | 1:1 |
| ListCommonPerf.default | 514 | 515 | 1:1 |
| RosterPerf.default | 1709 | 1704 | 1:1 |
| PopupMinimalPerf.default | 558 | 559 | 1:1 |
| ProviderMergeThemesPerf.default | 990 | 991 | 1:1 |
| SliderMinimalPerf.default | 1226 | 1228 | 1:1 |
| SplitButtonMinimalPerf.default | 3280 | 3266 | 1:1 |
| TableManyItemsPerf.default | 1575 | 1580 | 1:1 |
| TooltipMinimalPerf.default | 1872 | 1868 | 1:1 |
| AlertMinimalPerf.default | 221 | 224 | 0.99:1 |
| CardMinimalPerf.default | 467 | 472 | 0.99:1 |
| ChatWithPopoverPerf.default | 289 | 291 | 0.99:1 |
| DropdownManyItemsPerf.default | 533 | 538 | 0.99:1 |
| ListWith60ListItems.default | 499 | 503 | 0.99:1 |
| MenuButtonMinimalPerf.default | 1342 | 1358 | 0.99:1 |
| ProviderMinimalPerf.default | 316 | 318 | 0.99:1 |
| ToolbarMinimalPerf.default | 789 | 798 | 0.99:1 |
| HeaderSlotsPerf.default | 663 | 678 | 0.98:1 |
| TextMinimalPerf.default | 299 | 304 | 0.98:1 |
| ImageMinimalPerf.default | 333 | 342 | 0.97:1 |
| TreeWith60ListItems.default | 135 | 140 | 0.96:1 |
| AccordionMinimalPerf.default | 121 | 127 | 0.95:1 |
📊 Bundle size reportUnchanged fixtures
|
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 1176 | 1187 | 5000 | |
| Breadcrumb | mount | 2930 | 2976 | 1000 | |
| Checkbox | mount | 2653 | 2627 | 5000 | |
| CheckboxBase | mount | 2363 | 2364 | 5000 | |
| ChoiceGroup | mount | 4393 | 4372 | 5000 | |
| ComboBox | mount | 1258 | 1256 | 1000 | |
| CommandBar | mount | 9544 | 9546 | 1000 | |
| ContextualMenu | mount | 11001 | 11064 | 1000 | |
| DefaultButton | mount | 1381 | 1386 | 5000 | |
| DetailsRow | mount | 3597 | 3621 | 5000 | |
| DetailsRowFast | mount | 3641 | 3630 | 5000 | |
| DetailsRowNoStyles | mount | 3469 | 3419 | 5000 | |
| Dialog | mount | 3097 | 3124 | 1000 | |
| DocumentCardTitle | mount | 584 | 588 | 1000 | |
| Dropdown | mount | 3220 | 3229 | 5000 | |
| FocusTrapZone | mount | 2002 | 2042 | 5000 | |
| FocusZone | mount | 1951 | 1943 | 5000 | |
| GroupedList | mount | 53479 | 59992 | 2 | |
| GroupedList | virtual-rerender | 25312 | 25167 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 94961 | 93618 | 2 | |
| GroupedListV2 | mount | 560 | 569 | 2 | |
| GroupedListV2 | virtual-rerender | 535 | 531 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 540 | 568 | 2 | |
| IconButton | mount | 1955 | 1892 | 5000 | |
| Label | mount | 733 | 733 | 5000 | |
| Layer | mount | 4282 | 4285 | 5000 | |
| Link | mount | 849 | 818 | 5000 | |
| MenuButton | mount | 1703 | 1667 | 5000 | |
| MessageBar | mount | 2288 | 2347 | 5000 | |
| Nav | mount | 3278 | 3238 | 1000 | |
| OverflowSet | mount | 1357 | 1377 | 5000 | |
| Panel | mount | 2592 | 2537 | 1000 | |
| Persona | mount | 1277 | 1255 | 1000 | |
| Pivot | mount | 1658 | 1642 | 1000 | |
| PrimaryButton | mount | 1505 | 1507 | 5000 | |
| Rating | mount | 7007 | 6987 | 5000 | |
| SearchBox | mount | 1522 | 1509 | 5000 | |
| Shimmer | mount | 2892 | 2884 | 5000 | |
| Slider | mount | 2063 | 2074 | 5000 | |
| SpinButton | mount | 4688 | 4654 | 5000 | |
| Spinner | mount | 811 | 787 | 5000 | |
| SplitButton | mount | 3332 | 3118 | 5000 | |
| Stack | mount | 857 | 870 | 5000 | |
| StackWithIntrinsicChildren | mount | 2382 | 2338 | 5000 | |
| StackWithTextChildren | mount | 4815 | 4815 | 5000 | |
| SwatchColorPicker | mount | 10493 | 10476 | 5000 | |
| TagPicker | mount | 2609 | 2644 | 5000 | |
| TeachingBubble | mount | 92620 | 89464 | 5000 | |
| Text | mount | 797 | 786 | 5000 | |
| TextField | mount | 1581 | 1600 | 5000 | |
| ThemeProvider | mount | 1525 | 1528 | 5000 | |
| ThemeProvider | virtual-rerender | 1082 | 1079 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 2144 | 2150 | 5000 | |
| Toggle | mount | 1098 | 1104 | 5000 | |
| buttonNative | mount | 535 | 553 | 5000 |
faa62d4 to
109980d
Compare
| // `stylis@3` is a CJS library, there are known issues with them: | ||
| // https://github.com/rollup/rollup/issues/1267#issuecomment-446681320 | ||
| const Stylis = (_Stylis as any).default || _Stylis; | ||
| const Stylis: typeof import('stylis') = (_Stylis as any).default || _Stylis; |
There was a problem hiding this comment.
enabling type checking
| "devDependencies": { | ||
| "@fluentui/eslint-plugin": "*", | ||
| "@fluentui/scripts": "^1.0.0", | ||
| "rollup": "^2.7.6", |
There was a problem hiding this comment.
single version policy
| // `stylis@3` is a CJS library, there are known issues with them: | ||
| // https://github.com/rollup/rollup/issues/1267#issuecomment-446681320 | ||
| const Stylis = (_Stylis as any).default || _Stylis; | ||
| const Stylis: typeof import('stylis') = (_Stylis as any).default || _Stylis; |
There was a problem hiding this comment.
enabling type checking
| "@fluentui/react-northstar": "^0.64.0" | ||
| }, | ||
| "devDependencies": { | ||
| "source-map-loader": "2.0.0" |
There was a problem hiding this comment.
single version policy
| "start": "yarn start-storybook -p 6006 --docs", | ||
| "start-storybook": "node node_modules/@storybook/html/bin/index.js", | ||
| "build-storybook": "node node_modules/@storybook/html/bin/build.js -o ./dist/storybook --docs", | ||
| "format": "prettier -w 'src/**/(*.ts|*.html)' --ignore-path ../../.prettierignore", |
There was a problem hiding this comment.
simplified aliases / aligned to use consistent vocabulary within repo
| "karma-webpack": "^4.0.2", | ||
| "mocha": "^7.1.2", | ||
| "rollup": "^2.41.0", | ||
| "rollup-plugin-commonjs": "^10.1.0", |
There was a problem hiding this comment.
all rollup* packages were propagated to single version policy approach, karma will be moved in another PR
109980d to
e3cc1c1
Compare
| "check:change": "beachball check", | ||
| "check:modified-files": "yarn workspace @fluentui/scripts just check-for-modified-files", | ||
| "check:affected-package": "node ./scripts/monorepo/checkIfPackagesAffected.js", | ||
| "check:installed-dependencies-versions": "satisfied --skip-invalid --ignore \"prettier|angular|lit|sass|@storybook/web-components|@storybook/html|@storybook/mdx2-csf|svelte|@testing-library|vue|@cypress/react|cypress|@swc/wasm|@cactuslab/usepubsub\"", |
There was a problem hiding this comment.
storybook/web-components doesnt exist - removed
|
@chrisdholt I checked WC storybook and everything looks fine but I'd appreciate if you could double-check 🙌 |
| "ts-node": "10.9.1", | ||
| "tsconfig-paths": "3.9.0", | ||
| "tsconfig-paths-webpack-plugin": "3.5.2", | ||
| "tsconfig-paths": "4.1.0", |
There was a problem hiding this comment.
bump needed as 3.x contains incompatible type definitions with latest webpack
| strip-bom "^3.0.0" | ||
|
|
||
| tsconfig-paths@^3.12.0: | ||
| tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0: |
There was a problem hiding this comment.
will be deduped once we migrated to nx 14
| hints: false, | ||
| }, | ||
| optimization: { | ||
| namedModules: false, |
There was a problem hiding this comment.
invalid props since webpack 5 https://webpack.js.org/migrate/5/#update-outdated-options
| integrity sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw== | ||
|
|
||
| webpack@4, webpack@^4.43.0: | ||
| webpack@4: |
There was a problem hiding this comment.
storybook is very slow (known fact) as it re-builds its core on every run. Fun fact is that it also still uses webpack 4 to build itself. this will be partially mitigated in storybook 7.
chrisdholt
left a comment
There was a problem hiding this comment.
LGTM - Pinging @EisenbergEffect just to sanity check.
* master: (62 commits) chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks (microsoft#24458) chore(react-dialog): updates stories (microsoft#25070) refactor Progress to remove label and description slots (microsoft#25067) fix(SplitButton): Remove borders from hover and pressed state in primary split buttons (microsoft#25059) chore(react-persona): Add vr, conformance, and unit tests (microsoft#25007) (docs): update Icon docs with examples (microsoft#24768) Split button/primary hc fix (microsoft#25066) chore(react-utilities): restricts trigger API types (microsoft#25044) Add utilities export @fluentui/style-utilities v8 (microsoft#25065) chore: migrate whole repo to webpack 5 (microsoft#24542) applying package updates BREAKING: refactor `useTable` to be composable (microsoft#24947) Added shims to shim packages (microsoft#25048) Add Progress SPEC (microsoft#24418) applying package updates chore(react-persona): Add bundle-size command for bundle-size fixtures (microsoft#25055) fix(Button): Remove margin added to buttons by Safari (microsoft#25052) fix: Menu triggers no longer take focus when they are mounted (microsoft#25016) chore: deletes react-trigger package (microsoft#25042) Fixed a minor typo: immmediately => immediately (microsoft#25036) ...
* chore: migrate web-components to webpack5 and apply single version policy * chore: remove nohoist for stylis * chore: generate change files * chore: undo @storybook/html single version policy move * chore: dedup wepback 5 * chore: bump tsconfig-paths to resolve TS violations * chore: dedupe terser * chore: update karma to run with webpack 5


Pre-requirements
Current Behavior
New Behavior
nohoistonly for clashing bin links (storybook)Related Issue(s)