WIP - Making app DOM match the schema

packages/toolpad-app/src/appDom/index.ts

@@ -3,11 +3,12 @@ import { generateKeyBetween } from 'fractional-indexing';
 import {
   NodeId,
   NodeReference,
-  ConstantAttrValue,
   BindableAttrValue,
   BindableAttrValues,
   SecretAttrValue,
   BindableAttrEntries,
+  JsExpressionAttrValue,
+  EnvAttrValue,
 } from '@mui/toolpad-core';
 import invariant from 'invariant';
 import { BoxProps } from '@mui/material';
@@ -73,9 +74,9 @@ export interface ThemeNode extends AppDomNodeBase {
 export interface ConnectionNode<P = unknown> extends AppDomNodeBase {
   readonly type: 'connection';
   readonly attributes: {
-    readonly dataSource: ConstantAttrValue<string>;
+    readonly dataSource: string;
     readonly params: SecretAttrValue<P | null>;
-    readonly status: ConstantAttrValue<ConnectionStatus | null>;
+    readonly status: ConnectionStatus | null;
   };
 }
 
@@ -84,31 +85,31 @@ export type PageDisplayMode = 'standalone' | 'shell';
 export interface PageNode extends AppDomNodeBase {
   readonly type: 'page';
   readonly attributes: {
-    readonly title: ConstantAttrValue<string>;
-    readonly parameters?: ConstantAttrValue<[string, string][]>;
-    readonly module?: ConstantAttrValue<string>;
-    readonly display?: ConstantAttrValue<PageDisplayMode>;
+    readonly title: string;
+    readonly parameters?: [string, string][];
+    readonly module?: string;
+    readonly display?: PageDisplayMode;
   };
 }
 
 export interface ElementNode<P = any> extends AppDomNodeBase {
   readonly type: 'element';
   readonly attributes: {
-    readonly component: ConstantAttrValue<string>;
+    readonly component: string;
   };
   readonly props?: BindableAttrValues<P>;
   readonly layout?: {
-    readonly horizontalAlign?: ConstantAttrValue<BoxProps['justifyContent']>;
-    readonly verticalAlign?: ConstantAttrValue<BoxProps['alignItems']>;
-    readonly columnSize?: ConstantAttrValue<number>;
+    readonly horizontalAlign?: BoxProps['justifyContent'];
+    readonly verticalAlign?: BoxProps['alignItems'];
+    readonly columnSize?: number;
   };
 }
 
 export interface CodeComponentNode extends AppDomNodeBase {
   readonly type: 'codeComponent';
   readonly attributes: {
-    readonly code: ConstantAttrValue<string>;
-    readonly isNew?: ConstantAttrValue<boolean>;
+    readonly code: string;
+    readonly isNew?: boolean;
   };
 }
 
@@ -124,18 +125,18 @@ export interface QueryNode<Q = any> extends AppDomNodeBase {
   readonly type: 'query';
   readonly params?: BindableAttrEntries;
   readonly attributes: {
-    readonly mode?: ConstantAttrValue<FetchMode>;
-    readonly dataSource?: ConstantAttrValue<string>;
-    readonly connectionId: ConstantAttrValue<NodeReference | null>;
-    readonly query: ConstantAttrValue<Q>;
-    readonly transform?: ConstantAttrValue<string>;
-    readonly transformEnabled?: ConstantAttrValue<boolean>;
+    readonly mode?: FetchMode;
+    readonly dataSource?: string;
+    readonly connectionId: NodeReference | null;
+    readonly query: Q;
+    readonly transform?: string;
+    readonly transformEnabled?: boolean;
     /** @deprecated Not necessary to be user-facing, we will expose staleTime instead if necessary */
-    readonly refetchOnWindowFocus?: ConstantAttrValue<boolean>;
+    readonly refetchOnWindowFocus?: boolean;
     /** @deprecated Not necessary to be user-facing, we will expose staleTime instead if necessary */
-    readonly refetchOnReconnect?: ConstantAttrValue<boolean>;
-    readonly refetchInterval?: ConstantAttrValue<number>;
-    readonly cacheTime?: ConstantAttrValue<number>;
+    readonly refetchOnReconnect?: boolean;
+    readonly refetchInterval?: number;
+    readonly cacheTime?: number;
     readonly enabled?: BindableAttrValue<boolean>;
   };
 }
@@ -147,9 +148,9 @@ export interface MutationNode<Q = any> extends AppDomNodeBase {
   readonly type: 'mutation';
   readonly params?: BindableAttrValues;
   readonly attributes: {
-    readonly dataSource?: ConstantAttrValue<string>;
-    readonly connectionId: ConstantAttrValue<NodeReference | null>;
-    readonly query: ConstantAttrValue<Q>;
+    readonly dataSource?: string;
+    readonly connectionId: NodeReference | null;
+    readonly query: Q;
   };
 }
 
@@ -238,12 +239,8 @@ export function createId(): NodeId {
   return nanoid(7) as NodeId;
 }
 
-export function createConst<V>(value: V): ConstantAttrValue<V> {
-  return { type: 'const', value };
-}
-
 export function createSecret<V>(value: V): SecretAttrValue<V> {
-  return { type: 'secret', value };
+  return { $$secret: value };
 }
 
 export function getMaybeNode<T extends AppDomNodeType>(
@@ -547,7 +544,7 @@ export function createElement<P>(
     name: name || uncapitalize(component),
     props,
     attributes: {
-      component: createConst(component),
+      component,
     },
     layout,
   });
@@ -612,7 +609,7 @@ export function getPageAncestor(dom: AppDom, node: AppDomNode): PageNode | null
  */
 export function getComponentTypeNodes(dom: AppDom, componentId: string): readonly AppDomNode[] {
   return Object.values(dom.nodes).filter(
-    (node) => isElement(node) && node.attributes.component.value === componentId,
+    (node) => isElement(node) && node.attributes.component === componentId,
   );
 }
 
@@ -735,13 +732,8 @@ export function setQueryProp<Q, K extends keyof Q>(
   prop: K,
   value: Q[K],
 ): QueryNode<Q> {
-  const original = node.attributes.query.value;
-  return setNamespacedProp(
-    node,
-    'attributes',
-    'query',
-    createConst<Q>({ ...original, [prop]: value }),
-  );
+  const original = node.attributes.query;
+  return setNamespacedProp(node, 'attributes', 'query', { ...original, [prop]: value });
 }
 
 export function setNodeNamespacedProp<
@@ -863,21 +855,17 @@ export function removeNode(dom: AppDom, nodeId: NodeId) {
   });
 }
 
