New canvas bridge implementation

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

@@ -0,0 +1,90 @@
+import type { RuntimeEvents } from '@mui/toolpad-core';
+import mitt, { Emitter } from 'mitt';
+import type { AppCanvasState } from '.';
+import type { PageViewState } from '../types';
+
+export const TOOLPAD_BRIDGE_GLOBAL = '__TOOLPAD_BRIDGE__';
+
+declare global {
+ interface Window {
+ [TOOLPAD_BRIDGE_GLOBAL]?: ToolpadBridge;
+ }
+}
+
+const COMMAND_HANDLERS = Symbol('hidden property to hold the command handlers');
+
+type Commands<T extends Record<string, Function>> = T & {
+ [COMMAND_HANDLERS]: Partial<T>;
+};
+
+function createCommands<T extends Record<string, Function>>(initial: Partial<T> = {}): Commands<T> {
+ return new Proxy(
+ {
+ [COMMAND_HANDLERS]: initial,
+ },
+ {
+ get(target, prop, receiver) {
+ if (typeof prop !== 'string') {
+ return Reflect.get(target, prop, receiver);
+ }
+
+ return (...args: any[]): any => {
+ const handler = target[COMMAND_HANDLERS][prop];
+ if (typeof handler !== 'function') {
+ throw new Error(`Command "${prop}" not recognized.`);
+ }
+ return handler(...args);
+ };
+ },
+ },
+ ) as Commands<T>;
+}
+
+export function setCommandHandler<T extends Record<string, Function>, K extends keyof T & string>(
+ commands: Commands<T>,
+ name: K,
+ handler: T[K],
+) {
+ if (typeof commands[COMMAND_HANDLERS][name] !== 'undefined') {
+ throw new Error(`"${name}" is already handled`);
+ }
+ commands[COMMAND_HANDLERS][name] = handler;
+ return () => {
+ delete commands[COMMAND_HANDLERS][name];
+ };
+}
+
+// Interface to communicate between editor and canvas
+export interface ToolpadBridge {
+ // Events fired in the editor, listened in the canvas
+ editorEvents: Emitter<{}>;
+ // Commands executed from the canvas, ran in the editor
+ editorCommands: Commands<{}>;
+ // Events fired in the canvas, listened in the editor
+ canvasEvents: Emitter<RuntimeEvents>;
+ // Commands executed from the editor, ran in the canvas
+ canvasCommands: Commands<{
+ update(updates: AppCanvasState): void;
+ getViewCoordinates(clientX: number, clientY: number): { x: number; y: number } | null;
+ getPageViewState(): PageViewState;
+ isReady(): boolean;
+ }>;
+}
+
+let canvasIsReady = false;
+export const bridge: ToolpadBridge = {
+ editorEvents: mitt(),
+ editorCommands: createCommands(),
+ canvasEvents: mitt(),
+ canvasCommands: createCommands({
+ isReady: () => canvasIsReady,
+ }),
+} as ToolpadBridge;
+
+bridge.canvasEvents.on('ready', () => {
+ canvasIsReady = true;
+});
+
+if (typeof window !== 'undefined') {
+ window[TOOLPAD_BRIDGE_GLOBAL] = bridge;
+}

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

@@ -1,34 +1,25 @@
 import * as React from 'react';
-import { fireEvent, setEventHandler } from '@mui/toolpad-core/runtime';
 import invariant from 'invariant';
 import { throttle } from 'lodash-es';
-import { RuntimeEvent } from '@mui/toolpad-core';
+import { CanvasEventsContext } from '@mui/toolpad-core/runtime';
 import ToolpadApp from '../runtime';
-import { NodeHashes, PageViewState, RuntimeState } from '../types';
+import { NodeHashes, RuntimeState } from '../types';
 import getPageViewState from './getPageViewState';
 import { rectContainsPoint } from '../utils/geometry';
 import { CanvasHooks, CanvasHooksContext } from '../runtime/CanvasHooksContext';
+import { bridge, setCommandHandler } from './ToolpadBridge';
 
 export interface AppCanvasState extends RuntimeState {
  savedNodes: NodeHashes;
 }
 
