glimmerjs / glimmer-vm

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Re-review DOM sync approach.

lifeart opened this issue · comments

It seems we could explore different way to sync DOM with our state.
Instead of tags revalidation, we could explicitly mark "invalid" tags and resolve related opcodes to it.

Pseudocode:

TAG_ID = 12;

OpcodesForTag = {
  [TAG_ID] = [UpdateAttr, UpdateTextContent]
}

TagsToRevalidate = [];

Tag {
   id = TAG_ID;
   update() {
       this.value = 42;
       TagsToRevalidate.push(this);
   }
}

While (TRUE) {
   TagsToRevalidate.ForEach(Tag => {
      const value = tag.value;
      OpcodesForTag[this.id].forEach( opcode => {
          opcode(value);
      });
   });
}

Here is sample implementation concept: https://codepen.io/lifeart/pen/abMzEZm?editors=0110

Includes:

  • helpers
  • tags combination
  • basic DOM update ops
  • if condition
image

Tldr:

current glimmer-vm tag invalidation approach:
dirtryTag -> scheduleRerender -> validate all existing tags in application -> iterate over all opcodes and if changed -> execute
approach in issue:
dirtyTag -> scheduleRerender -> getOpcodesForTag(tag) -> execute