Improve dataGrid.selection types (#1790)

mui · Mar 24, 2023 · 01c5525 · 01c5525
1 parent 1c56959
commit 01c5525
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 8 deletions.
diff --git a/packages/toolpad-app/src/components/MonacoEditor.tsx b/packages/toolpad-app/src/components/MonacoEditor.tsx
@@ -164,6 +164,7 @@ const TYPESCRIPT_DEFAULT_COMPILER_OPTIONS: monaco.languages.typescript.CompilerO
   allowJs: true,
   lib: ['es2020'],
   typeRoots: ['node_modules/@types'],
+  strictNullChecks: true,
 };
 
 monaco.languages.typescript.typescriptDefaults.setCompilerOptions(

diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -27,6 +27,7 @@ import {
   ScopeMeta,
   DEFAULT_LOCAL_SCOPE_PARAMS,
   getArgTypeDefaultValue,
+  ScopeMetaPropField,
 } from '@mui/toolpad-core';
 import { createProvidedContext } from '@mui/toolpad-core/utils/react';
 import { QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query';
@@ -702,6 +703,8 @@ function parseBindings(
 
       const { argTypes = {} } = componentConfig ?? {};
 
+      const propsMeta: Record<string, ScopeMetaPropField> = {};
+
       for (const [propName, argType] of Object.entries(argTypes)) {
         const initializerId = argType?.defaultValueProp
           ? `${elm.id}.props.${argType.defaultValueProp}`
@@ -724,12 +727,12 @@ function parseBindings(
           !NON_BINDABLE_CONTROL_TYPES.includes(argType?.control?.type as string)
         ) {
           scopePath = `${elm.name}.${propName}`;
-          scopeMeta[elm.name] = {
-            kind: 'element',
-            componentId,
-          };
         }
 
+        propsMeta[propName] = {
+          tsType: argType?.tsType,
+        };
+
         if (argType) {
           if (argType.onChangeProp) {
             controlled.add(bindingId);
@@ -743,6 +746,14 @@ function parseBindings(
         }
       }
 
+      if (componentId !== PAGE_ROW_COMPONENT_ID) {
+        scopeMeta[elm.name] = {
+          kind: 'element',
+          componentId,
+          props: propsMeta,
+        };
+      }
+
       if (!isPageLayoutComponent(elm)) {
         for (const [propName, argType] of Object.entries(layoutBoxArgTypes)) {
           const binding =

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/JsExpressionEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/JsExpressionEditor.tsx
@@ -51,6 +51,19 @@ export function JsExpressionEditor({
     const globalDeclarations = Object.entries(globalScopeMeta).map(([key, metaData = {}]) => {
       const { deprecated, description, tsType } = metaData;
 
+      const overrides: Record<string, string> = {};
+
+      if (metaData.kind === 'element') {
+        const { props } = metaData;
+        if (props) {
+          for (const [prop, meta] of Object.entries(props)) {
+            if (meta.tsType) {
+              overrides[prop] = meta.tsType;
+            }
+          }
+        }
+      }
+
       const commentLines = [];
 
       if (description) {
@@ -66,13 +79,35 @@ export function JsExpressionEditor({
       const comment =
         commentLines.length > 0 ? ['/**', ...commentLines.map((line) => ` * ${line}`), ' */'] : [];
 
-      const declaration = tsType
-        ? `declare const ${key}: ${tsType}`
-        : `declare const ${key}: RootObject[${JSON.stringify(key)}];`;
+      const overridesType = `{ 
+        ${Object.entries(overrides)
+          .map(([propKey, propValue]) => {
+            return `${propKey}: ${propValue.replaceAll(
+              /\bThisComponent\b/g,
+              `RootObject[${JSON.stringify(key)}]`,
+            )}`;
+          })
+          .join('\n')} 
+      }`;
+
+      const globalType =
+        typeof tsType === 'string'
+          ? tsType
+          : `OverrideProps<RootObject[${JSON.stringify(key)}], ${overridesType}>;`;
+
+      const declaration = `declare const ${key}: Expand<${globalType}>`;
       return [...comment, declaration].join('\n');
     });
 
     const content = `
+      type OverrideProps<T, S extends Partial<Record<keyof T, unknown>>> = {
+        [K in keyof T]:  S extends { [M in K]: any } ? S[K] : T[K]
+      }
+
+      // Pretty-print types on hover:
+      // See https://github.com/microsoft/vscode/issues/94679#issuecomment-755194161
+      type Expand<T> = T extends infer O ? { [K in keyof O]: Expand<O[K]> } : never;
+      
       ${generatedTypes.join('\n')}
 
       ${globalDeclarations.join('\n')}

diff --git a/packages/toolpad-app/tsconfig.json b/packages/toolpad-app/tsconfig.json
@@ -11,7 +11,7 @@
       "@mui/toolpad-core/utils/*": ["../toolpad-core/dist/esm/utils/*"]
     },
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": ["dom", "dom.iterable", "es2022"],
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,

diff --git a/packages/toolpad-components/src/DataGrid.tsx b/packages/toolpad-components/src/DataGrid.tsx
@@ -591,6 +591,7 @@ export default createComponent(DataGridComponent, {
       helperText: 'The currently selected row. Or `null` in case no row has been selected.',
       typeDef: { type: 'object', default: null },
       onChangeProp: 'onSelectionChange',
+      tsType: `ThisComponent['rows'][number] | undefined`,
     },
     density: {
       helperText:

diff --git a/packages/toolpad-core/src/types.ts b/packages/toolpad-core/src/types.ts
@@ -216,6 +216,8 @@ export interface ArgTypeDefinition<P extends object = {}, V = P[keyof P]> {
    * @returns {boolean} a boolean value indicating whether the property should be visible or not
    */
   visible?: ((props: P) => boolean) | boolean;
+
+  tsType?: string;
 }
 
 export type ArgTypeDefinitions<P extends object = {}> = {
@@ -252,6 +254,10 @@ export type BindingEvaluationResult<T = unknown> = {
 
 export type LiveBinding = BindingEvaluationResult;
 
+export interface ScopeMetaPropField {
+  tsType?: string;
+}
+
 export type ScopeMetaField = {
   description?: string;
   deprecated?: boolean | string;
@@ -263,6 +269,7 @@ export type ScopeMetaField = {
   | {
       kind: 'element';
       componentId: string;
+      props?: Record<string, ScopeMetaPropField>;
     }
   | {
       kind: 'query' | 'local';