Tevinthuku

//NB: ALL DOM nodes have their corresponding fibers in our new implementation
// most of this properties will make sense once we begin using them
let fiber = {
  tag: HOST_COMPONENT, // we can have either host of class component
  type: "input",
  parent: parentFiber, // the parentNode’s fiber
  child: childFiber, // the childNode’s fiber if it has any
  sibling: null, // the element that is in the same tree level as this input
  alternate: currentFiber, // the fiber that has been rendered on the dom. Will be null if its on initial render
  stateNode: document.createElement(“div”),

Tevinthuku

const rootElement = document.getElementById("root")
ReactDom.render(<Component />, rootElement) // renders for the first time
ReactDom.render(<Component />, rootElement) // does the app component render twice

Tevinthuku

{
  "main": "dist/tevreact.umd.js",
  "module": "dist/tevreact.es.js", // ESM-aware tools like Rollup need this field to import the es module directly
  "name": "tevreact",
  "version": "1.0.0",
  "license": "MIT",
  "files": [
    "dist"
  ],  
"scripts": {

Tevinthuku

$ yarn init -y // if you have yarn installed
$ npm init -y // if you have npm
// install rollup
$ yarn add rollup —-dev
$ npm install rollup —-save-dev

Tevinthuku

const root = document.getElementById("root")
ReactDom.render(<Component />, root)

Tevinthuku

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]

Tevinthuku

function performWork(deadline) {
  // ...code
  if (pendingCommit) {
    commitAllWork(pendingCommit);
  }
}

function commitAllWork(fiber) {
  // this fiber has all the effects of the entire tree
  fiber.effects.forEach(f => {

Tevinthuku

// ...code

let pendingCommit = null; // this is what will be flushed to the dom
// ... code


function completeWork(fiber) {
  // this function takes the list of effects of the children and appends them to the effects of
  // the parent
  if (fiber.tag == CLASS_COMPONENT) {

Tevinthuku

// .. code
function cloneChildFibers(parentFiber) {
  const oldFiber = parentFiber.alternate;
  // if there is no child for the alternate
  // there's no more work to do
  // so just kill the execution
  if (!oldFiber.child) {
    return;
  }

Tevinthuku

// .. code


const PLACEMENT = "PLACEMENT"; // this is for a child that needs to be added
const DELETION = "DELETION"; //for a child that needs to be deleted.
const UPDATE = "UPDATE"; // for a child that needs to be updated. refresh the props

function createArrayOfChildren(children) {
 // we can pass children as an array now in the call to render
 /**