Wrap ConnectionScopeProvider in ConnectionsPlayersProvider if not present

Author: mkapal

README.md

@@ -877,7 +877,7 @@ If you needed to show personalised buttons for each connection or each human pla
 
 ### Connection scope
 
-You can show different buttons to each connection by wrapping a sub-tree in a `ConnectionScopeProvider` and using the `useConnectionScope` hook anywhere within that sub-tree to access the connection object.
+You can show different buttons to each connection by wrapping a sub-tree in a `ConnectionScopeProvider`, then using the `useConnectionScope` hook anywhere within that sub-tree to access the connection object.
 
 You don't need to specify the button's UCID in the scope - the correct UCID will be injected automatically.
 
@@ -909,7 +909,7 @@ function UserNameButton() {
 
 ### Human player scope
 
-You can show different buttons to each human player on track by wrapping a sub-tree in a `ConnectionScopeProvider` and `HumanPlayerScopeProvider`, then using the `useHumanPlayerScope` hook anywhere within that sub-tree to access the player object.
+You can show different buttons to each human player on track by wrapping a sub-tree in a `HumanPlayerScopeProvider`, then using the `useHumanPlayerScope` hook anywhere within that sub-tree to access the player object.
 
 You don't need to specify the button's UCID in the scope - the correct UCID will be injected automatically.
 
@@ -922,11 +922,9 @@ import {
 
 function App() {
   return (
-    <ConnectionScopeProvider>
-      <HumanPlayerScopeProvider>
-        <PlayerNameButton />
-      </HumanPlayerScopeProvider>
-    </ConnectionScopeProvider>
+    <HumanPlayerScopeProvider>
+      <PlayerNameButton />
+    </HumanPlayerScopeProvider>
   );
 }
 

src/lib/hooks/ConnectionsPlayersProvider.tsx

@@ -197,6 +197,11 @@ export function ConnectionsPlayersProvider({
   );
 }
 
+/** @internal */
+export function useConnectionsPlayersMaybeContext() {
+  return useContext(ConnectionsPlayersContext);
+}
+
 export function useConnections(): ReadonlyMap<number, Connection> & {
   map: <Item>(
     callback: (connection: Connection, key: number, map: Connection[]) => Item,

src/lib/scopes/connectionScope.tsx

@@ -2,11 +2,41 @@ import { createScope, molecule, use } from 'bunshi';
 import { ScopeProvider, useMolecule } from 'bunshi/react';
 import { atom, useAtomValue } from 'jotai';
 import { type ReactNode } from 'react';
-import { type Connection, useConnections } from 'react-node-insim';
+import {
+  type Connection,
+  ConnectionsPlayersProvider,
+  useConnections,
+} from 'react-node-insim';
+
+import { useConnectionsPlayersMaybeContext } from '../hooks/ConnectionsPlayersProvider';
 
 export const ConnectionScope = createScope<Connection | null>(null);
 
 export function ConnectionScopeProvider({ children }: { children: ReactNode }) {
+  const connectionsPlayersContext = useConnectionsPlayersMaybeContext();
+
+  if (!connectionsPlayersContext) {
+    return (
+      <ConnectionsPlayersProvider>
+        <ConnectionScopeProviderWithConnectionsPlayersProvider>
+          {children}
+        </ConnectionScopeProviderWithConnectionsPlayersProvider>
+      </ConnectionsPlayersProvider>
+    );
+  }
+
+  return (
+    <ConnectionScopeProviderWithConnectionsPlayersProvider>
+      {children}
+    </ConnectionScopeProviderWithConnectionsPlayersProvider>
+  );
+}
+
+export function ConnectionScopeProviderWithConnectionsPlayersProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
   const connections = useConnections();
 
   return (

src/lib/scopes/humanPlayerScope.tsx

@@ -4,15 +4,43 @@ import { atom, useAtomValue } from 'jotai';
 import { PlayerType } from 'node-insim/packets';
 import { type ReactNode } from 'react';
 import type { Player } from 'react-node-insim';
-import { useConnectionScope } from 'react-node-insim';
-import { usePlayers } from 'react-node-insim';
+import {
+  ConnectionScopeProvider,
+  useConnectionMaybeScope,
+  useConnectionScope,
+  usePlayers,
+} from 'react-node-insim';
 
 export const HumanPlayerScope = createScope<Player | null>(null);
 
 export function HumanPlayerScopeProvider({
   children,
 }: {
   children: ReactNode;
+}) {
+  const connection = useConnectionMaybeScope();
+
+  if (!connection) {
+    return (
+      <ConnectionScopeProvider>
+        <HumanPlayerScopeProviderInConnectionScope>
+          {children}
+        </HumanPlayerScopeProviderInConnectionScope>
+      </ConnectionScopeProvider>
+    );
+  }
+
+  return (
+    <HumanPlayerScopeProviderInConnectionScope>
+      {children}
+    </HumanPlayerScopeProviderInConnectionScope>
+  );
+}
+
+function HumanPlayerScopeProviderInConnectionScope({
+  children,
+}: {
+  children: ReactNode;
 }) {
   const connection = useConnectionScope();
   const players = usePlayers();