Moment - Custom Type?

[mashaalmemon]

We use moment.js to represent time. Looking at MST, the prescribed way to use something like Moment in MST models you would create a custom type like this:

/**
 * Custom type specifically for holding moments in the MST
 */
export const momentDate = types.custom({
    name: "momentDate",
    fromSnapshot(value: string):Moment {
        return moment(value)
    },
    toSnapshot(value: Moment) {
        return value.toISOString()
    },
    isTargetType(v:Moment) {
        return moment.isMoment(v);
    },
    getValidationMessage(v:string) {
        try {
            // tslint:disable-next-line: no-unused-expression
            moment(v)
            return ""
        } catch (e) {
            return e.message
        }
    }
})

Is there a prescribed way of doing this in MST (that is can I pass in a Moment and have some magic happen on the to/from snapshot to achieve that I need with Mobx-keystone?

[evelant]

I think this is a use case mobx-keystone doesn't handle at the moment. There's discussion in these issues: #285 #275

[mashaalmemon]

Thanks @AndrewMorsillo .

If there were a types.custom type implementation, as you suggest, if there was a types.custom type implementation, that would be perfect.

[xaviergonz]

New property transforms + context apply/applyComputed were released as part of v0.61.0

Docs:

• https://mobx-keystone.js.org/mapsSetsDates
• https://mobx-keystone.js.org/contexts

Let me know if that solves your case completely/partially

[mashaalmemon]

It appears that the writeup https://mobx-keystone.js.org/mapsSetsDates was exactly what I was looking for:

import {ModelPropTransform} from "mobx-keystone";
import moment, {Moment, isMoment} from "moment";

export const momentToNumberTransform: ModelPropTransform<number, Moment> = {
    /**
     * Take original value, and serialize it.
     *
     * @param originalValue
     * @param cachedTransformedValue
     * @param setOriginalValue
     */
    transform({ originalValue, cachedTransformedValue, setOriginalValue }) {
        return cachedTransformedValue ?? moment.unix(originalValue);
    },

    /**
     * Take Moment, and return the immutable/serializable value
     *
     * @param transformedValue
     * @param cacheTransformedValue
     */
    untransform({ transformedValue, cacheTransformedValue }) {
        // if no moment has been cached, cache it for the future
        if (isMoment(transformedValue) == false) {
            cacheTransformedValue()
        }
        // return the immutable/serializable value
        return transformedValue.unix();
    },
}

I believe it solves my case. I'm moving over from my toy example to my actual codebase and implementing what I learned. So I'll let you know if there is anything missing.

With respect to 'cachedTransformedValue` is this there for efficiency? I'm using it but not clear as to why using this cache would be a good idea?

Also setOriginalValue is there only if you need to modify the original value from the value that was set via the initialization correct? Essentially if you need to do a mutation right after it was set?

[mashaalmemon]

@AndrewMorsillo, this may be what we were looking for!

[xaviergonz]

With respect to 'cachedTransformedValue` is this there for efficiency? I'm using it but not clear as to why using this cache would be a good idea?

Yes, it is there just for efficiency, in case you can re-use the transformed value (e.g. Date) passed to "new", a setter, etc. instead of creating a new one from the original value. It is an advanced use case though, so if unsure it is better not to use it.

Also setOriginalValue is there only if you need to modify the original value from the value that was set via the initialization correct? Essentially if you need to do a mutation right after it was set?

Imagine that you want to return a custom Date object that whenever "setMilliseconds" is called it would modify the original (snapshot) value. That function would allow you to do that.

[xaviergonz]

Btw, in your case I think you should call cacheTransformedValue() always. The transformed value will always be a moment and most probably you want this to happen:

const mom = moment.unix(1234)
const m = new M({ time: mom })

// if cacheTransformedValue() is called this will be true
expect(m.time === mom).toBe(true)

[mashaalmemon]

Will do.

As a side note, from a style perspective typing this in every model where I need to use 'Moment' would be painful. Instead I am creating this constant:

export const momentProp = prop<number>().withTransform(momentToNumberTransform).withSetter();

Then in models where I need a momentProp, I can simply do this:

@model("Todo")
export class Todo extends ExtendedModel(BaseNModel, {
    createdTs:momentProp,
    // ... other props
}) implements Partial<ITodo> {
    /// other actions etc
}