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)