SOURCE

// 数据
const createTextElement = (text) => {
    return {
        type: 'TEXT_ELEMENT',
        props: {
            nodeValue: text,
            children: []
        }
    }

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


// render
let nextUnitWork = null
const workLoop = (deadline) => {
    let shouldYield = false
    // 更新？
    while (nextUnitWork && !shouldYield) {
        nextUnitWork = performUnitOfWork(nextUnitWork)
        shouldYield = deadline.timeRemaining() < 1
    }

    // 空闲时执行,scheduler是react自己写的，具有优先调度算法，无法替代
    window.requestIdleCallback(workLoop)
}

window.requestIdleCallback(workLoop)

// fiber执行三件事（child、parent、sibling）
// 1.将元素添加到DOM
// 2.为元素得子元素创建fiber
// 3.选择下一个工作单元


// 创建节点，并附加在dom上

const createDom = (fiber) =>{

}

const performUnitOfWork = (fiber) => {
    if(!fiber.dom){
        fiber.dom = createDom(fiber) // 如果没有，就创造
    }
    if(fiber.parent){
        fiber.parent.dom.appendChild(fiber.dom)
    }

    const elements = fiber.props.children
    let index = 0
    let prevSibling = null

    while(index < elements.length){
        const element = elements[index]

        const newFiber = {
            
        }
    }

 }




const render = (element, container) => {
    nextUnitWork={
        dom:container,
        props:{
            children:[element]
        }
    }

    console.log(element, 'element')
    const node = element.type === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(element.type)
    const isProperty = key => key !== "children"
    Object.keys(element.props)
        .filter(isProperty)
        .forEach(name => {
            node[name] = element.props[name]
        })
    element.props.children.forEach((child) => {
        render(child, node)
    })
    container.appendChild(node)
}


const didAct = {
    createElement,
    render
}
const element = didAct.createElement('div', { id: 'id', title: 'title' },
    didAct.createElement('div', null, 'childA'),
    didAct.createElement('h2', { style: { color: 'red' } }, 'chidlB'))

// const element = (
//   <div id="foo">
//     <a>bar</a>
//     <b />
//   </div>
// )

const container = document.getElementById('root')
render(element, container)