Custom JSON.stringify/parse for mobx observables

[gioragutt]

Hi guys!

I'm working on a RN application, and we use MobX extensively (although we probably have a better way of doing it, that's for a different discussion 😅).

I stumbled upon a use-case where I want to persist/load state to/from AsyncStorage.
The state happens to be observable (since it's a MobX store after all).

To do that, I implemented a custom reviver/replacer for JSON.parse/stringify.
The general idea is that objects that don't serialize easily, I would covert them in the following manner:

type Serialize = (value: any) => { ___jsonDataType: string, value: any };
type Deserialize = (value: { ___jsonDataType: string, value: any }) => any;

This works nicely for Set/Map. However, I have trouble doing it with observable.map/observable.set.
The reason is - the value I get in the replacer (the function which translates things during JSON.stringify) receives the observable values AFTER they were toJSONed.

Here's a gist containing the current code with the workaround, and the previous code that does not work (because the isObservableSet/isObservableMap checks don't work).

It means that without extra context, I can't know if I'm working with an observable value or not.

My current workaround is to parse it at the containing object level, which obviously hurts performance but given our current scale, it's not hurting us too badly.

Let's talk about what could be possible ways of handling this.

A possible solution I thought of was to mark the output of the observable objects' toJSON with some field, which would not be enumerable (to not break existing code), and it would allow to query the output and see if it used to be an observable value(and what type was it).

[urugator]

Looks like toJSON impl was added in 6.0, dunno what was the reasoning here.

I think you can check the original type in replacer using this: isObservableMap(this[key]).

[gioragutt]

Gonna check it out tomorrow. That's gonna be a huge saver if it works 🙏🏻

[gioragutt]

@urugator @Bnaya this worked nicely 🤩 Appreciate the help!

Here's the end result: https://gist.github.com/gioragutt/c0a3ae2391fb49e6487a183bf585520b

import {isObservableMap, isObservableSet} from 'mobx';

interface Adapter {
    is: (value: unknown) => boolean;
    serialize: (value: any) => any;
    deserialize: (value: any) => any;
}

const spread = (value: any) => [...value];

const adapters: Record<string, Adapter> = {
    Set: {
        is: value => value instanceof Set,
        serialize: spread,
        deserialize: value => new Set(value),
    },
    Map: {
        is: value => value instanceof Map,
        serialize: spread,
        deserialize: value => new Map(value),
    },
    ObservableSet: {
        is: isObservableSet,
        serialize: spread,
        deserialize: value => new Set(value),
    },
    ObservableMap: {
        is: isObservableMap,
        serialize: spread,
        deserialize: value => new Map(value),
    },
};

const adapterEntries = Object.entries(adapters);

function getAdapter(value: any) {
    for (const [name, {is, serialize}] of adapterEntries) {
        if (is(value)) {
            return {name, serialize};
        }
    }
    return undefined;
}

const DATA_TYPE_FIELD = '___jsonDataType';
function replacer(this: any, key: string, value: any): any {
    if (typeof value !== 'object' || value === null) {
        return value;
    }

    const adapterDesc = getAdapter(this[key]);
    if (!adapterDesc) {
        return value;
    }

    return {
        [DATA_TYPE_FIELD]: adapterDesc.name,
        value: adapterDesc.serialize(value),
    };
}

function reviver(_key: string, value: any): any {
    if (typeof value !== 'object' || value === null) {
        return value;
    }

    const adapter = adapters[value[DATA_TYPE_FIELD]];
    if (!adapter) {
        return value;
    }
    return adapter.deserialize(value.value);
}

export function parseJsonWithCollections<T>(value: string): T {
    return JSON.parse(value, reviver);
}

export function stringifyJsonWithCollections<T>(value: T, space?: string | number): string {
    return JSON.stringify(value, replacer, space);
}