Add Deep Whitelists & Blacklists

[agilgur5]

Go multiple levels deep with whitelists and blacklists. Right now you can only go one level deep, which misses a good number of use cases. So instead of just manga, could do manga.release too.

The dotted syntax makes sense to me, though not sure how to handle something like an array... just implement on all elements? Or require a more explicit []. or something?

This has popped up in agilgur5/react-native-manga-reader-app#27 and #26 .

Should really be implemented on top of Transforms #16 , but probably should be the default behavior too, not a separate transform.

[AfrazHussain]

How about using something like Ramda's dissocPath? The syntax is a bit different to the dotted syntax you mentioned, so instead of manga.release you would do ['manga', 'release'], but you can get over that with a simple split('.').

[agilgur5]

That could be an option too. The array piece is still a bit confusing either way

[BlackWild]

Without proper deep blacklisting and debouncing, the package uses a lot of resources and it's unusable in production for large apps.

I suggest directly using an object to blacklist variables instead of passing a string array and convert it using arrToDict() function (or at least making object-based blacklisting an option).

For example if the state tree is structured as this:

const store = types.model({
  book: types.model({
    release: types.Date,
    authors: types.array(Author)
  }),
  user: types.maybe(SomeUserModel)
})

const Author = types.model({
  name: types.string,
  age: types.number
})
const SomeUserModel = types.model({
  ... ,
  ...
})

blacklisting can be done as following:

const blacklist = {
  book: {
    release: false,
    authors: [{
      name: true,
      age: false
    }]
  },
  user: true
}

Notes:

• Arrays can be blacklisted via [{}]. I'm not sure if we can handle nested arrays this way but I think it can be the first step!
• Passing true to user blacklists it ignoring its structure.

[BlackWild]

To explain the algorithm for my suggested solution, we go through the blacklist object as following:

1. If we find a {}, we interpret it as going deeper
2. If we find a boolean, we decide to delete or keep that element
3. If we find a [{}], we realize it is an array and apply the inside {} to all of the entries in the array according to 1 and 2 steps.

[Navipro70]

Maybe if someone wanna find a temporary solution, I suggest save deep store/properties as as example:

Store, that will be nested in another store

RemindersStore.model('RemindersStore', {
  allowed: true,
  date: new Date(),
  days: ['monday', 'friday']
})

Store, that will be parent for nested store

ProfileStore.model({
  reminders: RemindersStore,
  anotherProp: true
})

Flow to save deep properties for nested store:
Remark: It's important to declare your nestedStore (RemindersStore) after parentStore (ProfileStore), and include nestedStore (RemindersStore) to whitelist of parentStore (ProfileStore).

const profilesStore = ProfileStore.create({
  reminders: RemindersStore.create()
})

persist('profileStore', profilesStore.reminders, {
   whitelist: ['reminders', 'anotherProp'],
})

persist('profileStoreReminders', profilesStore.reminders, {
   whitelist: ['allowed', 'date', 'days'],
})

Tested with various cases, works as expected, also if you remove some properties of parentStore (ProfileStore) and nestedStore (RemindersStore) from whitelist from my example it will work as expected and save only persisted properties.

Maybe @agilgur5 can describe better solution or reject mine