feat(keyboard-keys): Export keys and legacy keyCodes #18896

ling1726 · 2021-07-11T18:32:28Z

This PR implements what was proposed in #18587 and exports all named
key values specified by w3c.

Also adds legacy keycode exports as a deep import. Happy to take any
suggestions to avoid this.

Current workaround caused by API-Extractor limitations:

microsoft/rushstack#2780

import * as keyCodes from './keyCodes'
export {keyCodes}

Future change:

+ export * as keyCodes from './keyCodes'
- import * as keyCodes from './keyCodes'
- export {keyCodes}

Pull request checklist

Addresses an existing issue: Fixes #0000
Include a change request file using $ yarn change

Description of changes

(give an overview)

Focus areas to test

(optional)

This PR implements what was proposed in microsoft#18587 and exports all named `key` values specified by w3c. Also adds legacy keycode exports as a deep import. Happy to take any suggestions to avoid this. Originallly this was the plan: ```ts export * as keyCodes from './keyCodes' ``` but unfortunately API extractor does not support this syntax microsoft/rushstack#2780

size-auditor · 2021-07-11T18:42:21Z

Asset size changes

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

Baseline commit: 6dbf1ed0a505a860eeb6c8b065c3422e324ff3d7 (build)

codesandbox-ci · 2021-07-11T18:47:13Z

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 2b4f0fb:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

