Mini uses Classes, a template for creating objects. These classes are then used through composition.

• Composition vs Inheritance

Mini has the following structure:

• Mini
  • This is the main class that calls the other classes during initialization. This is the entry point of Mini.js at lib/main.js.
• Entity
  • An entity is created for each DOM element that Mini has found.
  • Entities have events, data, and attributes through composition.
• Attributes
  • Dynamic attributes that an entity has are managed here.
  • Attributes uses the Interpreter when evaluating the code in the dynamic attributes of an entity.
  • Read more at Dynamic Attributes.
• Events
  • Dynamic events that an entity has are managed here.
  • Events uses the Interpreter when evaluating the code in the dynamic events of an entity.
  • Read more at Dynamic Events.
• Data
  • State or variables that the entity uses are being managed here.
  • Data uses the Lexer in identifying the variables used inside dynamic events and attributes of an entity.
  • Read more at Variables.
• Lexer
  • Uses acorn, acorn-walk, and escodegen in:
    • parsing the Abstract Syntax Tree of a given JS code.
    • identifying and replacing variables in the AST.
    • generates code with replaced identifiers.
  • Read more at Lexer and Interpreter.
• Interpreter
  • Runs the given code by:
    • using the Lexer in replacing the identifiers.
    • setups the scope which contains identifiers that the code can use.
    • runs the updated code using a wrapped async function.
  • Read more at Lexer and Interpreter.
• State
  • Used to contain the logic regarding state management.
  • Read more at State Management.
• Observer
  • Used to contain the logic regarding DOM mutation (node insertion, node removal, and attributes update).
  • Will initialize dynamically inserted DOM nodes.
  • Will clean up dynamically removed DOM nodes.
  • Will update dynamically updated attributes of DOM nodes.
  • Read more at DOM Observer.
• Events Extensions
  • Contains logic for allowing users to use custom events.
  • Read more at Events Extensions.

Folder Structure

All the code regarding the Mini.js library can be found at lib/.

• __tests__ - contains tests cases which can be run by yarn test.
  • lexer.js - contains tests cases regarding the Lexer.
• entity/ - contains logic owned by the entity.
  • attributes.js - contains logic regarding entity attributes.
  • events.js - contains logic regarding entity events.
  • data.js - contains logic regarding entity variables.