This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ...code | |
function beginWork(wipFiber) { | |
if (wipFiber.tag == CLASS_COMPONENT) { | |
updateClassFiber(wipFiber); | |
} else { | |
updateHostFiber(wipFiber); | |
} | |
} | |
function updateHostFiber(wipFiber) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... code | |
function performUnitOfWork(wipFiber) { | |
// lets work on the fiber | |
beginWork(wipFiber); | |
if (wipFiber.child) { | |
// if a child exists its passed on as | |
// the nextUnitOfWork | |
return wipFiber.child; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function performWork(deadline) { | |
if (!nextUnitOfWork) { | |
// on initial render | |
// or if all work is complete and the nextUnitOfWork is null | |
//grab the first item on the workInProgress queue. | |
initialUnitOfWork(); | |
} | |
loopThroughWork(deadline) | |
if (nextUnitOfWork || workQueue.length > 0) { | |
// if theres more work to be done. get to know when the browser will be occupied |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const HOST_ROOT = "root"; | |
const HOST_COMPONENT = "host"; | |
// code.. | |
export function render(elements, containerDom) { | |
workQueue.push({ | |
from: HOST_ROOT, // the root/parent fiber | |
dom: containerDom, // document.getElementById("app") just a dom node where this fiber will be appended to as a child | |
newProps: { children: elements } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const CLASS_COMPONENT = "class"; | |
// ...code | |
export function scheduleUpdate(instance, partialState) { | |
workQueue.push({ | |
from: CLASS_COMPONENT, // we know scheduleUpdate came from a class so we have CLASS_COMPONENT here. | |
instance: instance, // *this* object | |
partialState: partialState // this represents the state that needs to be changed | |
}); | |
requestIdleCallback(performWork); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {scheduleUpdate} from "./reconciler" | |
export class Component { | |
constructor(props) { | |
this.props = props || {}; | |
this.state = this.state || {}; | |
} | |
setState(partialState) { | |
// we'll define this function in the reconciler.js file. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { updateDomProperties } from "./dom-utils"; | |
import { TEXT_ELEMENT } from "./element"; | |
const ENOUGH_TIME = 1; // we set ours to 1 millisecond. | |
let workQueue = []; // there is no work initially | |
let nextUnitOfWork = null; // the nextUnitOfWork is null on initial render. | |
// the schedule function heere can stand | |
// for the scheduleUpdate or the | |
// call to render |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { render } from "./reconciler"; | |
import { createElement } from "./element"; | |
import { Component } from "./component"; | |
export { createElement, render, Component }; | |
export default { | |
render, | |
createElement, | |
Component | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>Didact</title> | |
</head> | |
<body> | |
<div id="app"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function reconcile(parentDom, instance, element) { | |
if (instance == null) { | |
// initial render | |
const newInstance = instantiate(element); | |
parentDom.appendChild(newInstance.dom); | |
return newInstance; | |
} else if (element == null) { | |
/** | |
* this section gets hit when | |
* a childElement was previously present |