chore: use Babel plugins to annotate pure calls

[layershifter]

Related to #12953.

Description of changes

This PR:

• adds Babel plugins to annotate components and some internal functions with /*#__PURE__*/
  • babel-plugin-iife-wrap-react-components wraps components that have static properties into IIFE and marks them as pure

import React from "react";
export const Button = /*#__PURE__*/ (function () {
  function Button() {
    return React.createElement("div");
  }

  Button.displayName = "Button";
  Button.defaultProps = {};
  return Button;
})();

• babel-plugin-annotate-pure-imports annotates calls to functions from listed modules

import * as React from 'react';
import { createSvgIcon } from '../utils/createSvgIcon';

export var AcceptIcon = /*#__PURE__*/createSvgIcon({ })

• removes a small side-effect in whatInput.ts
• removes prop-types dependency under react-component-event-listener & react-component-ref
• fixes issues that prevent module concatenation in utils/index.ts
  • non-existing export under module commonPropTypes
  • commonPropInterfaces.ts was empty after compilation and was a reason of ModuleConcatenation bailout: Module is not an ECMAScript module

Results

Based on AccordionDefault.bsize.tsx I have following results on minified code:

• before 639KB
• after 441KB (⬇️ 198KB)

[codesandbox-ci]

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 7888c38:

Sandbox	Source
Fluent UI Button	Configuration
microsoft/fluentui: codesandbox-react-template	Configuration

[DustyTheBot]

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

