Doesn't render elements on different containers.

[FazleRabbbiferdaus172]

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:

1. Instead of assigning wipRoot in the render function, we maintain a queue of wipRoot.
2. 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.