import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

export * from '@vue/runtime-dom';

import {  } from '@vue/runtime-core';
export * from '@vue/runtime-core';
import {  } from '@vue/shared';
// ... 省略n多代碼
function createApp(...args) {
    // ...
}
export {createApp};

const createApp = (...args) => {
    const app = ensureRenderer().createApp(...args);
    const {mount} = app;
    app.mount = (containerOrSelector) => {
        // ...
    };
    return app;
}

let renderer;
const ensureRenderer = () => renderer || (renderer = createRenderer(rendererOptions));

const rendererOptions = {
    insert: (child, parent, anchor) => {
        parent.insertBefore(child, anchor || null);
    },
    createText: text => document.createTextNode(text),
}

import { createRenderer } from "./runtime-core";
const createApp = (...args) => {
  const rendererOptions = {
    insert: (child, parent, anchor) => {
      parent.insertBefore(child, anchor || null);
    },
    createText: (text) => document.createTextNode(text)
  };
  const app = createRenderer(rendererOptions).createApp(...args);
  const { mount } = app;
  app.mount = (containerOrSelector) => {
    //...后面分析再補上
  };
  return app;
};
export { createApp };

function createRenderer(options) {
    return baseCreateRenderer(options);
}
// implementation
function baseCreateRenderer(options, createHydrationFns) {
    // 省略 n 多代碼，都是函數(shù)定義，并會立即執(zhí)行，暫時對結(jié)果不會有影響
    return {
        render,
        hydrate,
        createApp: createAppAPI(render, hydrate)
    };
}

function createAppContext() {
    return {
        app: null,
        config: {
            isNativeTag: NO,
            performance: false,
            globalProperties: {},
            optionMergeStrategies: {},
            errorHandler: undefined,
            warnHandler: undefined,
            compilerOptions: {}
        },
        mixins: [],
        components: {},
        directives: {},
        provides: Object.create(null),
        optionsCache: new WeakMap(),
        propsCache: new WeakMap(),
        emitsCache: new WeakMap()
    };
}
// 這個變量是用來統(tǒng)計創(chuàng)建的應用實例的個數(shù)
let uid$1 = 0;
function createAppAPI(render, hydrate) {
    // 返回一個函數(shù)，這里主要是通過閉包來緩存上面?zhèn)魅氲膮?shù)
    return function createApp(rootComponent, rootProps = null) {
        // rootComponent 就是我們傳入的根組件，這里會做一些校驗
        // 如果傳遞的不是一個函數(shù)，那么就做一個淺拷貝
        if (!isFunction(rootComponent)) {
            rootComponent = Object.assign({}, rootComponent);
        }
        // rootProps 就是我們傳入的根組件的 props，這個參數(shù)必須是一個對象
        if (rootProps != null && !isObject(rootProps)) {
            (process.env.NODE_ENV !== 'production') && warn(`root props passed to app.mount() must be an object.`);
            rootProps = null;
        }
        // 創(chuàng)建上下文對象，在上面定義，就是返回一個對象
        const context = createAppContext();
        // 通過 use 創(chuàng)建的插件都存在這里
        const installedPlugins = new Set();
        // 是否已經(jīng)掛載
        let isMounted = false;
        // 創(chuàng)建 app 對象
        const app = (context.app = {
            _uid: uid$1++,
            _component: rootComponent,
            _props: rootProps,
            _container: null,
            _context: context,
            _instance: null,
            version,
            get config() {
                // ...
            },
            set config(v) {
                // ...
            },
            use(plugin, ...options) {
                // ...
            },
            mixin(mixin) {
                // ...
            },
            component(name, component) {
                // ...
            },
            directive(name, directive) {
                // ...
            },
            mount(rootContainer, isHydrate, isSVG) {
                // ...
            },
            unmount() {
                // ...
            },
            provide(key, value) {
                // ...
            }
        });
        // 返回 app 對象
        return app;
    };
}

function createRenderer(options) {
    // 先省略 render 和 hydrate 方法的實現(xiàn)，后面會講到
   return {
        render,
        hydrate,
        createApp: createAppAPI(render, hydrate)
    };
}
function createAppAPI(render, hydrate) {
    return function createApp(rootComponent, rootProps = null) {
        // 省略參數(shù)校驗
        rootComponent = Object.assign({}, rootComponent);
        // 省略上下文的創(chuàng)建
        const context = {
            app: null
        }
        // 忽略其他函數(shù)的實現(xiàn)，只保留 mount 函數(shù)和私有變量
        let isMounted = false;
        const app = (context.app = {
            _uid: uid$1++,
            _component: rootComponent,
            _props: rootProps,
            _container: null,
            _context: context,
            _instance: null,
            mount(rootContainer, isHydrate, isSVG) {
                // ...
            },
        });
        return app;
    };
}

