Doesn't render elements on different containers.
FazleRabbbiferdaus172 opened this issue · comments
Didact.render(element1, container1);
Didact.render(element2, container2);
Expected Behaviour:
element1 should have been appended to the container1 and element2 should have been appended to the container2.
Current Behaviour:
Only element2 is being appended to container2.
Reason:
The second render call is executed before workLoop is executed for the first time as a result wipRoot and nextUnitOfWork change before the first render call gets the chance to render element1, container1.
Possible Fix:
- Instead of assigning wipRoot in the render function, we maintain a queue of wipRoot.
- In workLoop we check if there is no nextUnitOfwork and wipQueue is not empty then we pop the first element assign it to wipRoot and set the nextUnitOfWork.
let wipQueue = [];
function render(element, container) {
let tWipRoot;
tWipRoot = {
dom: container,
props: {
children: [element],
},
alternate: currentRoot,
};
deletions = [];
wipQueue.push(tWipRoot);
}
function workLoop(deadline) {
let shouldYield = false;
if (!nextUnitOfWork && wipQueue) {
wipRoot = wipQueue.shift();
nextUnitOfWork = wipRoot;
}
while (nextUnitOfWork && !shouldYield) {
nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
shouldYield = deadline.timeRemaining() < 1;
}
if (!nextUnitOfWork && wipRoot) {
commitRoot();
}
Although this solution works, we also have to maintain another list of currentRoot for hooks to work.
Also, I am new to JS and front-end in general. So there might be a better solution, Just wanted to share my thoughts.