Maps, Sets, Dates, BigInt

Overview

Although mobx-bonsai doesn't support properties which are Maps/Sets directly (for JSON compatibility purposes), you can simulate them in three ways:

1. The new property transforms.
2. The asSet and asMap collection wrappers.

Transforms

mobx-bonsai provides out of the box these getter transforms:

• objectToMapTransform() - Transforms between a Record<string, V> and a Map<string, V> (Note: this uses asMap internally).
• arrayToSetTransform() - Transforms between a Array<V> and a Set<V> (Note: this uses asSet internally).
• timestampToDateTransform() - Transforms a timestamp number to an immutable Date (ImmutableDate), where all mutating methods will throw errors.
• isoStringToDateTransform() - Transforms an ISO date string to an immutable Date (ImmutableDate).
• stringToBigIntTransform() - Transforms a string to a BigInt.

And these actions (setters) transforms:

• dateToTimestampTransform() - Transforms a Date to a timestamp number.
• dateToIsoStringTransform() - Transforms a Date to an ISO date string.
• bigIntToStringTransform() - Transforms a BigInt to a string.

Example:

import {
  nodeType,
  objectToMapTransform,
  timestampToDateTransform,
  dateToTimestampTransform,
  isoStringToDateTransform,
  dateToIsoStringTransform,
  stringToBigIntTransform,
  bigIntToStringTransform
} from 'mobx-bonsai';

type MyType = {
  record: Record<string, number>
  array: Array<string>
  timestamp: number
  isoDateString: string
  bigIntString: string
}

const TMyType = nodeType<MyType>().getters({
  getMap: objectToMapTransform("record"),
  getSet: arrayToSetTransform("array"),
  getTimestampDate: timestampToDateTransform("timestamp"),
  getIsoStringDate: isoStringToDateTransform("isoDateString"),
  getBigInt: stringToBigIntTransform("bigIntString")
}).actions({
  setTimestampDate: dateToTimestampTransform("timestamp"),
  setIsoStringDate: dateToIsoStringTransform("isoDateString"),
  setBigInt: bigIntToStringTransform("bigIntString")
});

const instance = TMyType({
  record: { a: 1, b: 2 },
  array: ["a", "b"],
  timestamp: 1633072800000,
  isoDateString: "2021-10-01T00:00:00.000Z",
  bigIntString: "123456789012345678901234567890"
});

const map = TMyType.getMap(instance); // Map<string, number>
const set = TMyType.getSet(instance); // Set<string>
const timestampDate = TMyType.getTimestampDate(instance); // ImmutableDate
const isoStringDate = TMyType.getIsoStringDate(instance); // ImmutableDate
const bigInt = TMyType.getBigInt(instance); // bigint

TMyType.setTimestampDate(instance, new Date());
TMyType.setIsoStringDate(instance, new Date());
TMyType.setBigInt(instance, BigInt("987654321098765432109876543210"));

Collection wrappers

asMap collection wrapper

The asMap function converts a plain object, an observable object or an object node into a Map<string, V> view that you can interact with as you would a standard Map.

Operation	Map	asMap (observable object)	asMap (plain object)
add	O(1)	O(1)	O(1)
delete	O(1)	O(1)	O(1)
has	O(1)	O(1)	O(1)
clear	O(n)	O(n)	O(n)
iteration	O(n)	O(n)	O(n)

asSet collection wrapper

The asSet function wraps a plain array, an observable array or an array node into a Set-like interface.

Operation	Set	asSet (observable array)	asSet (plain array)
add	O(1)	O(1)	O(n)
delete	O(1)	O(n)	O(n)
has	O(1)	O(1)	O(n)
clear	O(n)	O(n)	O(n)
iteration	O(n)	O(n)	O(n)