feat(eslint-rules): implement `no-missing-jsx-pragma` in order to automate and unify slot API usage #32842

Hotell · 2024-09-16T16:39:02Z

Previous Behavior

no enforcement how to use custom jsx pragma for v9 Slot API within component implementation

New Behavior

enforced usage of jsx pragma for v9 Slot API, driven by new no-missing-jsx-pragma workspace lint rule
we use runtime: 'automatic' for lint configuration which enforces to use @jsxImportSource

Rule covers various use-cases driven by runtime: <type> configuration. For v9 we use automatic which produces following lint capabilities:

see spec file fore thorough use cases

❌ Examples of Incorrect code:

using pragma that works with runtime classic

/** @jsxRuntime classic */
/** @jsx createElement */
// ~~~~~~~~~~~~~~~~~ 🚨

import { createElement } from '@fluentui/react-jsx-runtime';
// ~~~~~~~~~~~~~~~~~ 🚨

const renderFoo_unstable = (state: FooState) => {
    assertSlots<FooSlots>(state);

    return (
        <state.root>
          <state.button>
            hello
          </state.button>
        </state.root>
    );
  };

missing pragma when slot api is used

// ~~~~~~~~~~~~~~~~~ 🚨

const renderFoo_unstable = (state: FooState) => {
    assertSlots<FooSlots>(state);

    return (
        <state.root>
          <state.button>
            hello
          </state.button>
        </state.root>
    );
  };

present pragma when NO slot api is used

/** @jsxRuntime automatic */
/** @jsxImportSource @fluentui/react-jsx-runtime */
// ~~~~~~~~~~~~~~~~~ 🚨

const renderFoo_unstable = (state: FooState) => {
    return (
       <div>
            hello
        </div>
    );
  };

✅ Examples of Correct Code:

present pragma when slot api is used

/** @jsxRuntime automatic */
/** @jsxImportSource @fluentui/react-jsx-runtime */

const renderFoo_unstable = (state: FooState) => {
    assertSlots<FooSlots>(state);

    return (
        <state.root>
          <state.button>
            hello
          </state.button>
        </state.root>
    );
  };

no pragma when no slots API is used

const renderFoo_unstable = (state: FooState) => {
    return (
        <div>hello</div>
    );
  };

Related Issue(s)

Follows docs(jsx-runtime): improve usage guide and fix invalid links to sb docs #32838

fabricteam · 2024-09-16T16:50:39Z

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

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	35	30	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	622	640	5000
Button	mount	294	306	5000
Field	mount	1112	1075	5000
FluentProvider	mount	722	730	5000
FluentProviderWithTheme	mount	78	83	10
FluentProviderWithTheme	virtual-rerender	35	30	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	71	77	10
MakeStyles	mount	883	889	50000
Persona	mount	1784	1729	5000
SpinButton	mount	1445	1400	5000
SwatchPicker	mount	1688	1660	5000

fabricteam · 2024-09-16T16:53:20Z

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam · 2024-09-16T16:54:07Z

📊 Bundle size report

✅ No changes found

change/@fluentui-react-jsx-runtime-5bfd81c5-626e-4d33-a616-fe50df609366.json

