emberjs / emberjs/ember.js

Re-review DOM sync approach.

Open
#21,039 1 comment 0 reactions 0 assignees View on GitHub
glimmervm
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

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`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.