Re-review DOM sync approach.
- Dominant language
- TypeScript
- Stars
- 22.6k
- Forks
- 4.2k
- Avg merge
- 3d 12h
- Merged PRs (30d)
- 15
Description
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
## 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`
Contributor guide
Assessment
This issue has not been assessed yet.