From aba38573466439962c947e7b67d3d06a9183e9db Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 15 Jun 2022 17:47:55 +0200 Subject: [PATCH] Move NodeId to @mui/toolpad-core (#561) --- packages/toolpad-app/src/appDom.ts | 3 ++- .../AppEditor/CodeComponentEditor/index.tsx | 3 +-- .../components/AppEditor/ConnectionEditor/index.tsx | 3 ++- .../components/AppEditor/HierarchyExplorer/index.tsx | 2 +- .../AppEditor/PageEditor/EditorCanvasHost.tsx | 2 +- .../AppEditor/PageEditor/PageEditorProvider.tsx | 4 ++-- .../components/AppEditor/PageEditor/QueryEditor.tsx | 3 ++- .../components/AppEditor/PageEditor/RenderPanel.tsx | 11 ++--------- .../AppEditor/PageEditor/UrlQueryEditor.tsx | 2 +- .../src/components/AppEditor/PageEditor/index.tsx | 2 +- packages/toolpad-app/src/components/DomLoader.tsx | 3 +-- packages/toolpad-app/src/components/Release.tsx | 2 +- packages/toolpad-app/src/pageViewState.ts | 4 ++-- packages/toolpad-app/src/runtime/ToolpadApp.tsx | 3 ++- packages/toolpad-app/src/server/data.ts | 4 ++-- packages/toolpad-app/src/server/handleDataRequest.ts | 3 ++- packages/toolpad-app/src/toolpadComponents/index.tsx | 3 +-- .../toolpad-app/src/toolpadDataSources/context.tsx | 2 +- packages/toolpad-app/src/types.ts | 5 ++--- packages/toolpad-app/src/utils/types.ts | 9 --------- packages/toolpad-core/package.json | 3 ++- packages/toolpad-core/src/types.ts | 7 +++++-- packages/toolpad-core/src/utils.ts | 8 ++++++++ 23 files changed, 44 insertions(+), 47 deletions(-) create mode 100644 packages/toolpad-core/src/utils.ts diff --git a/packages/toolpad-app/src/appDom.ts b/packages/toolpad-app/src/appDom.ts index debd88b56e8..c472e1b0d6b 100644 --- a/packages/toolpad-app/src/appDom.ts +++ b/packages/toolpad-app/src/appDom.ts @@ -1,12 +1,13 @@ import { generateKeyBetween } from 'fractional-indexing'; import cuid from 'cuid'; import { + NodeId, ConstantAttrValue, BindableAttrValue, BindableAttrValues, SecretAttrValue, } from '@mui/toolpad-core'; -import { NodeId, ConnectionStatus, AppTheme } from './types'; +import { ConnectionStatus, AppTheme } from './types'; import { omit, update, updateOrCreate } from './utils/immutability'; import { camelCase, generateUniqueString, removeDiacritics } from './utils/strings'; import { ExactEntriesOf } from './utils/types'; diff --git a/packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx b/packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx index 9ac6a2e7797..91e93441fdb 100644 --- a/packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx +++ b/packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx @@ -7,8 +7,7 @@ import createCache from '@emotion/cache'; import { CacheProvider } from '@emotion/react'; import ReactDOM from 'react-dom'; import { ErrorBoundary } from 'react-error-boundary'; -import { createComponent, ToolpadComponent, TOOLPAD_COMPONENT } from '@mui/toolpad-core'; -import { NodeId } from '../../../types'; +import { NodeId, createComponent, ToolpadComponent, TOOLPAD_COMPONENT } from '@mui/toolpad-core'; import * as appDom from '../../../appDom'; import { useDom, useDomApi } from '../../DomLoader'; import { tryFormat } from '../../../utils/prettier'; diff --git a/packages/toolpad-app/src/components/AppEditor/ConnectionEditor/index.tsx b/packages/toolpad-app/src/components/AppEditor/ConnectionEditor/index.tsx index 0551e9451de..4e34017f36a 100644 --- a/packages/toolpad-app/src/components/AppEditor/ConnectionEditor/index.tsx +++ b/packages/toolpad-app/src/components/AppEditor/ConnectionEditor/index.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { Box, Container, Stack, Typography } from '@mui/material'; import { useParams } from 'react-router-dom'; -import { NodeId, ConnectionEditorProps, ClientDataSource } from '../../../types'; +import { NodeId } from '@mui/toolpad-core'; +import { ConnectionEditorProps, ClientDataSource } from '../../../types'; import { useDom, useDomApi } from '../../DomLoader'; import * as appDom from '../../../appDom'; import dataSources from '../../../toolpadDataSources/client'; diff --git a/packages/toolpad-app/src/components/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-app/src/components/AppEditor/HierarchyExplorer/index.tsx index 83d7196df12..717f4c68d16 100644 --- a/packages/toolpad-app/src/components/AppEditor/HierarchyExplorer/index.tsx +++ b/packages/toolpad-app/src/components/AppEditor/HierarchyExplorer/index.tsx @@ -16,7 +16,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import DeleteIcon from '@mui/icons-material/Delete'; import AddIcon from '@mui/icons-material/Add'; import { useNavigate, useLocation, matchRoutes, Location } from 'react-router-dom'; -import { NodeId } from '../../../types'; +import { NodeId } from '@mui/toolpad-core'; import * as appDom from '../../../appDom'; import { useDom, useDomApi } from '../../DomLoader'; import CreatePageNodeDialog from './CreatePageNodeDialog'; diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/EditorCanvasHost.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/EditorCanvasHost.tsx index 9fadd0a7ce8..0936c1f40ba 100644 --- a/packages/toolpad-app/src/components/AppEditor/PageEditor/EditorCanvasHost.tsx +++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/EditorCanvasHost.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Box, CircularProgress, styled } from '@mui/material'; -import { NodeId } from '../../../types'; +import { NodeId } from '@mui/toolpad-core'; import * as appDom from '../../../appDom'; export interface EditorCanvasHostProps { diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/PageEditorProvider.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/PageEditorProvider.tsx index f6853af35cc..a768e5dc233 100644 --- a/packages/toolpad-app/src/components/AppEditor/PageEditor/PageEditorProvider.tsx +++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/PageEditorProvider.tsx @@ -1,7 +1,7 @@ -import { LiveBindings } from '@mui/toolpad-core'; +import { NodeId, LiveBindings } from '@mui/toolpad-core'; import * as React from 'react'; import * as appDom from '../../../appDom'; -import { NodeId, SlotLocation, PageViewState } from '../../../types'; +import { SlotLocation, PageViewState } from '../../../types'; import { update, updateOrCreate } from '../../../utils/immutability'; export type ComponentPanelTab = 'component' | 'theme'; diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx index 8f02c46e715..b120d3bf56b 100644 --- a/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx +++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/QueryEditor.tsx @@ -21,10 +21,11 @@ import * as React from 'react'; import AddIcon from '@mui/icons-material/Add'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import { LoadingButton } from '@mui/lab'; +import { NodeId } from '@mui/toolpad-core'; import useLatest from '../../../utils/useLatest'; import { usePageEditorState } from './PageEditorProvider'; import * as appDom from '../../../appDom'; -import { NodeId, QueryEditorModel } from '../../../types'; +import { QueryEditorModel } from '../../../types'; import dataSources from '../../../toolpadDataSources/client'; import NodeNameEditor from '../NodeNameEditor'; import JsonView from '../../JsonView'; diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/RenderPanel.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/RenderPanel.tsx index 983dc2d8334..23f1c5584d9 100644 --- a/packages/toolpad-app/src/components/AppEditor/PageEditor/RenderPanel.tsx +++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/RenderPanel.tsx @@ -4,16 +4,9 @@ import throttle from 'lodash-es/throttle'; import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; import DeleteIcon from '@mui/icons-material/Delete'; import { IconButton, styled } from '@mui/material'; -import { RuntimeEvent, SlotType } from '@mui/toolpad-core'; +import { NodeId, RuntimeEvent, SlotType } from '@mui/toolpad-core'; import { setEventHandler } from '@mui/toolpad-core/runtime'; -import { - NodeId, - FlowDirection, - SlotLocation, - SlotState, - NodeInfo, - NodesInfo, -} from '../../../types'; +import { FlowDirection, SlotLocation, SlotState, NodeInfo, NodesInfo } from '../../../types'; import * as appDom from '../../../appDom'; import EditorCanvasHost from './EditorCanvasHost'; import { diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/UrlQueryEditor.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/UrlQueryEditor.tsx index 5e2b6f6b856..e05bba7135a 100644 --- a/packages/toolpad-app/src/components/AppEditor/PageEditor/UrlQueryEditor.tsx +++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/UrlQueryEditor.tsx @@ -8,9 +8,9 @@ import { } from '@mui/material'; import * as React from 'react'; import AddIcon from '@mui/icons-material/Add'; +import { NodeId } from '@mui/toolpad-core'; import * as appDom from '../../../appDom'; import { useDom, useDomApi } from '../../DomLoader'; -import { NodeId } from '../../../types'; import MapEntriesEditor from '../../MapEntriesEditor'; export interface UrlQueryEditorProps { diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx index 56d3ffcbd87..5be2bd1f24e 100644 --- a/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx +++ b/packages/toolpad-app/src/components/AppEditor/PageEditor/index.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { styled } from '@mui/material'; import { useParams } from 'react-router-dom'; +import { NodeId } from '@mui/toolpad-core'; import RenderPanel from './RenderPanel'; import ComponentPanel from './ComponentPanel'; import { PageEditorProvider } from './PageEditorProvider'; -import { NodeId } from '../../../types'; import { useDom } from '../../DomLoader'; import * as appDom from '../../../appDom'; import ComponentCatalog from './ComponentCatalog'; diff --git a/packages/toolpad-app/src/components/DomLoader.tsx b/packages/toolpad-app/src/components/DomLoader.tsx index 38bd0b702e0..792e3555c03 100644 --- a/packages/toolpad-app/src/components/DomLoader.tsx +++ b/packages/toolpad-app/src/components/DomLoader.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import { Alert, Snackbar } from '@mui/material'; -import { BindableAttrValue, BindableAttrValues } from '@mui/toolpad-core'; +import { NodeId, BindableAttrValue, BindableAttrValues } from '@mui/toolpad-core'; import * as appDom from '../appDom'; -import { NodeId } from '../types'; import { update } from '../utils/immutability'; import client from '../api'; import useShortcut from '../utils/useShortcut'; diff --git a/packages/toolpad-app/src/components/Release.tsx b/packages/toolpad-app/src/components/Release.tsx index 73bbe57d4ec..cc80d7af201 100644 --- a/packages/toolpad-app/src/components/Release.tsx +++ b/packages/toolpad-app/src/components/Release.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'; import { useParams } from 'react-router-dom'; +import { NodeId } from '@mui/toolpad-core'; import client from '../api'; import * as appDom from '../appDom'; -import { NodeId } from '../types'; import ToolpadAppShell from './ToolpadAppShell'; interface NavigateToReleaseActionProps { diff --git a/packages/toolpad-app/src/pageViewState.ts b/packages/toolpad-app/src/pageViewState.ts index b0543cf826e..e75d24faa3b 100644 --- a/packages/toolpad-app/src/pageViewState.ts +++ b/packages/toolpad-app/src/pageViewState.ts @@ -1,7 +1,7 @@ import { FiberNode, Hook } from 'react-devtools-inline'; -import { RUNTIME_PROP_NODE_ID, RUNTIME_PROP_SLOTS, SlotType } from '@mui/toolpad-core'; +import { NodeId, RUNTIME_PROP_NODE_ID, RUNTIME_PROP_SLOTS, SlotType } from '@mui/toolpad-core'; import { NodeFiberHostProps } from '@mui/toolpad-core/runtime'; -import { NodeId, FlowDirection, PageViewState, NodesInfo, NodeInfo } from './types'; +import { FlowDirection, PageViewState, NodesInfo, NodeInfo } from './types'; import { getRelativeBoundingRect, getRelativeOuterRect } from './utils/geometry'; declare global { diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx index 94fd3c7f7b0..ec8ee9bf499 100644 --- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx +++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx @@ -18,6 +18,7 @@ import { Slots, Placeholder, BindableAttrValues, + NodeId, } from '@mui/toolpad-core'; import { QueryClient, QueryClientProvider } from 'react-query'; import { @@ -36,7 +37,7 @@ import { ResetNodeErrorsKeyProvider, } from '@mui/toolpad-core/runtime'; import * as appDom from '../appDom'; -import { NodeId, VersionOrPreview } from '../types'; +import { VersionOrPreview } from '../types'; import { createProvidedContext } from '../utils/react'; import AppOverview from '../components/AppOverview'; import { getElementNodeComponentId, PAGE_ROW_COMPONENT_ID } from '../toolpadComponents'; diff --git a/packages/toolpad-app/src/server/data.ts b/packages/toolpad-app/src/server/data.ts index 922752710c8..6509e151ce0 100644 --- a/packages/toolpad-app/src/server/data.ts +++ b/packages/toolpad-app/src/server/data.ts @@ -1,4 +1,4 @@ -import { BindableAttrValue } from '@mui/toolpad-core'; +import { NodeId, BindableAttrValue } from '@mui/toolpad-core'; import { App, DomNodeAttributeType, @@ -6,7 +6,7 @@ import { Release, Prisma, } from '../../prisma/generated/client'; -import { ServerDataSource, ApiResult, NodeId, VersionOrPreview } from '../types'; +import { ServerDataSource, ApiResult, VersionOrPreview } from '../types'; import serverDataSources from '../toolpadDataSources/server'; import * as appDom from '../appDom'; import { omit } from '../utils/immutability'; diff --git a/packages/toolpad-app/src/server/handleDataRequest.ts b/packages/toolpad-app/src/server/handleDataRequest.ts index f61d3c30859..8676dd5e0c6 100644 --- a/packages/toolpad-app/src/server/handleDataRequest.ts +++ b/packages/toolpad-app/src/server/handleDataRequest.ts @@ -1,8 +1,9 @@ import { NextApiRequest, NextApiResponse } from 'next'; import Cors from 'cors'; +import { NodeId } from '@mui/toolpad-core'; import { execQuery, loadVersionedDom } from './data'; import initMiddleware from './initMiddleware'; -import { NodeId, ApiResult, VersionOrPreview } from '../types'; +import { ApiResult, VersionOrPreview } from '../types'; import * as appDom from '../appDom'; // Initialize the cors middleware const cors = initMiddleware( diff --git a/packages/toolpad-app/src/toolpadComponents/index.tsx b/packages/toolpad-app/src/toolpadComponents/index.tsx index 3cd9ae608da..723d42b6d9c 100644 --- a/packages/toolpad-app/src/toolpadComponents/index.tsx +++ b/packages/toolpad-app/src/toolpadComponents/index.tsx @@ -1,6 +1,5 @@ -import { ToolpadComponent } from '@mui/toolpad-core'; +import { NodeId, ToolpadComponent } from '@mui/toolpad-core'; import * as appDom from '../appDom'; -import { NodeId } from '../types'; export interface ToolpadComponentDefinition { displayName: string; diff --git a/packages/toolpad-app/src/toolpadDataSources/context.tsx b/packages/toolpad-app/src/toolpadDataSources/context.tsx index 5a5e9ebacbb..46eb4a1ff9a 100644 --- a/packages/toolpad-app/src/toolpadDataSources/context.tsx +++ b/packages/toolpad-app/src/toolpadDataSources/context.tsx @@ -1,5 +1,5 @@ import { UseQueryResult } from 'react-query'; -import { NodeId } from '../types'; +import { NodeId } from '@mui/toolpad-core'; import { createProvidedContext } from '../utils/react'; import client from '../api'; diff --git a/packages/toolpad-app/src/types.ts b/packages/toolpad-app/src/types.ts index 4cb6f3893cc..c19f8248968 100644 --- a/packages/toolpad-app/src/types.ts +++ b/packages/toolpad-app/src/types.ts @@ -7,9 +7,10 @@ import { ComponentConfig, BindableAttrValues, LiveBinding, + NodeId, } from '@mui/toolpad-core'; import { PaletteMode } from '@mui/material'; -import type { Branded, Maybe, WithControlledProp } from './utils/types'; +import type { Maybe, WithControlledProp } from './utils/types'; import type { Rectangle } from './utils/geometry'; export interface EditorProps { @@ -25,8 +26,6 @@ export interface EditorProps { onChange: (newValue: T) => void; } -export type NodeId = Branded; - export type FlowDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'; export type Updates = Partial & Pick; diff --git a/packages/toolpad-app/src/utils/types.ts b/packages/toolpad-app/src/utils/types.ts index 31f33102aad..259e9cf4d0a 100644 --- a/packages/toolpad-app/src/utils/types.ts +++ b/packages/toolpad-app/src/utils/types.ts @@ -1,12 +1,3 @@ -declare const brand: unique symbol; - -export interface Brand { - readonly [brand]: B; -} - -// https://stackoverflow.com/a/56749647 -export type Branded = A & Brand; - export type WithControlledProp = Record & Record}Change`, (newValue: V) => void>; diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json index a38b158ad4b..1a2f127d520 100644 --- a/packages/toolpad-core/package.json +++ b/packages/toolpad-core/package.json @@ -12,7 +12,8 @@ "./package.json": "./package.json", ".": "./dist/index.js", "./constants": "./dist/constants.js", - "./runtime": "./dist/runtime.js" + "./runtime": "./dist/runtime.js", + "./utils": "./dist/utils.js" }, "files": [ "dist" diff --git a/packages/toolpad-core/src/types.ts b/packages/toolpad-core/src/types.ts index b4dd2d57a1d..efe9fc9db9f 100644 --- a/packages/toolpad-core/src/types.ts +++ b/packages/toolpad-core/src/types.ts @@ -1,5 +1,8 @@ -import React from 'react'; -import { TOOLPAD_COMPONENT } from './constants'; +import type * as React from 'react'; +import type { TOOLPAD_COMPONENT } from './constants'; +import type { Branded } from './utils'; + +export type NodeId = Branded; export type BindingAttrValueFormat = 'stringLiteral' | 'default'; diff --git a/packages/toolpad-core/src/utils.ts b/packages/toolpad-core/src/utils.ts new file mode 100644 index 00000000000..755bbeda5e3 --- /dev/null +++ b/packages/toolpad-core/src/utils.ts @@ -0,0 +1,8 @@ +declare const brand: unique symbol; + +export interface Brand { + readonly [brand]: B; +} + +// https://stackoverflow.com/a/56749647 +export type Branded = A & Brand;