fix: type instantiation is excessively deep (#4262)

TanStack · Aug 3, 2022 · a9c4ded · a9c4ded
1 parent 2cb4b7a
commit a9c4ded
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 34 deletions.
diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
@@ -17,17 +17,20 @@ type Person = {
   visits: number
   status: string
   progress: number
+  friend?: Person
+}
+
+const friend: Person = {
+  firstName: 'tanner',
+  lastName: 'linsley',
+  age: 24,
+  visits: 100,
+  status: 'In Relationship',
+  progress: 50,
 }
 
 const defaultData: Person[] = [
-  {
-    firstName: 'tanner',
-    lastName: 'linsley',
-    age: 24,
-    visits: 100,
-    status: 'In Relationship',
-    progress: 50,
-  },
+  friend,
   {
     firstName: 'tandy',
     lastName: 'miller',
@@ -43,6 +46,7 @@ const defaultData: Person[] = [
     visits: 20,
     status: 'Complicated',
     progress: 10,
+    friend
   },
 ]
 
@@ -76,6 +80,11 @@ const columns = [
     header: 'Profile Progress',
     footer: info => info.column.id,
   }),
+  columnHelper.accessor('friend', {
+    header: 'Friend',
+    cell: info => JSON.stringify(info.getValue()),
+    footer: info => info.column.id,
+  }),
 ]
 
 function App() {

diff --git a/packages/react-table-devtools/src/Explorer.tsx b/packages/react-table-devtools/src/Explorer.tsx
@@ -80,7 +80,7 @@ const DefaultRenderer = ({
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>
-                {subEntries.map((entry) => handleEntry(entry))}
+                {subEntries.map(entry => handleEntry(entry))}
               </SubEntries>
             ) : (
               <SubEntries>
@@ -89,10 +89,10 @@ const DefaultRenderer = ({
                     <Entry>
                       <Label
                         onClick={() =>
-                          setExpandedPages((old) =>
+                          setExpandedPages(old =>
                             old.includes(index)
-                              ? old.filter((d) => d !== index)
-                              : [...old, index],
+                              ? old.filter(d => d !== index)
+                              : [...old, index]
                           )
                         }
                       >
@@ -101,7 +101,7 @@ const DefaultRenderer = ({
                       </Label>
                       {expandedPages.includes(index) ? (
                         <SubEntries>
-                          {entries.map((entry) => handleEntry(entry))}
+                          {entries.map(entry => handleEntry(entry))}
                         </SubEntries>
                       ) : null}
                     </Entry>
@@ -146,8 +146,8 @@ export default function Explorer({
 }) {
   const [expanded, setExpanded] = React.useState(defaultExpanded)
 
-  const toggle = (set) => {
-    setExpanded((old) => (typeof set !== 'undefined' ? set : !old))
+  const toggle = set => {
+    setExpanded(old => (typeof set !== 'undefined' ? set : !old))
   }
 
   const path = []
@@ -156,7 +156,7 @@ export default function Explorer({
   let subEntries
   const subEntryPages = []
 
-  const makeProperty = (sub) => {
+  const makeProperty = sub => {
     const newPath = path.concat(sub.label)
     const subDefaultExpanded =
       defaultExpanded === true
@@ -177,7 +177,7 @@ export default function Explorer({
       makeProperty({
         label: i,
         value: d,
-      }),
+      })
     )
   } else if (
     value !== null &&
@@ -189,7 +189,7 @@ export default function Explorer({
       makeProperty({
         label: i,
         value: val,
-      }),
+      })
     )
   } else if (typeof value === 'function') {
     type = 'function'
@@ -200,7 +200,7 @@ export default function Explorer({
       makeProperty({
         label,
         value,
-      }),
+      })
     )
   }
 
@@ -214,7 +214,7 @@ export default function Explorer({
   }
 
   return renderer({
-    handleEntry: (entry) => (
+    handleEntry: entry => (
       <Explorer key={entry.label} renderer={renderer} {...rest} {...entry} />
     ),
     type,

diff --git a/packages/react-table-devtools/src/styledComponents.ts b/packages/react-table-devtools/src/styledComponents.ts
@@ -17,7 +17,7 @@ export const Panel = styled(
       fontSize: '.9em',
       // flexDirection: 'column',
     },
-  },
+  }
 )
 
 export const ActivePanel = styled(
@@ -33,7 +33,7 @@ export const ActivePanel = styled(
     '(max-width: 700px)': (_props, theme) => ({
       borderTop: `2px solid ${theme.gray}`,
     }),
-  },
+  }
 )
 
 export const Button = styled('button', (props, theme) => ({
@@ -102,5 +102,5 @@ export const Select = styled(
     '(max-width: 500px)': {
       display: 'none',
     },
-  },
+  }
 )
diff --git a/packages/react-table-devtools/src/utils.ts b/packages/react-table-devtools/src/utils.ts
@@ -51,7 +51,7 @@ type Styles =
 export function styled<T extends keyof HTMLElementTagNameMap>(
   type: T,
   newStyles: Styles,
-  queries: Record<string, Styles> = {},
+  queries: Record<string, Styles> = {}
 ) {
   return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(
     ({ style, ...rest }, ref) => {
@@ -67,7 +67,7 @@ export function styled<T extends keyof HTMLElementTagNameMap>(
               }
             : current
         },
-        {},
+        {}
       )
 
       return React.createElement(type, {
@@ -81,7 +81,7 @@ export function styled<T extends keyof HTMLElementTagNameMap>(
         },
         ref,
       })
-    },
+    }
   )
 }
 
@@ -116,7 +116,7 @@ export function useSafeState<T>(initialState: T): [T, (value: T) => void] {
         }
       })
     },
-    [isMounted],
+    [isMounted]
   )
 
   return [state, safeSetState]
@@ -129,9 +129,9 @@ export function useSafeState<T>(initialState: T): [T, (value: T) => void] {
 function scheduleMicrotask(callback: () => void) {
   Promise.resolve()
     .then(callback)
-    .catch((error) =>
+    .catch(error =>
       setTimeout(() => {
         throw error
-      }),
+      })
     )
 }
diff --git a/packages/table-core/src/utils.ts b/packages/table-core/src/utils.ts
@@ -48,18 +48,48 @@ export type DeepKeys<T> = unknown extends T
   : object extends T
   ? string
   : T extends readonly any[] & IsTuple<T>
-  ? AllowedIndexes<T> | DeepKeysPrefix<T, AllowedIndexes<T>>
+  ? AllowedIndexes<T> | DeepKeysPrefix<T>
   : T extends any[]
   ? never & 'Dynamic length array indexing is not supported'
   : T extends Date
   ? never
   : T extends object
-  ? (keyof T & string) | DeepKeysPrefix<T, keyof T>
+  ? (keyof T & string) | DeepKeysPrefix<T>
   : never
 
-type DeepKeysPrefix<T, TPrefix> = TPrefix extends keyof T & (number | string)
-  ? `${TPrefix}.${DeepKeys<T[TPrefix]> & string}`
-  : never
+type Key = string | number | symbol
+type Join<L extends Key | undefined, R extends Key | undefined> = L extends
+  | string
+  | number
+  ? R extends string | number
+    ? `${L}.${R}`
+    : L
+  : R extends string | number
+  ? R
+  : undefined
+type Union<
+  L extends unknown | undefined,
+  R extends unknown | undefined
+> = L extends undefined
+  ? R extends undefined
+    ? undefined
+    : R
+  : R extends undefined
+  ? L
+  : L | R
+type DeepKeysPrefix<
+  T extends object,
+  Prev extends Key | undefined = undefined,
+  Path extends Key | undefined = undefined,
+  PrevTypes extends object = T
+> = string &
+  {
+    [K in keyof T]: T[K] extends PrevTypes | T
+      ? Union<Union<Prev, Path>, Join<Path, K>>
+      : T[K] extends object
+      ? DeepKeysPrefix<T[K], Union<Prev, Path>, Join<Path, K>, PrevTypes | T>
+      : Union<Union<Prev, Path>, Join<Path, K>>
+  }[keyof T]
 
 export type DeepValue<T, TProp> = T extends Record<string | number, any>
   ? TProp extends `${infer TBranch}.${infer TDeepProp}`