fabricteam · 2021-07-11T18:56:44Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	888	906	5000
BaseButton	mount	1005	1004	5000
Breadcrumb	mount	2940	2852	1000
ButtonNext	mount	589	617	5000
Checkbox	mount	1721	1702	5000
CheckboxBase	mount	1450	1492	5000
ChoiceGroup	mount	5297	5308	5000
ComboBox	mount	1060	1041	1000
CommandBar	mount	11314	11248	1000
ContextualMenu	mount	6614	6755	1000
DefaultButton	mount	1266	1193	5000
DetailsRow	mount	4102	4098	5000
DetailsRowFast	mount	4112	4111	5000
DetailsRowNoStyles	mount	3857	3924	5000
Dialog	mount	2263	2263	1000
DocumentCardTitle	mount	161	146	1000
Dropdown	mount	3624	3596	5000
FluentProviderNext	mount	7539	7724	5000
FocusTrapZone	mount	1978	1974	5000
FocusZone	mount	1906	1954	5000
IconButton	mount	1973	1973	5000
Label	mount	360	365	5000
Layer	mount	2002	1942	5000
Link	mount	516	515	5000
MakeStyles	mount	1910	1905	50000
MenuButton	mount	1686	1660	5000
MessageBar	mount	2216	2191	5000
Nav	mount	3622	3590	1000
OverflowSet	mount	1140	1121	5000
Panel	mount	2201	2201	1000
Persona	mount	920	892	1000
Pivot	mount	1527	1514	1000
PrimaryButton	mount	1432	1408	5000
Rating	mount	8618	8587	5000
SearchBox	mount	1484	1519	5000
Shimmer	mount	2857	2809	5000
Slider	mount	2236	2207	5000
SpinButton	mount	5527	5449	5000
Spinner	mount	437	446	5000
SplitButton	mount	3474	3397	5000
Stack	mount	551	571	5000
StackWithIntrinsicChildren	mount	1689	1744	5000
StackWithTextChildren	mount	5176	5239	5000
SwatchColorPicker	mount	11120	11043	5000
Tabs	mount	1511	1536	1000
TagPicker	mount	2663	2650	5000
TeachingBubble	mount	12600	12557	5000
Text	mount	465	464	5000
TextField	mount	1520	1462	5000
ThemeProvider	mount	1294	1266	5000
ThemeProvider	virtual-rerender	639	658	5000
Toggle	mount	865	890	5000
buttonNative	mount	113	129	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ImageMinimalPerf.default	446	405	1.1:1
ButtonSlotsPerf.default	636	584	1.09:1
FlexMinimalPerf.default	338	310	1.09:1
ChatDuplicateMessagesPerf.default	362	336	1.08:1
SkeletonMinimalPerf.default	421	393	1.07:1
FormMinimalPerf.default	484	456	1.06:1
LoaderMinimalPerf.default	782	737	1.06:1
TableMinimalPerf.default	466	440	1.06:1
TextMinimalPerf.default	412	394	1.05:1
TooltipMinimalPerf.default	1209	1147	1.05:1
VideoMinimalPerf.default	725	689	1.05:1
AlertMinimalPerf.default	324	311	1.04:1
BoxMinimalPerf.default	410	396	1.04:1
GridMinimalPerf.default	385	369	1.04:1
ListMinimalPerf.default	585	561	1.04:1
ReactionMinimalPerf.default	434	416	1.04:1
CardMinimalPerf.default	672	652	1.03:1
DialogMinimalPerf.default	828	800	1.03:1
DividerMinimalPerf.default	442	430	1.03:1
ItemLayoutMinimalPerf.default	1398	1351	1.03:1
IconMinimalPerf.default	692	673	1.03:1
AnimationMinimalPerf.default	464	455	1.02:1
AvatarMinimalPerf.default	232	227	1.02:1
ButtonOverridesMissPerf.default	1912	1873	1.02:1
CarouselMinimalPerf.default	525	517	1.02:1
DropdownMinimalPerf.default	3412	3355	1.02:1
EmbedMinimalPerf.default	4557	4469	1.02:1
LabelMinimalPerf.default	447	437	1.02:1
ListWith60ListItems.default	737	726	1.02:1
MenuButtonMinimalPerf.default	1846	1816	1.02:1
ProviderMergeThemesPerf.default	1770	1727	1.02:1
ProviderMinimalPerf.default	1109	1090	1.02:1
RadioGroupMinimalPerf.default	531	520	1.02:1
CustomToolbarPrototype.default	4359	4260	1.02:1
ButtonMinimalPerf.default	200	198	1.01:1
ChatMinimalPerf.default	739	729	1.01:1
CheckboxMinimalPerf.default	2956	2934	1.01:1
InputMinimalPerf.default	1346	1335	1.01:1
PopupMinimalPerf.default	658	649	1.01:1
DropdownManyItemsPerf.default	794	791	1:1
HeaderSlotsPerf.default	860	863	1:1
LayoutMinimalPerf.default	421	423	1:1
RefMinimalPerf.default	255	256	1:1
SplitButtonMinimalPerf.default	4200	4193	1:1
TextAreaMinimalPerf.default	579	580	1:1
AccordionMinimalPerf.default	175	176	0.99:1
AttachmentMinimalPerf.default	187	189	0.99:1
HeaderMinimalPerf.default	415	420	0.99:1
SegmentMinimalPerf.default	411	414	0.99:1
AttachmentSlotsPerf.default	1224	1245	0.98:1
DatepickerMinimalPerf.default	6334	6462	0.98:1
ListCommonPerf.default	705	720	0.98:1
SliderMinimalPerf.default	1678	1712	0.98:1
StatusMinimalPerf.default	774	787	0.98:1
TableManyItemsPerf.default	2179	2227	0.98:1
TreeMinimalPerf.default	920	941	0.98:1
ChatWithPopoverPerf.default	410	424	0.97:1
MenuMinimalPerf.default	911	953	0.96:1
RosterPerf.default	1276	1323	0.96:1
TreeWith60ListItems.default	191	200	0.96:1
PortalMinimalPerf.default	188	201	0.94:1
ToolbarMinimalPerf.default	1057	1119	0.94:1
ListNestedPerf.default	617	663	0.93:1

packages/keyboard-keys/src/index.ts

packages/keyboard-keys/README.md

bsunderhus · 2021-07-12T08:40:11Z

packages/keyboard-keys/src/keyCodes.ts

@@ -0,0 +1,163 @@
+export const Cancel = 3;


how about using as const here for typings?

yeah sounds good, need another round of my generation script :D

