From c5ffb335c4cb2be4d5e2ad49223d388566d662a2 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Tue, 23 Jan 2024 13:39:57 +0100 Subject: [PATCH] Move App dom to Toolpad core (#3116) --- .eslintrc.js | 6 +- packages/toolpad-app/src/canvas/index.tsx | 2 +- .../src/runtime/AppThemeProvider.tsx | 2 +- .../src/runtime/CanvasHooksContext.tsx | 2 +- .../src/runtime/ToolpadApp.spec.tsx | 2 +- .../toolpad-app/src/runtime/ToolpadApp.tsx | 2 +- .../src/runtime/createRuntimeState.tsx | 2 +- .../src/runtime/toolpadComponents/index.tsx | 2 +- packages/toolpad-app/src/runtime/types.ts | 2 +- packages/toolpad-app/src/runtime/useAuth.ts | 2 +- .../toolpad-app/src/runtime/useDataQuery.ts | 2 +- .../toolpad-app/src/server/DataManager.ts | 2 +- .../toolpad-app/src/server/appServerWorker.ts | 2 +- packages/toolpad-app/src/server/auth.ts | 2 +- packages/toolpad-app/src/server/localMode.ts | 31 +++++++++- .../src/server/toolpadAppBuilder.ts | 2 +- .../AppEditor/AppAuthorizationEditor.tsx | 13 ++--- .../src/toolpad/AppEditor/BindingEditor.tsx | 2 +- .../AppEditor/ConnectionEditor/index.tsx | 2 +- .../src/toolpad/AppEditor/ElementContext.tsx | 2 +- .../AppEditor/HierarchyExplorer/index.tsx | 2 +- .../src/toolpad/AppEditor/NodeMenu.tsx | 2 +- .../src/toolpad/AppEditor/NodeNameEditor.tsx | 2 +- .../AppEditor/PageDisplayNameEditor.tsx | 2 +- .../ComponentCatalog/ComponentCatalog.tsx | 2 +- .../AppEditor/PageEditor/ComponentEditor.tsx | 2 +- .../AppEditor/PageEditor/ComponentPanel.tsx | 2 +- .../AppEditor/PageEditor/ConnectionSelect.tsx | 2 +- .../PageEditor/NodeAttributeEditor.tsx | 2 +- .../PageEditor/PageEditorProvider.tsx | 4 +- .../AppEditor/PageEditor/PageOptionsPanel.tsx | 2 +- .../PageEditor/QueriesExplorer/index.tsx | 2 +- .../QueryEditor/QueryEditorPanel.tsx | 2 +- .../PageEditor/QueryEditor/index.tsx | 2 +- .../PageEditor/RenderPanel/NodeDropArea.tsx | 2 +- .../PageEditor/RenderPanel/NodeHud.tsx | 2 +- .../PageEditor/RenderPanel/RenderOverlay.tsx | 4 +- .../PageEditor/RenderPanel/RenderPanel.tsx | 2 +- .../AppEditor/PageEditor/ThemeEditor.tsx | 2 +- .../AppEditor/PageEditor/UrlQueryEditor.tsx | 2 +- .../toolpad/AppEditor/PageEditor/index.tsx | 2 +- .../src/toolpad/AppEditor/PagePanel.tsx | 2 +- .../src/toolpad/AppEditor/PageTitleEditor.tsx | 2 +- .../CreateCodeComponentNodeDialog.tsx | 2 +- .../PagesExplorer/CreatePageNodeDialog.tsx | 2 +- .../toolpad/AppEditor/PagesExplorer/index.tsx | 2 +- .../AppEditor/PagesExplorer/validation.ts | 2 +- .../src/toolpad/AppEditor/pageLayout.ts | 2 +- .../src/toolpad/AppOptions/index.tsx | 2 +- packages/toolpad-app/src/toolpad/AppState.tsx | 4 +- .../toolpad/propertyControls/ChartData.tsx | 4 +- .../googleSheets/client.tsx | 2 +- .../src/toolpadDataSources/sql/client.tsx | 2 +- packages/toolpad-app/src/types.ts | 13 +---- packages/toolpad-app/src/utils/domView.ts | 2 +- packages/toolpad-core/package.json | 3 + .../index.ts => toolpad-core/src/appDom.ts} | 58 +++++++------------ .../src}/immutability.ts | 1 + pnpm-lock.yaml | 9 +++ 59 files changed, 126 insertions(+), 118 deletions(-) rename packages/{toolpad-app/src/appDom/index.ts => toolpad-core/src/appDom.ts} (97%) rename packages/{toolpad-app/src/utils => toolpad-utils/src}/immutability.ts (97%) diff --git a/.eslintrc.js b/.eslintrc.js index fbad540cdeb..ef4ff2e2310 100644 --- a/.eslintrc.js +++ b/.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'], }, ], }, diff --git a/packages/toolpad-app/src/canvas/index.tsx b/packages/toolpad-app/src/canvas/index.tsx index 442c32736f0..f845991e284 100644 --- a/packages/toolpad-app/src/canvas/index.tsx +++ b/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( () => { diff --git a/packages/toolpad-app/src/runtime/AppThemeProvider.tsx b/packages/toolpad-app/src/runtime/AppThemeProvider.tsx index 1a035e4f86e..9dabb68bee5 100644 --- a/packages/toolpad-app/src/runtime/AppThemeProvider.tsx +++ b/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 { diff --git a/packages/toolpad-app/src/runtime/CanvasHooksContext.tsx b/packages/toolpad-app/src/runtime/CanvasHooksContext.tsx index 840ebecffb7..1a01cf128cf 100644 --- a/packages/toolpad-app/src/runtime/CanvasHooksContext.tsx +++ b/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): void; diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx index b71c0d8141f..fddb72a8a84 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.spec.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index c2f12e5c9df..581de553e2a 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/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 { diff --git a/packages/toolpad-app/src/runtime/createRuntimeState.tsx b/packages/toolpad-app/src/runtime/createRuntimeState.tsx index 6470fb6b346..5869d1ad1ba 100644 --- a/packages/toolpad-app/src/runtime/createRuntimeState.tsx +++ b/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 { diff --git a/packages/toolpad-app/src/runtime/toolpadComponents/index.tsx b/packages/toolpad-app/src/runtime/toolpadComponents/index.tsx index 6cc3ace9d01..35baa6a4bd6 100644 --- a/packages/toolpad-app/src/runtime/toolpadComponents/index.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/runtime/types.ts b/packages/toolpad-app/src/runtime/types.ts index d6036d7e77f..80801ed396b 100644 --- a/packages/toolpad-app/src/runtime/types.ts +++ b/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. diff --git a/packages/toolpad-app/src/runtime/useAuth.ts b/packages/toolpad-app/src/runtime/useAuth.ts index fc98f2c8315..026f2ee14d0 100644 --- a/packages/toolpad-app/src/runtime/useAuth.ts +++ b/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'; diff --git a/packages/toolpad-app/src/runtime/useDataQuery.ts b/packages/toolpad-app/src/runtime/useDataQuery.ts index 07b6999a715..20d7b0fcfff 100644 --- a/packages/toolpad-app/src/runtime/useDataQuery.ts +++ b/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< diff --git a/packages/toolpad-app/src/server/DataManager.ts b/packages/toolpad-app/src/server/DataManager.ts index 19ea34a8335..e7462af911c 100644 --- a/packages/toolpad-app/src/server/DataManager.ts +++ b/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'; diff --git a/packages/toolpad-app/src/server/appServerWorker.ts b/packages/toolpad-app/src/server/appServerWorker.ts index f28e481c93d..1ea5f9ae74f 100644 --- a/packages/toolpad-app/src/server/appServerWorker.ts +++ b/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'; diff --git a/packages/toolpad-app/src/server/auth.ts b/packages/toolpad-app/src/server/auth.ts index 3b49ea90d7d..defa8e0d3e6 100644 --- a/packages/toolpad-app/src/server/auth.ts +++ b/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; diff --git a/packages/toolpad-app/src/server/localMode.ts b/packages/toolpad-app/src/server/localMode.ts index d3c51f44347..643266ffdb7 100644 --- a/packages/toolpad-app/src/server/localMode.ts +++ b/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 { 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 { + 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', ); diff --git a/packages/toolpad-app/src/server/toolpadAppBuilder.ts b/packages/toolpad-app/src/server/toolpadAppBuilder.ts index 3b986545dc8..b49fa1d76d3 100644 --- a/packages/toolpad-app/src/server/toolpadAppBuilder.ts +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/AppAuthorizationEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/AppAuthorizationEditor.tsx index 065d4c918ef..b22fb16f791 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/AppAuthorizationEditor.tsx +++ b/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) => { + (event: SelectChangeEvent) => { 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() { Authentication providers - + labelId="auth-providers-label" label="Authentication providers" id="auth-providers" @@ -131,7 +130,7 @@ export function AppAuthenticationEditor() { {[...AUTH_PROVIDERS].map(([value, { name, Icon }]) => ( - -1} /> + -1} /> {name} diff --git a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx index 0c02bd0f4dd..9a86a917887 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/BindingEditor.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/ConnectionEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/ConnectionEditor/index.tsx index e1375d7df8b..cc5233da8df 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/ConnectionEditor/index.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/ElementContext.tsx b/packages/toolpad-app/src/toolpad/AppEditor/ElementContext.tsx index 025fc6fe99e..9b0d0cbd6d3 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/ElementContext.tsx +++ b/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(undefined); diff --git a/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx index 6cb4f9544a3..33d5df8b9de 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/NodeMenu.tsx b/packages/toolpad-app/src/toolpad/AppEditor/NodeMenu.tsx index 128624c4517..f421907f54f 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/NodeMenu.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/NodeNameEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/NodeNameEditor.tsx index 33e0a786145..ef8c0393e42 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/NodeNameEditor.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageDisplayNameEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageDisplayNameEditor.tsx index ecf5c596811..2f5f917038f 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageDisplayNameEditor.tsx +++ b/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 { diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx index 7b25e0926c5..c4159041a59 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx index a385c84009b..b4c3bb2efd9 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentPanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentPanel.tsx index d7259c2c189..d376162bcda 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentPanel.tsx +++ b/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', diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ConnectionSelect.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ConnectionSelect.tsx index a0e9c55c035..dd2f347189d 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ConnectionSelect.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx index 50881d9ca53..9f4a4780a45 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageEditorProvider.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageEditorProvider.tsx index 86d0d123f65..502a432334d 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageEditorProvider.tsx +++ b/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'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx index 6dd1548d081..842f055029c 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx @@ -12,12 +12,12 @@ import { Checkbox, } from '@mui/material'; import * as React from 'react'; +import * as appDom from '@mui/toolpad-core/appDom'; import { useAppState, useDomApi } from '../../AppState'; import { usePageEditorState } from './PageEditorProvider'; import UrlQueryEditor from './UrlQueryEditor'; import NodeNameEditor from '../NodeNameEditor'; -import * as appDom from '../../../appDom'; import PageTitleEditor from '../PageTitleEditor'; import PageDisplayNameEditor from '../PageDisplayNameEditor'; import { FEATURE_FLAG_AUTHORIZATION } from '../../../constants'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx index f600f848eee..251a9728303 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueriesExplorer/index.tsx @@ -19,7 +19,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import useBoolean from '@mui/toolpad-utils/hooks/useBoolean'; -import * as appDom from '../../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import dataSources from '../../../../toolpadDataSources/client'; import QueryIcon from '../../QueryIcon'; import { useAppState, useAppStateApi } from '../../../AppState'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorPanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorPanel.tsx index baeae4d6aac..c2e63f95e9d 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorPanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorPanel.tsx @@ -13,8 +13,8 @@ import * as React from 'react'; import { BindableAttrValue, LiveBinding } from '@mui/toolpad-core'; import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime'; import invariant from 'invariant'; +import * as appDom from '@mui/toolpad-core/appDom'; import { usePageEditorState } from '../PageEditorProvider'; -import * as appDom from '../../../../appDom'; import dataSources from '../../../../toolpadDataSources/client'; import { useEvaluateLiveBinding } from '../../useEvaluateLiveBinding'; import { useAppState, useAppStateApi } from '../../../AppState'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx index 62dbb87da4f..add0a5d65f1 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx @@ -5,9 +5,9 @@ import { LoadingButton, TabList, TabContext, TabPanel } from '@mui/lab'; import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined'; import CircleIcon from '@mui/icons-material/Circle'; import CancelPresentationIcon from '@mui/icons-material/CancelPresentation'; +import * as appDom from '@mui/toolpad-core/appDom'; import { useAppState, useAppStateApi } from '../../../AppState'; import { usePageEditorState } from '../PageEditorProvider'; -import * as appDom from '../../../../appDom'; import QueryIcon from '../../QueryIcon'; import QueryEditorPanel from './QueryEditorPanel'; import useShortcut from '../../../../utils/useShortcut'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx index 1c0d3757c57..f239222e81b 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx @@ -3,8 +3,8 @@ import clsx from 'clsx'; import { styled } from '@mui/material'; import Typography from '@mui/material/Typography'; +import * as appDom from '@mui/toolpad-core/appDom'; import { FlowDirection } from '../../../../types'; -import * as appDom from '../../../../appDom'; import { absolutePositionCss, isHorizontalFlow, diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx index 5470b87082a..b4722dac6d0 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx @@ -3,7 +3,7 @@ import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; import DeleteIcon from '@mui/icons-material/Delete'; import ContentCopy from '@mui/icons-material/ContentCopy'; import { IconButton, styled, Tooltip } from '@mui/material'; -import * as appDom from '../../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import { absolutePositionCss, Rectangle, diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx index 85157a43c29..6f31658e6db 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx @@ -4,7 +4,8 @@ import { styled } from '@mui/material'; import clsx from 'clsx'; import invariant from 'invariant'; -import * as appDom from '../../../../appDom'; +import { omit } from '@mui/toolpad-utils/immutability'; +import * as appDom from '@mui/toolpad-core/appDom'; import { useAppStateApi, useAppState, useDomApi } from '../../../AppState'; import { DropZone, @@ -37,7 +38,6 @@ import { RECTANGLE_EDGE_TOP, rectContainsPoint, } from '../../../../utils/geometry'; -import { omit } from '../../../../utils/immutability'; import NodeHud from './NodeHud'; import { OverlayGrid, OverlayGridHandle } from './OverlayGrid'; import { NodeInfo } from '../../../../types'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx index 0ee2c62772d..af75887bdf5 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material'; import { NodeHashes, NodeId } from '@mui/toolpad-core'; import useEventCallback from '@mui/utils/useEventCallback'; -import * as appDom from '../../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import EditorCanvasHost from '../EditorCanvasHost'; import { getNodeHashes, useAppState, useAppStateApi, useDomApi } from '../../../AppState'; import { usePageEditorApi, usePageEditorState } from '../PageEditorProvider'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ThemeEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ThemeEditor.tsx index 222ee5b307c..5805b290a31 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ThemeEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ThemeEditor.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import * as appDom from '../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import { useAppState, useDomApi } from '../../AppState'; import MuiThemeEditor from '../../../components/MuiThemeEditor'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/UrlQueryEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/UrlQueryEditor.tsx index fd545773012..957698962b8 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/UrlQueryEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/UrlQueryEditor.tsx @@ -12,7 +12,7 @@ import * as React from 'react'; import AddIcon from '@mui/icons-material/Add'; import { NodeId } from '@mui/toolpad-core'; import useBoolean from '@mui/toolpad-utils/hooks/useBoolean'; -import * as appDom from '../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import { useAppState, useDomApi, useAppStateApi } from '../../AppState'; import MapEntriesEditor from '../../../components/MapEntriesEditor'; import useUnsavedChangesConfirm from '../../hooks/useUnsavedChangesConfirm'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx index 5bc905ad6b2..45e4ae557a0 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/index.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { styled } from '@mui/material'; import usePageTitle from '@mui/toolpad-utils/hooks/usePageTitle'; +import * as appDom from '@mui/toolpad-core/appDom'; import { Panel, PanelGroup, PanelResizeHandle } from '../../../components/resizablePanels'; import RenderPanel from './RenderPanel'; import { PageEditorProvider } from './PageEditorProvider'; import ComponentPanel from './ComponentPanel'; import { useAppState } from '../../AppState'; -import * as appDom from '../../../appDom'; import ComponentCatalog from './ComponentCatalog'; import NotFoundEditor from '../NotFoundEditor'; import useUndoRedo from '../../hooks/useUndoRedo'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx index ce535b541dd..0440accf54c 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { styled, SxProps, Box, Divider, Typography } from '@mui/material'; +import * as appDom from '@mui/toolpad-core/appDom'; import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import PagesExplorer from './PagesExplorer'; import PageHierarchyExplorer from './HierarchyExplorer'; @@ -7,7 +8,6 @@ import { useAppState } from '../AppState'; import AppOptions from '../AppOptions'; import { QueriesExplorer, ActionsExplorer } from './PageEditor/QueriesExplorer'; import { useProject } from '../../project'; -import * as appDom from '../../appDom'; const PAGE_PANEL_WIDTH = 250; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageTitleEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageTitleEditor.tsx index 546c0488c50..f6daff7a433 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageTitleEditor.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageTitleEditor.tsx @@ -1,6 +1,6 @@ import { TextField } from '@mui/material'; import * as React from 'react'; -import * as appDom from '../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import { useDomApi } from '../AppState'; interface PageTitleEditorProps { diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreateCodeComponentNodeDialog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreateCodeComponentNodeDialog.tsx index 56bcafd6844..b5fead45188 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreateCodeComponentNodeDialog.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreateCodeComponentNodeDialog.tsx @@ -14,7 +14,7 @@ import invariant from 'invariant'; import CloseIcon from '@mui/icons-material/Close'; import useEventCallback from '@mui/utils/useEventCallback'; import useLatest from '@mui/toolpad-utils/hooks/useLatest'; -import * as appDom from '../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import DialogForm from '../../../components/DialogForm'; import { useNodeNameValidation } from './validation'; import { useProjectApi } from '../../../projectApi'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreatePageNodeDialog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreatePageNodeDialog.tsx index 89db3253ee1..1860e0ad2d1 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreatePageNodeDialog.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreatePageNodeDialog.tsx @@ -9,7 +9,7 @@ import { import * as React from 'react'; import invariant from 'invariant'; import useEventCallback from '@mui/utils/useEventCallback'; -import * as appDom from '../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import DialogForm from '../../../components/DialogForm'; import { useAppStateApi, useAppState } from '../../AppState'; import { useNodeNameValidation } from './validation'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/index.tsx index f955dcd27bd..22ddd565c0d 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/index.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/index.tsx @@ -9,7 +9,7 @@ import clsx from 'clsx'; import invariant from 'invariant'; import { alphabeticComparator, createPropComparator } from '@mui/toolpad-utils/comparators'; import useBoolean from '@mui/toolpad-utils/hooks/useBoolean'; -import * as appDom from '../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; import { useAppStateApi, useAppState, useDomApi } from '../../AppState'; import useLocalStorageState from '../../../utils/useLocalStorageState'; import NodeMenu from '../NodeMenu'; diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/validation.ts b/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/validation.ts index 1db5a247a9b..66a3233d3f8 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/validation.ts +++ b/packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/validation.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import * as appDom from '../../../appDom'; +import * as appDom from '@mui/toolpad-core/appDom'; export function useNodeNameValidation(name: string, disallowedNames: Set, kind: string) { return React.useMemo( diff --git a/packages/toolpad-app/src/toolpad/AppEditor/pageLayout.ts b/packages/toolpad-app/src/toolpad/AppEditor/pageLayout.ts index f0a536c05a7..1b21dd22f5f 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/pageLayout.ts +++ b/packages/toolpad-app/src/toolpad/AppEditor/pageLayout.ts @@ -1,11 +1,11 @@ import { NodeId } from '@mui/toolpad-core'; +import * as appDom from '@mui/toolpad-core/appDom'; import { getElementNodeComponentId, isPageColumn, isPageLayoutComponent, isPageRow, } from '../../runtime/toolpadComponents'; -import * as appDom from '../../appDom'; export function deleteOrphanedLayoutNodes( domBeforeChange: appDom.AppDom, diff --git a/packages/toolpad-app/src/toolpad/AppOptions/index.tsx b/packages/toolpad-app/src/toolpad/AppOptions/index.tsx index cec8e93cd57..60063954e78 100644 --- a/packages/toolpad-app/src/toolpad/AppOptions/index.tsx +++ b/packages/toolpad-app/src/toolpad/AppOptions/index.tsx @@ -4,9 +4,9 @@ import IconButton from '@mui/material/IconButton'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import CodeIcon from '@mui/icons-material/Code'; import useBoolean from '@mui/toolpad-utils/hooks/useBoolean'; +import * as appDom from '@mui/toolpad-core/appDom'; import useMenu from '../../utils/useMenu'; import AppExportDialog from './AppExportDialog'; -import * as appDom from '../../appDom'; interface AppOptionsProps { dom?: appDom.AppDom; diff --git a/packages/toolpad-app/src/toolpad/AppState.tsx b/packages/toolpad-app/src/toolpad/AppState.tsx index df34e5cd9c1..510bce71c3e 100644 --- a/packages/toolpad-app/src/toolpad/AppState.tsx +++ b/packages/toolpad-app/src/toolpad/AppState.tsx @@ -7,8 +7,8 @@ import { useLocation } from 'react-router-dom'; import { mapValues } from '@mui/toolpad-utils/collections'; import useDebouncedHandler from '@mui/toolpad-utils/hooks/useDebouncedHandler'; import useEventCallback from '@mui/utils/useEventCallback'; -import * as appDom from '../appDom'; -import { omit, update } from '../utils/immutability'; +import { omit, update } from '@mui/toolpad-utils/immutability'; +import * as appDom from '@mui/toolpad-core/appDom'; import { useProjectApi } from '../projectApi'; import useShortcut from '../utils/useShortcut'; import insecureHash from '../utils/insecureHash'; diff --git a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx index 25ec689bcd6..6092f00af34 100644 --- a/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx +++ b/packages/toolpad-app/src/toolpad/propertyControls/ChartData.tsx @@ -26,13 +26,13 @@ import ShowChartIcon from '@mui/icons-material/ShowChart'; import LegendToggleIcon from '@mui/icons-material/LegendToggle'; import { evaluateBindable } from '@mui/toolpad-core/jsRuntime'; import { blueberryTwilightPalette } from '@mui/x-charts/colorPalettes'; -import * as appDom from '../../appDom'; +import { updateArray, remove } from '@mui/toolpad-utils/immutability'; +import * as appDom from '@mui/toolpad-core/appDom'; import type { EditorProps } from '../../types'; import PropertyControl from '../../components/PropertyControl'; import { usePageEditorState } from '../AppEditor/PageEditor/PageEditorProvider'; import { useAppState, useDomApi } from '../AppState'; import BindableEditor from '../AppEditor/PageEditor/BindableEditor'; -import { updateArray, remove } from '../../utils/immutability'; import { createToolpadAppTheme } from '../../runtime/AppThemeProvider'; import ColorPicker from '../../components/ColorPicker'; diff --git a/packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx b/packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx index e715486e382..aeea9236dd9 100644 --- a/packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/googleSheets/client.tsx @@ -15,6 +15,7 @@ import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'; import { UseQueryResult } from '@tanstack/react-query'; import { getObjectKey } from '@mui/toolpad-utils/objectKey'; import useDebounced from '@mui/toolpad-utils/hooks/useDebounced'; +import * as appDom from '@mui/toolpad-core/appDom'; import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import { ClientDataSource, ConnectionEditorProps, QueryEditorProps } from '../../types'; import { @@ -32,7 +33,6 @@ import { usePrivateQuery } from '../context'; import QueryInputPanel from '../QueryInputPanel'; import useQueryPreview from '../useQueryPreview'; import useFetchPrivate from '../useFetchPrivate'; -import * as appDom from '../../appDom'; const EMPTY_ROWS: any[] = []; diff --git a/packages/toolpad-app/src/toolpadDataSources/sql/client.tsx b/packages/toolpad-app/src/toolpadDataSources/sql/client.tsx index 8bf507aacd7..012e1b733f1 100644 --- a/packages/toolpad-app/src/toolpadDataSources/sql/client.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/sql/client.tsx @@ -21,6 +21,7 @@ import { BindableAttrEntries, BindableAttrValue, ExecFetchResult } from '@mui/to import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime'; import { serializeError, errorFrom } from '@mui/toolpad-utils/errors'; import { Maybe } from '@mui/toolpad-utils/types'; +import * as appDom from '@mui/toolpad-core/appDom'; import { Panel, PanelGroup, PanelResizeHandle } from '../../components/resizablePanels'; import ParametersEditor from '../../toolpad/AppEditor/PageEditor/ParametersEditor'; import { useEvaluateLiveBindingEntries } from '../../toolpad/AppEditor/useEvaluateLiveBinding'; @@ -30,7 +31,6 @@ import lazyComponent from '../../utils/lazyComponent'; import QueryInputPanel from '../QueryInputPanel'; import useFetchPrivate from '../useFetchPrivate'; import useQueryPreview from '../useQueryPreview'; -import * as appDom from '../../appDom'; import { SqlConnectionStatus, SqlConnectionParams, diff --git a/packages/toolpad-app/src/types.ts b/packages/toolpad-app/src/types.ts index 9bb3e8ae50d..45caa64dfbf 100644 --- a/packages/toolpad-app/src/types.ts +++ b/packages/toolpad-app/src/types.ts @@ -12,7 +12,7 @@ import { } from '@mui/toolpad-core'; import { PaletteMode } from '@mui/material'; import type { Awaitable, Maybe, WithControlledProp } from '@mui/toolpad-utils/types'; -import type * as appDom from './appDom'; +import type * as appDom from '@mui/toolpad-core/appDom'; import type { Rectangle } from './utils/geometry'; import type { RuntimeState } from './runtime'; @@ -109,11 +109,6 @@ export interface QueryEditorProps { export type QueryEditor = React.FC>; -export interface ConnectionStatus { - timestamp: number; - error?: string; -} - export interface ExecFetchFn { (fetchQuery: Q, params: Record): Promise; } @@ -213,9 +208,3 @@ export interface ToolpadProjectOptions { } export type CodeEditorFileType = 'resource' | 'component'; - -export type AuthProvider = 'github' | 'google'; - -export interface AuthProviderConfig { - provider: AuthProvider; -} diff --git a/packages/toolpad-app/src/utils/domView.ts b/packages/toolpad-app/src/utils/domView.ts index 347112df032..4151deebf6c 100644 --- a/packages/toolpad-app/src/utils/domView.ts +++ b/packages/toolpad-app/src/utils/domView.ts @@ -1,6 +1,6 @@ import { NodeId } from '@mui/toolpad-core'; import { matchPath } from 'react-router-dom'; -import { QueryNode, FetchMode } from '../appDom'; +import { QueryNode, FetchMode } from '@mui/toolpad-core/appDom'; export type QueryMeta = { name?: string; diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json index f667b9932a1..ab4b42c8095 100644 --- a/packages/toolpad-core/package.json +++ b/packages/toolpad-core/package.json @@ -47,13 +47,16 @@ "@types/json-schema": "7.0.15", "@webcontainer/env": "1.1.0", "cookie": "0.6.0", + "fractional-indexing": "3.2.0", "invariant": "2.2.4", + "nanoid": "5.0.4", "quickjs-emscripten": "0.26.0", "react-error-boundary": "4.0.12", "react-is": "18.2.0" }, "devDependencies": { "@types/cookie": "0.6.0", + "@types/invariant": "2.2.37", "@types/react": "18.2.48", "@types/react-is": "18.2.4", "concurrently": "8.2.2" diff --git a/packages/toolpad-app/src/appDom/index.ts b/packages/toolpad-core/src/appDom.ts similarity index 97% rename from packages/toolpad-app/src/appDom/index.ts rename to packages/toolpad-core/src/appDom.ts index bb6ef3675e9..1e31f729aba 100644 --- a/packages/toolpad-app/src/appDom/index.ts +++ b/packages/toolpad-core/src/appDom.ts @@ -1,22 +1,19 @@ import { nanoid } from 'nanoid/non-secure'; import { generateKeyBetween } from 'fractional-indexing'; -import { +import invariant from 'invariant'; +import type { BoxProps, ThemeOptions as MuiThemeOptions } from '@mui/material'; +import { guessTitle, pascalCase, removeDiacritics, uncapitalize } from '@mui/toolpad-utils/strings'; +import { mapProperties, mapValues, hasOwnProperty } from '@mui/toolpad-utils/collections'; +import { ExactEntriesOf, Maybe } from '@mui/toolpad-utils/types'; +import { omit, update, updateOrCreate } from '@mui/toolpad-utils/immutability'; +import type { NodeId, NodeReference, BindableAttrValue, BindableAttrValues, SecretAttrValue, BindableAttrEntries, - EnvAttrValue, -} from '@mui/toolpad-core'; -import invariant from 'invariant'; -import { BoxProps, ThemeOptions as MuiThemeOptions } from '@mui/material'; -import { guessTitle, pascalCase, removeDiacritics, uncapitalize } from '@mui/toolpad-utils/strings'; -import { mapProperties, mapValues, hasOwnProperty } from '@mui/toolpad-utils/collections'; -import { ExactEntriesOf, Maybe } from '@mui/toolpad-utils/types'; -import { AuthProviderConfig, ConnectionStatus } from '../types'; -import { omit, update, updateOrCreate } from '../utils/immutability'; -import { envBindingSchema } from '../server/schema'; +} from './types'; export const CURRENT_APPDOM_VERSION = 7; @@ -41,6 +38,17 @@ export function compareFractionalIndex(index1: string, index2: string): number { return index1 > index2 ? 1 : -1; } +export type AuthProvider = 'github' | 'google'; + +export interface AuthProviderConfig { + provider: AuthProvider; +} + +export interface ConnectionStatus { + timestamp: number; + error?: string; +} + type AppDomNodeType = 'app' | 'connection' | 'theme' | 'page' | 'element' | 'query' | 'mutation'; export interface AppDomNodeBase { @@ -545,7 +553,9 @@ export function createElement

( * Get all descendants of a `node`, flattens childNodes objects into one single array */ export function getDescendants(dom: AppDom, node: AppDomNode): readonly AppDomNode[] { - const children: readonly AppDomNode[] = Object.values(getChildNodes(dom, node)) + const children: readonly AppDomNode[] = ( + Object.values(getChildNodes(dom, node)) as AppDomNode[][] + ) .flat() .filter(Boolean); return [...children, ...children.flatMap((child) => getDescendants(dom, child))]; @@ -1159,30 +1169,6 @@ export function applyDiff(dom: AppDom, diff: DomDiff): AppDom { return result; } -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): Set { - const allVars = Object.values(dom.nodes) - .flatMap((node) => findEnvBindings(node)) - .map((binding) => binding.$$env); - - return new Set(allVars); -} - export function getPageDisplayName(node: PageNode): string { return node.attributes.displayName || guessTitle(node.name); } diff --git a/packages/toolpad-app/src/utils/immutability.ts b/packages/toolpad-utils/src/immutability.ts similarity index 97% rename from packages/toolpad-app/src/utils/immutability.ts rename to packages/toolpad-utils/src/immutability.ts index 04385dc405f..bdbd4d73482 100644 --- a/packages/toolpad-app/src/utils/immutability.ts +++ b/packages/toolpad-utils/src/immutability.ts @@ -7,6 +7,7 @@ export function update(dest: T, src: Partial): T { Object.entries(src).forEach(([key, value]) => { if (dest[key as keyof T] !== value) { result = result || { ...dest }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any (result as any)[key] = value; } }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 77d14248230..722b869feb8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -917,9 +917,15 @@ importers: cookie: specifier: 0.6.0 version: 0.6.0 + fractional-indexing: + specifier: 3.2.0 + version: 3.2.0 invariant: specifier: 2.2.4 version: 2.2.4 + nanoid: + specifier: 5.0.4 + version: 5.0.4 quickjs-emscripten: specifier: 0.26.0 version: 0.26.0 @@ -939,6 +945,9 @@ importers: '@types/cookie': specifier: 0.6.0 version: 0.6.0 + '@types/invariant': + specifier: 2.2.37 + version: 2.2.37 '@types/react': specifier: 18.2.48 version: 18.2.48