export const createApp = (...args) => {
    const app = ensureRenderer().createApp(...args);
    const { mount } = app;

    // 重寫mount
    app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
      const container = normalizeContainer(containerOrSelector);
      if (!container) return;
      const component = app._component;

      if (!isFunction(component) && !component.render && !component.template) {
        component.template = container.innerHTML;
      }
      container.innerHTML = "";
      const proxy = mount(container, false, container instanceof SVGElement);

      if (container instanceof Element) {
        container.removeAttribute("v-cloak");

        container.setAttribute("data-v-app", "");
      }
      return proxy;
    };
    return app;
  };

// 瀏覽器dom操作
import { nodeOps } from "./nodeOps"; // 瀏覽器dom屬性更新
import { patchProp } from "./patchProp";
import { createRenderer } from "@vue/runtime-core";
const rendererOptions = extend({ patchProp }, nodeOps);
let renderer: Renderer<Element | ShadowRoot> | HydrationRenderer;
function ensureRenderer() {
  return (
    renderer ||
    ((renderer = createRenderer < Node),
    Element | (ShadowRoot > rendererOptions))
  );
}

export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = { 
  insert: (child, parent, anchor) => { parent.insertBefore(child, anchor || null) 
  },
  remove: child => { 
    const parent = child.parentNode 
    if (parent) { 
      parent.removeChild(child) 
      } 
    },
    createElement: (tag, isSVG, is, props): Element => { 
      const el = isSVG ? doc.createElementNS(svgNS, tag) : doc.createElement(tag, is ? { is } : undefined) 
      if (tag === 'select' && props && props.multiple != null) { 
        ;(el as HTMLSelectElement).setAttribute('multiple', props.multiple) 

        }
        return el 
        },
        createText: text => doc.createTextNode(text), 
        createComment: text => doc.createComment(text), 
        setText: (node, text) => { node.nodeValue = text },
        setElementText: (el, text) => { el.textContent = text },
        parentNode: node => node.parentNode as Element | null, 
        nextSibling: node => node.nextSibling, 
        querySelector: selector => doc.querySelector(selector), 
        ... 
}

export function createRenderer<
    HostNode = RendererNode,
    HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
    return baseCreateRenderer < HostNode, HostElement > (options)
}
function baseCreateRenderer() {
    const { insert: hostInsert,
        remove: hostRemove,
        patchProp: hostPatchProp,
        createElement: hostCreateElement,
        createText: hostCreateText,
        createComment: hostCreateComment,
        setText: hostSetText,
        setElementText: hostSetElementText,
        parentNode: hostParentNode,
        nextSibling: hostNextSibling,
        setScopeId: hostSetScopeId = NOOP,
        cloneNode: hostCloneNode,
        insertStaticContent: hostInsertStaticContent
    } = options
    const patch = () =>... //一個(gè)函數(shù)
    const processText = () =>...
    const processCommentNode = () =>...
    const processElement = () =>...
    const mountElement = () =>...
    const mountChildren = () =>...
    const patchElement = () =>...
    const patchBlockChildren = () =>...
    const patchProps = () =>...
    const processComponent = () =>...
    const mountComponent = () =>...
    const updateComponent = () =>...
    const setupRenderEffect = () =>...
    const patchChildren = () =>...
    const patchKeyedChildren = () =>...
    const unmount = () =>...
    const unmountComponent = () =>...
    const unmountComponent = () =>...
    const unmountComponent = () =>...
    const unmountComponent = () =>...
    const render: RootRenderFunction = (vnode, container, isSVG) => {
        if (vnode == null) {
            if (container._vnode) {
                unmount(container._vnode, null, null, true)
            }
        } else {
            patch(container._vnode || null, vnode, container, null, null, null, isSV }
        flushPostFlushCbs() container._vnode = vnode
    } return {
        render, hydrate, createApp: createAppAPI(render, hydrate)
    }
}

export function createAppAPI<HostElement>(render: RootRenderFunction, hydrate?: RootHydrateFunction): CreateAppFunction<HostElement> {
    return function createApp(rootComponent, rootProps = null) {
        const context = createAppContext()
        let isMounted = false const app: App = (context.app = {
            _context: context, _instance: null,
            use(plugin: Plugin, ...options: any[]) ,
            component(name: string, component?: Component): any {
                if (!component) {
                    return context.components[name]
                }
                context.components[name] = component return app
            },
            directive(name: string, directive?: Directive) 
            mount(rootContainer: HostElement, isHydrate?: boolean, isSVG?: boolean): any {
                if (!isMounted) {
                    const vnode = createVNode(rootComponent as ConcreteComponent, rootProps)
                    vnode.appContext = context // 核心的邏輯
                    if (isHydrate && hydrate) {
                        hydrate(vnode as VNode<Node, Element>, rootContainer as any)
                    } else {
                        render(vnode, rootContainer, isSVG)
                    }
                    return getExposeProxy(vnode.component!) || vnode.component!.proxy
                }
            },
            provide(key, value) { context.provides[key as string] = value return app }
        }) return app
    }
}

const patch: PatchFn = (
    n1,
    n2,
    container,
    anchor = null,
    parentComponent = null,
    parentSuspense = null,
    isSVG = false,
    slotScopeIds = null,
    optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
) => { // 兩次虛擬dom完全一樣 啥也不用干
    if (n1 === n2) { return }// 虛擬dom節(jié)點(diǎn)類型不一樣， unmount老的虛擬dom，并且n1賦值null if (n1 && !isSameVNodeType(n1, n2)) { anchor = getNextHostNode(n1) unmount(n1, parentComponent, parentSuspense, true)n1 = null }// n2是要渲染的虛擬dom，我們獲取type，ref和shapeFlag const { type, ref, shapeFlag } = n2 switch (type) { case Text: // 文本
    processText(n1, n2, container, anchor) break case Comment: // 注釋
    processCommentNode(n1, n2, container, anchor) break case Static: // 靜態(tài)節(jié)點(diǎn)
    if (n1 == null) {
        mountStaticNode(n2, container, anchor, isSVG)
    } else if (__DEV__) {
        patchStaticNode(n1, n2, container, isSVG)
    }
    break 
    case Fragment: processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized)
break default: // 運(yùn)運(yùn)算判斷操作類型
if (shapeFlag & ShapeFlags.ELEMENT) { // html標(biāo)簽
    processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized)
} else if (shapeFlag & ShapeFlags.COMPONENT) { // 組件
    processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized)
} else if (shapeFlag & ShapeFlags.TELEPORT) {
    (type as typeof TeleportImpl).process(
        n1 as TeleportVNode, n2 as TeleportVNode,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        slotScopeIds, optimized, internals
    )
} else if (
    __FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE
) {
    ;
    (type as typeof SuspenseImpl).process(
        n1,
        n2,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        slotScopeIds,
        optimized,
        internals
    )
}
else if (__DEV__) { warn('Invalid VNode type:', type, `(${typeof type})`) }
}// set ref if (ref != null && parentComponent) { setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2) }

