Simplify our context providers

React 19 lets you omit the '.Provider' bit.

src/App.tsx

@@ -77,7 +77,7 @@ export const App: FC<Props> = ({ vm }) => {
             {loaded ? (
               <Suspense fallback={null}>
                 <ClientProvider>
-                  <MediaDevicesContext.Provider value={vm.mediaDevices}>
+                  <MediaDevicesContext value={vm.mediaDevices}>
                     <ProcessorProvider>
                       <Sentry.ErrorBoundary
                         fallback={(error) => (
@@ -96,7 +96,7 @@ export const App: FC<Props> = ({ vm }) => {
                         </Routes>
                       </Sentry.ErrorBoundary>
                     </ProcessorProvider>
-                  </MediaDevicesContext.Provider>
+                  </MediaDevicesContext>
                 </ClientProvider>
               </Suspense>
             ) : (

src/ClientContext.tsx

@@ -349,9 +349,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
     return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
   }
 
-  return (
+  return <ClientContext value={state}>{children}</ClientContext>;
-    <ClientContext.Provider value={state}>{children}</ClientContext.Provider>
-  );
 };
 
 export type InitResult = {

src/grid/Grid.tsx

@@ -532,14 +532,14 @@ export function Grid<
       className={classNames(className, styles.grid)}
       style={style}
     >
-      <LayoutContext.Provider value={context}>
+      <LayoutContext value={context}>
         <LayoutMemo
           ref={setLayoutRoot}
           Layout={Layout}
           model={model}
           Slot={Slot}
         />
-      </LayoutContext.Provider>
+      </LayoutContext>
       {tileTransitions((spring, { id, model, onDrag, width, height }) => (
         <TileWrapper
           key={id}

src/livekit/TrackProcessorContext.tsx

@@ -83,9 +83,5 @@ export const ProcessorProvider: FC<Props> = ({ children }) => {
     [supported, blurActivated, blur],
   );
 
-  return (
+  return <ProcessorContext value={processorState}>{children}</ProcessorContext>;
-    <ProcessorContext.Provider value={processorState}>
-      {children}
-    </ProcessorContext.Provider>
-  );
 };

src/reactions/useReactionsSender.tsx

@@ -157,7 +157,7 @@ export const ReactionsSenderProvider = ({
   );
 
   return (
-    <ReactionsSenderContext.Provider
+    <ReactionsSenderContext
       value={{
         supportsReactions,
         toggleRaisedHand,
@@ -165,6 +165,6 @@ export const ReactionsSenderProvider = ({
       }}
     >
       {children}
-    </ReactionsSenderContext.Provider>
+    </ReactionsSenderContext>
   );
 };

src/room/GroupCallView.test.tsx

@@ -149,7 +149,7 @@ function createGroupCallView(
   const { getByText } = render(
     <BrowserRouter>
       <TooltipProvider>
-        <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+        <MediaDevicesContext value={mockMediaDevices({})}>
           <ProcessorProvider>
             <GroupCallView
               client={client}
@@ -164,7 +164,7 @@ function createGroupCallView(
               widget={widget}
             />
           </ProcessorProvider>
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </TooltipProvider>
     </BrowserRouter>,
   );

src/room/InCallView.test.tsx

@@ -149,13 +149,13 @@ function createInCallView(): RenderResult & {
   rtcSession.joined = true;
   const renderResult = render(
     <BrowserRouter>
-      <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+      <MediaDevicesContext value={mockMediaDevices({})}>
         <ReactionsSenderProvider
           vm={vm}
           rtcSession={rtcSession as unknown as MatrixRTCSession}
         >
           <TooltipProvider>
-            <RoomContext.Provider value={livekitRoom}>
+            <RoomContext value={livekitRoom}>
               <InCallView
                 client={client}
                 hideHeader={true}
@@ -182,10 +182,10 @@ function createInCallView(): RenderResult & {
                 connState={ConnectionState.Connected}
                 onShareClick={null}
               />
-            </RoomContext.Provider>
+            </RoomContext>
           </TooltipProvider>
         </ReactionsSenderProvider>
-      </MediaDevicesContext.Provider>
+      </MediaDevicesContext>
     </BrowserRouter>,
   );
   return {

src/room/InCallView.tsx

@@ -172,7 +172,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   if (livekitRoom === undefined || vm === null) return null;
 
   return (
-    <RoomContext.Provider value={livekitRoom}>
+    <RoomContext value={livekitRoom}>
       <ReactionsSenderProvider vm={vm} rtcSession={props.rtcSession}>
         <InCallView
           {...props}
@@ -181,7 +181,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
           connState={connState}
         />
       </ReactionsSenderProvider>
-    </RoomContext.Provider>
+    </RoomContext>
   );
 };
 

src/room/MuteStates.test.tsx

@@ -124,14 +124,14 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider
+        <MediaDevicesContext
           value={mockMediaDevices({
             microphone: false,
             camera: false,
           })}
         >
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -143,9 +143,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("true");
@@ -159,9 +159,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent isJoined />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -178,9 +178,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -192,9 +192,9 @@ describe("useMuteStates", () => {
 
     render(
       <MemoryRouter initialEntries={["/room/?skipLobby=true"]}>
-        <MediaDevicesContext.Provider value={mockMediaDevices()}>
+        <MediaDevicesContext value={mockMediaDevices()}>
           <TestComponent />
-        </MediaDevicesContext.Provider>
+        </MediaDevicesContext>
       </MemoryRouter>,
     );
     expect(screen.getByTestId("audio-enabled").textContent).toBe("false");
@@ -224,13 +224,13 @@ describe("useMuteStates", () => {
 
       return (
         <MemoryRouter>
-          <MediaDevicesContext.Provider value={devices}>
+          <MediaDevicesContext value={devices}>
             <TestComponent />
             <button onClick={onConnectDevicesClick}>Connect devices</button>
             <button onClick={onDisconnectDevicesClick}>
               Disconnect devices
             </button>
-          </MediaDevicesContext.Provider>
+          </MediaDevicesContext>
         </MemoryRouter>
       );
     };

src/useAudioContext.test.tsx

@@ -105,9 +105,9 @@ afterEach(() => {
 
 test("can play a single sound", async () => {
   const { findByText } = render(
-    <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+    <MediaDevicesContext value={mockMediaDevices({})}>
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.createBufferSource).toHaveBeenCalledOnce();
@@ -115,9 +115,9 @@ test("can play a single sound", async () => {
 
 test("will ignore sounds that are not registered", async () => {
   const { findByText } = render(
-    <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+    <MediaDevicesContext value={mockMediaDevices({})}>
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Invalid sound"));
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
@@ -125,7 +125,7 @@ test("will ignore sounds that are not registered", async () => {
 
 test("will use the correct device", () => {
   render(
-    <MediaDevicesContext.Provider
+    <MediaDevicesContext
       value={mockMediaDevices({
         audioOutput: {
           available$: of(new Map<never, never>()),
@@ -135,7 +135,7 @@ test("will use the correct device", () => {
       })}
     >
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   expect(testAudioContext.createBufferSource).not.toHaveBeenCalled();
   expect(testAudioContext.setSinkId).toHaveBeenCalledWith("chosen-device");
@@ -144,9 +144,9 @@ test("will use the correct device", () => {
 test("will use the correct volume level", async () => {
   soundEffectVolumeSetting.setValue(0.33);
   const { findByText } = render(
-    <MediaDevicesContext.Provider value={mockMediaDevices({})}>
+    <MediaDevicesContext value={mockMediaDevices({})}>
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.gain.gain.setValueAtTime).toHaveBeenCalledWith(
@@ -158,7 +158,7 @@ test("will use the correct volume level", async () => {
 
 test("will use the pan if earpiece is selected", async () => {
   const { findByText } = render(
-    <MediaDevicesContext.Provider
+    <MediaDevicesContext
       value={mockMediaDevices({
         audioOutput: {
           available$: of(new Map<never, never>()),
@@ -168,7 +168,7 @@ test("will use the pan if earpiece is selected", async () => {
       })}
     >
       <TestComponentWrapper />
-    </MediaDevicesContext.Provider>,
+    </MediaDevicesContext>,
   );
   await user.click(await findByText("Valid sound"));
   expect(testAudioContext.pan.pan.setValueAtTime).toHaveBeenCalledWith(1, 0);