-export function toConstPropValue<T = any>(value: T): ConstantAttrValue<T> {
-  return { type: 'const', value };
-}
-
 export function fromConstPropValue(prop: undefined): undefined;
 export function fromConstPropValue<T>(prop: BindableAttrValue<T>): T;
 export function fromConstPropValue<T>(prop?: BindableAttrValue<T | undefined>): T | undefined;
 export function fromConstPropValue<T>(prop?: BindableAttrValue<T | undefined>): T | undefined {
   if (!prop) {
     return undefined;
   }
-  if (prop.type !== 'const') {
+  if ((prop as JsExpressionAttrValue).$$jsExpression || (prop as EnvAttrValue).$$env) {
     throw new Error(`trying to unbox a non-constant prop value`);
   }
-  return prop.value;
+  return prop as T;
 }
 
 export function fromConstPropValues<P>(props: BindableAttrValues<P>): Partial<P> {
@@ -1081,7 +1069,7 @@ function createRenderTreeNode(node: AppDomNode): RenderTreeNode | null {
   }
 
   if (isQuery(node) || isMutation(node)) {
-    if (node.attributes.query.value) {
+    if (node.attributes.query) {
       node = setNamespacedProp(node, 'attributes', 'query', null);
     }
   }
@@ -1129,8 +1117,8 @@ export function createDefaultDom(): AppDom {
   const newPageNode = createNode(dom, 'page', {
     name: 'Page 1',
     attributes: {
-      title: createConst('Page 1'),
-      display: createConst('shell'),
+      title: 'Page 1',
+      display: 'shell',
     },
   });
 

packages/toolpad-app/src/appDom/migrations/v1.ts

@@ -1,5 +1,5 @@
 import invariant from 'invariant';
-import { AppDom, QueryNode, createConst, isQuery, ElementNode, isElement, ref } from '..';
+import { AppDom, QueryNode, isQuery, ElementNode, isElement, ref } from '..';
 import { update } from '../../utils/immutability';
 
 function migrateLegacyQueryNode(node: QueryNode<any>): QueryNode<any> {
@@ -25,11 +25,14 @@ function migrateLegacyQueryNode(node: QueryNode<any>): QueryNode<any> {
       attributes: update(node.attributes, {
         transformEnabled: undefined,
         transform: undefined,
-        query: createConst({
-          ...node.attributes.query.value,
-          transformEnabled: node.attributes.transformEnabled?.value,
-          transform: node.attributes.transform?.value,
-        }),
+        query: {
+          type: 'const',
+          value: {
+            ...node.attributes.query.value,
+            transformEnabled: node.attributes.transformEnabled?.value,
+            transform: node.attributes.transform?.value,
+          },
+        },
       }),
     });
   }
@@ -39,10 +42,16 @@ function migrateLegacyQueryNode(node: QueryNode<any>): QueryNode<any> {
     if (typeof node.attributes.query.value?.connectionId?.value === 'string') {
       return update(node, {
         attributes: update(node.attributes, {
-          query: createConst({
-            ...node.attributes.query.value,
-            connectionId: createConst(ref(node.attributes.query.value.connectionId.value)),
-          }),
+          query: {
+            type: 'const',
+            value: {
+              ...node.attributes.query.value,
+              connectionId: {
+                type: 'const',
+                value: ref(node.attributes.query.value.connectionId.value),
+              },
+            },
+          },
         }),
       });
     }

packages/toolpad-app/src/appDom/migrations/v2.ts

@@ -10,7 +10,10 @@ function replaceMutation(node: any): appDom.AppDomNode {
       parentProp: 'queries',
       attributes: {
         ...node.attributes,
-        mode: appDom.createConst('mutation'),
+        mode: {
+          type: 'const',
+          value: 'mutation',
+        },
       },
     };
   }

packages/toolpad-app/src/bindings.ts

@@ -1,26 +1,60 @@
-import { BindableAttrValue } from '@mui/toolpad-core';
+import {
+  BindableAttrValue,
+  EnvAttrValue,
+  JsExpressionAction,
+  JsExpressionAttrValue,
+  SecretAttrValue,
+} from '@mui/toolpad-core';
+import { NavigationAction } from './server/schema';
 
-export function toBindable<V>(
-  value: V | { $$jsExpression: string } | { $$env: string },
-): BindableAttrValue<V> {
-  if (value && typeof value === 'object' && typeof (value as any).$$jsExpression === 'string') {
-    return { type: 'jsExpression', value: (value as any).$$jsExpression };
+type BindingType =
+  | 'const'
+  | 'jsExpression'
+  | 'env'
+  | 'jsExpressionAction'
+  | 'navigationAction'
+  | 'secret';
+
+export function getBindingType<V>(binding: BindableAttrValue<V>): BindingType {
+  if ((binding as JsExpressionAttrValue).$$jsExpression) {
+    return 'jsExpression';
+  }
+  if ((binding as EnvAttrValue).$$env) {
+    return 'env';
+  }
+  if ((binding as JsExpressionAction).$$jsExpressionAction) {
+    return 'jsExpressionAction';
+  }
+  if ((binding as NavigationAction).$$navigationAction) {
+    return 'navigationAction';
   }
-  if (value && typeof value === 'object' && typeof (value as any).$$env === 'string') {
-    return { type: 'env', value: (value as any).$$env };
+  if ((binding as SecretAttrValue<V>).$$secret) {
+    return 'secret';
   }
-  return { type: 'const', value: value as V };
+  return 'const';
 }
 
-export function fromBindable<V>(bindable: BindableAttrValue<V>) {
-  switch (bindable.type) {
-    case 'const':
-      return bindable.value;
-    case 'jsExpression':
-      return { $$jsExpression: bindable.value };
-    case 'env':
-      return { $$env: bindable.value };
-    default:
-      throw new Error(`Unsupported bindable "${bindable.type}"`);
+export function getBindingValue<V>(binding: BindableAttrValue<V>):
+  | V
+  | string
+  | {
+      page: string;
+      parameters?: Record<string, unknown>;
+    } {
+  if ((binding as JsExpressionAttrValue).$$jsExpression) {
+    return (binding as JsExpressionAttrValue).$$jsExpression;
+  }
+  if ((binding as EnvAttrValue).$$env) {
+    return (binding as EnvAttrValue).$$env;
+  }
+  if ((binding as JsExpressionAction).$$jsExpressionAction) {
+    return (binding as JsExpressionAction).$$jsExpressionAction;
+  }
+  if ((binding as NavigationAction).$$navigationAction) {
+    return (binding as NavigationAction).$$navigationAction;
+  }
+  if ((binding as SecretAttrValue<V>).$$secret) {
+    return (binding as SecretAttrValue<V>).$$secret;
   }
+  return binding as V;
 }