alecodes/yarjs
Archived
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Update documentation

Browse source
This commit is contained in:
Alexander Navarro 2024-06-25 15:11:13 -04:00
parent f411544fe9
commit 36cb4e667d
Signed by untrusted user who does not match committer: anavarro
GPG key ID: 6426043E9FA3E3B5
1 changed files with 36 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/lib/YarJS.ts
View file

@ -5,6 +5,9 @@ import {
YarProps, YarProps,
} from "./YarJs.interfaces"; } from "./YarJs.interfaces";
/**
* This function converts Text into Dom Text Elements
*/
export function createTextElement(text: string) { export function createTextElement(text: string) {
return { return {
type: "TEXT", type: "TEXT",
@ -15,6 +18,9 @@ export function createTextElement(text: string) {
}; };
} }
/**
* This function converts JSX into HTMLElement's
*/
export function createElement( export function createElement(
type: YarHTMLTagName, type: YarHTMLTagName,
props: YarProps, props: YarProps,
@ -31,7 +37,7 @@ export function createElement(
}; };
} }
function createDom(fiber: YarFiber) { function generateDomNode(fiber: YarFiber) {
const dom = const dom =
fiber.type === "TEXT" fiber.type === "TEXT"
? document.createTextNode("") ? document.createTextNode("")
@ -66,23 +72,7 @@ function commitRoot() {
wipRoot = null; wipRoot = null;
} }
function workLoop(deadline: IdleDeadline) { function processFiber(fiber: YarFiber): YarFiber | undefined {
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) {
// Process the Fiber Tree, this is a representation of the DOM // Process the Fiber Tree, this is a representation of the DOM
// Since this this process could be interrupted before the whole // Since this this process could be interrupted before the whole
// tree is processed, we just do the representation and computation here, // tree is processed, we just do the representation and computation here,
@ -90,7 +80,7 @@ function performUnitOfWork(fiber: YarFiber) {
if (!fiber.dom) { if (!fiber.dom) {
// Create the actual dom element // Create the actual dom element
fiber.dom = createDom(fiber); fiber.dom = generateDomNode(fiber);
} }
// Create a new fiber for each child // 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 = { wipRoot = {
type: "", type: "",
dom: container, dom: container,