fabricteam · 2024-09-16T16:56:47Z

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

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	98	87	1.13:1
AttachmentMinimalPerf.default	87	78	1.12:1
LayoutMinimalPerf.default	213	191	1.12:1
ChatDuplicateMessagesPerf.default	160	145	1.1:1
GridMinimalPerf.default	201	184	1.09:1
RadioGroupMinimalPerf.default	274	251	1.09:1
TreeWith60ListItems.default	97	89	1.09:1
AvatarMinimalPerf.default	117	109	1.07:1
ButtonMinimalPerf.default	96	90	1.07:1
FlexMinimalPerf.default	164	153	1.07:1
SkeletonMinimalPerf.default	204	190	1.07:1
TextMinimalPerf.default	208	195	1.07:1
DividerMinimalPerf.default	210	199	1.06:1
LoaderMinimalPerf.default	195	184	1.06:1
IconMinimalPerf.default	384	362	1.06:1
TableMinimalPerf.default	245	231	1.06:1
LabelMinimalPerf.default	236	224	1.05:1
HeaderSlotsPerf.default	481	462	1.04:1
RosterPerf.default	1603	1545	1.04:1
PopupMinimalPerf.default	353	340	1.04:1
ProviderMinimalPerf.default	209	201	1.04:1
ReactionMinimalPerf.default	211	202	1.04:1
CarouselMinimalPerf.default	268	261	1.03:1
HeaderMinimalPerf.default	216	210	1.03:1
ListNestedPerf.default	321	312	1.03:1
MenuButtonMinimalPerf.default	963	931	1.03:1
TextAreaMinimalPerf.default	301	292	1.03:1
TreeMinimalPerf.default	494	480	1.03:1
VideoMinimalPerf.default	442	431	1.03:1
ChatMinimalPerf.default	452	441	1.02:1
DropdownManyItemsPerf.default	405	396	1.02:1
EmbedMinimalPerf.default	1888	1845	1.02:1
MenuMinimalPerf.default	518	508	1.02:1
TableManyItemsPerf.default	1129	1105	1.02:1
AnimationMinimalPerf.default	300	297	1.01:1
BoxMinimalPerf.default	191	189	1.01:1
CheckboxMinimalPerf.default	1124	1109	1.01:1
DialogMinimalPerf.default	445	439	1.01:1
InputMinimalPerf.default	542	538	1.01:1
CustomToolbarPrototype.default	1485	1473	1.01:1
TooltipMinimalPerf.default	1268	1260	1.01:1
ButtonOverridesMissPerf.default	658	660	1:1
DatepickerMinimalPerf.default	3665	3664	1:1
DropdownMinimalPerf.default	1418	1415	1:1
ImageMinimalPerf.default	232	231	1:1
ItemLayoutMinimalPerf.default	726	724	1:1
SliderMinimalPerf.default	732	732	1:1
ToolbarMinimalPerf.default	546	545	1:1
ButtonSlotsPerf.default	312	315	0.99:1
ListMinimalPerf.default	308	311	0.99:1
AttachmentSlotsPerf.default	625	636	0.98:1
ChatWithPopoverPerf.default	192	195	0.98:1
ListWith60ListItems.default	364	372	0.98:1
SplitButtonMinimalPerf.default	2236	2273	0.98:1
CardMinimalPerf.default	294	304	0.97:1
RefMinimalPerf.default	106	109	0.97:1
SegmentMinimalPerf.default	190	195	0.97:1
ProviderMergeThemesPerf.default	641	667	0.96:1
FormMinimalPerf.default	227	238	0.95:1
StatusMinimalPerf.default	379	401	0.95:1
AlertMinimalPerf.default	158	168	0.94:1
AccordionMinimalPerf.default	85	91	0.93:1
ListCommonPerf.default	348	390	0.89:1

