tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.71f83a8a571b

package/src/test/commands/distributeShapes.test.tsx

@@ -1,8 +1,9 @@
 import { PI, TLShapeId, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 import { TL } from '../test-jsx'
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 let editor: TestEditor
 
@@ -46,10 +47,10 @@ describe('distributeShapes command', () => {
 	describe('when less than three shapes are selected', () => {
 		it('does nothing', () => {
 			editor.setSelectedShapes([ids.boxA, ids.boxB])
-			const fn = jest.fn()
+			const fn = vi.fn()
 			editor.store.listen(fn)
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			expect(fn).not.toHaveBeenCalled()
 		})
 	})
@@ -58,7 +59,7 @@ describe('distributeShapes command', () => {
 		it('distributeShapes horizontally', () => {
 			editor.selectAll()
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			editor.expectShapeToMatch(
 				{ id: ids.boxA, x: 0 },
 				{ id: ids.boxB, x: 200 },
@@ -70,7 +71,7 @@ describe('distributeShapes command', () => {
 			editor.updateShapes([{ id: ids.boxC, type: 'geo', x: 25 }])
 			editor.selectAll()
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			editor.expectShapeToMatch(
 				{ id: ids.boxA, x: 0 },
 				{ id: ids.boxB, x: 100 },
@@ -81,7 +82,7 @@ describe('distributeShapes command', () => {
 		it('distributeShapes vertically', () => {
 			editor.selectAll()
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			editor.expectShapeToMatch(
 				{ id: ids.boxA, y: 0 },
 				{ id: ids.boxB, y: 200 },
@@ -93,7 +94,7 @@ describe('distributeShapes command', () => {
 			editor.updateShapes([{ id: ids.boxC, type: 'geo', y: 25 }])
 			editor.selectAll()
 			editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			editor.expectShapeToMatch(
 				{ id: ids.boxA, y: 0 },
 				{ id: ids.boxB, y: 100 },
@@ -135,7 +136,7 @@ describe('distributeShapes command', () => {
 		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
 
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxB, x: 100 },
@@ -177,7 +178,7 @@ describe('distributeShapes command', () => {
 		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
 
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxB, x: 100 },
@@ -222,7 +223,7 @@ describe('distributeShapes command', () => {
 		editor.setSelectedShapes([ids.boxB, ids.boxC, ids.boxD])
 
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch(
 			{ id: ids.boxB, x: 100 },

package/src/test/commands/getSvgString.test.ts

@@ -1,4 +1,5 @@
 import { DefaultDashStyle, TLGeoShape, createShapeId, toRichText } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -14,7 +15,7 @@ function parseSvg({ svg }: { svg: string } = { svg: '' }) {
 	return parser.parseFromString(svg, 'image/svg+xml').firstElementChild as SVGSVGElement
 }
 
-jest.useRealTimers()
+vi.useRealTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()

package/src/test/commands/packShapes.test.ts

@@ -1,4 +1,5 @@
 import { createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -10,7 +11,7 @@ const ids = {
 	boxD: createShapeId('boxD'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -45,7 +46,7 @@ describe('editor.packShapes', () => {
 		editor.selectAll()
 		const centerBefore = editor.getSelectionRotatedPageBounds()!.center.clone()
 		editor.packShapes(editor.getSelectedShapeIds())
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(
 			editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
 		).toMatchSnapshot('packed shapes')
@@ -57,7 +58,7 @@ describe('editor.packShapes', () => {
 		editor.selectAll()
 		const centerBefore = editor.getSelectionRotatedPageBounds()!.center.clone()
 		editor.packShapes(editor.getSelectedShapeIds(), 16)
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(
 			editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
 		).toMatchSnapshot('packed shapes')
@@ -68,7 +69,7 @@ describe('editor.packShapes', () => {
 	it('packs rotated shapes', () => {
 		editor.updateShapes([{ id: ids.boxA, type: 'geo', rotation: Math.PI }])
 		editor.selectAll().packShapes(editor.getSelectedShapeIds(), 16)
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(
 			editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' }))
 		).toMatchSnapshot('packed shapes')

package/src/test/commands/putContent.test.ts

@@ -25,6 +25,7 @@ describe('Migrations', () => {
 
 	it('Throws error if any shape is invalid due to wrong type', () => {
 		const withInvalidShapeType = structuredClone(clipboardContent)
+		// @ts-expect-error
 		withInvalidShapeType.shapes[0].type = 'invalid'
 		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeType)).toThrow()
 	})

package/src/test/commands/resizeShape.test.ts

@@ -1,9 +1,10 @@
 import { createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 const ids = {
 	boxA: createShapeId('boxA'),

package/src/test/commands/rotateShapes.test.ts

@@ -1,4 +1,5 @@
 import { createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -40,20 +41,20 @@ beforeEach(() => {
 })
 
 describe('editor.rotateShapesBy', () => {
-	let fnStart = jest.fn()
-	let fnChange = jest.fn()
-	let fnEnd = jest.fn()
+	let fnStart = vi.fn()
+	let fnChange = vi.fn()
+	let fnEnd = vi.fn()
 
 	beforeEach(() => {
 		// Set start / change / end events on only the geo shape
 		const util = editor.getShapeUtil('geo')
 
 		// Bad! who did this (did I do this)
-		util.onRotateStart = fnStart = jest.fn()
+		util.onRotateStart = fnStart = vi.fn()
 
-		util.onRotate = fnChange = jest.fn()
+		util.onRotate = fnChange = vi.fn()
 
-		util.onRotateEnd = fnEnd = jest.fn()
+		util.onRotateEnd = fnEnd = vi.fn()
 	})
 	it('Rotates shapes and fires events', () => {
 		// Select the shape...

package/src/test/commands/setCamera.test.ts

@@ -1,4 +1,5 @@
 import { Box, DEFAULT_CAMERA_OPTIONS, Vec, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -366,14 +367,14 @@ describe('CameraOptions.zoomSpeed', () => {
 		editor.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS, zoomSpeed: 2 })
 		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
 		editor.setCurrentTool('zoom').click()
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 2 })
 	})
 	it('Does not affect zoom tool zooming (0.5x)', () => {
 		editor.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS, zoomSpeed: 0.5 })
 		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
 		editor.setCurrentTool('zoom').click()
-		jest.advanceTimersByTime(300)
+		vi.advanceTimersByTime(300)
 		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 2 })
 	})
 	it('Does not affect editor zoom method (2x)', () => {
@@ -1028,7 +1029,7 @@ describe('Allows mixed values for x and y', () => {
 
 test('it animated towards the constrained viewport rather than the given viewport', () => {
 	// @ts-expect-error
-	const mockAnimateToViewport = (editor._animateToViewport = jest.fn())
+	const mockAnimateToViewport = (editor._animateToViewport = vi.fn())
 	editor.setCameraOptions({
 		...DEFAULT_CAMERA_OPTIONS,
 		constraints: {

package/src/test/commands/setCurrentPage.test.ts

@@ -1,4 +1,5 @@
 import { IndexKey, PageRecordType, TLPageId, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -76,7 +77,7 @@ describe('setCurrentPage', () => {
 	it('logs an error when trying to navigate to a page that does not exist', () => {
 		const initialPageId = editor.getCurrentPageId()
 		expect(editor.getCurrentPageId()).toBe(initialPageId)
-		console.error = jest.fn()
+		console.error = vi.fn()
 
 		expect(() => {
 			editor.setCurrentPage('page:does-not-exist' as TLPageId)
@@ -105,7 +106,7 @@ describe('setCurrentPage', () => {
 	})
 
 	it('applies camera constraints', () => {
-		const spy = jest.spyOn(editor, 'setCamera')
+		const spy = vi.spyOn(editor, 'setCamera')
 
 		let currentPageId = editor.getCurrentPageId()
 		expect(currentPageId).toMatchInlineSnapshot(`"page:page"`)

package/src/test/commands/stackShapes.test.ts

@@ -1,7 +1,8 @@
 import { createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 let editor: TestEditor
 
@@ -51,10 +52,10 @@ describe('distributeShapes command', () => {
 	describe('when less than three shapes are selected', () => {
 		it('does nothing', () => {
 			editor.setSelectedShapes([ids.boxA, ids.boxB])
-			const fn = jest.fn()
+			const fn = vi.fn()
 			editor.store.listen(fn)
 			editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 0)
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			expect(fn).not.toHaveBeenCalled()
 		})
 	})
@@ -65,7 +66,7 @@ describe('distributeShapes command', () => {
 			// @ts-expect-error
 			editor.options.adjacentShapeMargin = 1
 			editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal')
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			// 200 distance gap between c and d
 			editor.expectShapeToMatch({
 				id: ids.boxA,
@@ -92,7 +93,7 @@ describe('distributeShapes command', () => {
 		it('stacks the shapes based on a given value', () => {
 			editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
 			editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 10)
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			// 200 distance gap between c and d
 			editor.expectShapeToMatch({
 				id: ids.boxA,
@@ -119,7 +120,7 @@ describe('distributeShapes command', () => {
 		it('stacks the shapes based on the most common gap', () => {
 			editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
 			editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 0)
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			// 200 distance gap between c and d
 			editor.expectShapeToMatch({
 				id: ids.boxA,
@@ -147,7 +148,7 @@ describe('distributeShapes command', () => {
 			editor.updateShapes([{ id: ids.boxD, type: 'geo', x: 540, y: 700 }])
 			editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
 			editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 0)
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			editor.expectShapeToMatch({
 				id: ids.boxA,
 				x: 0,
@@ -175,7 +176,7 @@ describe('distributeShapes command', () => {
 		it('stacks the shapes based on a given value', () => {
 			editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
 			editor.stackShapes(editor.getSelectedShapeIds(), 'vertical', 10)
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			// 200 distance gap between c and d
 			editor.expectShapeToMatch({
 				id: ids.boxA,
@@ -202,7 +203,7 @@ describe('distributeShapes command', () => {
 		it('stacks the shapes based on the most common gap', () => {
 			editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
 			editor.stackShapes(editor.getSelectedShapeIds(), 'vertical', 0)
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			// 200 distance gap between c and d
 			editor.expectShapeToMatch({
 				id: ids.boxA,
@@ -230,7 +231,7 @@ describe('distributeShapes command', () => {
 			editor.updateShapes([{ id: ids.boxD, type: 'geo', x: 700, y: 540 }])
 			editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
 			editor.stackShapes(editor.getSelectedShapeIds(), 'vertical', 0)
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 			editor.expectShapeToMatch({
 				id: ids.boxA,
 				x: 0,

package/src/test/commands/stretch.test.tsx

@@ -1,11 +1,12 @@
 import { PI, TLShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 import { TL } from '../test-jsx'
 
 let editor: TestEditor
 let ids: Record<string, TLShapeId>
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 function createVideoShape() {
 	return editor.createShapesFromJsx(<TL.video ref="video1" x={0} y={0} w={160} h={90} />).video1
@@ -26,10 +27,10 @@ beforeEach(() => {
 describe('when less than two shapes are selected', () => {
 	it('does nothing', () => {
 		editor.setSelectedShapes([ids.boxB])
-		const fn = jest.fn()
+		const fn = vi.fn()
 		editor.store.listen(fn)
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(fn).not.toHaveBeenCalled()
 	})
@@ -39,7 +40,7 @@ describe('when multiple shapes are selected', () => {
 	it('stretches horizontally', () => {
 		editor.selectAll()
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 0, y: 0, props: { w: 500 } },
 			{ id: ids.boxB, x: 0, y: 100, props: { w: 500 } },
@@ -52,7 +53,7 @@ describe('when multiple shapes are selected', () => {
 		editor.selectAll()
 		expect(editor.getSelectedShapes().length).toBe(4)
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		const newHeight = (500 * 9) / 16
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 0, y: 0, props: { w: 500 } },
@@ -65,7 +66,7 @@ describe('when multiple shapes are selected', () => {
 	it('stretches vertically', () => {
 		editor.selectAll()
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 0, y: 0, props: { h: 500 } },
 			{ id: ids.boxB, x: 100, y: 0, props: { h: 500 } },
@@ -78,7 +79,7 @@ describe('when multiple shapes are selected', () => {
 		editor.selectAll()
 		expect(editor.getSelectedShapes().length).toBe(4)
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		const newWidth = (500 * 16) / 9
 		editor.expectShapeToMatch(
 			{ id: ids.boxA, x: 0, y: 0, props: { h: 500 } },
@@ -91,7 +92,7 @@ describe('when multiple shapes are selected', () => {
 	it('does, undoes and redoes command', () => {
 		editor.markHistoryStoppingPoint('stretch')
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.expectShapeToMatch({ id: ids.boxB, x: 0, props: { w: 500 } })
 		editor.undo()
@@ -106,7 +107,7 @@ describe('When shapes are the child of another shape.', () => {
 		editor.reparentShapes([ids.boxB], ids.boxA)
 		editor.select(ids.boxB, ids.boxC)
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.expectShapeToMatch(
 			{ id: ids.boxB, x: 100, y: 100, props: { w: 400 } },
 			{ id: ids.boxC, x: 100, y: 400, props: { w: 400 } }
@@ -117,7 +118,7 @@ describe('When shapes are the child of another shape.', () => {
 		editor.reparentShapes([ids.boxB], ids.boxA)
 		editor.select(ids.boxB, ids.boxC)
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.expectShapeToMatch(
 			{ id: ids.boxB, x: 100, y: 100, props: { h: 400 } },
 			{ id: ids.boxC, x: 400, y: 100, props: { h: 400 } }
@@ -140,7 +141,7 @@ describe('When shapes are the child of a rotated shape.', () => {
 
 		editor.select(ids.boxA, ids.boxC)
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.expectShapeToMatch(
 			{
 				id: ids.boxA,
@@ -184,7 +185,7 @@ describe('When shapes are the child of a rotated shape.', () => {
 		editor.selectAll()
 
 		editor.stretchShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		editor.expectShapeToMatch(
 			{
 				id: ids.boxA,

package/src/test/commands/updateShapes.test.ts

@@ -15,22 +15,26 @@ beforeEach(() => {
 
 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' },
+				props: {
+					// @ts-expect-error
+					w: 'OH NO',
+				},
 			},
 		])
 
-		// Yep error here because we are giving the wrong props to the shape
+		// 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' },
+				props: {
+					// @ts-expect-error
+					w: 'OH NO',
+				},
 			},
 		])
 

package/src/test/createDeepLink.test.tsx

@@ -1,7 +1,8 @@
 import { PageRecordType, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 let editor: TestEditor
 

package/src/test/cropping.test.ts

@@ -1,8 +1,9 @@
 import { createShapeId, TLImageShape } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { MIN_CROP_SIZE } from '../lib/shapes/shared/crop'
 import { TestEditor } from './TestEditor'
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 let editor: TestEditor
 
@@ -495,7 +496,7 @@ describe('When in the select.crop.translating_crop state', () => {
 		})
 
 		editor.keyUp('Shift')
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		const afterShiftUp = editor.getShape<TLImageShape>(ids.imageB)!.props.crop!