Hello
Here are some keynotes that I made during my exploration of the framework.
Are there any useful resources that can help understand why things are implemented that way? For example, the purpose of having nested observers, each of them map the scopes to a different data structure?
import { Application } from "@hotwired/stimulus"
const application = Application.start()
The start method will create an instance of the Application class which has two components Router and Dispatcher.
Router
The Router has three main components:
-
Scope Observer: This class monitors the DOM and is responsible for creating the Scopes instances.
-
ScopeByIdentifier: maps the identifiers of controllers to the scopes.
-
ModuleByIdentifier: maps the identifiers of the controllers to the Module structure
Identifier is the first argument of the function “Application.register”
Scope Observer:
It has 4 nested Observers:
- Value List Observer (first level).
- Token List Observer.
- Attribute Observer.
- Element Observer (last level).
The two first levels handle one-level or two-level hashes that map some keys to the Scopes instances created by the Scope Observer.
Element Observer interacts directly with the DOM using the built-in function mutationObserver.
Scope By Identifier
A map that associates every identifier to an instance of the Scope class.
Module By Identifier
A map that associates every identifier to an instance of the Module class.
Scope
The scope has a reference to the HTML element and a set of methods that refers to the relevant elements on it like targets and classes.
Module
handle mapping between contexts and scopes, and maintain a list of connected contexts.
Context
it has a reference to the Controller instance and the binding Observer.
the binding Observer creates bindings which connects Action to Context. Action refers to the method from the controller that will be called when an event is detected.
