How does MST BaseNode inheritance work?

[coolsoftwaretyler]

I am trying to understand some of the inheritance in the MobX-State-Tree internals.

The ModelType class in src/types/complex-types/model.ts extends the ComplexType class, which extends the BaseType class (both in src/core/type/type.ts). BaseType extends BaseNode, found in src/core/node/BaseNode.ts.

All of these are JavaScript abstract classes, other than the furthest child, ModelType.

However, some of the abstract classes have implementations of certain methods. For instance, the BaseNode class implements:

  private _subpath!: string
  get subpath() {
    return this._subpath
  }

As far as I can tell, the subpath getter doesn't get implemented in any of the other child classes in that inheritance chain. It only exists on BaseNode. But I can't seem to access it directly from a model definition or model instance:

const RootStore = t.model({
  subStore: t.model({
    title: t.string
  })
})

const rootStore = RootStore.create({ subStore: { title: "hello" } })

console.log("RootStore subpath: ", RootStore.subpath) // undefined
console.log("RootStore subpath: ", rootStore.subpath) // undefined

This does, however, exist on the $treenode property of the model instance:

console.log(rootStore.$treenode.subpath) // Empty string
console.log("subStore $treenode subpath: ", rootStore.subStore.$treenode.subpath) // "subStore"

I've tried to trace the code paths myself, and I can't seem to understand:

1. Why can't I call .subpath on the instance of rootStore? My understanding of JS class inheritance is I should be able to call it (examples in CodeSandbox)
2. How are we bundling $treenode onto the rootStore instance? It also seems to be different in production than development. There are redlines in the CodeSandbox, but not when I write this in a test file from direct imports.

This CodeSandbox has the confusing code in question, along with an example of three classes where a getter is available on a grandchild from an abstract grandparent: https://codesandbox.io/p/sandbox/loving-star-vr43qg?file=%2Fsrc%2Findex.ts%3A15%2C1

[coolsoftwaretyler]

I think I got it, it's because of the .value in return this.instantiate(null, "", environment, snapshot!).value in BaseType's create method, which passes back storedValue, which is the actual observable, and not the instance of the thing itself. I walked through the debugger on my examples and I think I see it now.

I put a breakpoint on const rootStore = RootStore.create({ subStore: { title: "hello" } }) and wrote some notes. These aren't particularly well-polished, and they're definitely missing some of the fine-grained details, but it helped a lot:

1. We start off in the create method on the ComplexType class, and use the snapshot, which is what we passed in to create.
2. That actually calls super.create, which runs typeCheckInternal.
3. In typeCheckInternal, we check to see if isTypeCheckingEnabled
4. Type checking is enabled either if devMode() is true (process.env.NODE_ENV === 'produciton'), or process.env.ENABLE_TYPE_CHECK
5. In this case, it is becasue we're in dev mode, so we typeCheck
6. If we pass, then we call this.instantiate, which is actually on ModelType since that's the concrete class we're in
7. We always pass no parent, no path, and the snapshot. We'll end up returning the .value of that call (maybe this is the key?)
8. Then we set up a value. If the initialValue is already a state tree node, we use that. If not, we apply the preProcessor
9. In our case, it is not a tree node yet (no $treenode property), so we run applySnapshotPreProcessor from the Model class
10. If there's a processor, we run it and return. Otherwise, we return the snapshot
11. In our case, no processor, so just return the snapshot.
12. From there, we call createObjectNode
13. In this case, we use ModelType, no parent, no subpath, no environment, and the value is the snapshot
14. At the start of createObjectNode, we check to see if this is an existing node.
15. Again, it's not. This time we used the safe operator, we get null back.
16. Since it's not a node, we then want to return a new ObjectNode
17. We pass the ModelType instance (our AnonymousModel), no parent, no subpath, the initial value is the snapshot
18. We pass those to the super constructor, which is BaseNode
19. BaseNode sets up some private and public variables
20. BaseNode sets the environment (undefined ehre)
21. BaseNode calls baseSetParent which sets the parent, sets the path, sets the escaped path to undefined to be used later
22. If there is a pathAtom, then we report the change (how did this get set? We have one in our case)
23. After that, we end up back in ObjectNode, setting variables throughout
24. Back in the ObjectNode contructor, we set up a function to set the computed snapshot
25. We set up this.unbox to bind to this
26. We set up the initial snapshot ,which is a call to freeze on the initialvalue (the snapshot)
27. In devMode, freeze checks if the value is primitive (it should not be), then checks if it's an observable array (it is not). So we just use Object.freeze on the value
28. We map the identifier attribute on the ObjectNode instance to that of the complexType that it backs.
29. If there's no parent, we know this is the root, so we set up an identifier cache.
30. That calls new IdentifierCache(), which mostly sets up some variables
31. Then we set up this._childNodes, which calls the initializeChildNodes method on our AnonModel
32. initializeChildeNodes looks through the props on itslef and calls instantiate on the childType, setting its result[name] to the result of that
33. In our case, we only have a subStore, which has a childType of ModelType, our second Anon model (the sub store model)
34. So now we're inside what would be a call to SubStore.create({ title: 'hello' })
35. Which means we're back in the instantiate method on AnonymousModel (the SubStore model)
36. We check the value of what we've been given in the initial value to see if it's a state tree node. If it is, that's what we use. If it's not, it is a snapshot, and we should call the applySnapshotPreProcessor for SubStore model
37. In applySnapshotPreProcessor, we check if there is a preProcessor. In our case, there isn't, so we just return the snapshot as is
38. Then we create an object node. We're doing this because we're in the ModelType. I assume for one of the primitives, we'd be calling createScalarNode
39. In createObjectNode, we check to see if it's an existing node.
40. This one isn't, so we send back a new ObjectNode creation
41. Back in ObjectNode constructor, we call the super constructor, passing in the SubStore model, the parent of our RootStore, and now we know the subpath is subStore
42. In the BaseNode class, we set up varialbes and then set up our constructor
43. We call baseSetParent again, which sets the parent, the subpath, and reports a change in the pathAtom
44. AFter that, we're back in the ObjectNode, setting up variables
45. Once those are set, we continue with the constructor, and set up a _snapshotComputed function
46. We bind unbox
47. We set the initialsnapshot by freezing it. This one is just { title: 'hello' }
48. Now we have a parent, so we don't set up a new identifierCache
49. And we're back at initializing the child nodes of this one
50. In our case, we just need to instantiate title, which is a CoreType (a string)
51. Here we are, in CoreType, and we can actually createScalarNode, using our parent subStore, and the title subpath
52. Creating a ScalarNode always returns a new ScalarNode()
53. When doing that, we start with super constructor of a ScalarNode, which is BaseNode
54. BaseNode sets up internal properties
55. Then we call setBaseParent again
56. After that, we're back in the ScalarNode constructor, which attempts to createNewInstance of the simpleType we have (in this case, our types.string)
57. This calls the given initializer on the provided snapshot (hello)
58. If it works, we say we have CREATED the node
59. Then we finalizeCreation
60. finalizeCreation calls baseFinalizeCreation, which will fail in dev mode if th enode is somehow dead.
61. If the node isn't dead, we call it finalized, and we check if it has parents. If it does (in this case we do), and that parent is not yet finalized, nothing happens. Otherwise, we trigger hooks
62. Now we're out of creating that scalar node entirely
63. And we're done initializing the children of the SubStore, so we can set the identifier
64. Then we add the node to the id cache
65. In our case, there is no identifier, so that does nothing
66. That's the end of creating subStore
67. That's the end of initializing the childNodes of rootStore
68. Now we can try to add this to the identifier cache
69. There is no identifier, so we don't do much there
70. And yes, we're back in step 7 where we get .value, it looks like
71. Since we're calling getValue, we then get an observable instance if needed
72. That checks to see if our observable instance is UNINTIALIZED
73. In our case it is, so we need to createObservableInstance
74. That puts us into a flow where we start going through the lifecycle
75. Then we create a parent chain and fire hooks for the direct parent? Not exaclty sure what's up here
76. After we fire those hooks, we createNewInstance, which returns some kind of object with:

const options = { ...mobxShallow, name: this.name }
return observable.object(childNodes, EMPTY_OBJECT, options) as any

77. THAT'S WHERE WE GET THE OBSERVABLE FROM MOBX
78. That's what's in this.storedValue
79. Then we preboot
80. preboot makes self = this and sets up _applySnapshot and _applyPatches, and adds the hidden $treenode property and toJSON property
81. We say the thing is running an action
82. Then we finalizeNewInstance from ModelType
83. that adds another hidden prop, toString
84. then it adds _interceptReads
85. Then we intercept and observe the node
86. WE hit a finally block and set the action running to false
87. Then we trackAndCompute - I missed what was goin gon there
88. Then we _addSnapshotReaction since this is the root
89. That registers event handlers for snapshot
90. Then if fireHooks is true, which it is, we fire the afterCreate hook on rootStore
91. That fires internal hooks, registerd on a parent class
92. Then we finalize creation for itself, its children, and its parents
93. That's the end of creating the observable instance
94. Now we retrun the storedValue, again, back to line 7

[coolsoftwaretyler]

Please excuse my typos, brevity, and fragmented thoughts. I posted that pretty much as-is after an hour or so of stepping through the debugger, so I don't have the energy to clean it up, but maybe someone (or myself) will find it helpful in the future.