Skip to content

Instantly share code, notes, and snippets.

Avatar
🤓
typing fast

Tev Tevinthuku

🤓
typing fast
View GitHub Profile
View reconciler.js
// ...code
function beginWork(wipFiber) {
if (wipFiber.tag == CLASS_COMPONENT) {
updateClassFiber(wipFiber);
} else {
updateHostFiber(wipFiber);
}
}
function updateHostFiber(wipFiber) {
View 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;
}
View 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
View 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 }
View 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);
@Tevinthuku
Tevinthuku / component.js
Last active Aug 14, 2019
a call to scheduleUpdate from setState
View 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.
View 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
View tevreact.js
import { render } from "./reconciler";
import { createElement } from "./element";
import { Component } from "./component";
export { createElement, render, Component };
export default {
render,
createElement,
Component
};
@Tevinthuku
Tevinthuku / class.html
Last active Aug 13, 2019
a class example of
View 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>
@Tevinthuku
Tevinthuku / reconciler.js
Last active Aug 13, 2019
updated reconciler function.
View 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