chore: setup typescript 4.7 for web-components package

[Hotell]

Previous Behavior

TS 4.3 is used within whole repo

New Behavior

Web-components now use TS 4.7 with properly configured tooling.

How was this achieved:

typescript 4.7 tooling support

• we adhere to single version policy for ts-loader -> only thing needed was to explicitly provide path to non hoisted compiler
• we adhere to single version policy for rollup + loaders -> only thing needed was to explicitly provide path to non hoisted compiler
• api-extractor doesn't support custom compiler versions thus a duplicate needed to be installed that ships with same TS version as will be used for web-components. This is known limitation of api-extractor and it wont change anytime soon AFAIK.
  • to guarantee that this different version of api-extractor resolves dependencies as expected, nohoist was used

native ESM support

• we use webpack 5.74 which supports native ESM without need of any plugins
• storybook - some additional tweaks are necessary as storybook doesn't ship valid ESM packages thus webpack needs to be configured to not error on those violations that happen within ./.storybook folder.
• karma - configs and setup that uses CJS needs to be renamed to use .cjs/.cts extension
• eslint - moved config to json file which is more easier to automate and adhere to any ESM standards 👍

Related Issue(s)

• Fixes #

[size-auditor]

Asset size changes

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

Baseline commit: 5e81ad39a172f413a4f5f6e852252ac07639d376 (build)

[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 fae13b7:

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

[fabricteam]

📊 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.243 kB 24.436 kB
react-alert Alert	84.688 kB 21.233 kB
react-avatar Avatar	48.874 kB 13.864 kB
react-avatar AvatarGroup	14.996 kB 6.013 kB
react-avatar AvatarGroupItem	63.452 kB 17.959 kB
react-badge Badge	22.646 kB 7.228 kB
react-badge CounterBadge	23.536 kB 7.512 kB
react-badge PresenceBadge	24.096 kB 7.09 kB
react-button Button	36.849 kB 9.907 kB
react-button CompoundButton	43.874 kB 11.123 kB
react-button MenuButton	39.543 kB 10.807 kB
react-button SplitButton	46.989 kB 12.192 kB
react-button ToggleButton	52.716 kB 11.381 kB
react-card Card - All	67.664 kB 19.635 kB
react-card Card	63.346 kB 18.539 kB
react-card CardFooter	8.607 kB 3.622 kB
react-card CardHeader	9.65 kB 3.962 kB
react-card CardPreview	8.708 kB 3.678 kB
react-combobox Combobox (including child components)	76.135 kB 24.738 kB
react-combobox Dropdown (including child components)	75.864 kB 24.699 kB
react-components react-components: Button, FluentProvider & webLightTheme	62.94 kB 17.663 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	189.888 kB 53.022 kB
react-components react-components: FluentProvider & webLightTheme	33.446 kB 11.033 kB
react-dialog Dialog (including children components)	83.147 kB 24.799 kB
react-divider Divider	16.505 kB 5.925 kB
react-image Image	10.826 kB 4.286 kB
react-infobutton InfoButton	7.742 kB 3.265 kB
react-input Input	24.428 kB 7.899 kB
react-label Label	9.384 kB 3.883 kB
react-link Link	11.852 kB 4.888 kB
react-menu Menu (including children components)	117.055 kB 36.238 kB
react-menu Menu (including selectable components)	120.124 kB 36.75 kB
react-overflow hooks only	11.004 kB 4.188 kB
react-persona Persona	53.992 kB 15.25 kB
react-popover Popover	103.624 kB 31.927 kB
react-portal Portal	10.628 kB 3.899 kB
react-portal-compat PortalCompatProvider	5.857 kB 1.978 kB
react-positioning usePositioning	20.009 kB 7.532 kB
react-progress Progress	13.131 kB 5.039 kB
react-provider FluentProvider	15.807 kB 5.909 kB
react-radio Radio	36.436 kB 12.126 kB
react-radio RadioGroup	14.294 kB 5.723 kB
react-select Select	23.255 kB 7.954 kB
react-slider Slider	31.978 kB 10.149 kB
react-spinbutton SpinButton	45.826 kB 12.858 kB
react-spinner Spinner	20.023 kB 6.461 kB
react-switch Switch	33.388 kB 10.578 kB
react-text Text - Default	11.828 kB 4.627 kB
react-text Text - Wrappers	15.138 kB 5.064 kB
react-textarea Textarea	25.687 kB 8.331 kB
react-theme Single theme token import	69 B 89 B
react-theme Teams: all themes	29.65 kB 6.444 kB
react-theme Teams: Light theme	17.486 kB 5.057 kB
react-tooltip Tooltip	41.993 kB 14.799 kB
react-utilities SSRProvider	180 B 159 B

_{🤖 This report was generated against 5e81ad39a172f413a4f5f6e852252ac07639d376}

[chrisdholt]

Tested the local branch in #26298 and it works!