More type adjustments

packages/core/src/components/shape/rendered-shape.tsx

@@ -2,8 +2,14 @@
 import * as React from 'react'
 import type { TLShapeUtil, TLRenderInfo, TLShape } from '+types'
 
+interface RenderedShapeProps<T extends TLShape, E extends Element, M>
+  extends TLRenderInfo<T, E, M> {
+  shape: T
+  utils: TLShapeUtil<T, E, M>
+}
+
 export const RenderedShape = React.memo(
-  <T extends TLShape, E extends Element, M = any>({
+  <T extends TLShape, E extends Element, M>({
     shape,
     utils,
     isEditing,
@@ -15,14 +21,7 @@ export const RenderedShape = React.memo(
     onShapeBlur,
     events,
     meta,
-  }: TLRenderInfo<T, E, M> & {
-    shape: T
-    utils: TLShapeUtil<T, E, M> & {
-      _Component: React.ForwardRefExoticComponent<
-        { shape: T; ref: React.ForwardedRef<E> } & TLRenderInfo<T> & React.RefAttributes<E>
-      >
-    }
-  }) => {
+  }: RenderedShapeProps<T, E, M>) => {
     const ref = utils.getRef(shape)
 
     return (

packages/core/src/components/shape/shape-node.tsx

@@ -2,8 +2,12 @@ import * as React from 'react'
 import type { IShapeTreeNode, TLShape, TLShapeUtils } from '+types'
 import { Shape } from './shape'
 
+interface ShapeNodeProps<T extends TLShape, E extends Element> extends IShapeTreeNode<T> {
+  utils: TLShapeUtils<T, E>
+}
+
 export const ShapeNode = React.memo(
-  ({
+  <T extends TLShape, E extends Element>({
     shape,
     utils,
     children,
@@ -13,7 +17,7 @@ export const ShapeNode = React.memo(
     isSelected,
     isCurrentParent,
     meta,
-  }: { utils: TLShapeUtils<TLShape, Element> } & IShapeTreeNode<TLShape, any>) => {
+  }: ShapeNodeProps<T, E>) => {
     return (
       <>
         <Shape

packages/core/src/components/shape/shape.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as React from 'react'
 import { useShapeEvents } from '+hooks'
@@ -7,7 +6,11 @@ import { RenderedShape } from './rendered-shape'
 import { Container } from '+components/container'
 import { useTLContext } from '+hooks'
 
-export const Shape = <T extends TLShape, E extends Element, M = any>({
+interface ShapeProps<T extends TLShape, E extends Element, M> extends IShapeTreeNode<T, M> {
+  utils: TLShapeUtil<T, E, M>
+}
+
+export const Shape = <T extends TLShape, E extends Element, M>({
   shape,
   utils,
   isEditing,
@@ -16,9 +19,7 @@ export const Shape = <T extends TLShape, E extends Element, M = any>({
   isSelected,
   isCurrentParent,
   meta,
-}: IShapeTreeNode<T, M> & {
-  utils: TLShapeUtil<T, E, M>
-}) => {
+}: ShapeProps<T, E, M>) => {
   const { callbacks } = useTLContext()
   const bounds = utils.getBounds(shape)
   const events = useShapeEvents(shape.id, isCurrentParent)
@@ -38,7 +39,7 @@ export const Shape = <T extends TLShape, E extends Element, M = any>({
         isHovered={isHovered}
         isSelected={isSelected}
         utils={utils as any}
-        meta={meta as any}
+        meta={meta}
         events={events}
         onShapeChange={callbacks.onShapeChange}
       />

packages/core/src/types.ts

@@ -56,10 +56,12 @@ export interface TLShape {
   isAspectRatioLocked?: boolean
 }
 
-export type TLShapeUtils<T extends TLShape = any, E extends Element = any, M = any> = Record<
-  string,
-  TLShapeUtil<T, E, M>
->
+export type TLShapeUtils<
+  T extends TLShape = any,
+  E extends Element = any,
+  M = any,
+  K = any
+> = Record<string, TLShapeUtil<T, E, M, K>>
 
 export interface TLRenderInfo<T extends TLShape, E = any, M = any> {
   shape: T
@@ -269,7 +271,12 @@ export interface TLBezierCurveSegment {
 /*                   Shape Utility                    */
 /* -------------------------------------------------- */
 
-export interface TLShapeUtil<T extends TLShape, E extends Element, M extends any> {
+export type TLShapeUtil<
+  T extends TLShape,
+  E extends Element,
+  M = any,
+  K = { [key: string]: any }
+> = K & {
   type: T['type']
 
   defaultProps: T

packages/tldraw/src/types.ts

@@ -212,9 +212,14 @@ export type TLDrawShape =
   | GroupShape
   | PostItShape
 
-export type TLDrawShapeUtil<T extends TLDrawShape> = TLShapeUtil<T, any, TLDrawMeta> & {
-  toolType: TLDrawToolType
-}
+export type TLDrawShapeUtil<T extends TLDrawShape> = TLShapeUtil<
+  T,
+  any,
+  TLDrawMeta,
+  {
+    toolType: TLDrawToolType
+  }
+>
 
 export type ArrowBinding = TLBinding<{
   handleId: keyof ArrowShape['handles']