Add migrate step (#628)

packages/tldraw/src/Tldraw.tsx

@@ -178,6 +178,7 @@ export function Tldraw({
       onAssetCreate,
       onExport,
     })
+
     setSId(id)
 
     setApp(newApp)
@@ -187,6 +188,7 @@ export function Tldraw({
   // are the same, or else load a new document if the ids are different.
   React.useEffect(() => {
     if (!document) return
+
     if (document.id === app.document.id) {
       app.updateDocument(document)
     } else {

packages/tldraw/src/state/StateManager/StateManager.ts

@@ -98,6 +98,8 @@ export class StateManager<T extends Record<string, any>> {
               // why is this necessary? but it is...
               const prevEmpty = this._state.appState.isEmptyCanvas
 
+              next = this.migrate(next)
+
               this._state = deepCopy(next)
               this._snapshot = deepCopy(next)
 
@@ -160,6 +162,10 @@ export class StateManager<T extends Record<string, any>> {
 
   // Internal API ---------------------------------
 
+  protected migrate = (next: T): T => {
+    return next
+  }
+
   /**
    * Perform any last changes to the state before updating.
    * Override this on your extending class.

packages/tldraw/src/state/TldrawApp.ts

@@ -265,6 +265,13 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
   /* -------------------- Internal -------------------- */
 
+  protected migrate = (state: TDSnapshot): TDSnapshot => {
+    return {
+      ...state,
+      document: migrate(state.document, TldrawApp.version),
+    }
+  }
+
   protected onReady = () => {
     this.loadDocument(this.document)
 

packages/tldraw/src/state/data/migrate.ts

@@ -25,13 +25,15 @@ export function migrate(document: TDDocument, newVersion: number): TDDocument {
         shape.parentId = page.id
       }
 
-      if (children) {
+      if (shape.type === TDShapeType.Group && children) {
         children.forEach((childId) => {
           if (!page.shapes[childId]) {
             console.warn('Encountered a parent with a missing child!', shape.id, childId)
             children?.splice(children.indexOf(childId), 1)
           }
         })
+
+        // TODO: Remove the shape if it has no children
       }
     })
   )