const processComponent = (
    n1: VNode | null,
    n2: VNode,
    container: RendererElement,
    anchor: RendererNode | null,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    isSVG: boolean,
    slotScopeIds: string[] | null,
    optimized: boolean) => {
    n2.slotScopeIds = slotScopeIds
    if (n1 == null) {
        if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
            ; (parentComponent!.ctx as KeepAliveContext).activate(n2, container, anchor, isSVG, optimized)
        }
        else {
            mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
        }
    } else {
        updateComponent(n1, n2, optimized)
    }
}

import { setupComponent } from './component'
const mountComponent: MountComponentFn = () => {
    // 2.x compat may pre-creaate the component instance before actually 
    // mounting 
    const compatMountInstance = __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
    const instance: ComponentInternalInstance = compatMountInstance || (
        initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense)
    ) // resolve props and slots for setup context 
    if (!(__COMPAT__ && compatMountInstance)) {
        setupComponent(instance)
    } (instance,
        initialVNode,
        container,
        anchor,
        parentSuspense,
        isSVG, o
    ptimized 
    )
if (__DEV__) { popWarningContext() endMeasure(instance, `mount`) }
}

export function setupComponent(
    instance: ComponentInternalInstance,
    isSSR = false) { isInSSRComponentSetup = isSSR const { props, children } = instance.vnode const isStateful = isStatefulComponent(instance) initProps(instance, props, isStateful, isSSR) initSlots(instance, children) const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : undefined isInSSRComponentSetup = false return setupResult } function setupStatefulComponent(instance: ComponentInternalInstance, isSSR: boolean) {
        const Component = instance.type as ComponentOptions // 執(zhí)行setup 
        const { setup } = Component if (setup) {
            const setupContext = (instance.setupContext = setup.length > 1 ? createSetupContext(instance) : null)
            setCurrentInstance(instance) pauseTracking()
            const setupResult = callWithErrorHandling(
                setup,
                instance,
                ErrorCodes.SETUP_FUNCTION,
                [instance.props, setupContext])
            if (isPromise(setupResult)) {
                setupResult.then(
                    unsetCurrentInstance, unsetCurrentInstance
                )
            } else {
                handleSetupResult(instance, setupResult, isSSR)
            }
        } else {
            finishComponentSetup(instance, isSSR)
        }
    }
export function callWithErrorHandling(
    fn: Function,
    instance: ComponentInternalInstance | null,
    type: ErrorTypes, args?: unknown[]
) {
    let res
    try { res = args ? fn(...args) : fn() } catch (err) { handleError(err, instance, type) } return res
}

if (!instance.isMounted) {
    patch(null, subTree, container, anchor, instance, parentSuspense, isSVG)
} else {
    // updateComponent 
}
// create reactive effect for rendering 
const effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update),
    instance.scope // track it in component's effect scope 
)
const update = (instance.update = effect.run.bind(effect) as SchedulerJob)
update.id = instance.uid
update()