Move NodeId to @mui/toolpad-core (#561)

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';

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';

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';

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';

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 {

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';

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';

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 {

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 {

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';

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';

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 {

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 {

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';

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

@@ -1,12 +1,12 @@
-import { BindableAttrValue } from '@mui/toolpad-core';
+import { NodeId, BindableAttrValue } from '@mui/toolpad-core';
 import {
  App,
  DomNodeAttributeType,
  PrismaClient,
  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';

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<any>(

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;

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';
 

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<T> {
@@ -25,8 +26,6 @@ export interface EditorProps<T> {
  onChange: (newValue: T) => void;
 }
 
-export type NodeId = Branded<string, 'NodeId'>;
-
 export type FlowDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 
 export type Updates<O extends { id: string }> = Partial<O> & Pick<O, 'id'>;

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

@@ -1,12 +1,3 @@
-declare const brand: unique symbol;
-
-export interface Brand<B> {
- readonly [brand]: B;
-}
-
-// https://stackoverflow.com/a/56749647
-export type Branded<A, B> = A & Brand<B>;
-
 export type WithControlledProp<V, K extends string = 'value'> = Record<K, V> &
  Record<K extends 'value' ? 'onChange' : `on${Capitalize<K>}Change`, (newValue: V) => void>;
 

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"

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<string, 'NodeId'>;
 
 export type BindingAttrValueFormat = 'stringLiteral' | 'default';
 

packages/toolpad-core/src/utils.ts

@@ -0,0 +1,8 @@
+declare const brand: unique symbol;
+
+export interface Brand<B> {
+ readonly [brand]: B;
+}
+
+// https://stackoverflow.com/a/56749647
+export type Branded<A, B> = A & Brand<B>;