Generated by 🚫 dangerJS against 7888c38

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	903	879	5000
ButtonNext	mount	600	551	5000
Checkbox	mount	1590	1553	5000
CheckboxBase	mount	1334	1291	5000
CheckboxNext	mount	1578	1597	5000
ChoiceGroup	mount	4979	5034	5000
ComboBox	mount	908	932	1000
CommandBar	mount	7682	7679	1000
ContextualMenu	mount	14308	14258	1000
DefaultButton	mount	1126	1113	5000
DetailsRow	mount	3490	3509	5000
DetailsRowFast	mount	3560	3633	5000
DetailsRowNoStyles	mount	3345	3451	5000
Dialog	mount	1478	1499	1000
DocumentCardTitle	mount	1855	1849	1000
Dropdown	mount	2628	2597	5000
FocusZone	mount	1838	1859	5000
IconButton	mount	1736	1740	5000
Label	mount	328	312	5000
Link	mount	439	450	5000
LinkNext	mount	464	465	5000
MenuButton	mount	1473	1464	5000
Nav	mount	3337	3190	1000
Panel	mount	1424	1436	1000
Persona	mount	824	859	1000
Pivot	mount	1420	1413	1000
PivotNext	mount	1372	1382	1000
PrimaryButton	mount	1272	1261	5000
SearchBox	mount	1300	1294	5000
SearchBoxNext	mount	1304	1264	5000
Slider	mount	1517	1503	5000
SliderNext	mount	1918	1923	5000
Spinner	mount	414	418	5000
SplitButton	mount	3157	3124	5000
Stack	mount	528	539	5000
StackWithIntrinsicChildren	mount	1974	1968	5000
StackWithTextChildren	mount	5045	5001	5000
TagPicker	mount	2715	2700	5000
Text	mount	419	446	5000
TextField	mount	1365	1354	5000
ThemeProvider	mount	3172	2993	5000
ThemeProvider	virtual-rerender	525	524	5000
Toggle	mount	833	861	5000
ToggleNext	mount	829	825	5000
button	mount	108	122	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.43	0.46	0.93:1	2000	861
🦄	Button.Fluent	0.11	0.2	0.55:1	5000	535
🔧	Checkbox.Fluent	0.62	0.35	1.77:1	1000	622
🎯	Dialog.Fluent	0.15	0.21	0.71:1	5000	766
🔧	Dropdown.Fluent	3.01	0.45	6.69:1	1000	3011
🔧	Icon.Fluent	0.13	0.05	2.6:1	5000	663
🦄	Image.Fluent	0.07	0.11	0.64:1	5000	363
🔧	Slider.Fluent	1.66	0.37	4.49:1	1000	1658
🔧	Text.Fluent	0.06	0.03	2:1	5000	319
🦄	Tooltip.Fluent	0.1	18.75	0.01:1	5000	502

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
HeaderMinimalPerf.default	349	324	1.08:1
ButtonMinimalPerf.default	174	162	1.07:1
StatusMinimalPerf.default	668	627	1.07:1
GridMinimalPerf.default	331	311	1.06:1
TextAreaMinimalPerf.default	452	428	1.06:1
ButtonSlotsPerf.default	606	578	1.05:1
PopupMinimalPerf.default	675	640	1.05:1
RefMinimalPerf.default	217	207	1.05:1
TreeWith60ListItems.default	218	208	1.05:1
AnimationMinimalPerf.default	392	377	1.04:1
ItemLayoutMinimalPerf.default	1222	1177	1.04:1
ReactionMinimalPerf.default	360	345	1.04:1
SegmentMinimalPerf.default	338	325	1.04:1
TextMinimalPerf.default	337	324	1.04:1
AttachmentSlotsPerf.default	1143	1114	1.03:1
CarouselMinimalPerf.default	454	440	1.03:1
EmbedMinimalPerf.default	1927	1872	1.03:1
FlexMinimalPerf.default	272	265	1.03:1
MenuMinimalPerf.default	849	828	1.03:1
TableManyItemsPerf.default	2242	2170	1.03:1
ChatDuplicateMessagesPerf.default	442	434	1.02:1
HeaderSlotsPerf.default	766	748	1.02:1
LoaderMinimalPerf.default	736	725	1.02:1
ProviderMinimalPerf.default	907	885	1.02:1
SliderMinimalPerf.default	1638	1612	1.02:1
CustomToolbarPrototype.default	3780	3724	1.02:1
Image.Fluent	363	355	1.02:1
AvatarMinimalPerf.default	462	458	1.01:1
ChatWithPopoverPerf.default	466	461	1.01:1
DialogMinimalPerf.default	762	753	1.01:1
DividerMinimalPerf.default	342	337	1.01:1
HierarchicalTreeMinimalPerf.default	406	400	1.01:1
ImageMinimalPerf.default	354	350	1.01:1
LabelMinimalPerf.default	385	380	1.01:1
ListMinimalPerf.default	470	464	1.01:1
ListNestedPerf.default	871	864	1.01:1
RadioGroupMinimalPerf.default	415	410	1.01:1
VideoMinimalPerf.default	627	618	1.01:1
Dropdown.Fluent	3011	2974	1.01:1
CardMinimalPerf.default	567	566	1:1
CheckboxMinimalPerf.default	2805	2817	1:1
InputMinimalPerf.default	1112	1111	1:1
LayoutMinimalPerf.default	386	385	1:1
ListWith60ListItems.default	1085	1081	1:1
MenuButtonMinimalPerf.default	1484	1491	1:1
ProviderMergeThemesPerf.default	1918	1916	1:1
SplitButtonMinimalPerf.default	3722	3727	1:1
ToolbarMinimalPerf.default	943	947	1:1
Checkbox.Fluent	622	625	1:1
Tooltip.Fluent	502	504	1:1
AttachmentMinimalPerf.default	151	153	0.99:1
BoxMinimalPerf.default	327	329	0.99:1
TreeMinimalPerf.default	852	864	0.99:1
Avatar.Fluent	861	869	0.99:1
Dialog.Fluent	766	770	0.99:1
Slider.Fluent	1658	1683	0.99:1
AccordionMinimalPerf.default	140	143	0.98:1
FormMinimalPerf.default	383	390	0.98:1
PortalMinimalPerf.default	118	120	0.98:1
TooltipMinimalPerf.default	773	786	0.98:1
AlertMinimalPerf.default	283	291	0.97:1
ChatMinimalPerf.default	590	609	0.97:1
ListCommonPerf.default	938	966	0.97:1
IconMinimalPerf.default	631	650	0.97:1
TableMinimalPerf.default	383	393	0.97:1
Button.Fluent	535	552	0.97:1
Icon.Fluent	663	683	0.97:1
DropdownManyItemsPerf.default	738	771	0.96:1
DropdownMinimalPerf.default	2948	3057	0.96:1
Text.Fluent	319	347	0.92:1

[size-auditor]

Asset size changes

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

Baseline commit: ae46225e1b94e6b348daa23fe90d983a285ce4ad (build)

[ecraig12345]

Nice! If you're able to share a writeup at some point of all the things you've learned from investigating these bundling issues, that would be really interesting.