const createApp = (...args) => {
    // ...省略其他代碼
    // 備份 mount 方法 
    const { mount } = app;
    // 重寫 mount 方法
    app.mount = (containerOrSelector) => {
        // 獲取掛載的容器
        const container = normalizeContainer(containerOrSelector);
        if (!container)
            return;
        // _component 指向的是 createApp 傳入的根組件
        const component = app._component;
        // 驗證根組件是否是一個對象，并且有 render 和 template 兩個屬性之一
        if (!isFunction(component) && !component.render && !component.template) {
            // __UNSAFE__
            // Reason: potential execution of JS expressions in in-DOM template.
            // The user must make sure the in-DOM template is trusted. If it's
            // rendered by the server, the template should not contain any user data.
            // 確保模板是可信的，因為模板可能會有 JS 表達式，具體可以翻譯上面的注釋
            component.template = container.innerHTML;
        }
        // clear content before mounting
        // 掛載前清空容器
        container.innerHTML = '';
        // 正式掛載
        const proxy = mount(container, false, container instanceof SVGElement);
        // 掛載完成
        if (container instanceof Element) {
            // 清除容器的 v-cloak 屬性，這也就是我們經(jīng)?？吹降?v-cloak 的作用
            container.removeAttribute('v-cloak');
            // 設(shè)置容器的 data-v-app 屬性
            container.setAttribute('data-v-app', '');
        }
        // 返回根組件的實例
        return proxy;
    };
    return app;
}

// 備份 mount 方法 
const { mount } = app;
// 重寫 mount 方法
app.mount = (containerOrSelector) => {
    // 獲取掛載的容器
    const container = document.querySelector(containerOrSelector);
    if (!container)
        return;
    const component = app._component;
    container.innerHTML = '';
    // 正式掛載
    return mount(container, false, container instanceof SVGElement);
};

