Loading haxcellence..

At HAXeditor and HAXsite core data storage is MobX. MobX provides simple, scalable state management and the two data stores work together to provide individual yet integrated capability. MobX is how all pieces of the application understand what is 'active' either at the editor or site layer. It's how the editor can operate without the site and the site can understand the editor to help create a decoupled yet seamless experience.

Store properties

This list may fall out of date, however the store is not commonly modified, when it is, it is api enhancement as opposed to removal. HAXsite's MobX store is simple and primarily in charge of bridging the router (url slug / path) with what the 'activeId' is. From there, the activeItem from the site.json manifest's items array can be correctly identified.

Each property is listed and available on the store. To pull in the store in your code write the following:

MobX store props

MobX common usage

You create a LitElement which is stateful and reactive to properties
You want to subscribe to this style of property reactivity when changes happen in HAXsite or HAXeditor

toJS / autorun paradigm

While MobX has extensive docs, this is the most common way that you can integrate with HAX in the ways most people will care about. The following is how site-title knows to render the title, react to being in an editable state, and change when the manifest updates the name of the site.

site-title and many other blocks are available for theme development.

The most common way to get notified to changes in the store is with autoruns. A full example is below as Core development approach, however here's the critical piece.

Here's how you can read and interpret the above (which can be applied to ANY store property):

Automatically run the following code whenever siteTitle changes in the store

This is part of the magic of MobX! It does textual analysis to say "the store cares about siteTitle so rerun this anonymous function because the code says it cares about siteTitle"

toJS clones the siteTitle so that it is a stand alone string as opposed to a Proxy object (the thing making MobX so powerful under the hood)
in your LitElement / web component then you'd react to changes in this.siteTitle, render and respond as you see fit!
the this.__disposer block is referenced below and is just data clean up in the event this element is not persistently rendered in the page.

Check understanding

Scroll back up the page, any property that we add to the MobX store you can subscribe to changes with the approach mentioned!

You are one step closer to unlocking the magic of MobX + HAX!