Add optional generic to updateShapes / createShapes (#1579)

This PR adds a generic that we can use with `updateShapes` and
`createShapes` in order to type the partials being passed into those
methods. By default, the partials are typed as `TLUnknownShape`, which
accepts any props.

### Change Type

- [x] `minor` — New feature

### Test Plan

- [x] Unit Tests

### Release Notes

- [editor] adds an optional shape generic to `updateShapes` and
`createShapes`

apps/examples/src/2-api/APIExample.tsx

@@ -1,4 +1,11 @@
-import { createShapeId, Editor, Tldraw, TLGeoShape, useEditor } from '@tldraw/tldraw'
+import {
+	createShapeId,
+	Editor,
+	Tldraw,
+	TLGeoShape,
+	TLShapePartial,
+	useEditor,
+} from '@tldraw/tldraw'
 import '@tldraw/tldraw/editor.css'
 import '@tldraw/tldraw/ui.css'
 import { useEffect } from 'react'
@@ -18,7 +25,7 @@ export default function APIExample() {
 		editor.focus()
 
 		// Create a shape
-		editor.createShapes([
+		editor.createShapes<TLGeoShape>([
 			{
 				id,
 				type: 'geo',
@@ -38,17 +45,17 @@ export default function APIExample() {
 		// Get the created shape
 		const shape = editor.getShapeById<TLGeoShape>(id)!
 
-		// Update the shape
+		const shapeUpdate: TLShapePartial<TLGeoShape> = {
-		editor.updateShapes([
+			id,
-			{
+			type: 'geo',
-				id,
+			props: {
-				type: 'geo',
+				h: shape.props.h * 3,
-				props: {
+				text: 'hello world!',
-					h: shape.props.h * 3,
-					text: 'hello world!',
-				},
 			},
-		])
+		}
+
+		// Update the shape
+		editor.updateShapes([shapeUpdate])
 
 		// Select the shape
 		editor.select(id)

apps/examples/src/8-error-boundary/ErrorBoundaryExample.tsx

@@ -1,4 +1,4 @@
-import { createShapeId, Tldraw } from '@tldraw/tldraw'
+import { createShapeId, Tldraw, TLShapePartial } from '@tldraw/tldraw'
 import '@tldraw/tldraw/editor.css'
 import '@tldraw/tldraw/ui.css'
 import { ErrorShape } from './ErrorShape'
@@ -16,16 +16,16 @@ export default function ErrorBoundaryExample() {
 					ShapeErrorFallback: ({ error }) => <div>Shape error! {String(error)}</div>, // use a custom error fallback for shapes
 				}}
 				onMount={(editor) => {
+					const errorShapePartial: TLShapePartial<ErrorShape> = {
+						type: 'error',
+						id: createShapeId(),
+						x: 0,
+						y: 0,
+						props: { message: 'Something has gone wrong' },
+					}
+
 					// When the app starts, create our error shape so we can see.
-					editor.createShapes([
+					editor.createShapes<ErrorShape>([errorShapePartial])
-						{
-							type: 'error',
-							id: createShapeId(),
-							x: 0,
-							y: 0,
-							props: { message: 'Something has gone wrong' },
-						},
-					])
 
 					// Center the camera on the error shape
 					editor.zoomToFit()

packages/editor/api-report.md

@@ -424,7 +424,7 @@ export class Editor extends EventEmitter<TLEventMap> {
         };
     };
     createPage(title: string, id?: TLPageId, belowPageIndex?: string): this;
-    createShapes(partials: TLShapePartial[], select?: boolean): this;
+    createShapes<T extends TLUnknownShape>(partials: TLShapePartial<T>[], select?: boolean): this;
     get croppingId(): null | TLShapeId;
     get cullingBounds(): Box2d;
     // @internal (undocumented)
@@ -760,7 +760,7 @@ export class Editor extends EventEmitter<TLEventMap> {
     updateDocumentSettings(settings: Partial<TLDocument>): void;
     updateInstanceState(partial: Partial<Omit<TLInstance, 'currentPageId'>>, ephemeral?: boolean, squashing?: boolean): this;
     updatePage(partial: RequiredKeys<TLPage, 'id'>, squashing?: boolean): this;
-    updateShapes(partials: (null | TLShapePartial | undefined)[], squashing?: boolean): this;
+    updateShapes<T extends TLUnknownShape>(partials: (null | TLShapePartial<T> | undefined)[], squashing?: boolean): this;
     updateViewportScreenBounds(center?: boolean): this;
     // (undocumented)
     readonly user: UserPreferencesManager;

packages/editor/src/lib/editor/Editor.ts

@@ -1348,7 +1348,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		if (finalIndex !== reparentedArrow.index) {
-			this.updateShapes([{ id: arrowId, type: 'arrow', index: finalIndex }])
+			this.updateShapes<TLArrowShape>([{ id: arrowId, type: 'arrow', index: finalIndex }])
 		}
 	}
 
@@ -4636,14 +4636,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @example
 	 *
 	 * ```ts
-	 * editor.createShapes([{ id: 'box1', type: 'box' }])
+	 * editor.createShapes([{ id: 'box1', type: 'text', props: { text: "ok" } }])
 	 * ```
 	 *
 	 * @param partials - The shape partials to create.
 	 * @param select - Whether to select the created shapes. Defaults to false.
 	 * @public
 	 */
-	createShapes(partials: TLShapePartial[], select = false) {
+	createShapes<T extends TLUnknownShape>(partials: TLShapePartial<T>[], select = false) {
 		this._createShapes(partials, select)
 		return this
 	}
@@ -4934,14 +4934,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @example
 	 *
 	 * ```ts
-	 * editor.updateShapes([{ id: 'box1', type: 'box', x: 100, y: 100 }])
+	 * editor.updateShapes([{ id: 'box1', type: 'geo', props: { w: 100, h: 100 } }])
 	 * ```
 	 *
 	 * @param partials - The shape partials to update.
 	 * @param squashing - Whether the change is ephemeral.
 	 * @public
 	 */
-	updateShapes(partials: (TLShapePartial | null | undefined)[], squashing = false) {
+	updateShapes<T extends TLUnknownShape>(
+		partials: (TLShapePartial<T> | null | undefined)[],
+		squashing = false
+	) {
 		let compactedPartials = compact(partials)
 		if (this.animatingShapes.size > 0) {
 			compactedPartials.forEach((p) => this.animatingShapes.delete(p.id))
@@ -8985,7 +8988,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const highestIndex = shapesWithRootParent[shapesWithRootParent.length - 1]?.index
 
 		this.batch(() => {
-			this.createShapes([
+			this.createShapes<TLGroupShape>([
 				{
 					id: groupId,
 					type: 'group',

packages/editor/src/lib/editor/derivations/arrowBindingsIndex.test.tsx

@@ -1,4 +1,4 @@
-import { TLShapeId } from '@tldraw/tlschema'
+import { TLArrowShape, TLShapeId } from '@tldraw/tlschema'
 import { TestEditor } from '../../test/TestEditor'
 import { TL } from '../../test/jsx'
 
@@ -212,7 +212,7 @@ describe('arrowBindingsIndex', () => {
 			)
 
 			// move arrowA from box2 to box3
-			editor.updateShapes([
+			editor.updateShapes<TLArrowShape>([
 				{
 					id: arrowAId,
 					type: 'arrow',

packages/editor/src/lib/editor/managers/ExternalContentManager.ts

@@ -6,6 +6,8 @@ import {
 	TLAssetId,
 	TLEmbedShape,
 	TLShapePartial,
+	TLTextShape,
+	TLTextShapeProps,
 	createShapeId,
 } from '@tldraw/tlschema'
 import { compact, getHashForString } from '@tldraw/utils'
@@ -248,7 +250,7 @@ export class ExternalContentManager {
 		let w: number
 		let h: number
 		let autoSize: boolean
-		let align = 'middle'
+		let align = 'middle' as TLTextShapeProps['align']
 
 		const isMultiLine = textToPaste.split('\n').length > 1
 
@@ -293,7 +295,7 @@ export class ExternalContentManager {
 			p.y = editor.viewportPageBounds.minY + 40 + h / 2
 		}
 
-		editor.createShapes([
+		editor.createShapes<TLTextShape>([
 			{
 				id: createShapeId(),
 				type: 'text',

packages/editor/src/lib/editor/shapes/arrow/ArrowShapeUtil.tsx

@@ -907,7 +907,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 		} = shape
 
 		if (text.trimEnd() !== shape.props.text) {
-			this.editor.updateShapes([
+			this.editor.updateShapes<TLArrowShape>([
 				{
 					id,
 					type,

packages/editor/src/lib/editor/shapes/arrow/toolStates/Pointing.ts

@@ -2,7 +2,6 @@ import { createShapeId, TLArrowShape } from '@tldraw/tlschema'
 import { ArrowShapeUtil } from '../../../shapes/arrow/ArrowShapeUtil'
 import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers } from '../../../types/event-types'
-import { ArrowShapeTool } from '../ArrowShapeTool'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'
@@ -31,16 +30,14 @@ export class Pointing extends StateNode {
 
 		this.didTimeout = false
 
-		const shapeType = (this.parent as ArrowShapeTool).shapeType
-
 		this.editor.mark('creating')
 
 		const id = createShapeId()
 
-		this.editor.createShapes([
+		this.editor.createShapes<TLArrowShape>([
 			{
 				id,
-				type: shapeType,
+				type: 'arrow',
 				x: currentPagePoint.x,
 				y: currentPagePoint.y,
 			},

packages/editor/src/lib/editor/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -139,7 +139,7 @@ function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape)
 	if (editor.getAssetById(assetId)) {
 		// Existing asset for this URL?
 		if (shape.props.assetId !== assetId) {
-			editor.updateShapes([
+			editor.updateShapes<TLBookmarkShape>([
 				{
 					id: shape.id,
 					type: shape.type,
@@ -151,7 +151,7 @@ function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape)
 		// No asset for this URL?
 
 		// First, clear out the existing asset reference
-		editor.updateShapes([
+		editor.updateShapes<TLBookmarkShape>([
 			{
 				id: shape.id,
 				type: shape.type,
@@ -181,7 +181,7 @@ const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TL
 		editor.createAssets([asset])
 
 		// And update the shape
-		editor.updateShapes([
+		editor.updateShapes<TLBookmarkShape>([
 			{
 				id: shape.id,
 				type: shape.type,

packages/editor/src/lib/editor/shapes/draw/toolStates/Drawing.ts

@@ -4,6 +4,7 @@ import {
 	TLDrawShape,
 	TLDrawShapeSegment,
 	TLHighlightShape,
+	TLShapePartial,
 	TLSizeType,
 	Vec2dModel,
 } from '@tldraw/tlschema'
@@ -25,7 +26,7 @@ export class Drawing extends StateNode {
 
 	initialShape?: DrawableShape
 
-	shapeType: 'draw' | 'highlight' = this.parent.id === 'highlight' ? 'highlight' : 'draw'
+	shapeType: DrawableShape['type'] = this.parent.id === 'highlight' ? 'highlight' : 'draw'
 
 	util =
 		this.shapeType === 'highlight'
@@ -219,16 +220,22 @@ export class Drawing extends StateNode {
 
 				this.currentLineLength = this.getLineLength(segments)
 
-				this.editor.updateShapes([
+				const shapePartial: TLShapePartial<DrawableShape> = {
-					{
+					id: shape.id,
-						id: shape.id,
+					type: this.shapeType,
-						type: this.shapeType,
+					props: {
-						props: {
+						segments,
-							segments,
-							isClosed: this.canClose() ? this.getIsClosed(segments, shape.props.size) : undefined,
-						},
 					},
-				])
+				}
+
+				if (this.canClose()) {
+					;(shapePartial as TLShapePartial<TLDrawShape>).props!.isClosed = this.getIsClosed(
+						segments,
+						shape.props.size
+					)
+				}
+
+				this.editor.updateShapes<TLDrawShape | TLHighlightShape>([shapePartial])
 
 				return
 			}
@@ -238,7 +245,8 @@ export class Drawing extends StateNode {
 
 		this.pagePointWhereCurrentSegmentChanged = originPagePoint.clone()
 		const id = createShapeId()
-		this.editor.createShapes([
+
+		this.editor.createShapes<DrawableShape>([
 			{
 				id,
 				type: this.shapeType,
@@ -261,7 +269,6 @@ export class Drawing extends StateNode {
 				},
 			},
 		])
-
 		this.currentLineLength = 0
 		this.initialShape = this.editor.getShapeById<DrawableShape>(id)
 	}
@@ -343,19 +350,22 @@ export class Drawing extends StateNode {
 						}
 					}
 
-					this.editor.updateShapes(
+					const shapePartial: TLShapePartial<DrawableShape> = {
-						[
+						id,
-							{
+						type: this.shapeType,
-								id,
+						props: {
-								type: this.shapeType,
+							segments: [...segments, newSegment],
-								props: {
+						},
-									segments: [...segments, newSegment],
+					}
-									isClosed: this.canClose() ? this.getIsClosed(segments, size) : undefined,
+
-								},
+					if (this.canClose()) {
-							},
+						;(shapePartial as TLShapePartial<TLDrawShape>).props!.isClosed = this.getIsClosed(
-						],
+							segments,
-						true
+							size
-					)
+						)
+					}
+
+					this.editor.updateShapes<TLDrawShape | TLHighlightShape>([shapePartial], true)
 				}
 				break
 			}
@@ -400,19 +410,22 @@ export class Drawing extends StateNode {
 					const finalSegments = [...newSegments, newFreeSegment]
 					this.currentLineLength = this.getLineLength(finalSegments)
 
-					this.editor.updateShapes(
+					const shapePartial: TLShapePartial<DrawableShape> = {
-						[
+						id,
-							{
+						type: this.shapeType,
-								id,
+						props: {
-								type: this.shapeType,
+							segments: finalSegments,
-								props: {
+						},
-									segments: finalSegments,
+					}
-									isClosed: this.canClose() ? this.getIsClosed(finalSegments, size) : undefined,
+
-								},
+					if (this.canClose()) {
-							},
+						;(shapePartial as TLShapePartial<TLDrawShape>).props!.isClosed = this.getIsClosed(
-						],
+							finalSegments,
-						true
+							size
-					)
+						)
+					}
+
+					this.editor.updateShapes([shapePartial], true)
 				}
 
 				break
@@ -539,19 +552,22 @@ export class Drawing extends StateNode {
 					points: [newSegment.points[0], newPoint],
 				}
 
-				this.editor.updateShapes(
+				const shapePartial: TLShapePartial<DrawableShape> = {
-					[
+					id,
-						{
+					type: this.shapeType,
-							id,
+					props: {
-							type: this.shapeType,
+						segments: newSegments,
-							props: {
+					},
-								segments: newSegments,
+				}
-								isClosed: this.canClose() ? this.getIsClosed(segments, size) : undefined,
+
-							},
+				if (this.canClose()) {
-						},
+					;(shapePartial as TLShapePartial<TLDrawShape>).props!.isClosed = this.getIsClosed(
-					],
+						segments,
-					true
+						size
-				)
+					)
+				}
+
+				this.editor.updateShapes([shapePartial], true)
 
 				break
 			}
@@ -581,19 +597,22 @@ export class Drawing extends StateNode {
 
 				this.currentLineLength = this.getLineLength(newSegments)
 
-				this.editor.updateShapes(
+				const shapePartial: TLShapePartial<DrawableShape> = {
-					[
+					id,
-						{
+					type: this.shapeType,
-							id,
+					props: {
-							type: this.shapeType,
+						segments: newSegments,
-							props: {
+					},
-								segments: newSegments,
+				}
-								isClosed: this.canClose() ? this.getIsClosed(segments, size) : undefined,
+
-							},
+				if (this.canClose()) {
-						},
+					;(shapePartial as TLShapePartial<TLDrawShape>).props!.isClosed = this.getIsClosed(
-					],
+						newSegments,
-					true
+						size
-				)
+					)
+				}
+
+				this.editor.updateShapes([shapePartial], true)
 
 				// Set a maximum length for the lines array; after 200 points, complete the line.
 				if (newPoints.length > 500) {
@@ -603,7 +622,7 @@ export class Drawing extends StateNode {
 
 					const newShapeId = createShapeId()
 
-					this.editor.createShapes([
+					this.editor.createShapes<DrawableShape>([
 						{
 							id: newShapeId,
 							type: this.shapeType,

packages/editor/src/lib/editor/shapes/geo/toolStates/Pointing.ts

@@ -14,7 +14,7 @@ export class Pointing extends StateNode {
 
 			this.editor.mark('creating')
 
-			this.editor.createShapes([
+			this.editor.createShapes<TLGeoShape>([
 				{
 					id,
 					type: 'geo',
@@ -63,7 +63,7 @@ export class Pointing extends StateNode {
 
 		this.editor.mark('creating')
 
-		this.editor.createShapes([
+		this.editor.createShapes<TLGeoShape>([
 			{
 				id,
 				type: 'geo',
@@ -85,7 +85,7 @@ export class Pointing extends StateNode {
 		const delta = this.editor.getDeltaInParentSpace(shape, bounds.center)
 
 		this.editor.select(id)
-		this.editor.updateShapes([
+		this.editor.updateShapes<TLGeoShape>([
 			{
 				id: shape.id,
 				type: 'geo',

packages/editor/src/lib/editor/shapes/line/toolStates/Pointing.ts

@@ -4,7 +4,6 @@ import { TLHandle, TLLineShape, TLShapeId, createShapeId } from '@tldraw/tlschem
 import { last, structuredClone } from '@tldraw/utils'
 import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers, TLInterruptEvent } from '../../../types/event-types'
-import { LineShapeTool } from '../LineShapeTool'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'
@@ -79,10 +78,10 @@ export class Pointing extends StateNode {
 		} else {
 			const id = createShapeId()
 
-			this.editor.createShapes([
+			this.editor.createShapes<TLLineShape>([
 				{
 					id,
-					type: (this.parent as LineShapeTool).shapeType,
+					type: 'line',
 					x: currentPagePoint.x,
 					y: currentPagePoint.y,
 				},

packages/editor/src/lib/editor/shapes/shared/useEditableText.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-inner-declarations */
-import { TLShape } from '@tldraw/tlschema'
+import { TLShape, TLUnknownShape } from '@tldraw/tlschema'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { useValue } from 'signia-react'
 import { useEditor } from '../../../hooks/useEditor'
@@ -145,7 +145,9 @@ export function useEditableText<T extends Extract<TLShape, { props: { text: stri
 			}
 			// ----------------------------
 
-			editor.updateShapes([{ id, type, props: { text } }])
+			editor.updateShapes<TLUnknownShape & { props: { text: string } }>([
+				{ id, type, props: { text } },
+			])
 		},
 		[editor, id, type]
 	)

packages/editor/src/lib/editor/shapes/text/toolStates/Pointing.ts

@@ -21,7 +21,7 @@ export class Pointing extends StateNode {
 
 			this.editor.mark('creating')
 
-			this.editor.createShapes([
+			this.editor.createShapes<TLTextShape>([
 				{
 					id,
 					type: 'text',

packages/editor/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -27,20 +27,21 @@ export class Pointing extends StateNode {
 
 			this.editor.mark(this.markId)
 
-			this.editor.createShapes([
+			this.editor.createShapes<TLBaseBoxShape>(
-				{
+				[
-					id,
+					{
-					type: shapeType,
+						id,
-					x: originPagePoint.x,
+						type: shapeType,
-					y: originPagePoint.y,
+						x: originPagePoint.x,
-					props: {
+						y: originPagePoint.y,
-						w: 1,
+						props: {
-						h: 1,
+							w: 1,
+							h: 1,
+						},
 					},
-				},
+				],
-			])
+				true
-
+			)
-			this.editor.setSelectedIds([id])
 			this.editor.setSelectedTool('select.resizing', {
 				...info,
 				target: 'selection',
@@ -83,7 +84,7 @@ export class Pointing extends StateNode {
 
 		this.editor.mark(this.markId)
 
-		this.editor.createShapes([
+		this.editor.createShapes<TLBaseBoxShape>([
 			{
 				id,
 				type: shapeType,
@@ -96,7 +97,7 @@ export class Pointing extends StateNode {
 		const { w, h } = this.editor.getShapeUtil(shape).defaultProps() as TLBaseBoxShape['props']
 		const delta = this.editor.getDeltaInParentSpace(shape, new Vec2d(w / 2, h / 2))
 
-		this.editor.updateShapes([
+		this.editor.updateShapes<TLBaseBoxShape>([
 			{
 				id,
 				type: shapeType,

packages/editor/src/lib/editor/tools/SelectTool/children/Crop/children/Idle.ts

@@ -185,7 +185,7 @@ export class Idle extends StateNode {
 				this.editor.mark('translate crop')
 			}
 
-			this.editor.updateShapes([partial])
+			this.editor.updateShapes<ShapeWithCrop>([partial])
 		}
 	}
 }

packages/editor/src/lib/editor/tools/SelectTool/children/Idle.ts

@@ -1,5 +1,5 @@
 import { Vec2d } from '@tldraw/primitives'
-import { TLGeoShape, TLShape, createShapeId } from '@tldraw/tlschema'
+import { TLGeoShape, TLShape, TLTextShape, createShapeId } from '@tldraw/tlschema'
 import { debugFlags } from '../../../../utils/debug-flags'
 import {
 	TLClickEventInfo,
@@ -382,7 +382,7 @@ export class Idle extends StateNode {
 
 		const { x, y } = this.editor.inputs.currentPagePoint
 
-		this.editor.createShapes([
+		this.editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',

packages/editor/src/lib/test/commands/createShapes.test.ts

@@ -1,4 +1,4 @@
-import { TLGeoShape, createShapeId } from '@tldraw/tlschema'
+import { TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/tlschema'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -16,6 +16,72 @@ beforeEach(() => {
 	editor = new TestEditor()
 })
 
+it('Uses typescript generics', () => {
+	expect(() => {
+		// No error here because no generic, the editor doesn't know what this guy is
+		editor.createShapes([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: { w: 'OH NO' },
+			},
+		])
+		// Yep error here because we are giving the wrong props to the shape
+		editor.createShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+				//@ts-expect-error
+				props: { w: 'OH NO' },
+			},
+		])
+
+		// Yep error here because we are giving the wrong generic
+		editor.createShapes<TLArrowShape>([
+			{
+				id: ids.box1,
+				//@ts-expect-error
+				type: 'geo',
+				//@ts-expect-error
+				props: { w: 'OH NO' },
+			},
+		])
+
+		// All good, correct match of generic and shape type
+		editor.createShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: { w: 100 },
+			},
+		])
+
+		editor.createShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+			},
+			{
+				id: ids.box1,
+				// @ts-expect-error - wrong type
+				type: 'arrow',
+			},
+		])
+
+		// Unions are supported just fine
+		editor.createShapes<TLGeoShape | TLArrowShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+			},
+			{
+				id: ids.box1,
+				type: 'arrow',
+			},
+		])
+	}).toThrowError()
+})
+
 it('Parents shapes to the current page if the parent is not found', () => {
 	editor.createShapes([{ id: ids.box1, parentId: ids.missing, type: 'geo' }])
 	expect(editor.getShapeById(ids.box1)!.parentId).toEqual(editor.currentPageId)

packages/editor/src/lib/test/commands/updateShapes.test.ts

@@ -1,4 +1,4 @@
-import { createShapeId } from '@tldraw/tlschema'
+import { createShapeId, TLArrowShape, TLGeoShape } from '@tldraw/tlschema'
 import { createDefaultShapes, TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -13,6 +13,73 @@ beforeEach(() => {
 	editor.createShapes(createDefaultShapes())
 })
 
+it('Uses typescript generics', () => {
+	expect(() => {
+		// No error here because no generic, the editor doesn't know what this guy is
+		editor.updateShapes([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: { w: 'OH NO' },
+			},
+		])
+
+		// Yep error here because we are giving the wrong props to the shape
+		editor.updateShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+				//@ts-expect-error
+				props: { w: 'OH NO' },
+			},
+		])
+
+		// Yep error here because we are giving the wrong generic
+		editor.updateShapes<TLArrowShape>([
+			{
+				id: ids.box1,
+				//@ts-expect-error
+				type: 'geo',
+				//@ts-expect-error
+				props: { w: 'OH NO' },
+			},
+		])
+
+		// All good, correct match of generic and shape type
+		editor.updateShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: { w: 100 },
+			},
+		])
+
+		editor.updateShapes<TLGeoShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+			},
+			{
+				id: ids.box1,
+				// @ts-expect-error - wrong type
+				type: 'arrow',
+			},
+		])
+
+		// Unions are supported just fine
+		editor.updateShapes<TLGeoShape | TLArrowShape>([
+			{
+				id: ids.box1,
+				type: 'geo',
+			},
+			{
+				id: ids.box1,
+				type: 'arrow',
+			},
+		])
+	}).toThrowError()
+})
+
 it('updates shapes', () => {
 	editor.mark('update shapes')
 	editor.updateShapes([

packages/file-format/src/lib/buildFromV1Document.ts

@@ -19,7 +19,6 @@ import {
 	TLNoteShape,
 	TLPageId,
 	TLShapeId,
-	TLShapePartial,
 	TLSizeType,
 	TLTextShape,
 	TLVideoShape,
@@ -182,41 +181,41 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
 
 					switch (v1Shape.type) {
 						case TDShapeType.Sticky: {
-							const partial: TLShapePartial<TLNoteShape> = {
+							editor.createShapes<TLNoteShape>([
-								...inCommon,
+								{
-								type: 'note',
+									...inCommon,
-								props: {
+									type: 'note',
-									text: v1Shape.text ?? '',
+									props: {
-									color: getV2Color(v1Shape.style.color),
+										text: v1Shape.text ?? '',
-									size: getV2Size(v1Shape.style.size),
+										color: getV2Color(v1Shape.style.color),
-									font: getV2Font(v1Shape.style.font),
+										size: getV2Size(v1Shape.style.size),
-									align: getV2Align(v1Shape.style.textAlign),
+										font: getV2Font(v1Shape.style.font),
+										align: getV2Align(v1Shape.style.textAlign),
+									},
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 							break
 						}
 						case TDShapeType.Rectangle: {
-							const partial: TLShapePartial<TLGeoShape> = {
+							editor.createShapes<TLGeoShape>([
-								...inCommon,
+								{
-								type: 'geo',
+									...inCommon,
-								props: {
+									type: 'geo',
-									geo: 'rectangle',
+									props: {
-									w: coerceDimension(v1Shape.size[0]),
+										geo: 'rectangle',
-									h: coerceDimension(v1Shape.size[1]),
+										w: coerceDimension(v1Shape.size[0]),
-									text: v1Shape.label ?? '',
+										h: coerceDimension(v1Shape.size[1]),
-									fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
+										text: v1Shape.label ?? '',
-									labelColor: getV2Color(v1Shape.style.color),
+										fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
-									color: getV2Color(v1Shape.style.color),
+										labelColor: getV2Color(v1Shape.style.color),
-									size: getV2Size(v1Shape.style.size),
+										color: getV2Color(v1Shape.style.color),
-									font: getV2Font(v1Shape.style.font),
+										size: getV2Size(v1Shape.style.size),
-									dash: getV2Dash(v1Shape.style.dash),
+										font: getV2Font(v1Shape.style.font),
-									align: 'middle',
+										dash: getV2Dash(v1Shape.style.dash),
+										align: 'middle',
+									},
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 
 							const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id)!
 
@@ -254,24 +253,24 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
 							break
 						}
 						case TDShapeType.Triangle: {
-							const partial: TLShapePartial<TLGeoShape> = {
+							editor.createShapes<TLGeoShape>([
-								...inCommon,
+								{
-								type: 'geo',
+									...inCommon,
-								props: {
+									type: 'geo',
-									geo: 'triangle',
+									props: {
-									w: coerceDimension(v1Shape.size[0]),
+										geo: 'triangle',
-									h: coerceDimension(v1Shape.size[1]),
+										w: coerceDimension(v1Shape.size[0]),
-									fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
+										h: coerceDimension(v1Shape.size[1]),
-									labelColor: getV2Color(v1Shape.style.color),
+										fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
-									color: getV2Color(v1Shape.style.color),
+										labelColor: getV2Color(v1Shape.style.color),
-									size: getV2Size(v1Shape.style.size),
+										color: getV2Color(v1Shape.style.color),
-									font: getV2Font(v1Shape.style.font),
+										size: getV2Size(v1Shape.style.size),
-									dash: getV2Dash(v1Shape.style.dash),
+										font: getV2Font(v1Shape.style.font),
-									align: 'middle',
+										dash: getV2Dash(v1Shape.style.dash),
+										align: 'middle',
+									},
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 
 							const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id)!
 
@@ -309,24 +308,24 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
 							break
 						}
 						case TDShapeType.Ellipse: {
-							const partial: TLShapePartial<TLGeoShape> = {
+							editor.createShapes<TLGeoShape>([
-								...inCommon,
+								{
-								type: 'geo',
+									...inCommon,
-								props: {
+									type: 'geo',
-									geo: 'ellipse',
+									props: {
-									w: coerceDimension(v1Shape.radius[0]) * 2,
+										geo: 'ellipse',
-									h: coerceDimension(v1Shape.radius[1]) * 2,
+										w: coerceDimension(v1Shape.radius[0]) * 2,
-									fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
+										h: coerceDimension(v1Shape.radius[1]) * 2,
-									labelColor: getV2Color(v1Shape.style.color),
+										fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
-									color: getV2Color(v1Shape.style.color),
+										labelColor: getV2Color(v1Shape.style.color),
-									size: getV2Size(v1Shape.style.size),
+										color: getV2Color(v1Shape.style.color),
-									font: getV2Font(v1Shape.style.font),
+										size: getV2Size(v1Shape.style.size),
-									dash: getV2Dash(v1Shape.style.dash),
+										font: getV2Font(v1Shape.style.font),
-									align: 'middle',
+										dash: getV2Dash(v1Shape.style.dash),
+										align: 'middle',
+									},
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 
 							const pageBoundsBeforeLabel = editor.getPageBoundsById(inCommon.id)!
 
@@ -370,21 +369,21 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
 								break
 							}
 
-							const partial: TLShapePartial<TLDrawShape> = {
+							editor.createShapes<TLDrawShape>([
-								...inCommon,
+								{
-								type: 'draw',
+									...inCommon,
-								props: {
+									type: 'draw',
-									fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
+									props: {
-									color: getV2Color(v1Shape.style.color),
+										fill: getV2Fill(v1Shape.style.isFilled, v1Shape.style.color),
-									size: getV2Size(v1Shape.style.size),
+										color: getV2Color(v1Shape.style.color),
-									dash: getV2Dash(v1Shape.style.dash),
+										size: getV2Size(v1Shape.style.size),
-									isPen: false,
+										dash: getV2Dash(v1Shape.style.dash),
-									isComplete: v1Shape.isComplete,
+										isPen: false,
-									segments: [{ type: 'free', points: v1Shape.points.map(getV2Point) }],
+										isComplete: v1Shape.isComplete,
+										segments: [{ type: 'free', points: v1Shape.points.map(getV2Point) }],
+									},
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 							break
 						}
 						case TDShapeType.Arrow: {
@@ -395,51 +394,51 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
 							const v2Bend = (dist * -v1Bend) / 2
 
 							// Could also be a line... but we'll use it as an arrow anyway
-							const partial: TLShapePartial<TLArrowShape> = {
+							editor.createShapes<TLArrowShape>([
-								...inCommon,
+								{
-								type: 'arrow',
+									...inCommon,
-								props: {
+									type: 'arrow',
-									text: v1Shape.label ?? '',
+									props: {
-									color: getV2Color(v1Shape.style.color),
+										text: v1Shape.label ?? '',
-									labelColor: getV2Color(v1Shape.style.color),
+										color: getV2Color(v1Shape.style.color),
-									size: getV2Size(v1Shape.style.size),
+										labelColor: getV2Color(v1Shape.style.color),
-									font: getV2Font(v1Shape.style.font),
+										size: getV2Size(v1Shape.style.size),
-									dash: getV2Dash(v1Shape.style.dash),
+										font: getV2Font(v1Shape.style.font),
-									arrowheadStart: getV2Arrowhead(v1Shape.decorations?.start),
+										dash: getV2Dash(v1Shape.style.dash),
-									arrowheadEnd: getV2Arrowhead(v1Shape.decorations?.end),
+										arrowheadStart: getV2Arrowhead(v1Shape.decorations?.start),
-									start: {
+										arrowheadEnd: getV2Arrowhead(v1Shape.decorations?.end),
-										type: 'point',
+										start: {
-										x: coerceNumber(v1Shape.handles.start.point[0]),
+											type: 'point',
-										y: coerceNumber(v1Shape.handles.start.point[1]),
+											x: coerceNumber(v1Shape.handles.start.point[0]),
+											y: coerceNumber(v1Shape.handles.start.point[1]),
+										},
+										end: {
+											type: 'point',
+											x: coerceNumber(v1Shape.handles.end.point[0]),
+											y: coerceNumber(v1Shape.handles.end.point[1]),
+										},
+										bend: v2Bend,
 									},
-									end: {
-										type: 'point',
-										x: coerceNumber(v1Shape.handles.end.point[0]),
-										y: coerceNumber(v1Shape.handles.end.point[1]),
-									},
-									bend: v2Bend,
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 
 							break
 						}
 						case TDShapeType.Text: {
-							const partial: TLShapePartial<TLTextShape> = {
+							editor.createShapes<TLTextShape>([
-								...inCommon,
+								{
-								type: 'text',
+									...inCommon,
-								props: {
+									type: 'text',
-									text: v1Shape.text ?? ' ',
+									props: {
-									color: getV2Color(v1Shape.style.color),
+										text: v1Shape.text ?? ' ',
-									size: getV2TextSize(v1Shape.style.size),
+										color: getV2Color(v1Shape.style.color),
-									font: getV2Font(v1Shape.style.font),
+										size: getV2TextSize(v1Shape.style.size),
-									align: getV2Align(v1Shape.style.textAlign),
+										font: getV2Font(v1Shape.style.font),
-									scale: v1Shape.style.scale ?? 1,
+										align: getV2Align(v1Shape.style.textAlign),
+										scale: v1Shape.style.scale ?? 1,
+									},
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 							break
 						}
 						case TDShapeType.Image: {
@@ -450,17 +449,17 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
 								return
 							}
 
-							const partial: TLShapePartial<TLImageShape> = {
+							editor.createShapes<TLImageShape>([
-								...inCommon,
+								{
-								type: 'image',
+									...inCommon,
-								props: {
+									type: 'image',
-									w: coerceDimension(v1Shape.size[0]),
+									props: {
-									h: coerceDimension(v1Shape.size[1]),
+										w: coerceDimension(v1Shape.size[0]),
-									assetId,
+										h: coerceDimension(v1Shape.size[1]),
+										assetId,
+									},
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 							break
 						}
 						case TDShapeType.Video: {
@@ -471,17 +470,17 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume
 								return
 							}
 
-							const partial: TLShapePartial<TLVideoShape> = {
+							editor.createShapes<TLVideoShape>([
-								...inCommon,
+								{
-								type: 'video',
+									...inCommon,
-								props: {
+									type: 'video',
-									w: coerceDimension(v1Shape.size[0]),
+									props: {
-									h: coerceDimension(v1Shape.size[1]),
+										w: coerceDimension(v1Shape.size[0]),
-									assetId,
+										h: coerceDimension(v1Shape.size[1]),
+										assetId,
+									},
 								},
-							}
+							])
-
-							editor.createShapes([partial])
 							break
 						}
 					}