Change detection and internal state of elements

[Dylan Van Bommel]

Expectation

I am not entirely sure if I should expect this from the library due to the nature of the Web. So to start I guess I'm simply opening a discussion.

Essentially, I am going of the thought: The state I provide, is the state that should be presented.

Example scenario

The simplest example I can think of is a form control element (e.g. input, select, etc.).

1. The program renders out a select with an initial value of "3" (selecting the third option).

h(
  "select",
  {
    value: "3"
  },
  [
    h("option", { value: "1" }, ["1"]),
    h("option", { value: "2" }, ["2"]),
    h("option", { value: "3" }, ["3"])
  ]
);

2. The user changes the value of the select.
   This updates the internal state of HTMLSelectElement.

3. Next, the program tries to force the initial value again ("3").
   The change detector will not detect a change (as "3" is still "3") and therefor not update the UI.
   The UI now does not present the actual state anymore.

— Demo: https://stackblitz.com/edit/maquette-starter-s3g6hj?file=index.html

---

Any thoughts on this matter?

[Johan Gorter]

The mechanism you describe is the way frameworks like Angular work. (it is called two-way-binding)

Maquette only modifies the real DOM based on changes to the virtual DOM. This means in your case you need a variable/model to store the value from the select and a change/input listener to observe user interaction and change the variable/model accordingly.

This is the way the most popular frameworks work nowadays.

[Dylan Van Bommel]

I understand where you're coming from and it is indeed a solution.

However, my perspective is more that I feel like I shouldn't need to keep the changed state and the virtual DOM should be copied over/"forced" to the real DOM.

For example, this is the case with the Elm architecture. In a sense, the DOM is constantly overwritten by the provided state. Changing a form control is not possible if a handler is not provided that updates the state.

[Johan Gorter]

Maquette tries really hard to be performant and thus it does not scan or modify the real DOM unneeded. The DOM is really slow to query/modify.