Understanding how BrowserForestManager works

[cruxcode]

A web app created using the Atri framework is a single-page app (SPA) that contains many routes. We call each of these routes a page (sorry for the confusion here).

Only one page is visible on the canvas at a time. Let's call this page the current page in the rest of the discussion. We can change the current page by using the Page manager in the top left corner of the editor. Whenever we set a different page as the new current page, the rest of the code in our editor needs to be informed about this change. One way to achieve this was using the Pub-Sub model where the code that depends on the current page will unsubscribe to changes to the old current page and subscribe to changes to the new current page. This approach of Pub-Sub is not a clean code pattern and it would be better if this subscribing-unsubscribing can be handled within some clean interface.

This is where the BrowserForestManager from the @atrilabs/core package shines. The rest of the discussion assumes that the reader is already familiar with the concept of events & forest in our codebase. If not please read this discussion first before moving ahead in this discussion. The code pattern to subscribe to changes to the current page would be as shown below:

const unsub = BrowserForestManager.currentForest.subscribeForest((update)=>{
 // use update object to understand what happened
});

If you are writing a custom react hook or a React component, the usual code pattern that you would like to use is shown below:

useEffect(()=>{
 const unsub = BrowserForestManager.currentForest.subscribeForest((update)=>{
  // use update object to understand what happened
 });
 return unsub;
})

Each forest has many trees, for example, there is a tree for storing CSS of components, a tree to store components, a tree to store custom properties, etc. To access a particular tree of the current page, you use the id of the tree along with BrowserForestManager.currentForest as shown below:

import CssTreeId from "@atrilabs/app-design-forest/lib/cssTree?id";

BrowserForestManager.currentForest.tree(CssTreeId);

If you are writing a custom react hook or a React component, the usual code pattern that you would like to use is shown below:

import CssTreeId from "@atrilabs/app-design-forest/lib/cssTree?id";

const someCustomHook = ()=>{
 const cssTree = useTree(CssTreeId);
 
 useEffect(()=>{
  // use the cssTree here for accessing a node using node id
  const cssNode = cssTree.nodes[nodeId]
 },[cssTree])
}