Mobx-state-tree: Recursion createFactory collection

[A-gambit]

I have just prepared for one React Meetup where I will tell about different React Architecture. So I want to create a Tree like an example of powerful mutable date manipulations with MobX.
For example, I want to create a tree with such Node interface:

interface Node {
  value: string;
  children: Node[];
};

So in mobx-state-tree it have look something like this:

let Node = createFactory({
   value: '',
  children: arrayOf(Node)
})

But it is error for JS compiler.
In my opinion, it will be better to do some reference function to this structure:

const Node = createFactory({
   ref: 'node'
   value: '',
  children: arrayOf(ref('node'))
})

Or some recursion function, like smart bind this function:

const Node = createFactory({
   value: '',
   children: recursionCollection(function () {
     return arrayOf(this)
   })
})

Or this will have a collection method like:

recursionCollection(function () {
    return arrayOf(this.collection)
})

// or function which receives collection as the argument

recursionCollection(function (collection) {
   return arrayOf(collection)
})

Guys, what do you think. How will it be better to resolve this issue? I want to fix it :)

[mattiamanzati]

MobX-State-Tree type system is inspired heavily to the awesome work of @gcanti on his io-ts lib.
So I like its syntax for recursive types.

const Node = t.recursion('Node', self => t.struct({
      value: t.string,
      children: t.array(self)
    }))

I think it's kinda neat and more human-readable.

[mweststrate]

@mattiamanzati that is definitely a neat way to solve it indeed!

[mweststrate]

types.recursion has been superseded by types.late, which is more generic. See for example https://github.com/mobxjs/mobx-state-tree/blob/25c2f72271b6046c9818a9c529d5a46093b86ac5/test/late.ts#L24