<div id="app"></div>
<script src="./runtime-dom.global.js"></script>
<script>
        let { createApp, h, ref } = VueRuntimeDOM
        function useCounter() {
            const count = ref(0)
            const add = () => {
                count.value++
            }
            return { count, add }
        }
        let App = {
            props: {
                title: {}
            },
            setup() {
                let { count, add } = useCounter()
                return { count, add }
            },
            // 每次更新重新調用render方法
            render(proxy) {
                return h('h2', { onClick: this.add, title: proxy.title }, 'hello dy' + this.count)
            }
        }
        let app = createApp(App, { title: 'dy' }) // 組件 組件參數(shù)
        app.mount('#app')
</script>

/**
 * 
 * @param component 組件
 * @param rootProps 傳入的屬性
 */
export const createApp = (component, rootProps = null) => { }
// 將runtime-core中所有API導出
export * from '@vue/runtime-core'

export function createRenderer(rendererOptions) {
    // 虛擬節(jié)點轉化成真實節(jié)點 渲染到容器中
    const render = (vnode, container) => {
    }
    // 創(chuàng)建節(jié)點相關的api mount use mixin
    const createAppAPI = (render) => {
        return (rootComponent, rootProps) => {
            let app = {
                mount(container) { },
                use() { },
                mixin() { },
                component() { }
            }
            return app
        }
    }
    return {
        render,
        createApp: createAppAPI(render)
    }
}

let app = createApp(App, { title: 'dy' }) // 組件 組件參數(shù)
app.mount('#app')

const { createApp } = createRenderer(rendererOptions)
let app = createApp(component, rootProps) // 渲染器完成 將其返回

let { mount } = app // 自己的
app.mount = (containerOrSelector) => { // 用戶傳入的 #app
        const container = nodeOps.querySelector(containerOrSelector)
        if (!container) return 
        container.innerHTML = ''
        mount(container)
    }

export const createApp = (component, rootProps = null) => {
    const { createApp } = createRenderer(rendererOptions) // 將core中的createApp解構出來
    // 創(chuàng)建一個渲染器 把功能傳遞給runtime-core
    let app = createApp(component, rootProps)
    let { mount } = app // 調用的是core中的mount
    // app.mount 用戶初始化的mount ==> app.mount("#app");
    // 在用戶的app.mount中再去執(zhí)行core中的mount ==> core中就會存在domAPI  需要渲染的組件 目標屬性，最后再去掛載到容器中
    /**
     * containerOrSelector 用戶傳入的容器
     */
    app.mount = (containerOrSelector) => { // 用戶傳入的 #app
        const container = nodeOps.querySelector(containerOrSelector)
        if (!container) return // 不為空直接返回
        // 在掛載之前清空
        container.innerHTML = ''
        // 調用的是core中的mount  處理節(jié)點后將container傳入mount
        mount(container)
    }
    return app
}

mount(container) {
    // 1:創(chuàng)建組件虛擬節(jié)點
    const vnode = cerateVNode(rootComponent, rootProps)// h函數(shù)
    // 2:虛擬節(jié)點渲染到容器中
    render(vnode, container)
}

export const enum ShapeFlags {
  ELEMENT = 1, // 元素
  FUNCTIONAL_COMPONENT = 1 << 1, // 函數(shù)式組件    010
  STATEFUL_COMPONENT = 1 << 2, // 普通組件        0100
  TEXT_CHILDREN = 1 << 3, // children 是文本      01000
  ARRAY_CHILDREN = 1 << 4, // children 是 數(shù)組 
  SLOTS_CHILDREN = 1 << 5, // children 是 插槽
  TELEPORT = 1 << 6, // teleport 組件
  SUSPENSE = 1 << 7, // suspense 組件
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, // keep-alive
  COMPONENT_KEPT_ALIVE = 1 << 9, // kept alive
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT // 組件
}

h('h2', { onClick: this.add, title: proxy.title }, 'hello dy' )

isObject(type) ? ShapeFlags.COMPONENT : isString(type) ? ShapeFlags.ELEMENT : 0

export function cerateVNode(type, props, children = null) { 
    // type如果是字符串 元素 ；  type是對象或者函數(shù) == 組件
    const shapeFlag = isObject(type) ? ShapeFlags.COMPONENT : isString(type) ? ShapeFlags.ELEMENT : 0
    // 瀏覽器或者測試環(huán)境都會轉成vnode
    const vnode = {
        __v_isVNode: true,  // 是否是虛擬節(jié)點
        type, // 節(jié)點類型
        props,
        children,
        shapeFlag,
        key: props && props.key, // patch對比需要
        component: null,// 如果是組件的虛擬節(jié)點 需要保存組件的實例
        el: null//真實節(jié)點
    }
    if (children) {
        // 告訴節(jié)點 是什么樣的子節(jié)點
        // 稍后渲染虛擬節(jié)點的時候，可以判斷兒子是數(shù)組就循環(huán)渲染
        vnode.shapeFlag = vnode.shapeFlag | (isString(children) ? ShapeFlags.TEXT_CHILDREN : ShapeFlags.ARRAY_CHILDREN)
    }
    // vnode 描述出來當前是個什么節(jié)點，包含的子節(jié)點的類型是什么
    return vnode
}

/**
 * 老的虛擬節(jié)點 
 * 新的虛擬節(jié)點
 * 容器
 */
patch(null, vnode, container)

const patch = (n1, n2, container) => {
    if (n1 === n2) return
    const { shapeFlag } = n2
    // 傳入的是元素
    if (shapeFlag & ShapeFlags.ELEMENT) {
        processElement(n1, n2, container)
    }
    // 組件
    else if (shapeFlag & ShapeFlags.COMPONENT) {
        processComponent(n1, n2, container)
    }
}

const processComponent = (n1, n2, container) => {
    if (n1 === null) {
        // 組件初始化
        mountComponent(n2, container)
    } else {
        // 組件的更新
    }
}

/**
 * 
 * @param initialVNode 組件的虛擬節(jié)點
 * @param container 容器
 */
const mountComponent = (initialVNode, container) => {
    // 組件的掛載
    console.log(initialVNode, container);
}

// createRenderer函數(shù)
  const {
    insert: hostInsert, // 插入節(jié)點
    remove: hostRemove, // 刪除節(jié)點
    patchProp: hostPatchProp,
    createElement: hostCreateElement, // 創(chuàng)建元素
    createText: hostCreateText, // 創(chuàng)建文本
    createComment: hostCreateComment, // 注釋
    setText: hostSetText,    // 設置文本中的內容
    setElementText: hostSetElementText, // 設置文本內容
    parentNode: hostParentNode, // 獲取父節(jié)點
    nextSibling: hostNextSibling, // 兄弟節(jié)點
    setScopeId: hostSetScopeId = NOOP, // 設置scope id
    cloneNode: hostCloneNode,
    insertStaticContent: hostInsertStaticContent
  } = rendererOptions