function mount(rootContainer, isHydrate, isSVG) {
    // 判斷是否已經(jīng)掛載
    if (!isMounted) {
        // 這里的 #5571 是一個 issue 的 id，可以在 github 上搜索，這是一個在相同容器上重復掛載的問題，這里只做提示，不做處理
        // #5571
        if ((process.env.NODE_ENV !== 'production') && rootContainer.__vue_app__) {
            warn(`There is already an app instance mounted on the host container.\n` +
                ` If you want to mount another app on the same host container,` +
                ` you need to unmount the previous app by calling `app.unmount()` first.`);
        }
        // 通過在 createApp 中傳遞的參數(shù)來創(chuàng)建虛擬節(jié)點
        const vnode = createVNode(rootComponent, rootProps);
        // store app context on the root VNode.
        // this will be set on the root instance on initial mount.
        // 上面有注釋，在根節(jié)點上掛載 app 上下文，這個上下文會在掛載時設(shè)置到根實例上
        vnode.appContext = context;
        // HMR root reload
        // 熱更新
        if ((process.env.NODE_ENV !== 'production')) {
            context.reload = () => {
                render(cloneVNode(vnode), rootContainer, isSVG);
            };
        }
        // 通過其他的方式掛載，這里不一定指代的是服務端渲染，也可能是其他的方式
        // 這一塊可以通過創(chuàng)建渲染器的源碼可以看出，我們?nèi)粘Ｔ诳蛻舳虽秩?，不會使用到這一塊，這里只是做提示，不做具體的分析
        if (isHydrate && hydrate) {
            hydrate(vnode, rootContainer);
        }
        // 其他情況下，直接通過 render 函數(shù)掛載
        // render 函數(shù)在 createRenderer 中定義，傳遞到 createAppAPI 中，通過閉包緩存下來的
        else {
            render(vnode, rootContainer, isSVG);
        }
        // 掛載完成后，設(shè)置 isMounted 為 true
        isMounted = true;
        // 設(shè)置 app 實例的 _container 屬性，指向掛載的容器
        app._container = rootContainer;
        // 掛載的容器上掛載 app 實例，也就是說我們可以通過容器找到 app 實例
        rootContainer.__vue_app__ = app;
        // 非生產(chǎn)環(huán)境默認開啟 devtools，也可以通過全局配置來開啟或關(guān)閉
        // __VUE_PROD_DEVTOOLS__ 可以通過自己使用的構(gòu)建工具來配置，這里只做提示
        if ((process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__) {
            app._instance = vnode.component;
            devtoolsInitApp(app, version);
        }
        // 返回 app 實例，這里不做具體的分析
        return getExposeProxy(vnode.component) || vnode.component.proxy;
    }
    // 如果已經(jīng)掛載過則輸出提示消息，在非生產(chǎn)環(huán)境下
    else if ((process.env.NODE_ENV !== 'production')) {
        warn(`App has already been mounted.\n` +
            `If you want to remount the same app, move your app creation logic ` +
            `into a factory function and create fresh app instances for each ` +
            `mount - e.g. `const createMyApp = () => createApp(App)``);
    }
}

function mount(rootContainer, isHydrate) {
    // createApp 中傳遞的參數(shù)在我們這里肯定是一個對象，所以這里不做創(chuàng)建虛擬節(jié)點的操作，而是模擬一個虛擬節(jié)點
    const vnode = {
        type: rootComponent,
        children: [],
        component: null,
    }
    // 通過 render 函數(shù)渲染虛擬節(jié)點
    render(vnode, rootContainer);
    // 返回 app 實例
    return vnode.component
}

export interface VNode {
    __v_isVNode: true;
    __v_skip: true;
    type: VNodeTypes;
    props: VNodeProps | null;
    key: Key | null;
    ref: Ref<null> | null;
    scopeId: string | null;
    children: VNodeNormalizedChildren;
    component: ComponentInternalInstance | null;
    suspense: SuspenseBoundary | null;
    dirs: DirectiveBinding[] | null;
    transition: TransitionHooks<null> | null;
    el: RendererElement | null;
    anchor: RendererNode | null;
    target: RendererNode | null;
    targetAnchor: RendererNode | null;
    staticCount: number;
    shapeFlag: ShapeFlags;
    patchFlag: number;
    dynamicProps: string[] | null;
    dynamicChildren: VNode[] | null;
    appContext: AppContext | null;
}

function baseCreateRenderer(options, createHydrationFns) {
    // ...
    // 創(chuàng)建 render 函數(shù)
    const render = (vnode, container, isSVG) => {
        // 如果 vnode 不存在，并且容器是發(fā)生過渲染，那么將執(zhí)行卸載操作
        if (vnode == null) {
            // container._vnode 指向的是上一次渲染的 vnode，在這個函數(shù)的最后一行
            if (container._vnode) {
                unmount(container._vnode, null, null, true);
            }
        }
        // 執(zhí)行 patch 操作，這里不做具體的分析，牽扯太大，后面會單獨講
        else {
            patch(container._vnode || null, vnode, container, null, null, null, isSVG);
        }
        // 刷新任務隊列，通常指代的是各種回調(diào)函數(shù)，比如生命周期函數(shù)、watcher、nextTick 等等
        // 這里不做具體的分析，后面會單獨講
        flushPreFlushCbs();
        flushPostFlushCbs();
        // 記錄 vnode，現(xiàn)在的 vnode 已經(jīng)是上一次渲染的 vnode 了
        container._vnode = vnode;
    };
    // ...
    return {
        render,
        hydrate,
        createApp: createAppAPI(render, hydrate)
    };
}

const render = (vnode, container) => {
    patch(container._vnode || null, vnode, container);
    // 記錄 vnode，現(xiàn)在的 vnode 已經(jīng)是上一次渲染的 vnode 了
    container._vnode = vnode;
}

// options 是在創(chuàng)建渲染器的時候傳入的，還記得在 createApp 的實現(xiàn)中，我們傳入了一個有 insert 和 createText 方法的對象嗎？不記得可以往上翻翻
const { insert: hostInsert, createText: hostCreateText} = options;
// Note: functions inside this closure should use `const xxx = () => {}`
// style in order to prevent being inlined by minifiers.
/**
 * 簡易版的實現(xiàn)，只是刪除了一些不必要的邏輯
 * @param n1 上一次渲染的 vnode
 * @param n2 當前需要渲染的 vnode
 * @param container 容器
 * @param anchor 錨點, 用來標記插入的位置
 */
const patch = (n1, n2, container, anchor = null) => {
    // 上一次渲染的 vnode 和當前需要渲染的 vnode 是同一個 vnode，那么就不需要做任何操作
    if (n1 === n2) {
        return;
    }
    // 獲取當前需要渲染的 vnode 的類型
    const { type } = n2;
    switch (type) {
        // 如果是文本節(jié)點，那么就直接創(chuàng)建文本節(jié)點，然后插入到容器中
        case Text:
            processText(n1, n2, container, anchor);
            break;
        // 還會有其他的類型，這里不做具體的分析，后面會單獨講
        // 其他的情況也會有很多種情況，這里統(tǒng)一當做是組件處理
        default:
            processComponent(n1, n2, container, anchor);
    }
};

const processComponent = (n1, n2, container, anchor) => {
   if (n1 == null) {
       mountComponent(n2, container, anchor);
   }
   // else {
   //     updateComponent(n1, n2, optimized);
   // }
};

const mountComponent = (initialVNode, container, anchor) => {
    // 通過調(diào)用組件的 render 方法，獲取組件的 vnode
    const subTree = initialVNode.type.render.call(null);
    // 將組件的 vnode 渲染到容器中，直接調(diào)用 patch 函數(shù)
    patch(null, subTree, container, anchor);
};

const processText = (n1, n2, container, anchor) => {
    if (n1 == null) {
        hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);
    }
    // else {
    //     const el = (n2.el = n1.el);
    //     if (n2.children !== n1.children) {
    //         hostSetText(el, n2.children);
    //     }
    // }
};

import { createApp } from "./runtime-dom";
const app = createApp({
  render() {
    return {
      type: "Text",
      children: "hello world"
    };
  }
});
app.mount("#app");