didact.js

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child => 
        typeof child === "object"
        ? child
        : createTextElement(child)
      )
    }
  }
}

function createTextElement(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text,
      children: []
    }
  }
}

function createDOMElement(fiber) {
  // create element
  const dom = 
  fiber.type === "TEXT_ELEMENT"
  ? document.createTextNode("")
  : document.createElement(fiber.type)
  // assign properties(including event listeners)
  updateFiberDOM(dom, {}, fiber.props)
  
  return dom
}

const Helpers = {
  isEvent: key => key.startsWith("on"),
  isProperty: key => 
    key !== "children" && !Helpers.isEvent(key),
  isNew: (prev, next) => key =>
    prev[key] !== next[key],
  wasRemoved: (prev, next) => key => !(key in next)
}

function updateFiberDOM(dom, prevProps, nextProps) {
  Object.keys(prevProps)
    .forEach( name => {
      if (Helpers.isProperty(name)) {
        // remove old property if its not on the new fiber
        if(Helpers.wasRemoved(prevProps, nextProps)(name)) {
          dom[name] = ""
        }
      } else if (Helpers.isEvent(name)) {
        // remove old event listener if its not on the new fiber
        if (!(name in nextProps)) {
          if (Helpers.isNew(prevProps, nextProps)(name)) {
            const eventType = name
              .toLowerCase()
              .substring(2)
            dom.removeEventListener(
              eventType,
              prevProps[name]
            )
          }
        }
      }
    })
  
  Object.keys(nextProps)
    .forEach(name => {
      // add  new property
      if (Helpers.isProperty(name)) {
        if (Helpers.isNew(prevProps, nextProps)(name)) {
          dom[name] = nextProps[name]
        }
      } else if (Helpers.isEvent(name)) {
        // add new event listener
        if (Helpers.isNew(prevProps, nextProps)(name)) {
          const eventType = name
            .toLowerCase()
            .substring(2)
          dom.addEventListener(
            eventType,
            nextProps[name]
          )
        }
      }
    })
}

function commitFiberTree() {
  deletions.forEach(commitFiberTreeToDOM)
  commitFiberTreeToDOM(fiberTreeRoot.child)
  // prepare for next render
  previousFiberTree = fiberTreeRoot
  fiberTreeRoot = null
}

function commitFiberTreeToDOM(fiber) {
  if (!fiber) {
    return
  }

  const domParent = fiber.parent.dom
  if (fiber.dom != null) {
    if (fiber.effectTag === "PLACEMENT") {
      // for a fiber that's completely new
      domParent.appendChild(fiber.dom)
    } else if (fiber.effectTag === "UPDATE") {
      // for a fiber that has a previous version
      updateFiberDOM(
        fiber.dom,
        fiber.previous.props,
        fiber.props
      )
    }
  }
  // for a fiber that's no longer needed
  if (fiber.effectTag === "DELETION") {
    domParent.removeChild(fiber.dom)
  }

  commitFiberTreeToDOM(fiber.child)
  commitFiberTreeToDOM(fiber.sibling)
}

function render(element, container) {
  // set fiber tree's root
  fiberTreeRoot = {
    dom: container,
    props: {
      children: [element]
    },
    previous: previousFiberTree
  }
  deletions = []
  currentFiber = fiberTreeRoot
}

let fiberTreeRoot = null
let currentFiber = null
let deletions = null
let previousFiberTree = null

function constructFiberTree(deadline) {
  let shouldYield = false
  // if fiber tree's root is set, construct Fiber Tree fiber by fiber in the browser's idle time
  while (currentFiber && !shouldYield) {
    currentFiber = constructFiber(
      currentFiber
    )
    
    shouldYield = deadline.timeRemaining() < 1
  }
  if (!currentFiber && fiberTreeRoot) {
    // when there are no more fiber's to be constructed
    commitFiberTree()
  }

  requestIdleCallback(constructFiberTree)
}

requestIdleCallback(constructFiberTree)

function constructFiber(fiber) {
  // add dom node 📦, in other words set fiber's dom element
  if (!fiber.dom) {
    fiber.dom = createDOMElement(fiber)
  }

  // create child fibers
  const children = fiber.props.children
  reconcileChildren(fiber, children)

  // return next fiber: update currentFiber.
  if (fiber.child) {
    return fiber.child
  }
  // otherwise, start moving towards the fiber root i.e. towards the 'parent'
  let nextFiber = fiber
  while(nextFiber) {
    if (nextFiber.sibling) {
      return nextFiber.sibling
    }
    nextFiber = nextFiber.parent
  }

}

function reconcileChildren(wipFiber, children) {
  let index = 0
  // if the fiber had a previous version, then get its previous version's child
  let oldFiber = 
    wipFiber.previous && wipFiber.previous.child
  let prevSibling = null

  while (
    index < children.length ||
    oldFiber != null
    ) {
    const child = children[index]

    let newFiber = null
    
    const isOfSameType = 
      oldFiber &&
      child &&
      child.type === oldFiber.type

    if (isOfSameType) {
      // create new fiber which points to its previous version
      newFiber = {
        type: oldFiber.type,
        props: child.props,
        dom: oldFiber.dom,
        parent: wipFiber,
        previous: oldFiber,
        effectTag: "UPDATE", 
      }
    }
    if (child && !isOfSameType) {
      // create a completely new fiber
      newFiber = {
        type: child.type,
        props: child.props,
        dom: null,
        parent: wipFiber,
        previous: null,
        effectTag: "PLACEMENT"
      }
    }
    if (oldFiber && !isOfSameType) {
      // if the pevious version is no longer needed align it for deletion
      oldFiber.effectTag = "DELETION"
      deletions.push(oldFiber)
      // as its only comparing the type of fibers, it may leave out some oldfibers which need deletion
    }

    if (oldFiber) {
      // remember: fibers on the stem point to their immediate sibling
      // so the previous version of the next child is to going to be current child's previous version's sibling
      oldFiber = oldFiber.sibling
    }
    
    if (index === 0) {
      wipFiber.child = newFiber
    } else if (child) {
      // if this is not the first child, then the preceding child's fiber should point to the current child's fiber
      prevSibling.sibling = newFiber
    }
    // note: prevSibling acts as a pointer(reference). 
    prevSibling = newFiber
    index++
  }
}

const Didact = {
  createElement,
  render
}

/** @jsx Didact.createElement */
const container = document.querySelector('#root');

const updateValue = event => {
  rerender(event.target.value);
};
const rerender = value => {
  // rerender on each update in value
  const element = (
    <div>
      <input onInput={updateValue} value={value}/>
      <h2>Hello {value}</h2>
    </div>
  )
  Didact.render(element, container);
};

rerender("World!");