tldraw 4.3.0-canary.fd6b7f2a8adc → 4.3.0-next.2b3bfbba757b

package/src/test/test-jsx.tsx

@@ -5,7 +5,8 @@ import {
 	TLBinding,
 	TLBindingCreate,
 	TLBindingId,
-	TLShape,
+	TLDefaultBinding,
+	TLDefaultShape,
 	TLShapeId,
 	TLShapePartial,
 	ZERO_INDEX_KEY,
@@ -22,7 +23,6 @@ import React, { Fragment } from 'react'
 const shapeTypeSymbol = Symbol('shapeJsx')
 const assetTypeSymbol = Symbol('assetJsx')
 const bindingTypeSymbol = Symbol('bindingJsx')
-
 interface CommonShapeProps {
 	x?: number
 	y?: number
@@ -34,6 +34,7 @@ interface CommonShapeProps {
 	opacity?: number
 }
 
+type ShapeByType<Type extends TLDefaultShape['type']> = Extract<TLDefaultShape, { type: Type }>
 type FormatShapeProps<Props extends object> = {
 	[K in keyof Props]?: Props[K] extends TLAssetId
 		? TLAssetId | React.JSX.Element
@@ -41,39 +42,24 @@ type FormatShapeProps<Props extends object> = {
 			? TLAssetId | React.JSX.Element | null
 			: Props[K]
 }
-type PropsForShape<Type extends TLShape['type']> = CommonShapeProps &
-	FormatShapeProps<TLShape<Type>['props']>
+type PropsForShape<Type extends string> = Type extends TLDefaultShape['type']
+	? CommonShapeProps & FormatShapeProps<ShapeByType<Type>['props']>
+	: CommonShapeProps & Record<string, unknown>
 
 type AssetByType<Type extends TLAsset['type']> = Extract<TLAsset, { type: Type }>
 type PropsForAsset<Type extends string> = Type extends TLAsset['type']
 	? Partial<AssetByType<Type>['props']>
 	: Record<string, unknown>
 
-interface BindingReactConnections {
+interface CommonBindingProps {
 	from?: string | TLShapeId
 	to: string | TLShapeId
 }
 
-interface CommonBindingReactProps extends BindingReactConnections {
-	ref?: string
-	id?: TLBindingId
-}
-
-type ReactPropsForBinding<Type extends TLBinding['type']> = CommonBindingReactProps &
-	Partial<TLBinding<Type>['props']>
-
-type BindingToCreate = TLBinding extends infer E
-	? E extends TLBinding
-		? {
-				type: E['type']
-				props: Partial<TLBinding<E['type']>['props']>
-				id: TLBindingId | undefined
-				parentId: TLShapeId | undefined
-				ref: string | undefined
-				connections: BindingReactConnections
-			}
-		: never
-	: never
+type BindingByType<Type extends TLBinding['type']> = Extract<TLBinding, { type: Type }>
+type PropsForBinding<Type extends string> = Type extends TLBinding['type']
+	? CommonBindingProps & Partial<BindingByType<Type>['props']>
+	: CommonBindingProps & Record<string, unknown>
 
 const createElement = (
 	type: typeof shapeTypeSymbol | typeof assetTypeSymbol | typeof bindingTypeSymbol,
@@ -104,9 +90,10 @@ const tlBinding = new Proxy(
 			return createElement(bindingTypeSymbol, key as string)
 		},
 	}
-) as {
-	[K in TLBinding['type']]: (props: ReactPropsForBinding<K>) => null
-}
+) as { [K in TLDefaultBinding['type']]: (props: PropsForBinding<K>) => null } & Record<
+	string,
+	(props: PropsForBinding<string>) => null
+>
 
 /**
  * TL - jsx helpers for creating tldraw shapes in test cases
@@ -125,8 +112,8 @@ export const TL = new Proxy(
 		},
 	}
 ) as { asset: typeof tlAsset; binding: typeof tlBinding } & {
-	[K in TLShape['type']]: (props: PropsForShape<K>) => null
-}
+	[K in TLDefaultShape['type']]: (props: PropsForShape<K>) => null
+} & Record<string, (props: PropsForShape<string>) => null>
 
 export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Element>, idPrefix = '') {
 	const ids = { bindings: {} } as Record<string, TLShapeId> & {
@@ -135,7 +122,12 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 	const currentPageShapes: Array<TLShapePartial> = []
 	const assets: Array<TLAsset> = []
 
-	const bindingsToCreate: Array<BindingToCreate> = []
+	const bindingsToCreate: Array<{
+		type: string
+		props: Record<string, unknown>
+		parentId: TLShapeId | undefined
+		ref: string | undefined
+	}> = []
 
 	function addChildren(
 		children: React.JSX.Element | Array<React.JSX.Element>,
@@ -160,21 +152,10 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 			}
 
 			if (el.type[bindingTypeSymbol]) {
-				const bindingType = (el.type as any)[bindingTypeSymbol] as TLBinding['type']
-				const { id, from, to, ref, ...props } = el.props
-				const bindingRef: unknown = (el as any).ref || ref
-				assert(
-					bindingRef === undefined || typeof bindingRef === 'string',
-					'ref must be string or undefined'
-				)
-				bindingsToCreate.push({
-					type: bindingType,
-					props,
-					id,
-					parentId,
-					ref: bindingRef,
-					connections: { from, to },
-				})
+				const bindingType = (el.type as any)[bindingTypeSymbol] as string
+				const ref = ((el as any).ref || el.props.ref) as string | undefined
+				assert(ref === undefined || typeof ref === 'string', 'ref must be string or undefined')
+				bindingsToCreate.push({ type: bindingType, props: el.props, parentId, ref })
 			} else {
 				const shapeType = (el.type as any)[shapeTypeSymbol] as string
 				if (!shapeType) {
@@ -258,48 +239,55 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 	addChildren(shapes)
 
 	const bindings: TLBindingCreate[] = []
-	for (const { id, parentId, ref, connections, ...binding } of bindingsToCreate) {
+	for (const binding of bindingsToCreate) {
 		let fromId: TLShapeId, toId: TLShapeId
-		if (connections.from) {
-			assert(typeof connections.from === 'string', 'from must be a ref string or a shape id')
-			if (isShapeId(connections.from)) {
-				fromId = connections.from
+		if (binding.props.from) {
+			assert(typeof binding.props.from === 'string', 'from must be a ref string or a shape id')
+			if (isShapeId(binding.props.from)) {
+				fromId = binding.props.from
 			} else {
-				assert(ids[connections.from], `Ref not found: ${connections.from}`)
-				fromId = ids[connections.from]
+				assert(ids[binding.props.from], `Ref not found: ${binding.props.from}`)
+				fromId = ids[binding.props.from]
 			}
-		} else if (parentId) {
-			fromId = parentId
+		} else if (binding.parentId) {
+			fromId = binding.parentId
 		} else {
 			throw new Error('from must be specified, or binding must be a child of a shape')
 		}
 
-		assert(connections.to, 'to must be specified')
-		assert(typeof connections.to === 'string', 'to must be a ref string or a shape id')
-		if (isShapeId(connections.to)) {
-			toId = connections.to
+		assert(binding.props.to, 'to must be specified')
+		assert(typeof binding.props.to === 'string', 'to must be a ref string or a shape id')
+		if (isShapeId(binding.props.to)) {
+			toId = binding.props.to
 		} else {
-			assert(ids[connections.to], `Ref not found: ${connections.to}`)
-			toId = ids[connections.to]
+			assert(ids[binding.props.to], `Ref not found: ${binding.props.to}`)
+			toId = ids[binding.props.to]
 		}
 
-		let bindingId = id
-		if (ref) {
-			assert(typeof ref === 'string', 'binding ref must be string')
-			assert(!ids.bindings[ref], `Duplicate ref: ${ref}`)
-			assert(!bindingId, `Cannot use both ref and id on binding: ${ref}`)
-			bindingId = createBindingId(`${idPrefix}${ref}`)
-			ids.bindings[ref] = bindingId
+		let bindingId: TLBindingId = binding.props.id as TLBindingId
+		if (binding.ref) {
+			assert(typeof binding.ref === 'string', 'binding ref must be string')
+			assert(!ids.bindings[binding.ref], `Duplicate ref: ${binding.ref}`)
+			assert(!bindingId, `Cannot use both ref and id on binding: ${binding.ref}`)
+			bindingId = createBindingId(`${idPrefix}${binding.ref}`)
+			ids.bindings[binding.ref] = bindingId
 		}
 		if (!bindingId) {
 			bindingId = createBindingId()
 		}
 
+		const props = { ...binding.props }
+		delete props.ref
+		delete props.id
+		delete props.from
+		delete props.to
+
 		bindings.push({
-			...binding,
 			id: bindingId,
+			type: binding.type,
 			fromId,
 			toId,
+			props,
 		})
 	}
 

package/src/test/text.test.ts

@@ -1,4 +1,4 @@
-import { createShapeId, toRichText } from '@tldraw/editor'
+import { TLTextShape, createShapeId, toRichText } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -13,7 +13,7 @@ afterEach(() => {
 describe('When editing text', () => {
 	it('preserves the top center when center aligned', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -27,7 +27,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -47,7 +47,7 @@ describe('When editing text', () => {
 
 	it('preserved the right center when center aligned and rotated 90deg', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -63,7 +63,9 @@ describe('When editing text', () => {
 		])
 
 		const boundsA = editor.getShapePageBounds(id)!
-		editor.updateShapes([{ id, type: 'text', props: { richText: toRichText('Hello, world!') } }])
+		editor.updateShapes<TLTextShape>([
+			{ id, type: 'text', props: { richText: toRichText('Hello, world!') } },
+		])
 		const boundsB = editor.getShapePageBounds(id)!
 		expect(boundsA.x).toBeCloseTo(boundsB.x)
 		expect(boundsA.y).not.toBeCloseTo(boundsB.y)
@@ -73,7 +75,7 @@ describe('When editing text', () => {
 
 	it('preserves the top left corner when start aligned', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -87,7 +89,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -107,7 +109,7 @@ describe('When editing text', () => {
 
 	it('preserves the top right edge when end aligned', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -121,7 +123,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -143,7 +145,7 @@ describe('When editing text', () => {
 describe('When changing text size', () => {
 	it('preserves the center when center aligned', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -158,7 +160,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -178,7 +180,7 @@ describe('When changing text size', () => {
 
 	it('preserves the center left point when start aligned', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -193,7 +195,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -213,7 +215,7 @@ describe('When changing text size', () => {
 
 	it('preserves the top right edge when end aligned', () => {
 		const id = createShapeId()
-		editor.createShapes([
+		editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -228,7 +230,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',

package/src/test/translating.test.ts

@@ -1749,7 +1749,9 @@ describe('translating a shape with a bound shape', () => {
 
 		const newArrow = editor
 			.getCurrentPageShapes()
-			.find((s) => editor.isShapeOfType(s, 'arrow') && s.id !== arrow1)! as TLArrowShape
+			.find(
+				(s) => editor.isShapeOfType<TLArrowShape>(s, 'arrow') && s.id !== arrow1
+			)! as TLArrowShape
 		expect(getArrowBindings(editor, newArrow)).toMatchObject({
 			start: { type: 'arrow' },
 			end: undefined,
@@ -2059,7 +2061,7 @@ describe('Note shape grid helper positions / pits', () => {
 		editor
 			.createShape({ type: 'note' })
 			.createShape({ type: 'note', x: 500, y: 500 })
-			.updateShape({ ...editor.getLastCreatedShape<TLNoteShape>(), props: { growY: 100 } })
+			.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
 			.pointerMove(600, 600)
 			// start translating
 			.pointerDown()
@@ -2078,7 +2080,7 @@ describe('Note shape grid helper positions / pits', () => {
 	it('Snaps correctly to the bottom when the not-translating shape has growY', () => {
 		editor
 			.createShape({ type: 'note' })
-			.updateShape({ ...editor.getLastCreatedShape<TLNoteShape>(), props: { growY: 100 } })
+			.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
 			.createShape({ type: 'note', x: 500, y: 500 })
 			.pointerMove(600, 600)
 			// start translating
@@ -2181,7 +2183,7 @@ describe('Note shape grid helper positions / pits', () => {
 
 describe('cancelling a translate operation', () => {
 	it('undoes any changes since the start of the translate operation', () => {
-		editor.createShape({
+		editor.createShape<TLGeoShape>({
 			type: 'geo',
 			x: 0,
 			y: 0,
@@ -2218,7 +2220,7 @@ describe('cancelling a translate operation', () => {
 		const shapeId = createShapeId()
 
 		editor
-			.createShape({
+			.createShape<TLGeoShape>({
 				id: shapeId,
 				type: 'geo',
 				x: 0,
@@ -2266,7 +2268,7 @@ describe('cancelling a translate operation', () => {
 		const shapeId = createShapeId()
 
 		editor
-			.createShape({
+			.createShape<TLGeoShape>({
 				id: shapeId,
 				type: 'geo',
 				x: 0,

package/src/test/commands/createShape.test.ts

@@ -1,64 +0,0 @@
-import { TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/editor'
-import { TestEditor } from '../TestEditor'
-
-let editor: TestEditor
-
-const ids = {
-	box1: createShapeId('box1'),
-}
-
-beforeEach(() => {
-	editor = new TestEditor()
-})
-
-it('Uses typescript generics', () => {
-	expect(() => {
-		editor.createShape(
-			//@ts-expect-error Yep error because we are giving the wrong props to the shape
-			{
-				id: ids.box1,
-				type: 'geo',
-				props: { w: 'OH NO' },
-			}
-		)
-
-		// Errors when creating a shape with unknown props
-		editor.createShape({
-			id: ids.box1,
-			type: 'geo',
-			props: {
-				// @ts-expect-error
-				foo: 'bar',
-			},
-		})
-
-		// Yep error here because we are giving the wrong props to the shape
-		editor.createShape<TLGeoShape>({
-			id: ids.box1,
-			type: 'geo',
-			//@ts-expect-error
-			props: { w: 'OH NO' },
-		})
-
-		// Yep error here because we are giving the wrong generic
-		editor.createShape<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.createShape<TLGeoShape>({
-			id: ids.box1,
-			type: 'geo',
-			props: { w: 100 },
-		})
-
-		editor.createShape<TLGeoShape>({
-			id: ids.box1,
-			type: 'geo',
-		})
-	}).toThrow()
-})

package/src/test/commands/isShapeOfType.test.ts

@@ -1,44 +0,0 @@
-import { TLArrowShape, createShapeId } from '@tldraw/editor'
-import { TestEditor } from '../TestEditor'
-
-let editor: TestEditor
-
-beforeEach(() => {
-	editor = new TestEditor()
-})
-
-export declare function assertNever(x: never): never
-
-it('narrows down the shape type', () => {
-	const id = createShapeId('arrow1')
-	editor.createShape({ type: 'arrow', id, x: 0, y: 0 })
-
-	const shape = editor.getShape(id)!
-	if (editor.isShapeOfType(shape, 'arrow')) {
-		expect(shape.type === 'arrow').toBe(true)
-		expect(
-			// @ts-expect-error This comparison appears to be unintentional because the types '"arrow"' and '"card"' have no overlap.
-			shape.type === 'card'
-		).toBe(false)
-	}
-})
-
-it('narrows down the shape type with generic', () => {
-	const id = createShapeId('arrow1')
-	editor.createShape({ type: 'arrow', id, x: 0, y: 0 })
-
-	const shape = editor.getShape(id)!
-	if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
-		expect(shape.type === 'arrow').toBe(true)
-
-		expect(
-			// @ts-expect-error This comparison appears to be unintentional because the types '"arrow"' and '"card"' have no overlap.
-			shape.type === 'card'
-		).toBe(false)
-	}
-
-	// @ts-expect-error mismatch between the generic and the shape type
-	if (editor.isShapeOfType<TLArrowShape>(shape, 'card')) {
-		assertNever(shape)
-	}
-})

package/src/test/commands/updateShape.test.ts

@@ -1,67 +0,0 @@
-import { TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/editor'
-import { TestEditor, createDefaultShapes } from '../TestEditor'
-
-let editor: TestEditor
-
-const ids = {
-	box1: createShapeId('box1'),
-}
-
-beforeEach(() => {
-	editor = new TestEditor()
-	editor.createShapes(createDefaultShapes())
-})
-
-it('Uses typescript generics', () => {
-	expect(() => {
-		editor.updateShape({
-			id: ids.box1,
-			type: 'geo',
-			props: {
-				// @ts-expect-error
-				w: 'OH NO',
-			},
-		})
-
-		// Errors when updating a shape with unknown props
-		editor.updateShape({
-			id: ids.box1,
-			type: 'geo',
-			props: {
-				// @ts-expect-error
-				foo: 'bar',
-			},
-		})
-
-		// error here because we are giving the wrong props to the shape
-		editor.updateShape<TLGeoShape>({
-			id: ids.box1,
-			type: 'geo',
-			props: {
-				// @ts-expect-error
-				w: 'OH NO',
-			},
-		})
-
-		// Yep error here because we are giving the wrong generic
-		editor.updateShape<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.updateShape<TLGeoShape>({
-			id: ids.box1,
-			type: 'geo',
-			props: { w: 100 },
-		})
-
-		editor.updateShape<TLGeoShape>({
-			id: ids.box1,
-			type: 'geo',
-		})
-	}).toThrow()
-})