The logic behind tracking which attributes depend on certain variables are managed under lib/entity/data.js.

Last updated at March 2, 2024 by Joeylene

IN THIS ARTICLE

Each entity has variables to managed:

// lib/entity.js
export class Entity {
  constructor(el, dynamicScripts = []) {
    ...
    this.data = new Data(this)

Fetching Variables from Dynamic Attributes / Events

During Mini’s initialization, variables are fetched from all dynamic attributes and events of an entity:

// lib/main.js
async init() {
   ...
   this._initializeGlobalVariables()
   ...
}

_initializeGlobalVariables() {
  const entities = Array.from(this.state.entities.values())
  entities.forEach((entity, index) => {
    entity.getVariables()
  })
}

// lib/entity.js
getVariables() {
  this.data.init()
}

// lib/entity/data.js
init() {
  this._getAttributesVariables()
  this._getEventVariables()
  this._removeDuplicateVariables()
  this._initVariables()
}

In terms of fetching the variables, it uses the Lexer (See Lexer and Interpreter) in fetching the identifiers:

// Example: " firstName = this.value "
const expr = entity.element.getAttribute(':click')

const lexer = new Lexer(expr)
lexer.identifiers // returns ['firstName', 'this']

When fetching variables, this and $ are ignored, since they are not really reactive state but rather special variables that Mini.js offers:

• this - means the current element.
• $ - is equal to document.querySelector.

Initializing the Variables

During an entity’s data’s init, the variables are also initialized, setting up their default values depending on the variables’ type:

• Variables
  • Entity Variables
  • Local Variables
  • Normal Variables

Variables are initialized and tracked at initAttributeVariables:

// lib/entity/data.js

constructor() {
	// tracks relationship between attributes and variables
  this._variables = new Map() // key: variable, value: attributes
  this._attributes = new Map() // key: attribute, value: variables

  // tracks variables inside `:scope`, used to change a variable to el.variable
	this.scopeVariables = []
}

// variables are initialized here
initAttributeVariables(attr) {}

// tracking which attributes uses a variable happens here
add(variable, attribute) {}