Serializing MST Document in Creative Tool

[seflless]

I am making a diagramming tool and assumed MST would allow me to serialize/deserialize my whole app or document state. But it seems it doesn't include type information in getSnapshot(), so when I pass the serialized json created by getSnapshot() to applySnapshot elements that have compound types like (Rectangle|Oval|PenStrokes) aren't reinstated.

What am I missing? Searched around for an hour and didn't find anything. Should I be rolling my own serialize/deserialize and create my own type fields?

[EmilTholin]

Hi @seflless!

Do you think you could create a minimal reproducible example in e.g. CodeSandbox? I don't quite understand exactly what's going wrong.

[seflless]

Hi Emil,

Basically I'd hope for a library that allows this:

1. Define some model that includes complex types like unions
2. Create an instance of it
3. Add some sub-type instances of the union type
4. Be able to generate some JSON from that instance that I can save to storage
5. Be able to restore the exact instance from that stored JSON

Codesandbox Example

I'm hoping this Codesandbox helps explain my confusion: https://codesandbox.io/s/mobx-state-tree-test-hdkq15?file=/src/Models.js.

The part in particular that just isn't what I expect is that it seems that there is no information saved that specifies what type things are, so how can it possibly reinstate a model instance.

In this example you can see that I create a document type that can add a union that has a Rectangle and Oval, but when I restore it. The Oval instance is restored as a Rectangle.

Does that make sense?

[EmilTholin]

Great, thank you for the extensive example @seflless .

The Utility types documentation states in passing that:

If the correct type cannot be inferred unambiguously from a snapshot, provide a dispatcher function to determine the type.

You could e.g. check if the snapshot has a radius and instantiate it as a Circle, otherwise a Rectangle.

const Shape = types.union(
  { dispatcher: (snapshot) => 'radius' in snapshot ? Circle : Rectangle },
  Rectangle,
  Circle
);

[seflless]

Perfect, thank you, that fixed it!