no need const on primitives are not widened

const Cancel = 3; // is same as const Cancel = 3 as const;

need another round of my generation script :D

would you mind to make this tool a part of our repo ?

@Hotell thx for the ts expertise :)

The generation script is just some web scraping I did from the w3c spec site, nothing to be added to the repo

The generation script is just some web scraping

to me that sounds very appealing to have proper automation for our consumers ;) I'll be happy to help get that in

* feat(keyboard-keys): Export keys and legacy keyCodes This PR implements what was proposed in microsoft#18587 and exports all named `key` values specified by w3c. Also adds legacy keycode exports as a deep import. Happy to take any suggestions to avoid this. Originallly this was the plan: ```ts export * as keyCodes from './keyCodes' ``` but unfortunately API extractor does not support this syntax microsoft/rushstack#2780 * remove deep export * update fixture

msft-fluent-ui-bot assigned ling1726 Jul 11, 2021

ling1726 marked this pull request as ready for review July 11, 2021 18:33

ling1726 requested review from a team July 11, 2021 18:34

ling1726 mentioned this pull request Jul 12, 2021

Text - Reusable make-styles rules #18778

Merged

ling1726 commented Jul 12, 2021

View reviewed changes

packages/keyboard-keys/src/index.ts Outdated Show resolved Hide resolved

layershifter reviewed Jul 12, 2021

View reviewed changes

packages/keyboard-keys/README.md Outdated Show resolved Hide resolved

bsunderhus approved these changes Jul 12, 2021

View reviewed changes

andrefcdias mentioned this pull request Jul 12, 2021

Support for export * as namespace from localpackage from API Extractor #18906

Closed

ling1726 added 2 commits July 14, 2021 09:34

Merge branch 'master' into feat/keyboard-keys

7d98fcd

remove deep export

4daf855

ling1726 requested review from layershifter and Hotell July 14, 2021 07:43

update fixture

2b4f0fb

Hotell approved these changes Jul 14, 2021

View reviewed changes

Hotell added this to the July Project Cycle Q2 2021 milestone Jul 14, 2021

ling1726 merged commit e67f813 into microsoft:master Jul 15, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(keyboard-keys): Export keys and legacy keyCodes #18896

feat(keyboard-keys): Export keys and legacy keyCodes #18896

ling1726 commented Jul 11, 2021 •

edited by Hotell

Loading

size-auditor bot commented Jul 11, 2021 •

edited

Loading

codesandbox-ci bot commented Jul 11, 2021 •

edited

Loading

fabricteam commented Jul 11, 2021 •

edited

Loading

bsunderhus Jul 12, 2021

ling1726 Jul 12, 2021

Hotell Jul 12, 2021

Hotell Jul 12, 2021

ling1726 Jul 12, 2021

Hotell Jul 12, 2021

feat(keyboard-keys): Export keys and legacy keyCodes #18896

feat(keyboard-keys): Export keys and legacy keyCodes #18896

Conversation

ling1726 commented Jul 11, 2021 • edited by Hotell Loading

Pull request checklist

Description of changes

Focus areas to test

size-auditor bot commented Jul 11, 2021 • edited Loading

Asset size changes

codesandbox-ci bot commented Jul 11, 2021 • edited Loading

fabricteam commented Jul 11, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

bsunderhus Jul 12, 2021

Choose a reason for hiding this comment

ling1726 Jul 12, 2021

Choose a reason for hiding this comment

Hotell Jul 12, 2021

Choose a reason for hiding this comment

Hotell Jul 12, 2021

Choose a reason for hiding this comment

ling1726 Jul 12, 2021

Choose a reason for hiding this comment

Hotell Jul 12, 2021

Choose a reason for hiding this comment

ling1726 commented Jul 11, 2021 •

edited by Hotell

Loading

size-auditor bot commented Jul 11, 2021 •

edited

Loading

codesandbox-ci bot commented Jul 11, 2021 •

edited

Loading

fabricteam commented Jul 11, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)