-export interface ToolpadBridge {
- onRuntimeEvent(handler: (event: RuntimeEvent) => void): void;
- update(updates: AppCanvasState): void;
- getViewCoordinates(clientX: number, clientY: number): { x: number; y: number } | null;
- getPageViewState(): PageViewState;
-}
-
-declare global {
- interface Window {
- __TOOLPAD_BRIDGE__?: ToolpadBridge | ((bridge: ToolpadBridge) => void) | 'consumed';
- }
-}
-
-const handleScreenUpdate = throttle(() => fireEvent({ type: 'screenUpdate' }), 50, {
- trailing: true,
-});
+const handleScreenUpdate = throttle(
+ () => {
+ bridge.canvasEvents.emit('screenUpdate', {});
+ },
+ 50,
+ { trailing: true },
+);
 
 export interface AppCanvasProps {
  basename: string;
@@ -87,14 +78,19 @@ export default function AppCanvas({ basename }: AppCanvasProps) {
  });
 
  React.useEffect(() => {
- const bridge: ToolpadBridge = {
- onRuntimeEvent: (handler) => setEventHandler(window, handler),
- update: (newState) => React.startTransition(() => setState(newState)),
- getPageViewState: () => {
+ const unsetGetPageViewState = setCommandHandler(
+ bridge.canvasCommands,
+ 'getPageViewState',
+ () => {
  invariant(appRootRef.current, 'App ref not attached');
  return getPageViewState(appRootRef.current);
  },
- getViewCoordinates(clientX, clientY) {
+ );
+
+ const unsetGetViewCoordinates = setCommandHandler(
+ bridge.canvasCommands,
+ 'getViewCoordinates',
+ (clientX, clientY) => {
  if (!appRootRef.current) {
  return null;
  }
@@ -104,44 +100,42 @@ export default function AppCanvas({ basename }: AppCanvasProps) {
  }
  return null;
  },
- };
+ );
 
- // eslint-disable-next-line no-underscore-dangle
- if (typeof window.__TOOLPAD_BRIDGE__ === 'function') {
- // eslint-disable-next-line no-underscore-dangle
- window.__TOOLPAD_BRIDGE__(bridge);
- // eslint-disable-next-line no-underscore-dangle
- window.__TOOLPAD_BRIDGE__ = 'consumed';
- // eslint-disable-next-line no-underscore-dangle
- } else if (typeof window.__TOOLPAD_BRIDGE__ === 'undefined') {
- // eslint-disable-next-line no-underscore-dangle
- window.__TOOLPAD_BRIDGE__ = bridge;
- }
+ const unsetUpdate = setCommandHandler(bridge.canvasCommands, 'update', (newState) => {
+ React.startTransition(() => setState(newState));
+ });
+
+ bridge.canvasEvents.emit('ready', {});
 
- return () => {};
+ return () => {
+ unsetGetPageViewState();
+ unsetGetViewCoordinates();
+ unsetUpdate();
+ };
  }, []);
 
  const savedNodes = state?.savedNodes;
  const editorHooks: CanvasHooks = React.useMemo(() => {
  return {
  savedNodes,
  navigateToPage(pageNodeId) {
- fireEvent({ type: 'pageNavigationRequest', pageNodeId });
+ bridge.canvasEvents.emit('pageNavigationRequest', { pageNodeId });
  },
  };
  }, [savedNodes]);
 
  return state ? (
  <CanvasHooksContext.Provider value={editorHooks}>
- <ToolpadApp
- rootRef={onAppRoot}
- hidePreviewBanner
- version="preview"
- basename={`${basename}/${state.appId}`}
- state={state}
- />
+ <CanvasEventsContext.Provider value={bridge.canvasEvents}>
+ <ToolpadApp
+ rootRef={onAppRoot}
+ hidePreviewBanner
+ version="preview"
+ basename={`${basename}/${state.appId}`}
+ state={state}
+ />
+ </CanvasEventsContext.Provider>
  </CanvasHooksContext.Provider>
- ) : (
- <div>loading...</div>
- );
+ ) : null;
 }

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { render, waitFor as waitForOrig, screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { LiveBindings } from '@mui/toolpad-core';
-import { setEventHandler } from '@mui/toolpad-core/runtime';
+import { LiveBindings, RuntimeEvents } from '@mui/toolpad-core';
 import ToolpadApp from './ToolpadApp';
 import * as appDom from '../appDom';
 import createRuntimeState from '../createRuntimeState';
+import { bridge } from '../canvas/ToolpadBridge';
 
 // More sensible default for these tests
 const waitFor: typeof waitForOrig = (waiter, options) =>
@@ -34,12 +34,6 @@ function renderPage(initPage: (dom: appDom.AppDom, page: appDom.PageNode) => app
  return render(<ToolpadApp state={state} version={version} basename="toolpad" />);
 }
 
-afterEach(() => {
- // Make sure to clean up events after each test
- const cleanup = setEventHandler(window, () => {});
- cleanup();
-});
-
 test(`Static Text`, async () => {
  renderPage((dom, page) => {
  const text = appDom.createNode(dom, 'element', {
@@ -131,11 +125,10 @@ test(`Databinding errors`, async () => {
  const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
  let bindings: LiveBindings | undefined;
 
- const cleanup = setEventHandler(window, (event) => {
- if (event.type === 'pageBindingsUpdated') {
- bindings = event.bindings;
- }
- });
+ const bindingsUpdateHandler = (event: RuntimeEvents['pageBindingsUpdated']) => {
+ bindings = event.bindings;
+ };
+ bridge.canvasEvents.on('pageBindingsUpdated', bindingsUpdateHandler);
 
  try {
  let nonExisting: appDom.ElementNode;
@@ -203,7 +196,7 @@ test(`Databinding errors`, async () => {
 
  expect(consoleErrorMock).toHaveBeenCalled();
  } finally {
- cleanup();
+ bridge.canvasEvents.off('pageBindingsUpdated', bindingsUpdateHandler);
  consoleErrorMock.mockRestore();
  }
 });

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

@@ -34,7 +34,6 @@ import {
 } from 'react-router-dom';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import {
- fireEvent,
  NodeErrorProps,
  NodeRuntimeWrapper,
  ResetNodeErrorsKeyProvider,
@@ -54,6 +53,7 @@ import AppThemeProvider from './AppThemeProvider';
 import evalJsBindings, {
  BindingEvaluationResult,
  buildGlobalScope,
+ EvaluatedBinding,
  evaluateExpression,
  ParsedBinding,
 } from './evalJsBindings';
@@ -70,6 +70,7 @@ import { useAppContext, AppContextProvider } from './AppContext';
 import { CanvasHooksContext, NavigateToPage } from './CanvasHooksContext';
 import useBoolean from '../utils/useBoolean';
 import { errorFrom } from '../utils/errors';
+import { bridge } from '../canvas/ToolpadBridge';
 
 const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/lib/index.prod.js').then((d) => ({
@@ -588,7 +589,10 @@ interface ParseBindingOptions {
  scopePath?: string;
 }
 
-function parseBinding(bindable: BindableAttrValue<any>, { scopePath }: ParseBindingOptions = {}) {
+function parseBinding(
+ bindable: BindableAttrValue<any>,
+ { scopePath }: ParseBindingOptions = {},
+): ParsedBinding | EvaluatedBinding {
  if (bindable?.type === 'const') {
  return {
  scopePath,
@@ -615,7 +619,7 @@ function parseBindings(
 ) {
  const elements = appDom.getDescendants(dom, page);
 
- const parsedBindingsMap = new Map<string, ParsedBinding>();
+ const parsedBindingsMap = new Map<string, ParsedBinding | EvaluatedBinding>();
  const controlled = new Set<string>();
  const globalScopeMeta: GlobalScopeMeta = {};
 
@@ -749,7 +753,8 @@ function parseBindings(
  });
  }
 
- const parsedBindings: Record<string, ParsedBinding> = Object.fromEntries(parsedBindingsMap);
+ const parsedBindings: Record<string, ParsedBinding | EvaluatedBinding> =
+ Object.fromEntries(parsedBindingsMap);
 
  return { parsedBindings, controlled, globalScopeMeta };
 }
@@ -770,7 +775,7 @@ function RenderedPage({ nodeId }: RenderedNodeProps) {
  );
 
  const [pageBindings, setPageBindings] =
- React.useState<Record<string, ParsedBinding>>(parsedBindings);
+ React.useState<Record<string, ParsedBinding | EvaluatedBinding>>(parsedBindings);
 
  const prevDom = React.useRef(dom);
  React.useEffect(() => {
@@ -784,7 +789,7 @@ function RenderedPage({ nodeId }: RenderedNodeProps) {
 
  setPageBindings((existingBindings) => {
  // Make sure to patch page bindings after dom nodes have been added or removed
- const updated: Record<string, ParsedBinding> = {};
+ const updated: Record<string, ParsedBinding | EvaluatedBinding> = {};
  for (const [key, binding] of Object.entries(parsedBindings)) {
  updated[key] = controlled.has(key) ? existingBindings[key] || binding : binding;
  }
@@ -794,8 +799,8 @@ function RenderedPage({ nodeId }: RenderedNodeProps) {
 
  const setControlledBinding = React.useCallback(
  (id: string, result: BindingEvaluationResult) => {
- const parsedBinding = parsedBindings[id];
- setPageBindings((existing) => {
+ const { expression, initializer, ...parsedBinding } = parsedBindings[id];
+ setPageBindings((existing): Record<string, ParsedBinding | EvaluatedBinding> => {
  if (!controlled.has(id)) {
  throw new Error(`Not a controlled binding "${id}"`);
  }
@@ -833,11 +838,11 @@ function RenderedPage({ nodeId }: RenderedNodeProps) {
  );
 
  React.useEffect(() => {
- fireEvent({ type: 'pageStateUpdated', pageState, globalScopeMeta });
+ bridge.canvasEvents.emit('pageStateUpdated', { pageState, globalScopeMeta });
  }, [pageState, globalScopeMeta]);
 
  React.useEffect(() => {
- fireEvent({ type: 'pageBindingsUpdated', bindings: liveBindings });
+ bridge.canvasEvents.emit('pageBindingsUpdated', { bindings: liveBindings });
  }, [liveBindings]);
 
  return (