From 36cb4e667dafe71ed42680496de3574a4b3cbba4 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Tue, 25 Jun 2024 15:11:13 -0400
Subject: [PATCH] Update documentation

---
 src/lib/YarJS.ts | 56 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/lib/YarJS.ts b/src/lib/YarJS.ts
index 93ae5cc..184c33d 100644
--- a/src/lib/YarJS.ts
+++ b/src/lib/YarJS.ts
@@ -5,6 +5,9 @@ import {
   YarProps,
 } from "./YarJs.interfaces";
 
+/**
+ * This function converts Text into Dom Text Elements
+ */
 export function createTextElement(text: string) {
   return {
     type: "TEXT",
@@ -15,6 +18,9 @@ export function createTextElement(text: string) {
   };
 }
 
+/**
+ * This function converts JSX into HTMLElement's
+ */
 export function createElement(
   type: YarHTMLTagName,
   props: YarProps,
@@ -31,7 +37,7 @@ export function createElement(
   };
 }
 
-function createDom(fiber: YarFiber) {
+function generateDomNode(fiber: YarFiber) {
   const dom =
     fiber.type === "TEXT"
       ? document.createTextNode("")
@@ -66,23 +72,7 @@ function commitRoot() {
   wipRoot = null;
 }
 
-function workLoop(deadline: IdleDeadline) {
-  let shouldYield = false;
-  while (nextUnitOfWork && !shouldYield) {
-    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
-    shouldYield = deadline.timeRemaining() < 1;
-  }
-
-  if (!nextUnitOfWork && wipRoot) {
-    commitRoot();
-  }
-
-  requestIdleCallback(workLoop);
-}
-
-requestIdleCallback(workLoop);
-
-function performUnitOfWork(fiber: YarFiber) {
+function processFiber(fiber: YarFiber): YarFiber | undefined {
   // Process the Fiber Tree, this is a representation of the DOM
   // Since this this process could be interrupted before the whole
   // tree is processed, we just do the representation and computation here,
@@ -90,7 +80,7 @@ function performUnitOfWork(fiber: YarFiber) {
 
   if (!fiber.dom) {
     // Create the actual dom element
-    fiber.dom = createDom(fiber);
+    fiber.dom = generateDomNode(fiber);
   }
 
   // Create a new fiber for each child
@@ -144,7 +134,33 @@ function performUnitOfWork(fiber: YarFiber) {
   }
 }
 
-export function render(element: React.JSX.Element, container: HTMLElement) {
+/**
+ * This function should be passed on requestIdleCallback
+ * so the browser can process it while idle
+ */
+function processFiberTree(deadline: IdleDeadline) {
+  let shouldYield = false;
+  while (nextUnitOfWork && !shouldYield) {
+    nextUnitOfWork = processFiber(nextUnitOfWork);
+    shouldYield = deadline.timeRemaining() < 1;
+  }
+
+  if (!nextUnitOfWork && wipRoot) {
+    commitRoot();
+  }
+
+  requestIdleCallback(processFiberTree);
+}
+
+requestIdleCallback(processFiberTree);
+
+/**
+ * Add a new element to render into the DOM
+ */
+export function render(
+  element: React.JSX.Element,
+  container: HTMLElement,
+): void {
   wipRoot = {
     type: "",
     dom: container,