From d995debe7d094a54661fa9ed7365c7484fe4423d Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Fri, 5 Apr 2024 15:00:53 +0100
Subject: [PATCH] ko

---
 .../examples/migration/MigrationExample.tsx   | 65 +++++++++++++++++++
 .../examples/src/examples/migration/README.md |  9 +++
 2 files changed, 74 insertions(+)
 create mode 100644 apps/examples/src/examples/migration/MigrationExample.tsx
 create mode 100644 apps/examples/src/examples/migration/README.md

diff --git a/apps/examples/src/examples/migration/MigrationExample.tsx b/apps/examples/src/examples/migration/MigrationExample.tsx
new file mode 100644
index 000000000..44894310d
--- /dev/null
+++ b/apps/examples/src/examples/migration/MigrationExample.tsx
@@ -0,0 +1,65 @@
+import {
+	HTMLContainer,
+	Rectangle2d,
+	ShapeUtil,
+	TLBaseShape,
+	Tldraw,
+	defineMigrations,
+} from 'tldraw'
+import 'tldraw/tldraw.css'
+
+type MyCustomShape = TLBaseShape<'card', { w: number; h: number }>
+
+class MyCustomShapeUtil extends ShapeUtil<MyCustomShape> {
+	type = 'card' as const
+
+	override getDefaultProps() {
+		return { w: 100, h: 100 }
+	}
+
+	override getGeometry(shape: MyCustomShape) {
+		return new Rectangle2d({ width: shape.props.w, height: shape.props.h, isFilled: true })
+	}
+
+	component(shape: MyCustomShape) {
+		return <HTMLContainer style={{ width: shape.props.w, height: shape.props.h }} />
+	}
+
+	indicator(shape: MyCustomShape) {
+		return <rect width={shape.props.w} height={shape.props.h} />
+	}
+
+	migrations = defineMigrations({
+		currentVersion: 2,
+		migrators: {
+			1: {
+				// Add a property (this adds the `likes` property to the shape)
+				up(shape) {
+					return { ...shape, props: { ...shape.props, likes: 0 } }
+				},
+				down(shape) {
+					const { likes: _, ...propsWithoutLikes } = shape.props
+					return { ...shape, props: propsWithoutLikes }
+				},
+			},
+			2: {
+				// Remove a property (this removes the `likes` property from the shape)
+				up(shape) {
+					const { likes: _, ...propsWithoutLikes } = shape.props
+					return { ...shape, props: propsWithoutLikes }
+				},
+				down(shape) {
+					return { ...shape, props: { ...shape.props, likes: 0 } }
+				},
+			},
+		},
+	})
+}
+
+export default function MigrationExample() {
+	return (
+		<div className="tldraw__editor">
+			<Tldraw persistenceKey="example" shapeUtils={[MyCustomShapeUtil]} />
+		</div>
+	)
+}
diff --git a/apps/examples/src/examples/migration/README.md b/apps/examples/src/examples/migration/README.md
new file mode 100644
index 000000000..4a265a3d0
--- /dev/null
+++ b/apps/examples/src/examples/migration/README.md
@@ -0,0 +1,9 @@
+---
+title: Custom shape migrations
+component: ./MigrationExample.tsx
+category: shapes/tools
+---
+
+---
+
+You can provide migrations for custom shapes that add, remove, or change properties.