Allows for additional properties

packages/core/src/components/renderer/renderer.tsx

@@ -14,7 +14,7 @@ import { Inputs } from '../../inputs'
 import { useTLTheme, TLContext, TLContextType } from '../../hooks'
 import type { TLShapeUtil } from '+index'
 
-export interface RendererProps<T extends TLShape, E extends Element, M = any>
+export interface RendererProps<T extends TLShape, E extends Element = any, M = any>
   extends Partial<TLCallbacks<T>> {
   /**
    * An object containing instances of your shape classes.

packages/core/src/shapes/createShape.spec.tsx

@@ -12,8 +12,9 @@ export interface BoxShape extends TLShape {
   size: number[]
 }
 
-export const Box = new ShapeUtil<BoxShape, SVGSVGElement, null>(() => {
+export const Box = new ShapeUtil<BoxShape, SVGSVGElement, null, { age: number }>(() => {
   return {
+    age: 100,
     type: 'box',
     defaultProps: {
       id: 'example1',
@@ -90,6 +91,10 @@ describe('shape utils', () => {
     expect(Box).toBeTruthy()
   })
 
+  it('creates a shape utils with extended properties', () => {
+    expect(Box.age).toBe(100)
+  })
+
   it('creates a shape', () => {
     expect(Box.create({ id: 'box1' })).toStrictEqual({
       ...boxShape,

packages/core/src/shapes/createShape.tsx

@@ -5,13 +5,14 @@ import type { TLShape, TLShapeUtil } from '+types'
 import Utils from '+utils'
 import { intersectPolylineBounds, intersectRayBounds } from '@tldraw/intersect'
 
-export const ShapeUtil = function <T extends TLShape, E extends Element, M = any>(
+export const ShapeUtil = function <T extends TLShape, E extends Element, M = any, K = unknown>(
-  this: TLShapeUtil<T, E, M>,
+  this: TLShapeUtil<T, E, M> & K,
   fn: (
-    this: TLShapeUtil<T, E, M>
+    this: TLShapeUtil<T, E, M> & K
   ) => Partial<TLShapeUtil<T, E, M>> &
-    Pick<TLShapeUtil<T, E, M>, 'type' | 'defaultProps' | 'Component' | 'Indicator' | 'getBounds'>
+    Pick<TLShapeUtil<T, E, M>, 'type' | 'defaultProps' | 'Component' | 'Indicator' | 'getBounds'> &
-) {
+    K
+): TLShapeUtil<T, E, M> & ReturnType<typeof fn> {
   const defaults: Partial<TLShapeUtil<T, E, M>> = {
     refMap: new Map(),
 
@@ -211,10 +212,14 @@ export const ShapeUtil = function <T extends TLShape, E extends Element, M = any
 
   return this
 } as unknown as {
-  new <T extends TLShape, E extends Element, M = any>(
+  new <T extends TLShape, E extends Element, M = any, K = unknown>(
     fn: (
       this: TLShapeUtil<T, E, M>
     ) => Partial<TLShapeUtil<T, E, M>> &
-      Pick<TLShapeUtil<T, E, M>, 'type' | 'defaultProps' | 'Component' | 'Indicator' | 'getBounds'>
+      Pick<
-  ): TLShapeUtil<T, E, M>
+        TLShapeUtil<T, E, M>,
+        'type' | 'defaultProps' | 'Component' | 'Indicator' | 'getBounds'
+      > &
+      K
+  ): TLShapeUtil<T, E, M> & ReturnType<typeof fn>
 }

packages/tldraw/src/shape/shape-utils.tsx

@@ -13,6 +13,6 @@ export const tldrawShapeUtils: Record<TLDrawShapeType, any> = {
   [TLDrawShapeType.PostIt]: PostIt,
 }
 
-export function getShapeUtils<T extends TLDrawShape>(type: TLDrawShapeType) {
+export function getShapeUtils<T extends TLDrawShape>(type: T['type']) {
-  return tldrawShapeUtils[type] as TLDrawShapeUtil<T, any>
+  return tldrawShapeUtils[type] as TLDrawShapeUtil<T>
 }

packages/tldraw/src/state/session/sessions/brush/brush.session.ts

@@ -1,7 +1,6 @@
 import { brushUpdater, Utils } from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
 import { Data, Session, TLDrawPatch, TLDrawStatus } from '~types'
-import { getShapeUtils } from '~shape'
 import { TLDR } from '~state/tldr'
 
 export class BrushSession implements Session {

packages/tldraw/src/state/tldr.ts

@@ -15,9 +15,9 @@ import { Vec } from '@tldraw/vec'
 
 export class TLDR {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static getShapeUtils<T extends TLDrawShape>(type: T['type']): TLDrawShapeUtil<T, any>
+  static getShapeUtils<T extends TLDrawShape>(type: T['type']): TLDrawShapeUtil<T>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static getShapeUtils<T extends TLDrawShape>(shape: T): TLDrawShapeUtil<T, any>
+  static getShapeUtils<T extends TLDrawShape>(shape: T): TLDrawShapeUtil<T>
   static getShapeUtils<T extends TLDrawShape>(shape: T | T['type']) {
     return getShapeUtils<T>(typeof shape === 'string' ? shape : shape.type)
   }

packages/tldraw/src/types.ts

@@ -212,8 +212,7 @@ export type TLDrawShape =
   | GroupShape
   | PostItShape
 
-export interface TLDrawShapeUtil<T extends TLDrawShape, E extends Element>
+export type TLDrawShapeUtil<T extends TLDrawShape> = TLShapeUtil<T, any, TLDrawMeta> & {
-  extends TLShapeUtil<T, E, TLDrawMeta> {
   toolType: TLDrawToolType
 }