function createElement(type, props, ...children) {
      children: children.map(child =>
        typeof child === "object"
          : createTextElement(child)
function createTextElement(text) {
function createDom(fiber) {
    fiber.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(fiber.type)
  updateDom(dom, {}, fiber.props)
const isEvent = key => key.startsWith("on")
const isProperty = key =>
  key !== "children" && !isEvent(key)
const isNew = (prev, next) => key =>
const isGone = (prev, next) => key => !(key in next)
function updateDom(dom, prevProps, nextProps) {
        isNew(prevProps, nextProps)(key)
    .filter(isGone(prevProps, nextProps))
    .filter(isNew(prevProps, nextProps))
      dom[name] = nextProps[name]
    .filter(isNew(prevProps, nextProps))
  deletions.forEach(commitWork)
  commitWork(wipRoot.child)
function commitWork(fiber) {
  const domParent = fiber.parent.dom
    fiber.effectTag === "PLACEMENT" &&
    domParent.appendChild(fiber.dom)
    fiber.effectTag === "UPDATE" &&
  } else if (fiber.effectTag === "DELETION") {
    domParent.removeChild(fiber.dom)
  commitWork(fiber.sibling)
function render(element, container) {
let nextUnitOfWork = null
function workLoop(deadline) {
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(
    shouldYield = deadline.timeRemaining() < 1
  if (!nextUnitOfWork && wipRoot) {
  requestIdleCallback(workLoop)
requestIdleCallback(workLoop)
function performUnitOfWork(fiber) {
    fiber.dom = createDom(fiber)
  const elements = fiber.props.children
  reconcileChildren(fiber, elements)
    nextFiber = nextFiber.parent
function reconcileChildren(wipFiber, elements) {
    wipFiber.alternate && wipFiber.alternate.child
    index < elements.length ||
    const element = elements[index]
      element.type == oldFiber.type
    if (element && !sameType) {
    if (oldFiber && !sameType) {
      oldFiber.effectTag = "DELETION"
      oldFiber = oldFiber.sibling
      wipFiber.child = newFiber
      prevSibling.sibling = newFiber
  return <h1>Hi {props.name}h1>
const element = <App name="foo" />
const container = document.getElementById("root")
Didact.render(element, container)