fabricteam · 2024-09-16T17:08:05Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	656	639	5000
Breadcrumb	mount	1710	1705	1000
Checkbox	mount	1705	1721	5000
CheckboxBase	mount	1486	1517	5000
ChoiceGroup	mount	2994	3009	5000
ComboBox	mount	694	692	1000
CommandBar	mount	6772	6624	1000
ContextualMenu	mount	14116	13382	1000
DefaultButton	mount	796	795	5000
DetailsRow	mount	2275	2246	5000
DetailsRowFast	mount	2244	2256	5000
DetailsRowNoStyles	mount	2046	2115	5000
Dialog	mount	2911	2712	1000
DocumentCardTitle	mount	225	229	1000
Dropdown	mount	2047	2040	5000
FocusTrapZone	mount	1176	1168	5000
FocusZone	mount	1081	1085	5000
GroupedList	mount	43040	43626	2
GroupedList	virtual-rerender	20583	20727	2
GroupedList	virtual-rerender-with-unmount	57100	52426	2
GroupedListV2	mount	244	240	2
GroupedListV2	virtual-rerender	219	225	2
GroupedListV2	virtual-rerender-with-unmount	238	223	2
IconButton	mount	1121	1144	5000
Label	mount	341	349	5000
Layer	mount	2773	2825	5000
Link	mount	405	417	5000
MenuButton	mount	998	997	5000
MessageBar	mount	21680	21659	5000
Nav	mount	2073	2083	1000
OverflowSet	mount	807	812	5000
Panel	mount	1909	1861	1000
Persona	mount	778	755	1000
Pivot	mount	922	915	1000
PrimaryButton	mount	948	952	5000
Rating	mount	4786	4800	5000
SearchBox	mount	942	904	5000
Shimmer	mount	1883	1966	5000
Slider	mount	1352	1353	5000
SpinButton	mount	3040	2984	5000
Spinner	mount	403	391	5000
SplitButton	mount	1883	1910	5000
Stack	mount	422	425	5000
StackWithIntrinsicChildren	mount	877	874	5000
StackWithTextChildren	mount	2761	2763	5000
SwatchColorPicker	mount	6438	6439	5000
TagPicker	mount	1459	1497	5000
Text	mount	395	393	5000
TextField	mount	973	944	5000
ThemeProvider	mount	863	888	5000
ThemeProvider	virtual-rerender	589	583	5000
ThemeProvider	virtual-rerender-with-unmount	1291	1320	5000
Toggle	mount	629	639	5000
buttonNative	mount	197	196	5000

change/@fluentui-eslint-plugin-e633733d-0e64-45b7-a37a-eea61b3caa8a.json

fabricteam · 2024-10-02T15:02:46Z

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

…ule logic

…api outputs within JSX

tools/eslint-rules/rules/no-missing-jsx-pragma.spec.ts

…slot.* api outputs within JSX

…direct slot.* api outputs within JSX

github-actions bot added this to the September Project Cycle Q3 2024 milestone Sep 16, 2024

fabricteam reviewed Sep 16, 2024

View reviewed changes

change/@fluentui-react-jsx-runtime-5bfd81c5-626e-4d33-a616-fe50df609366.json Outdated Show resolved Hide resolved

Hotell changed the title ~~Workspace/eslint rules/jsx pragma~~ feat(eslint-rules): implement no-missing-jsx-pragma in order to automate and unify slot API usage Sep 17, 2024

Hotell added NX: workspace eslint-rules Fluent UI react-components (v9) Area: Linting labels Sep 17, 2024

Hotell force-pushed the workspace/eslint-rules/jsx-pragma branch from cd0514c to 3bfd369 Compare September 24, 2024 09:11

Hotell force-pushed the workspace/eslint-rules/jsx-pragma branch from b07ca1f to 27b0742 Compare October 1, 2024 17:00

github-actions bot modified the milestones: September Project Cycle Q3 2024, October Project Cycle Q4 2024 Oct 1, 2024

Hotell force-pushed the workspace/eslint-rules/jsx-pragma branch from 2281161 to 026ac25 Compare October 2, 2024 13:01

fabricteam reviewed Oct 2, 2024

View reviewed changes

change/@fluentui-eslint-plugin-e633733d-0e64-45b7-a37a-eea61b3caa8a.json Outdated Show resolved Hide resolved

Hotell force-pushed the workspace/eslint-rules/jsx-pragma branch 2 times, most recently from 5c390c1 to 1923be6 Compare October 3, 2024 13:14

Hotell mentioned this pull request Oct 3, 2024

chore: enable @nx/workspace-no-missing-jsx-pragma in whole monorepo #32975

Merged

1 task

