The SvMonitor object is used to detect whether a state variable has changed since the last time it was interrogated.
SvMontiors are created by a state variable's createMonitor() method. The createMonitor() method may return an SvMonitor object or a sub-class of it.
The sub-class can customize how change is detected, however, the interface is the same.
SvMonitors are primarily used by a Component's sync() method to determine whether a state variable has changed since the last time it was called.
They are usually created by the Component's render() or didMount() methods prior to the first time the sync() method is called. By convention, SvMonitors are stored in the Components _mon object.
The sync() Component instance method primarily uses the SvMonitor's hasChanged() method, which will return true if the value of the associated state variable has changed since it was last called.
If the hasChanged() method returns true, the component should modify the displayed value to match the state variable.
Here's an example using an implementation of the sync() method from the Component superclass object:
sync () {
if (this._mon.classSv && this._mon.classSv.hasChanged()) {
this.setClassName(this.currentClassName());
}
this.syncChildren();
}
Using SvMonitors this way reduces unnecessary DOM repaints.
A state variable's createMonitor() method can take an optional noInitialChange argument.
if noInitialChange is false, then the first call to the hasChanged() method will return true.
Otherwise, the first call to the hasChanged() method will return false.
Set noInitialChange to true if the first rendering is synchronized with the associated state variables.
The SvMonitors have several methods that can be overridden for more fine-grain control of when a change is declared. Every time the hasChanged() method is called, it updates the SvMonitor's lastValue property with the current value of the associated state variable. The hasChanged() method calls the isChanged() method with the last value and the current value to determine whether a change has occurred. By default, the isChanged() method uses Object.is() to compare the two values, returning true if they do not compare. As an example, if it was only useful when the value changes from thruthy to falsey and vice versa, you could override the isChanged() method as follows:
isChanged (lastValue, value) {
return (!!lastValue === !!value);
}
new SvMonitor(sVar)
new SvMonitor(sVar, noInitialChange)
SvMonitors are typically constructed by calling a state variable's createMonitor() instance method. The Constructor should only be used by state variable implementations.
sVarnoInitialChange (optional, default: false)hasChanged() method will return false. Otherwise, the first call will return true. If noInitialChange is true, the lastValue protperty is set to the current value of the state variable. Otherwise, it is set to undefined.forceChange()forceChange()
Forces the next call to the hasChanged() method to return true.
hasChanged()hasChanged()
Returns true if the value of the associated state variable has changed since the last time hasChanged() was called or the forceChange() method is called on the SvMonitor or on the associated state variable. Calls the update() method to update the monitored state.
A Boolean. Returns true if the value has changed and false otherwise.
isChanged()isChanged(lastValue, value)
Returns true if the last value and current value are considered different. The default implementation returns the value of !Object.is(lastValue, value).
lastValuehasChanged() method or update() methods were called.valueTrue if the values are considered changed.
Override this method if a different behavior is required. For example, if the state variable value is an object, it can return the result of comparing individual properties or all properties.
reset()reset()
Resets the SvMonitor instance to a state similar to the initial state. If the instance was created with noInitialChange false then calls to the hasChanged() method will return false unit the state variable is changed. Otherwise the next call to the hasChanged() method will return true.
update()update()
Updates the SvMonitor to the current state of the associated state variable.
Future calls to the hasChanged() method will return false until the state variable value is changed or the forceChange() method is called on the SvMonitor or on the associated state variable.
Internally, it updates the lastValue property to the current value of the associated state variable.
sVarThe state variable the SvMonitor is monitoring.
A StateVar object.
lastValueThe value of the sVar state variable as of the last time the SvMonitor was updated by either the hasChanged() or the update() methods. It is set to undefined to indicate that the value should fail comparison until updated.
Any JavaScript type.
lastForcedGenCntThe value of the forcedGenCnt property in the sVar state variable as of the last time the SvMonitor was updated by either the hasChanged() or the update() methods. When the state variable's forceChange() method is called, it increments the value of the forcedGenCnt property, which forces a change on all SvMonitors monitoring the state variable.
It is set to undefined to indicate that the value should fail comparison until updated.
A Number or undefined.