Add isCanvas into app host context

packages/toolpad-app/src/canvas/index.tsx

@@ -4,7 +4,8 @@ import { throttle } from 'lodash-es';
 import { CanvasEventsContext } from '@mui/toolpad-core/runtime';
 import { FlowDirection, SlotType } from '@mui/toolpad-core';
 import { update } from '@mui/toolpad-utils/immutability';
-import ToolpadApp, { IS_RENDERED_IN_CANVAS } from '../runtime/ToolpadApp';
+import { useNonNullableContext } from '@mui/toolpad-utils/react';
+import ToolpadApp from '../runtime/ToolpadApp';
 import { queryClient } from '../runtime/api';
 import { AppCanvasState, NodeInfo, PageViewState, SlotsState } from '../types';
 import {
@@ -14,6 +15,7 @@ import {
 } from '../utils/geometry';
 import { CanvasHooks, CanvasHooksContext } from '../runtime/CanvasHooksContext';
 import { ToolpadBridge, bridge, setCommandHandler } from './ToolpadBridge';
+import { AppHostContext } from '../runtime/AppHostContext';
 
 const handleScreenUpdate = throttle(
   () => {
@@ -80,7 +82,7 @@ export interface AppCanvasProps {
 
 export default function AppCanvas({ basename, state: initialState }: AppCanvasProps) {
   const [state, setState] = React.useState<AppCanvasState>(initialState);
-  const [readyBridge, setReadyBridge] = React.useState<ToolpadBridge>();
+  const [readyBridge, setReadyBridge] = React.useState<ToolpadBridge | undefined>();
 
   const appRootRef = React.useRef<HTMLDivElement>();
   const appRootCleanupRef = React.useRef<() => void>();
@@ -202,7 +204,9 @@ export default function AppCanvas({ basename, state: initialState }: AppCanvasPr
     };
   }, [savedNodes]);
 
-  if (IS_RENDERED_IN_CANVAS) {
+  const appHost = useNonNullableContext(AppHostContext);
+
+  if (appHost.isCanvas) {
     return readyBridge ? (
       <CanvasHooksContext.Provider value={editorHooks}>
         <CanvasEventsContext.Provider value={readyBridge.canvasEvents}>

packages/toolpad-app/src/runtime/AppHostContext.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 export interface AppHost {
   isPreview: boolean;
   isCustomServer: boolean;
+  isCanvas: boolean;
 }
 
 export const AppHostContext = React.createContext<AppHost | null>(null);

packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx

@@ -27,7 +27,7 @@ afterEach(cleanup);
 const waitFor: typeof waitForOrig = (waiter, options) =>
   waitForOrig(waiter, { timeout: 10000, ...options });
 
-const appHost: AppHost = { isPreview: false, isCustomServer: false };
+const appHost: AppHost = { isPreview: false, isCustomServer: false, isCanvas: false };
 
 function renderPage(
   initPage: (dom: appDom.AppDom, page: appDom.PageNode) => appDom.AppDom,

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -44,14 +44,14 @@ import { mapProperties, mapValues } from '@mui/toolpad-utils/collections';
 import { set as setObjectPath } from 'lodash-es';
 import { QueryClientProvider, useMutation } from '@tanstack/react-query';
 import {
-  BrowserRouter,
   Routes,
   Route,
   useLocation,
   Navigate,
   Location as RouterLocation,
   useNavigate,
   useMatch,
+  BrowserRouter,
 } from 'react-router-dom';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import {
@@ -99,11 +99,6 @@ import { AppHostContext } from './AppHostContext';
 
 const browserJsRuntime = getBrowserRuntime();
 
-export const IS_RENDERED_IN_CANVAS =
-  typeof window === 'undefined'
-    ? false
-    : !!(window.frameElement as HTMLIFrameElement)?.dataset?.toolpadCanvas;
-
 export type PageComponents = Partial<Record<string, React.ComponentType>>;
 
 export const componentsStore = createGlobalState<ToolpadComponents>({});
@@ -1484,6 +1479,8 @@ function RenderedPages({ pages, defaultPage }: RenderedPagesProps) {
 
   const defaultPageNavigation = <Navigate to={`/pages/${defaultPage.name}${search}`} replace />;
 
+  const appHost = useNonNullableContext(AppHostContext);
+
   return (
     <Routes>
       {pages.map((page) => {
@@ -1496,7 +1493,7 @@ function RenderedPages({ pages, defaultPage }: RenderedPagesProps) {
           />
         );
 
-        if (!IS_RENDERED_IN_CANVAS) {
+        if (!appHost.isCanvas) {
           pageContent = (
             <RequireAuthorization
               allowAll={page.attributes.authorization?.allowAll ?? true}
@@ -1583,16 +1580,18 @@ function ToolpadAppLayout({ dom, basename, clipped }: ToolpadAppLayoutProps) {
     [authFilteredPages],
   );
 
-  if (!IS_RENDERED_IN_CANVAS && !session?.user && hasAuthentication) {
+  const appHost = useNonNullableContext(AppHostContext);
+
+  if (!appHost.isCanvas && !session?.user && hasAuthentication) {
     return <AppLoading />;
   }
 
   return (
     <AppLayout
       activePageSlug={activePageSlug}
       pages={navEntries}
-      hasNavigation={!IS_RENDERED_IN_CANVAS}
-      hasHeader={hasAuthentication && !IS_RENDERED_IN_CANVAS}
+      hasNavigation={!appHost.isCanvas}
+      hasHeader={hasAuthentication && !appHost.isCanvas}
       clipped={clipped}
       basename={basename}
     >
@@ -1627,10 +1626,10 @@ export default function ToolpadApp({ rootRef, basename, state }: ToolpadAppProps
     (window as any).toggleDevtools = () => toggleDevtools();
   }, [toggleDevtools]);
 
-  const authContext = useAuth({ dom, basename, isRenderedInCanvas: IS_RENDERED_IN_CANVAS });
+  const authContext = useAuth({ dom, basename });
 
   const appHost = useNonNullableContext(AppHostContext);
-  const showPreviewHeader: boolean = !!appHost?.isPreview && !IS_RENDERED_IN_CANVAS;
+  const showPreviewHeader: boolean = !!appHost.isPreview && !appHost.isCanvas;
 
   return (
     <BrowserRouter basename={basename}>

packages/toolpad-app/src/runtime/index.tsx

@@ -13,10 +13,14 @@ import RuntimeToolpadApp, {
   pageComponentsStore,
 } from './ToolpadApp';
 import { RuntimeState } from './types';
-import { AppHostContext } from './AppHostContext';
+import { AppHost, AppHostContext } from './AppHostContext';
 
 const IS_PREVIEW = process.env.NODE_ENV !== 'production';
 const IS_CUSTOM_SERVER = process.env.TOOLPAD_CUSTOM_SERVER === 'true';
+const IS_RENDERED_IN_CANVAS =
+  typeof window === 'undefined'
+    ? false
+    : !!(window.frameElement as HTMLIFrameElement)?.dataset?.toolpadCanvas;
 
 const cache = createCache({
   key: 'css',
@@ -43,9 +47,10 @@ export interface RootProps {
   ToolpadApp: React.ComponentType<ToolpadAppProps>;
 }
 
-const appHost = {
+const appHost: AppHost = {
   isPreview: IS_PREVIEW,
   isCustomServer: IS_CUSTOM_SERVER,
+  isCanvas: IS_RENDERED_IN_CANVAS,
 };
 
 function Root({ ToolpadApp, initialState, base }: RootProps) {

packages/toolpad-app/src/runtime/useAuth.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as appDom from '@mui/toolpad-core/appDom';
+import { useNonNullableContext } from '@mui/toolpad-utils/react';
+import { AppHostContext } from './AppHostContext';
 
 const AUTH_API_PATH = '/api/auth';
 
@@ -46,10 +48,9 @@ export const AuthContext = React.createContext<AuthPayload>({
 interface UseAuthInput {
   dom: appDom.RenderTree;
   basename: string;
-  isRenderedInCanvas?: boolean;
 }
 
-export function useAuth({ dom, basename, isRenderedInCanvas = true }: UseAuthInput): AuthPayload {
+export function useAuth({ dom, basename }: UseAuthInput): AuthPayload {
   const authProviders = React.useMemo(() => {
     const app = appDom.getApp(dom);
     const authProviderConfigs = app.attributes.authentication?.providers ?? [];
@@ -157,11 +158,13 @@ export function useAuth({ dom, basename, isRenderedInCanvas = true }: UseAuthInp
     [basename, getCsrfToken, signOut],
   );
 
+  const appHost = useNonNullableContext(AppHostContext);
+
   React.useEffect(() => {
-    if (!isRenderedInCanvas && hasAuthentication) {
+    if (hasAuthentication && !appHost.isCanvas) {
       getSession();
     }
-  }, [getCsrfToken, getSession, hasAuthentication, isRenderedInCanvas]);
+  }, [getCsrfToken, getSession, hasAuthentication, appHost.isCanvas]);
 
   return {
     session,