Hotell force-pushed the workspace/eslint-rules/jsx-pragma branch from 1923be6 to 7a82920 Compare October 3, 2024 14:10

Hotell added 5 commits October 3, 2024 16:14

chore(eslint-rules): add type-check target

afb24a6

feat(eslint-rules): implement no-missing-jsx-pragma rule

baad292

feat(eslint-rules): improve lint error messages

f5d3a1e

feat(eslint-rules): add options to force use of runtime within lint r…

5588ea9

…ule logic

feat(eslint-rules): implement jsx pragma detection for direct slot.* …

99f32cd

…api outputs within JSX

Hotell force-pushed the workspace/eslint-rules/jsx-pragma branch from 7a82920 to 99f32cd Compare October 3, 2024 14:15

Hotell marked this pull request as ready for review October 3, 2024 14:41

Hotell requested a review from a team as a code owner October 3, 2024 14:41

Hotell mentioned this pull request Oct 7, 2024

feat(react-keytips): initial implementation microsoft/fluentui-contrib#221

Merged

Hotell requested a review from dmytrokirpa October 8, 2024 12:06

dmytrokirpa approved these changes Oct 9, 2024

View reviewed changes

tools/eslint-rules/rules/no-missing-jsx-pragma.spec.ts Show resolved Hide resolved

Hotell added 2 commits October 9, 2024 14:19

fixup! feat(eslint-rules): implement jsx pragma detection for direct …

ddd0a5f

…slot.* api outputs within JSX

fixup! fixup! feat(eslint-rules): implement jsx pragma detection for …

85907c8

…direct slot.* api outputs within JSX

Hotell merged commit 28210ef into microsoft:master Oct 10, 2024
18 checks passed

Hotell deleted the workspace/eslint-rules/jsx-pragma branch October 10, 2024 09:57

mainframev mentioned this pull request Oct 16, 2024

migrate to automatic jsx runtime microsoft/fluentui-contrib#249

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(eslint-rules): implement `no-missing-jsx-pragma` in order to automate and unify slot API usage #32842

feat(eslint-rules): implement `no-missing-jsx-pragma` in order to automate and unify slot API usage #32842

Hotell commented Sep 16, 2024 •

edited

Loading

fabricteam commented Sep 16, 2024 •

edited

Loading

fabricteam commented Sep 16, 2024 •

edited

Loading

fabricteam commented Sep 16, 2024 •

edited

Loading

fabricteam commented Sep 16, 2024 •

edited

Loading

fabricteam commented Sep 16, 2024 •

edited

Loading

fabricteam commented Oct 2, 2024 •

edited

Loading

feat(eslint-rules): implement no-missing-jsx-pragma in order to automate and unify slot API usage #32842

feat(eslint-rules): implement no-missing-jsx-pragma in order to automate and unify slot API usage #32842

Conversation

Hotell commented Sep 16, 2024 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

fabricteam commented Sep 16, 2024 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Sep 16, 2024 • edited Loading

🕵 FluentUIV0 No visual regressions between this PR and main

fabricteam commented Sep 16, 2024 • edited Loading

📊 Bundle size report

fabricteam commented Sep 16, 2024 • edited Loading

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Sep 16, 2024 • edited Loading

Perf Analysis (@fluentui/react)

fabricteam commented Oct 2, 2024 • edited Loading

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

feat(eslint-rules): implement `no-missing-jsx-pragma` in order to automate and unify slot API usage #32842

feat(eslint-rules): implement `no-missing-jsx-pragma` in order to automate and unify slot API usage #32842

Hotell commented Sep 16, 2024 •

edited

Loading

fabricteam commented Sep 16, 2024 •

edited

Loading

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

fabricteam commented Sep 16, 2024 •

edited

Loading

fabricteam commented Sep 16, 2024 •

edited

Loading

fabricteam commented Sep 16, 2024 •

edited

Loading

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

fabricteam commented Sep 16, 2024 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Oct 2, 2024 •

edited

Loading