Tev Tevinthuku

## reconciler.js
// ...code
function beginWork(wipFiber) {
  if (wipFiber.tag == CLASS_COMPONENT) {
    updateClassFiber(wipFiber);
  } else {
    updateHostFiber(wipFiber);
  }
}

function updateHostFiber(wipFiber) {

## reconciler.js
// ... 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;
  }

## reconciler.js
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

## reconciler.js
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 }

## reconciler.js
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);

## component.js
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.

## reconciler.js
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

## tevreact.js
import { render } from "./reconciler";
import { createElement } from "./element";
import { Component } from "./component";
export { createElement, render, Component };

export default {
  render,
  createElement,
  Component
};

## class.html
<!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>

## reconciler.js
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
	// ...code
	function beginWork(wipFiber) {
	if (wipFiber.tag == CLASS_COMPONENT) {
	updateClassFiber(wipFiber);
	} else {
	updateHostFiber(wipFiber);
	}
	}

	function updateHostFiber(wipFiber) {
	// ... 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;
	}
	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
	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 }
	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);
	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.
	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
	import { render } from "./reconciler";
	import { createElement } from "./element";
	import { Component } from "./component";
	export { createElement, render, Component };

	export default {
	render,
	createElement,
	Component
	};
	<!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>
	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