Javascript classes: state management v2
After writing the article Javascript classes: state management, I got a lot of input from Nige White (Kudos!) and went back to the drawing board. The concept of using an afterSetQueue worked great for property cross-dependencies inside afterSetX methods, however it could not work inside beforeSetX methods.
What does the new version want to achieve?
![](https://miro.medium.com/v2/resize:fit:1000/1*nK3Dn5QEVHXUhRI3W-ewuA.png)
Running this test should result in:
![](https://miro.medium.com/v2/resize:fit:1000/1*Mz-KF57NY7c4r0gaVLJtAg.png)
As you can see, beforeSetA is using this.b and beforeSetB is using this.a. One of the meanest possible x-dependencies.
instance.set({a:3, b:4}) will however handle it correctly.
Can I run this test online?
Yes, here: https://neomjs.github.io/pages/node_modules/neo.mjs/test/siesta/index.html#tests/ClassSystem.mjs
Does this concept require using the neo.mjs framework?
No. You can manually enhance the JS class system in the same or a similar way. However, in case you did not take a closer look at the neo.mjs framework yet, I can strongly recommend to do so. You get multi-threading out of the box (the apps you create as well as most parts of the framework run inside a web worker) and the JSON based virtual dom has a lot of benefits (cleaner & simpler code, performance,…). Here is the link:
Let’s talk about code!
In case you want to manually set up a class config system, the applyClassConfig() logic will help: https://github.com/neomjs/neo/blob/dev/src/Neo.mjs#L48
The most important changes compared to my previous article are inside autoGenerateGetSet():
![](https://miro.medium.com/v2/resize:fit:1000/1*Vw69PcNt4591nayvOS-TdA.png)
![](https://miro.medium.com/v2/resize:fit:1000/1*rYwluJ8ZobtDMqwOvckBhQ.png)
https://github.com/neomjs/neo/blob/dev/src/Neo.mjs#L545
Side note: Neo will now store the getters / setters inside a cache, so that when multiple classes have the same config names, the logic will no longer create an overhead.
core.Base is now using a config symbol object, which will store the new values for initially setting the config values as well as for bulk config updates using set():
![](https://miro.medium.com/v2/resize:fit:1000/1*hYcxMq_e6um9bkGGfhkSPg.png)
https://github.com/neomjs/neo/blob/dev/src/core/Base.mjs#L266
You also want to look at processConfigs() which also gets used by initConfig() => constructor()
![](https://miro.medium.com/v2/resize:fit:1000/1*G5TNb7euDuh6g0utxHGsZQ.png)
The trick here is that processConfigs() will only consume the first key of the new config object (stored inside the instance symbol) and then call itself recursively. The reason for this is, that when parsing a new key, the beforeSet or afterSet methods of this key could access other configs, for which you want to get the new value(s) right away, which also allows for removing those config(s) from the new config symbol.
Feedback appreciated!
I know this is rather advanced JS coding, but I hope you can get the concepts. Feel free to modify / extend the test class and ask questions!
Best regards & happy coding,
Tobias