Merge branch 'master' into add-user-to-context

Signed-off-by: Jan Potoms <[email protected]>

packages/toolpad-app/package.json

@@ -98,6 +98,7 @@
     "lodash-es": "4.17.21",
     "markdown-to-jsx": "7.4.1",
     "mime": "4.0.1",
+    "monaco-editor": "0.45.0",
     "mysql2": "3.9.1",
     "nanoid": "5.0.5",
     "node-fetch": "2.7.0",
@@ -158,7 +159,6 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "formidable": "3.5.1",
-    "monaco-editor": "0.45.0",
     "react-transition-group": "4.4.5",
     "webpack": "5.90.1"
   },

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

@@ -15,7 +15,9 @@ type Commands<T extends Record<string, Function>> = T & {
   [COMMAND_HANDLERS]: Partial<T>;
 };
 
-function createCommands<T extends Record<string, Function>>(initial: Partial<T> = {}): Commands<T> {
+export function createCommands<T extends Record<string, Function>>(
+  initial: Partial<T> = {},
+): Commands<T> {
   return new Proxy(
     {
       [COMMAND_HANDLERS]: initial,

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

@@ -5,17 +5,15 @@ import { CanvasEventsContext } from '@mui/toolpad-core/runtime';
 import { FlowDirection, SlotType } from '@mui/toolpad-core';
 import { update } from '@mui/toolpad-utils/immutability';
 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 {
   getRelativeBoundingRect,
   getRelativeOuterRect,
   rectContainsPoint,
 } from '../utils/geometry';
-import { CanvasHooks, CanvasHooksContext } from '../runtime/CanvasHooksContext';
 import { ToolpadBridge, bridge, setCommandHandler } from './ToolpadBridge';
-import { AppHostContext } from '../runtime/AppHostContext';
+import { AppHostContext, ToolpadApp, CanvasHooks, CanvasHooksContext } from '../runtime';
 
 const handleScreenUpdate = throttle(
   () => {
@@ -25,7 +23,7 @@ const handleScreenUpdate = throttle(
   { trailing: true },
 );
 
-function updateNodeInfo(nodeInfo: NodeInfo, rootElm: Element): NodeInfo {
+export function updateNodeInfo(nodeInfo: NodeInfo, rootElm: Element): NodeInfo {
   const nodeElm = rootElm.querySelector(`[data-toolpad-node-id="${nodeInfo.nodeId}"]`);
 
   if (!nodeElm) {

packages/toolpad-app/src/components/FlexFill.tsx

@@ -1,3 +1,6 @@
-import { styled } from '@mui/material';
+import { StyledComponent } from '@emotion/styled';
+import { styled, BoxProps } from '@mui/material';
 
-export default styled('div')({ flex: 1 });
+const FlexFill: StyledComponent<BoxProps> = styled('div')({ flex: 1 });
+
+export default FlexFill;

packages/toolpad-app/src/components/Pre.tsx

@@ -1,6 +1,9 @@
-import { styled } from '@mui/material';
+import { StyledComponent } from '@emotion/styled';
+import { styled, BoxProps } from '@mui/material';
 
-export default styled('pre')({
+const Pre: StyledComponent<BoxProps> = styled('pre')({
   margin: 0,
   fontFamily: 'Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
 });
+
+export default Pre;

packages/toolpad-app/src/components/resizablePanels.tsx

@@ -1,33 +1,38 @@
 import { styled } from '@mui/material';
-import { PanelResizeHandle as PanelResizeHandleOrig } from 'react-resizable-panels';
+import {
+  PanelResizeHandle as PanelResizeHandleOrig,
+  PanelResizeHandleProps,
+} from 'react-resizable-panels';
 
 export * from 'react-resizable-panels';
 
 const RESIZE_HANDLE_OFFSET = 3;
 
-export const PanelResizeHandle = styled(PanelResizeHandleOrig)(({ theme }) => ({
-  backgroundClip: 'padding-box',
-  zIndex: 1,
-  display: 'flex',
-  backgroundColor: theme.palette.divider,
-  borderStyle: 'solid',
-  borderColor: 'rgba(255, 255, 255, 0)',
-  '&:hover': {
-    borderColor: theme.palette.divider,
-  },
-  transition: 'all 250ms ease',
-  '&[data-panel-group-direction="horizontal"]': {
-    width: 2 * RESIZE_HANDLE_OFFSET + 1,
-    marginLeft: -RESIZE_HANDLE_OFFSET,
-    marginRight: -RESIZE_HANDLE_OFFSET,
-    borderLeftWidth: RESIZE_HANDLE_OFFSET,
-    borderRightWidth: RESIZE_HANDLE_OFFSET,
-  },
-  '&[data-panel-group-direction="vertical"]': {
-    height: 2 * RESIZE_HANDLE_OFFSET + 1,
-    marginTop: -RESIZE_HANDLE_OFFSET,
-    marginBottom: -RESIZE_HANDLE_OFFSET,
-    borderTopWidth: RESIZE_HANDLE_OFFSET,
-    borderBottomWidth: RESIZE_HANDLE_OFFSET,
-  },
-}));
+export const PanelResizeHandle: React.FC<PanelResizeHandleProps> = styled(PanelResizeHandleOrig)(
+  ({ theme }) => ({
+    backgroundClip: 'padding-box',
+    zIndex: 1,
+    display: 'flex',
+    backgroundColor: theme.palette.divider,
+    borderStyle: 'solid',
+    borderColor: 'rgba(255, 255, 255, 0)',
+    '&:hover': {
+      borderColor: theme.palette.divider,
+    },
+    transition: 'all 250ms ease',
+    '&[data-panel-group-direction="horizontal"]': {
+      width: 2 * RESIZE_HANDLE_OFFSET + 1,
+      marginLeft: -RESIZE_HANDLE_OFFSET,
+      marginRight: -RESIZE_HANDLE_OFFSET,
+      borderLeftWidth: RESIZE_HANDLE_OFFSET,
+      borderRightWidth: RESIZE_HANDLE_OFFSET,
+    },
+    '&[data-panel-group-direction="vertical"]': {
+      height: 2 * RESIZE_HANDLE_OFFSET + 1,
+      marginTop: -RESIZE_HANDLE_OFFSET,
+      marginBottom: -RESIZE_HANDLE_OFFSET,
+      borderTopWidth: RESIZE_HANDLE_OFFSET,
+      borderBottomWidth: RESIZE_HANDLE_OFFSET,
+    },
+  }),
+);

packages/toolpad-app/src/entrypoint.tsx

@@ -0,0 +1,82 @@
+import Button from '@mui/material/Button';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { ToolpadComponents } from '@mui/toolpad-core';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { Box } from '@mui/material';
+import { RuntimeState } from './runtime/types';
+import {
+  AppHost,
+  AppHostContext,
+  ToolpadApp as RuntimeToolpadApp,
+  ToolpadAppProps,
+  componentsStore,
+  pageComponentsStore,
+} from './runtime';
+
+const IS_PREVIEW = process.env.NODE_ENV !== 'production';
+const IS_CUSTOM_SERVER = process.env.TOOLPAD_CUSTOM_SERVER === 'true';
+
+const cache = createCache({
+  key: 'css',
+  prepend: true,
+});
+
+// See https://github.com/emotion-js/emotion/issues/1105#issuecomment-1058225197
+cache.compat = true;
+
+/**
+ * This allows us to hot update the components when a file is added/removed
+ */
+export function setComponents(
+  newComponents: ToolpadComponents,
+  pageComponents: Record<string, React.ComponentType>,
+) {
+  componentsStore.setState(newComponents);
+  pageComponentsStore.setState(pageComponents);
+}
+
+interface RootProps {
+  initialState: RuntimeState;
+  base: string;
+  ToolpadApp: React.ComponentType<ToolpadAppProps>;
+}
+
+const IS_RENDERED_IN_CANVAS =
+  typeof window === 'undefined'
+    ? false
+    : !!(window.frameElement as HTMLIFrameElement)?.dataset?.toolpadCanvas;
+
+const appHost: AppHost = {
+  isPreview: IS_PREVIEW,
+  isCustomServer: IS_CUSTOM_SERVER,
+  isCanvas: IS_RENDERED_IN_CANVAS,
+};
+
+function Root({ ToolpadApp, initialState, base }: RootProps) {
+  return (
+    <React.StrictMode>
+      <CacheProvider value={cache}>
+        {/* For some reason this helps with https://github.com/vitejs/vite/issues/12423 */}
+        <Button sx={{ display: 'none' }} />
+        <AppHostContext.Provider value={appHost}>
+          <ToolpadApp basename={base} state={initialState} />
+        </AppHostContext.Provider>
+        <Box data-testid="page-ready-marker" sx={{ display: 'none' }} />
+      </CacheProvider>
+    </React.StrictMode>
+  );
+}
+
+export interface InitParams {
+  initialState: RuntimeState;
+  base: string;
+  ToolpadApp?: React.ComponentType<ToolpadAppProps>;
+}
+
+export function init({ ToolpadApp = RuntimeToolpadApp, initialState, base }: InitParams) {
+  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <Root base={base} ToolpadApp={ToolpadApp} initialState={initialState} />,
+  );
+}

packages/toolpad-app/src/exports/editor.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import ToolpadEditor from '../toolpad/Toolpad';
+
+export default function ToolpadEditorVite({ basename }: { basename: string }) {
+  return <ToolpadEditor basename={`${basename}/editor`} appUrl={basename} />;
+}

packages/toolpad-app/src/exports/entrypoint.ts

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

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

@@ -1,5 +1,9 @@
 import * as React from 'react';
 
+export interface RouterProps {
+  children?: React.ReactNode;
+}
+
 export interface AppHost {
   isPreview: boolean;
   isCustomServer: boolean;

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

@@ -17,6 +17,7 @@ export interface CanvasHooks {
     componentConfig: ComponentConfig,
     elm: Element | undefined,
   ) => () => void;
+  overlayRef?: (elm: HTMLDivElement) => void;
 }
 
 export const CanvasHooksContext = React.createContext<CanvasHooks>({});