Move App dom to Toolpad core (#3116)

.eslintrc.js

@@ -89,11 +89,7 @@ module.exports = {
             // Don't leak the internal runtime abstraction. It's on its way to be moved towards a separate package
             target: './packages/toolpad-app/src/runtime',
             from: './packages/toolpad-app/src/',
-            except: [
-              './runtime',
-              // TODO: move ./src/appDom to ./src/runtime/appDom
-              './appDom',
-            ],
+            except: ['./runtime'],
           },
         ],
       },

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

@@ -3,6 +3,7 @@ import invariant from 'invariant';
 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 { queryClient } from '../runtime/api';
 import { AppCanvasState, NodeInfo, PageViewState, SlotsState } from '../types';
@@ -13,7 +14,6 @@ import {
 } from '../utils/geometry';
 import { CanvasHooks, CanvasHooksContext } from '../runtime/CanvasHooksContext';
 import { ToolpadBridge, bridge, setCommandHandler } from './ToolpadBridge';
-import { update } from '../utils/immutability';
 
 const handleScreenUpdate = throttle(
   () => {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createTheme, Theme, ThemeProvider, ThemeOptions } from '@mui/material';
 import { deepmerge } from '@mui/utils';
-import * as appDom from '../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 
 declare module '@mui/material/styles' {
   interface Theme {

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

@@ -1,6 +1,6 @@
 import { ComponentConfig, NodeHashes } from '@mui/toolpad-core';
 import * as React from 'react';
-import * as appDom from '../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 
 export interface NavigateToPage {
   (name: string, pageParameters?: Record<string, string>): void;

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

@@ -16,7 +16,7 @@ import { LiveBindings, RuntimeEvents } from '@mui/toolpad-core';
 import { CanvasEventsContext } from '@mui/toolpad-core/runtime';
 import { Emitter } from '@mui/toolpad-utils/events';
 import { test, expect, afterEach } from 'vitest';
-import * as appDom from '../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import createRuntimeState from './createRuntimeState';
 import ToolpadApp from './ToolpadApp';
 

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

@@ -68,7 +68,7 @@ import useBoolean from '@mui/toolpad-utils/hooks/useBoolean';
 import usePageTitle from '@mui/toolpad-utils/hooks/usePageTitle';
 import invariant from 'invariant';
 import useEventCallback from '@mui/utils/useEventCallback';
-import * as appDom from '../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { RuntimeState } from './types';
 import { getBindingType, getBindingValue } from './bindings';
 import {

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

@@ -1,4 +1,4 @@
-import * as appDom from '../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { RuntimeState } from './types';
 
 export interface CreateRuntimeStateParams {

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

@@ -1,4 +1,4 @@
-import * as appDom from '../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 
 export const PAGE_ROW_COMPONENT_ID = 'PageRow';
 export const PAGE_COLUMN_COMPONENT_ID = 'PageColumn';

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

@@ -1,4 +1,4 @@
-import type * as appDom from '../appDom';
+import type * as appDom from '@mui/toolpad-core/appDom';
 
 /**
  * Defines all the data needed to render the runtime.

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as appDom from '../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 
 const AUTH_API_PATH = '/api/auth';
 

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

@@ -3,8 +3,8 @@
 import { GridRowsProp } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { CanvasHooksContext } from './CanvasHooksContext';
-import * as appDom from '../appDom';
 import api from './api';
 
 export type UseDataQueryConfig = Pick<

packages/toolpad-app/src/server/DataManager.ts

@@ -5,9 +5,9 @@ import express, { Router } from 'express';
 import cors from 'cors';
 import invariant from 'invariant';
 import { errorFrom, serializeError, SerializedError } from '@mui/toolpad-utils/errors';
+import * as appDom from '@mui/toolpad-core/appDom';
 import type { RuntimeConfig, Methods, ServerDataSource, ToolpadProjectOptions } from '../types';
 import serverDataSources from '../toolpadDataSources/server';
-import * as appDom from '../appDom';
 import applyTransform from '../toolpadDataSources/applyTransform';
 import { asyncHandler } from '../utils/express';
 import type FunctionsManager from './FunctionsManager';

packages/toolpad-app/src/server/appServerWorker.ts

@@ -2,9 +2,9 @@ import { parentPort, workerData, MessagePort } from 'worker_threads';
 import invariant from 'invariant';
 import type { Plugin } from 'vite';
 import { createRpcClient } from '@mui/toolpad-utils/workerRpc';
+import type * as appDom from '@mui/toolpad-core/appDom';
 import { getHtmlContent, createViteConfig } from './toolpadAppBuilder';
 import type { RuntimeConfig } from '../types';
-import type * as appDom from '../appDom';
 import type { ComponentEntry, PagesManifest } from './localMode';
 import createRuntimeState from '../runtime/createRuntimeState';
 import { postProcessHtml } from './toolpadAppServer';

packages/toolpad-app/src/server/auth.ts

@@ -5,10 +5,10 @@ import GoogleProvider from '@auth/core/providers/google';
 import { getToken } from '@auth/core/jwt';
 import { AuthConfig, TokenSet } from '@auth/core/types';
 import { OAuthConfig } from '@auth/core/providers';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { asyncHandler } from '../utils/express';
 import { adaptRequestFromExpressToFetch } from './httpApiAdapters';
 import { ToolpadProject } from './localMode';
-import * as appDom from '../appDom';
 
 export function createAuthHandler(project: ToolpadProject): Router {
   const { base } = project.options;

packages/toolpad-app/src/server/localMode.ts

@@ -5,7 +5,7 @@ import * as yaml from 'yaml';
 import invariant from 'invariant';
 import openEditor from 'open-editor';
 import chalk from 'chalk';
-import { BindableAttrValue, PropBindableAttrValue } from '@mui/toolpad-core';
+import { BindableAttrValue, EnvAttrValue, PropBindableAttrValue } from '@mui/toolpad-core';
 import { fromZodError } from 'zod-validation-error';
 import { glob } from 'glob';
 import * as chokidar from 'chokidar';
@@ -25,7 +25,7 @@ import {
 } from '@mui/toolpad-utils/fs';
 import { z } from 'zod';
 import { Awaitable } from '@mui/toolpad-utils/types';
-import * as appDom from '../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import insecureHash from '../utils/insecureHash';
 import {
   Page,
@@ -44,6 +44,7 @@ import {
   API_VERSION,
   applicationSchema,
   Application,
+  envBindingSchema,
 } from './schema';
 import { format, resolvePrettierConfig } from '../utils/prettier';
 import {
@@ -939,6 +940,30 @@ async function calculateDomFingerprint(root: string): Promise<number> {
   return insecureHash(JSON.stringify(mtimes));
 }
 
+function findEnvBindings(obj: unknown): EnvAttrValue[] {
+  if (Array.isArray(obj)) {
+    return obj.flatMap((item) => findEnvBindings(item));
+  }
+
+  if (obj && typeof obj === 'object') {
+    try {
+      return [envBindingSchema.parse(obj)];
+    } catch {
+      return Object.values(obj).flatMap((value) => findEnvBindings(value));
+    }
+  }
+
+  return [];
+}
+
+export function getRequiredEnvVars(dom: appDom.AppDom): Set<string> {
+  const allVars = Object.values(dom.nodes)
+    .flatMap((node) => findEnvBindings(node))
+    .map((binding) => binding.$$env);
+
+  return new Set(allVars);
+}
+
 class ToolpadProject {
   private root: string;
 
@@ -1095,7 +1120,7 @@ class ToolpadProject {
   }
 
   alertOnMissingVariablesInDom(dom: appDom.AppDom) {
-    const requiredVars = appDom.getRequiredEnvVars(dom);
+    const requiredVars = getRequiredEnvVars(dom);
     const missingVars = Array.from(requiredVars).filter(
       (key) => typeof process.env[key] === 'undefined',
     );

packages/toolpad-app/src/server/toolpadAppBuilder.ts

@@ -3,9 +3,9 @@ import * as url from 'node:url';
 import type { InlineConfig, Plugin } from 'vite';
 import react from '@vitejs/plugin-react';
 import { indent } from '@mui/toolpad-utils/strings';
+import * as appDom from '@mui/toolpad-core/appDom';
 import type { ComponentEntry, PagesManifest } from './localMode';
 import { INITIAL_STATE_WINDOW_PROPERTY } from '../constants';
-import * as appDom from '../appDom';
 import { pathToNodeImportSpecifier } from '../utils/paths';
 import viteVirtualPlugin, { VirtualFileContent, replaceFiles } from './viteVirtualPlugin';
 

packages/toolpad-app/src/toolpad/AppEditor/AppAuthorizationEditor.tsx

@@ -36,11 +36,10 @@ import {
 import GitHubIcon from '@mui/icons-material/GitHub';
 import GoogleIcon from '@mui/icons-material/Google';
 import { TabContext, TabList } from '@mui/lab';
+import { updateArray } from '@mui/toolpad-utils/immutability';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { useAppState, useAppStateApi } from '../AppState';
-import * as appDom from '../../appDom';
 import TabPanel from '../../components/TabPanel';
-import { AuthProviderConfig, AuthProvider } from '../../types';
-import { updateArray } from '../../utils/immutability';
 
 const AUTH_PROVIDERS = new Map([
   ['github', { name: 'GitHub', Icon: GitHubIcon }],
@@ -52,7 +51,7 @@ export function AppAuthenticationEditor() {
   const appState = useAppStateApi();
 
   const handleAuthProvidersChange = React.useCallback(
-    (event: SelectChangeEvent<AuthProvider[]>) => {
+    (event: SelectChangeEvent<appDom.AuthProvider[]>) => {
       const {
         target: { value: providers },
       } = event;
@@ -63,7 +62,7 @@ export function AppAuthenticationEditor() {
         draft = appDom.setNodeNamespacedProp(draft, app, 'attributes', 'authentication', {
           ...app.attributes?.authentication,
           providers: (typeof providers === 'string' ? providers.split(',') : providers).map(
-            (provider) => ({ provider }) as AuthProviderConfig,
+            (provider) => ({ provider }) as appDom.AuthProviderConfig,
           ),
         });
 
@@ -114,7 +113,7 @@ export function AppAuthenticationEditor() {
       </Typography>
       <FormControl>
         <InputLabel id="auth-providers-label">Authentication providers</InputLabel>
-        <Select<AuthProvider[]>
+        <Select<appDom.AuthProvider[]>
           labelId="auth-providers-label"
           label="Authentication providers"
           id="auth-providers"
@@ -131,7 +130,7 @@ export function AppAuthenticationEditor() {
           {[...AUTH_PROVIDERS].map(([value, { name, Icon }]) => (
             <MenuItem key={value} value={value}>
               <Stack direction="row" alignItems="center">
-                <Checkbox checked={authProviders.indexOf(value as AuthProvider) > -1} />
+                <Checkbox checked={authProviders.indexOf(value as appDom.AuthProvider) > -1} />
                 <Icon fontSize="small" />
                 <Typography ml={1}>{name}</Typography>
               </Stack>

packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx

@@ -39,6 +39,7 @@ import useDebounced from '@mui/toolpad-utils/hooks/useDebounced';
 import { errorFrom } from '@mui/toolpad-utils/errors';
 import useLatest from '@mui/toolpad-utils/hooks/useLatest';
 import { WithControlledProp, Maybe } from '@mui/toolpad-utils/types';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { JsExpressionEditor } from './PageEditor/JsExpressionEditor';
 import JsonView from '../../components/JsonView';
 import { useEvaluateLiveBinding } from './useEvaluateLiveBinding';
@@ -51,7 +52,6 @@ import useUnsavedChangesConfirm from '../hooks/useUnsavedChangesConfirm';
 import TabPanel from '../../components/TabPanel';
 
 import { useAppState } from '../AppState';
-import * as appDom from '../../appDom';
 import { getBindingType, getBindingValue } from '../../runtime/bindings';
 
 import { useProjectApi } from '../../projectApi';

packages/toolpad-app/src/toolpad/AppEditor/ConnectionEditor/index.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { Box, Container, Stack, Typography } from '@mui/material';
 import { NodeId } from '@mui/toolpad-core';
 import invariant from 'invariant';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { ConnectionEditorProps, ClientDataSource } from '../../../types';
 import { useAppState, useDomApi } from '../../AppState';
-import * as appDom from '../../../appDom';
 import dataSources from '../../../toolpadDataSources/client';
 import { ConnectionContextProvider } from '../../../toolpadDataSources/context';
 import NodeNameEditor from '../NodeNameEditor';

packages/toolpad-app/src/toolpad/AppEditor/ElementContext.tsx

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import * as appDom from '../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 
 export default React.createContext<appDom.ElementNode | undefined>(undefined);

packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx

@@ -4,7 +4,7 @@ import { Box, Typography } from '@mui/material';
 import { TreeView, TreeItem, TreeItemProps } from '@mui/x-tree-view';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import * as appDom from '../../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { useAppState, useDomApi, useAppStateApi } from '../../AppState';
 import { ComponentIcon } from '../PageEditor/ComponentCatalog/ComponentCatalogItem';
 import { DomView } from '../../../utils/domView';

packages/toolpad-app/src/toolpad/AppEditor/NodeMenu.tsx

@@ -5,7 +5,7 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import ModeEditIcon from '@mui/icons-material/ModeEdit';
 import { NodeId } from '@mui/toolpad-core';
 import useLatest from '@mui/toolpad-utils/hooks/useLatest';
-import * as appDom from '../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { useAppState } from '../AppState';
 import { ConfirmDialog } from '../../components/SystemDialogs';
 import useMenu from '../../utils/useMenu';

packages/toolpad-app/src/toolpad/AppEditor/NodeNameEditor.tsx

@@ -1,6 +1,6 @@
 import { SxProps, TextField } from '@mui/material';
 import * as React from 'react';
-import * as appDom from '../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { useAppState, useDomApi } from '../AppState';
 import { useNodeNameValidation } from './PagesExplorer/validation';
 import { useProjectApi } from '../../projectApi';

packages/toolpad-app/src/toolpad/AppEditor/PageDisplayNameEditor.tsx

@@ -1,7 +1,7 @@
 import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
 import * as React from 'react';
 import ResetIcon from '@mui/icons-material/RestartAlt';
-import * as appDom from '../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { useDomApi } from '../AppState';
 
 interface PageDisplayNameEditorProps {

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx

@@ -16,9 +16,9 @@ import invariant from 'invariant';
 import InputAdornment from '@mui/material/InputAdornment';
 import AccountCircle from '@mui/icons-material/Search';
 import { uncapitalize } from '@mui/toolpad-utils/strings';
+import * as appDom from '@mui/toolpad-core/appDom';
 import ComponentCatalogItem from './ComponentCatalogItem';
 import CreateCodeComponentNodeDialog from '../../PagesExplorer/CreateCodeComponentNodeDialog';
-import * as appDom from '../../../../appDom';
 import { useAppState } from '../../../AppState';
 import { usePageEditorApi } from '../PageEditorProvider';
 import { useToolpadComponents } from '../../toolpadComponents';

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx

@@ -10,7 +10,7 @@ import {
   LiveBinding,
 } from '@mui/toolpad-core';
 import { ExactEntriesOf } from '@mui/toolpad-utils/types';
-import * as appDom from '../../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import NodeAttributeEditor from './NodeAttributeEditor';
 import { usePageEditorState } from './PageEditorProvider';
 import { useToolpadComponent } from '../toolpadComponents';

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentPanel.tsx

@@ -1,12 +1,12 @@
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import { Tab, Box, styled, Typography, Link } from '@mui/material';
 import * as React from 'react';
+import * as appDom from '@mui/toolpad-core/appDom';
 import PageOptionsPanel from './PageOptionsPanel';
 import ComponentEditor from './ComponentEditor';
 import ThemeEditor from './ThemeEditor';
 import { useAppState, useAppStateApi } from '../../AppState';
 import { PageViewTab } from '../../../utils/domView';
-import * as appDom from '../../../appDom';
 
 const classes = {
   panel: 'Toolpad_Panel',

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ConnectionSelect.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { NodeId } from '@mui/toolpad-core';
 import { asArray } from '@mui/toolpad-utils/collections';
 import { Maybe, WithControlledProp } from '@mui/toolpad-utils/types';
-import * as appDom from '../../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { useAppState } from '../../AppState';
 import dataSources from '../../../toolpadDataSources/client';
 

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx

@@ -8,7 +8,7 @@ import {
 } from '@mui/toolpad-core';
 import { Alert, Box, SxProps } from '@mui/material';
 import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime';
-import * as appDom from '../../../appDom';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { useDomApi } from '../../AppState';
 import BindableEditor from './BindableEditor';
 import { usePageEditorState } from './PageEditorProvider';

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageEditorProvider.tsx

@@ -1,9 +1,9 @@
 import { NodeId, LiveBindings, ScopeMeta, ApplicationVm } from '@mui/toolpad-core';
 import * as React from 'react';
-import * as appDom from '../../../appDom';
+import { update, updateOrCreate } from '@mui/toolpad-utils/immutability';
+import * as appDom from '@mui/toolpad-core/appDom';
 import { PageViewState } from '../../../types';
 import { RectangleEdge } from '../../../utils/geometry';
-import { update, updateOrCreate } from '../../../utils/immutability';
 
 export const DROP_ZONE_TOP = 'top';
 export const DROP_ZONE_BOTTOM = 'bottom';