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](https://private-user-images.githubusercontent.com/1360552/292857729-9380343d-68f7-48d8-b6c4-0ea4155498c8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTAwNjI1NzYsIm5iZiI6MTcxMDA2MjI3NiwicGF0aCI6Ii8xMzYwNTUyLzI5Mjg1NzcyOS05MzgwMzQzZC02OGY3LTQ4ZDgtYjZjNC0wZWE0MTU1NDk4YzgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDMxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDAzMTBUMDkxNzU2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YjFmY2EyNWY4MjMzMzAxZjE5NzRiNWVkM2E0NmY1OTcwYTRiZGY1ZGQ0NTYzZmUzY2UyNDUwZmMyYWRkY2Y4OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.40rmkm-s1vMVEBMAxXZBAk5YyipHpFZS5Kg8lMHwRkg)
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