chore: mark react-shared-context exports as unstable #23325

bsunderhus · 2022-05-30T15:04:05Z

Current Behavior

New Behavior

updates dependencies
removes re-export from react-provider
adds re-export from react-components
marks Provider, Type and hooks as unstable

Related Issue(s)

1. updates dependencies 2. removes re-export from react-provider 3. adds re-export from react-components 4. marks Provider, Type and hooks as unstable

codesandbox-ci · 2022-05-30T15:11:27Z

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

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

fabricteam · 2022-05-30T15:14:20Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`74.036 kB` `22.588 kB`	`74.053 kB` `22.6 kB`	`17 B` `12 B`
`react-avatar` Avatar	`45.454 kB` `13.251 kB`	`45.471 kB` `13.265 kB`	`17 B` `14 B`
`react-card` Card - All	`61.928 kB` `17.65 kB`	`61.945 kB` `17.666 kB`	`17 B` `16 B`
`react-card` Card	`57.213 kB` `16.465 kB`	`57.23 kB` `16.48 kB`	`17 B` `15 B`
`react-combobox` Combobox	`61.243 kB` `20.906 kB`	`61.28 kB` `20.924 kB`	`37 B` `18 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`181.023 kB` `50.536 kB`	`181.061 kB` `50.558 kB`	`38 B` `22 B`
`react-components` react-components: FluentProvider & webLightTheme	`33.944 kB` `11.043 kB`	`33.976 kB` `11.069 kB`	`32 B` `26 B`
`react-menu` Menu (including children components)	`111.457 kB` `33.972 kB`	`111.491 kB` `33.993 kB`	`34 B` `21 B`
`react-menu` Menu (including selectable components)	`114.632 kB` `34.44 kB`	`114.666 kB` `34.466 kB`	`34 B` `26 B`
`react-popover` Popover	`103.59 kB` `31.473 kB`	`103.625 kB` `31.503 kB`	`35 B` `30 B`
`react-portal` Portal	`6.272 kB` `2.17 kB`	`6.302 kB` `2.188 kB`	`30 B` `18 B`
`react-positioning` usePositioning	`23.828 kB` `8.283 kB`	`23.846 kB` `8.29 kB`	`18 B` `7 B`
`react-provider` FluentProvider	`13.993 kB` `5.248 kB`	`14.025 kB` `5.271 kB`	`32 B` `23 B`
`react-slider` Slider	`25.156 kB` `8.113 kB`	`25.173 kB` `8.123 kB`	`17 B` `10 B`
`react-tooltip` Tooltip	`43.503 kB` `14.968 kB`	`43.56 kB` `14.993 kB`	`57 B` `25 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-button` Button	`32.846 kB` `8.967 kB`
`react-button` CompoundButton	`39.753 kB` `10.198 kB`
`react-button` MenuButton	`35.018 kB` `9.724 kB`
`react-button` SplitButton	`42.259 kB` `11.018 kB`
`react-button` ToggleButton	`47.329 kB` `10.513 kB`
`react-card` CardFooter	`7.737 kB` `3.266 kB`
`react-card` CardHeader	`9.302 kB` `3.776 kB`
`react-card` CardPreview	`7.709 kB` `3.287 kB`
`react-link` Link	`11.358 kB` `4.58 kB`
`react-radio` Radio	`29.397 kB` `10.043 kB`
`react-radio` RadioGroup	`13.595 kB` `5.42 kB`
`react-switch` Switch	`25.37 kB` `8.201 kB`

_{🤖 This report was generated against 4ed24c29ddf8de037e4402d67c820b7398eaa265}

fabricteam · 2022-05-30T15:16:29Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1282	1240	5000
Button	mount	788	801	5000
FluentProvider	mount	2289	2374	5000
FluentProviderWithTheme	mount	420	442	10
FluentProviderWithTheme	virtual-rerender	370	361	10
FluentProviderWithTheme	virtual-rerender-with-unmount	450	444	10
MakeStyles	mount	2037	2041	50000

size-auditor · 2022-05-30T15:18:47Z

Asset size changes

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

Baseline commit: 4ed24c29ddf8de037e4402d67c820b7398eaa265 (build)

ling1726 · 2022-05-30T16:57:31Z

@bsunderhus let's hold off on publishing this until we get to an agreement of our public API

packages/react-components/react-components/src/index.ts

packages/react-components/react-components/etc/react-components.api.md

…s.api.md

Co-authored-by: Oleksandr Fediashov <[email protected]>

…s.api.md

Hotell · 2022-05-31T16:39:36Z

packages/react-components/react-components/src/index.ts

 } from '@fluentui/react-theme';
-export { useThemeClassName } from '@fluentui/react-shared-contexts';
+export {
+  useFluent_unstable as useFluent,


why are we exporting those unstable apis from "stable" package ?

Those are part of react-components public API but we plan to refactor/remove react-shared-contexts - therefore unstable in react-shared-contexts but stable in react-components.
This PR has been created before we discussed @internal exports so we used the unstable pattern.

…stable

GeoffCoxMSFT · 2022-05-31T19:13:48Z

packages/react-components/react-shared-contexts/src/ProviderContext/ProviderContext.ts

-import type { ProviderContextValue } from './ProviderContext.types';

-export const ProviderContext = React.createContext<ProviderContextValue>({
+export type ProviderContextValue = {


Nit: Did we need to get rid of the types.ts file? We usually separate types into their own files.

GeoffCoxMSFT · 2022-05-31T19:15:00Z

packages/react-components/react-shared-contexts/src/TooltipContext.ts

@@ -1 +0,0 @@
-export * from './TooltipContext/index';


PR shows the only line of this file was deleted, but the file was not deleted.

GeoffCoxMSFT · 2022-05-31T19:16:50Z

packages/react-components/react-shared-contexts/src/index.ts

-export type { TooltipContextType } from './TooltipContext';
-export { ProviderContext, useFluent } from './ProviderContext';
-export type { ProviderContextValue } from './ProviderContext';
+export { ThemeContext as ThemeContext_unstable, ThemeProvider as ThemeProvider_unstable } from './ThemeContext';


Future: We should follow up with a discussion of the best way to export unstable. Do we rename in the index to add the unstable suffix, or add to the item itself. What helps devs reading the code understand it best?

micahgodbolt · 2022-05-31T19:50:32Z

packages/react-components/react-slider/src/components/Slider/useSliderState.tsx

 import * as React from 'react';
 import { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';


as slider uses useFluent to get the theme dir, what is the plan for getting this in the future?

micahgodbolt

other than being curious how we should get dir in the future, this is fine with me

* chore: mark react-shared-context exports as unstable 1. updates dependencies 2. removes re-export from react-provider 3. adds re-export from react-components 4. marks Provider, Type and hooks as unstable * Change * Updates vr-tests stories * re-exports as stable * Update packages/react-components/react-components/etc/react-components.api.md * Update packages/react-components/react-components/src/index.ts Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-components/etc/react-components.api.md * update react-provider api snapshot Co-authored-by: ling1726 <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Sean Monahan <[email protected]>

chore: mark react-shared-context exports as unstable

c9137dd

1. updates dependencies 2. removes re-export from react-provider 3. adds re-export from react-components 4. marks Provider, Type and hooks as unstable

msft-fluent-ui-bot assigned ling1726 May 30, 2022

bsunderhus assigned bsunderhus and unassigned ling1726 May 30, 2022

bsunderhus added 2 commits May 30, 2022 17:21

Change

51d5c6e

Updates vr-tests stories

58e6f8a

bsunderhus force-pushed the chore-mark-react-shared-context-exports-unstable branch from 3402b54 to 5a3a8f3 Compare May 30, 2022 17:55

re-exports as stable

86972a8

bsunderhus force-pushed the chore-mark-react-shared-context-exports-unstable branch from 5a3a8f3 to 86972a8 Compare May 31, 2022 10:03

spmonahan mentioned this pull request May 31, 2022

Coordinate Breaking RC Changes #22130

Closed

ling1726 approved these changes May 31, 2022

View reviewed changes

miroslavstastny marked this pull request as ready for review May 31, 2022 16:23

miroslavstastny requested review from a team, behowell, khmakoto and micahgodbolt as code owners May 31, 2022 16:23

layershifter reviewed May 31, 2022

View reviewed changes

packages/react-components/react-components/src/index.ts Outdated Show resolved Hide resolved

ling1726 reviewed May 31, 2022

View reviewed changes

packages/react-components/react-components/etc/react-components.api.md Outdated Show resolved Hide resolved

ling1726 reviewed May 31, 2022

View reviewed changes

packages/react-components/react-components/etc/react-components.api.md Outdated Show resolved Hide resolved

ling1726 and others added 3 commits May 31, 2022 18:25

Update packages/react-components/react-components/etc/react-component…

b95fd5e

…s.api.md

Update packages/react-components/react-components/src/index.ts

33e514c

Co-authored-by: Oleksandr Fediashov <[email protected]>

Update packages/react-components/react-components/etc/react-component…

875df0c

…s.api.md

layershifter approved these changes May 31, 2022

View reviewed changes

Hotell reviewed May 31, 2022

View reviewed changes

levithomason mentioned this pull request May 31, 2022

Remove useTheme export #23335

Merged

spmonahan added 2 commits May 31, 2022 11:30

Merge branch 'master' into chore-mark-react-shared-context-exports-un…

9f21a77

…stable

update react-provider api snapshot

cd8e73e

GeoffCoxMSFT reviewed May 31, 2022

View reviewed changes

GeoffCoxMSFT approved these changes May 31, 2022

View reviewed changes

micahgodbolt reviewed May 31, 2022

View reviewed changes

micahgodbolt approved these changes May 31, 2022

View reviewed changes

spmonahan merged commit 335ebfc into microsoft:master May 31, 2022

bsunderhus deleted the chore-mark-react-shared-context-exports-unstable branch June 1, 2022 08:14

chore: mark react-shared-context exports as unstable #23325

chore: mark react-shared-context exports as unstable #23325

Uh oh!

Conversation

bsunderhus commented May 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci bot commented May 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented May 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented May 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

size-auditor bot commented May 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

ling1726 commented May 30, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Hotell May 31, 2022

Choose a reason for hiding this comment

Uh oh!

miroslavstastny May 31, 2022

Choose a reason for hiding this comment

Uh oh!

GeoffCoxMSFT May 31, 2022

Choose a reason for hiding this comment

Uh oh!

GeoffCoxMSFT May 31, 2022

Choose a reason for hiding this comment

Uh oh!

GeoffCoxMSFT May 31, 2022

Choose a reason for hiding this comment

Uh oh!

micahgodbolt May 31, 2022

Choose a reason for hiding this comment

Uh oh!

micahgodbolt left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

bsunderhus commented May 30, 2022 •

edited

Loading

codesandbox-ci bot commented May 30, 2022 •

edited

Loading

fabricteam commented May 30, 2022 •

edited

Loading

fabricteam commented May 30, 2022 •

edited

Loading

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

size-auditor bot commented May 30, 2022 •

edited

Loading