lib/state.js manages the logic related to state.

Last updated at Feb 29, 2024 by Joeylene

TABLE OF CONTENTS

During Mini’s initialization, an instance of the state class is created:

// lib/main.js

export class Mini {
  constructor() {
    this.state = new State(this)
    ...
  }
  
  async init() {
    ...
    this.state.setProxyWindow()
    ...
    this._initializeGlobalVariables()
    ...
    this.state.evaluate()
    ...
  }

• Proxy Window:
  • During ‣, a proxy window is made at the state.setProxyWindow stage*.* We use JavaScript Proxies to trigger DOM updates when a state has been re-assigned.
  • The following is the snippet of code for the handler used when creating the proxy window:
• Initialize Global Variables:
  • During this stage, variables are fetched from each entity by the Lexer (See Lexer and Interpreter).
  • Moreover, each variable is initialized depending on what kind it is:
    • Normal State - just a normal global state, accessible at window[variable].
    • Entity State - a state of an entity, accessible at window[entityID][variable]. It starts with el. and scope.
    • Local State - a state that is also saved in local storage, accessible at window[variable. It starts with $.
  • This is also where state.js tracks which entities depends on specific variables, which is used for state updates later. You can view which entities depends on certain variables by checking MiniJS.state.variables and MiniJS.state.entityVariables for entity variables
• State Evaluate:
  • All dynamic attributes, attributes that starts with :, are evaluated.
  • Afterwards, state re-renders is now enabled. So any changes to a state will now trigger DOM updates.
• With that, the state is now set-up and ready to listen for any state updates via proxies.

Below is an overview of that flow:

On State Update

When a state update is triggered through variable re-assignment, it follows this flow:

• Variables

  • Entity Variables
  • Local Variables
  • Normal Variables

• Variable Dependencies

  • Entities that depends on a variable are tracked via MiniJS.state.variables and MiniJS.state.entityVariables.

  • This is used when re-evaluating a variable’s dependencies.

  • For example:

    <input :value="firstName" /> // EntityID1
    <p :text="firstName"></p> // EntityID2
    
    <input :value="lastName" /> // EntityID3
    <p :text="lastName"></p> // EntityID4
    
    // state updates:
    firstName = 'Arya'
    
    // state.js gets the entities that depends on that variable
    // that would be the first <input /> and <p /> tags
    const dependencies = state.variables.get("firstName")
    // returns [EntityID1, EntityID2]
    
    // state.js will now re-evaluate the DOM
    dependencies.forEach((entityID) => {
      const entity = state.entities.get(entityID)
      entity?.attributes.evaluate()
      // will evaluate :value for <input /> and :text for <p />
    })
    

• Attaching Helper Methods

  • Some helper methods are then attached to the used variables.
  • Currently, we only extend the Arrays. See Array.

On State Disposal

When a DOM element is removed, the associated entity is then disposed which also disposes variables that are no longer used by other entities: