feat: add support for nonce in Fela renderer #25992

layershifter · 2022-12-14T16:58:37Z

BREAKING CHANGES

This PR contains a breaking change in @fluentui/react-northstar-fela-renderer to allow configure nonce property on style tags. createFelaRenderer() now is a factory that accepts options:

createFelaRenderer();
// or
createFelaRenderer({ nonce: '' })

Before

import { RendererContext } from "@fluentui/react-northstar";
import { createFelaRenderer } from "@fluentui/react-northstar-fela-renderer";

function App() {
  return <RendererContext.Provider value={createFelaRenderer} />;
}

After

import { RendererContext } from "@fluentui/react-northstar";
import { createFelaRenderer } from "@fluentui/react-northstar-fela-renderer";

function App() {
  return <RendererContext.Provider value={createFelaRenderer()} />; // 👈 change is there
}

Notes

I didn't bump Fela fully as we have enhancers that should be update for a newer version. Instead I copied RendererProvider from react-fela (actually fela-bindings) and bumped fela-dom to a version that supports styleAttributes feature (robinweser/fela#768).

fabricteam · 2022-12-14T17:06:27Z

📊 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.294 kB` `24.443 kB`
`react-alert` Alert	`84.15 kB` `21.28 kB`
`react-avatar` Avatar	`51.083 kB` `14.289 kB`
`react-avatar` AvatarGroup	`15.006 kB` `6.009 kB`
`react-avatar` AvatarGroupItem	`67.313 kB` `18.585 kB`
`react-badge` Badge	`23.357 kB` `7.361 kB`
`react-badge` CounterBadge	`24.247 kB` `7.643 kB`
`react-badge` PresenceBadge	`24.001 kB` `7.049 kB`
`react-button` Button	`32.923 kB` `8.61 kB`
`react-button` CompoundButton	`39.953 kB` `9.933 kB`
`react-button` MenuButton	`37.611 kB` `9.942 kB`
`react-button` SplitButton	`45.057 kB` `11.323 kB`
`react-button` ToggleButton	`48.753 kB` `10.715 kB`
`react-card` Card - All	`77.541 kB` `22.325 kB`
`react-card` Card	`72.485 kB` `20.913 kB`
`react-card` CardFooter	`8.617 kB` `3.62 kB`
`react-card` CardHeader	`10.382 kB` `4.258 kB`
`react-card` CardPreview	`9.424 kB` `3.97 kB`
`react-checkbox` Checkbox	`28.65 kB` `9.09 kB`
`react-combobox` Combobox (including child components)	`78.629 kB` `25.167 kB`
`react-combobox` Dropdown (including child components)	`77.876 kB` `25.104 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`59.381 kB` `16.465 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`187.067 kB` `52.466 kB`
`react-components` react-components: FluentProvider & webLightTheme	`33.843 kB` `11.129 kB`
`react-dialog` Dialog (including children components)	`83.036 kB` `24.754 kB`
`react-divider` Divider	`16.515 kB` `5.921 kB`
`react-image` Image	`10.836 kB` `4.283 kB`
`react-infobutton` InfoButton	`118.298 kB` `35.438 kB`
`react-input` Input	`24.194 kB` `7.89 kB`
`react-label` Label	`9.394 kB` `3.88 kB`
`react-link` Link	`11.862 kB` `4.885 kB`
`react-menu` Menu (including children components)	`117.794 kB` `36.361 kB`
`react-menu` Menu (including selectable components)	`120.863 kB` `36.895 kB`
`react-overflow` hooks only	`11.004 kB` `4.188 kB`
`react-persona` Persona	`57.12 kB` `15.945 kB`
`react-popover` Popover	`104.042 kB` `32.021 kB`
`react-portal` Portal	`10.495 kB` `3.851 kB`
`react-portal-compat` PortalCompatProvider	`5.857 kB` `1.978 kB`
`react-positioning` usePositioning	`19.868 kB` `7.432 kB`
`react-progress` ProgressBar	`13.155 kB` `5.048 kB`
`react-provider` FluentProvider	`15.91 kB` `5.931 kB`
`react-radio` Radio	`31.827 kB` `10.316 kB`
`react-radio` RadioGroup	`14.304 kB` `5.72 kB`
`react-select` Select	`23.474 kB` `8.017 kB`
`react-slider` Slider	`32.091 kB` `10.183 kB`
`react-spinbutton` SpinButton	`44.502 kB` `12.812 kB`
`react-spinner` Spinner	`20.013 kB` `6.446 kB`
`react-switch` Switch	`33.427 kB` `10.581 kB`
`react-text` Text - Default	`11.838 kB` `4.625 kB`
`react-text` Text - Wrappers	`15.148 kB` `5.06 kB`
`react-textarea` Textarea	`25.733 kB` `8.328 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`30.908 kB` `6.714 kB`
`react-theme` Teams: Light theme	`17.776 kB` `5.141 kB`
`react-tooltip` Tooltip	`42.074 kB` `14.752 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against d5f35725ccf189c073b7815c8d3ee2f25c3839c1}

fabricteam · 2022-12-14T17:12:48Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1666	1668	5000
Button	mount	1144	1160	5000
FluentProvider	mount	1946	2009	5000
FluentProviderWithTheme	mount	725	720	10
FluentProviderWithTheme	virtual-rerender	679	675	10
FluentProviderWithTheme	virtual-rerender-with-unmount	722	732	10
MakeStyles	mount	2294	2348	50000
Persona	mount	4073	4036	5000
SpinButton	mount	3252	3257	5000

codesandbox-ci · 2022-12-14T17:13:41Z

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 e9d449b:

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

fabricteam · 2022-12-14T17:16:57Z

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam · 2022-12-14T17:22:01Z

🕵 fluentuiv9 No visual regressions between this PR and main

size-auditor · 2022-12-14T17:28:56Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-northstar-Provider	93.79 kB	95.266 kB	1.476 kB

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: d5f35725ccf189c073b7815c8d3ee2f25c3839c1 (build)

fabricteam · 2022-12-14T17:31:11Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
GroupedList	mount	2195	2477	2	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	1379	1362	5000
Breadcrumb	mount	3416	3460	1000
Checkbox	mount	3087	3132	5000
CheckboxBase	mount	2722	2745	5000
ChoiceGroup	mount	5106	5224	5000
ComboBox	mount	1440	1447	1000
CommandBar	mount	11175	11115	1000
ContextualMenu	mount	12681	12482	1000
DefaultButton	mount	1590	1591	5000
DetailsRow	mount	4210	4226	5000
DetailsRowFast	mount	4201	4190	5000
DetailsRowNoStyles	mount	4050	4001	5000
Dialog	mount	3573	3540	1000
DocumentCardTitle	mount	683	656	1000
Dropdown	mount	3732	3739	5000
FocusTrapZone	mount	2321	2351	5000
FocusZone	mount	2253	2335	5000
GroupedList	mount	2195	2477	2	Possible regression
GroupedList	virtual-rerender	1341	1319	2
GroupedList	virtual-rerender-with-unmount	1905	1944	2
GroupedListV2	mount	665	650	2
GroupedListV2	virtual-rerender	629	642	2
GroupedListV2	virtual-rerender-with-unmount	670	665	2
IconButton	mount	2208	2218	5000
Label	mount	837	837	5000
Layer	mount	4920	4996	5000
Link	mount	940	943	5000
MenuButton	mount	1928	1943	5000
MessageBar	mount	2670	2723	5000
Nav	mount	3782	3750	1000
OverflowSet	mount	1586	1594	5000
Panel	mount	2904	2957	1000
Persona	mount	1531	1500	1000
Pivot	mount	1937	1933	1000
PrimaryButton	mount	1741	1760	5000
Rating	mount	8000	8059	5000
SearchBox	mount	1747	1718	5000
Shimmer	mount	3276	3279	5000
Slider	mount	2433	2421	5000
SpinButton	mount	5364	5406	5000
Spinner	mount	922	935	5000
SplitButton	mount	3604	3508	5000
Stack	mount	962	981	5000
StackWithIntrinsicChildren	mount	2686	2652	5000
StackWithTextChildren	mount	5519	5484	5000
SwatchColorPicker	mount	11965	11965	5000
TagPicker	mount	3156	2961	5000
TeachingBubble	mount	96375	95924	5000
Text	mount	939	909	5000
TextField	mount	1842	1805	5000
ThemeProvider	mount	1739	1744	5000
ThemeProvider	virtual-rerender	1248	1251	5000
ThemeProvider	virtual-rerender-with-unmount	2518	2517	5000
Toggle	mount	1288	1302	5000
buttonNative	mount	643	644	5000

fabricteam · 2022-12-14T17:38:34Z

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

⚠️ No perf measurements available

fabricteam · 2022-12-14T18:13:20Z

🕵 FluentUI-v0 No visual regressions between this PR and main

ling1726

That's some heavy duct tape

packages/fluentui/CHANGELOG.md

layershifter · 2022-12-20T16:06:43Z

/azp run

azure-pipelines · 2022-12-20T16:07:06Z

Azure Pipelines successfully started running 4 pipeline(s).

layershifter added the Ready for VR Used to trigger screener checks for PRs label Dec 14, 2022

msft-fluent-ui-bot assigned bsunderhus Dec 14, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Dec 14, 2022

layershifter force-pushed the feat/nonce-v0 branch from ddb3c8a to 1b1133e Compare December 14, 2022 17:15

layershifter force-pushed the feat/nonce-v0 branch from 1b1133e to f0ce772 Compare December 14, 2022 17:36

layershifter force-pushed the feat/nonce-v0 branch 3 times, most recently from a9b6854 to edd0c10 Compare December 15, 2022 14:41

layershifter marked this pull request as ready for review December 15, 2022 14:51

layershifter requested review from a team as code owners December 15, 2022 14:51

ling1726 approved these changes Dec 20, 2022

View reviewed changes

miroslavstastny reviewed Dec 20, 2022

View reviewed changes

packages/fluentui/CHANGELOG.md Outdated Show resolved Hide resolved

miroslavstastny approved these changes Dec 20, 2022

View reviewed changes

layershifter force-pushed the feat/nonce-v0 branch from edd0c10 to bf2e6a5 Compare December 20, 2022 13:23

feat: add support for nonce in Fela renderer

e9d449b

layershifter force-pushed the feat/nonce-v0 branch from bf2e6a5 to e9d449b Compare December 20, 2022 13:43

layershifter merged commit 3ec3c77 into microsoft:master Dec 20, 2022

layershifter deleted the feat/nonce-v0 branch December 20, 2022 17:17

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

feat: add support for nonce in Fela renderer (microsoft#25992)

14a41a3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add support for nonce in Fela renderer #25992

feat: add support for nonce in Fela renderer #25992

layershifter commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

codesandbox-ci bot commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

size-auditor bot commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022

fabricteam commented Dec 14, 2022 •

edited

Loading

ling1726 left a comment

layershifter commented Dec 20, 2022

azure-pipelines bot commented Dec 20, 2022

feat: add support for nonce in Fela renderer #25992

feat: add support for nonce in Fela renderer #25992

Conversation

layershifter commented Dec 14, 2022 • edited Loading

BREAKING CHANGES

Before

After

Notes

fabricteam commented Dec 14, 2022 • edited Loading

📊 Bundle size report

fabricteam commented Dec 14, 2022 • edited Loading

Perf Analysis (@fluentui/react-components)

codesandbox-ci bot commented Dec 14, 2022 • edited Loading

fabricteam commented Dec 14, 2022 • edited Loading

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented Dec 14, 2022 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

size-auditor bot commented Dec 14, 2022 • edited Loading

Asset size changes

fabricteam commented Dec 14, 2022 • edited Loading

Perf Analysis (@fluentui/react)

fabricteam commented Dec 14, 2022

Perf Analysis (@fluentui/react-northstar)

fabricteam commented Dec 14, 2022 • edited Loading

🕵 FluentUI-v0 No visual regressions between this PR and main

ling1726 left a comment

Choose a reason for hiding this comment

layershifter commented Dec 20, 2022

azure-pipelines bot commented Dec 20, 2022

layershifter commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

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

codesandbox-ci bot commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

size-auditor bot commented Dec 14, 2022 •

edited

Loading

fabricteam commented Dec 14, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

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

fabricteam commented Dec 14, 2022 •

edited

Loading