手撕 vue3

// 这里是我们要针对 monorepo 进行编译的项目，需要把每个子包的 ts 文件打成 js 
const fs = require('fs');
const execa = require('execa'); // 可以理解成可以打开一个进程去做打包操作

// 筛选 packages 中的子包(是文件夹就默认是子包哦)
const dirs = fs.readdirSync('packages').filter(p => {
  if (!fs.statSync(`packages/${p}`).isDirectory()) {
    return false;
  }
  return true;
});

// 并行打包所有文件夹 
async function build(target) { // rollup -c -environment TARGET=shared
  // -c 表示使用配置文件 rollup.config.js
  // --environment 环境变量，叫 Target: xxx (比如 Target:shared)
  // 子进程的输出 需要在父进程中打印，需要配置 stdio: 'inherit' 
  await execa('rollup', ['-c', '--environment', `TARGET:${target}`], { stdio: 'inherit' }); 
}

async function runParallel(dirs, iterFn) { // 并发去打包，每次打包都调用 build 方法
  let result = [];

  for (let item of dirs) {
    // 每个 build 都会返回一个 promise
    result.push(iterFn(item)); 
  }

  return Promise.all(result); // 存储打包时的 promise，等待所有全部打包完毕后，调用成功
}

runParallel(dirs, build).then(() => {
  console.log('成功')
})

// 一个包要打包多个格式 esModule  commonjs  iife 
import ts from 'rollup-plugin-typescript2'; // 解析ts插件
import resolvePlugin from '@rollup/plugin-node-resolve'; // 解析第三方模块
import path from 'path'; // 可以处理路径

// 获取packages目录
let packagesDir = path.resolve(__dirname, 'packages'); // 获取 packages 文件夹的绝对路径
let packageDir = path.resolve(packagesDir, process.env.TARGET); // 获取当前要打包的子包绝对路径

// 获取子包 package.json 绝对路径
const resolve = p => path.resolve(packageDir, p); // 根据当前需要打包的路径来解析

const pkg = require(resolve('package.json')); // 表示我要引用这个 json 文件

const packageOptions = pkg.buildOptions; // 拿到我们自定义的打包配置
const name = path.basename(packageDir); // 获取这个目录的最后一个名字

// 用户使用可能有三种方式，import/require/window.xxx
// 需要输出三种文件
const outputConfig = {
  'esm-bundlers': {
    // 输出打包文件的路径
    file: resolve(`dist/${name}.esm-bundler.js`),
    format: 'es'
  },
  'cjs': {
    file: resolve(`dist/${name}.cjs.js`),
    format: 'cjs'
  },
  'global': {
    file: resolve(`dist/${name}.global.js`),
    format: 'iife'
  }
}
function createConfig(format, output) {
  output.name = packageOptions.name; // 用于 iife 在 window 上挂载的属性
  output.sourcemap = true; // 稍后生成 sourcemap

  return {
    input: resolve(`src/index.ts`), // 打包的入口 
    output,
    plugins: [
      ts({ // ts 编译的时候用的文件是哪一个
        tsconfig: path.resolve(__dirname, 'tsconfig.json') // 当前目录下(主包路径下)
      }),
      resolvePlugin()
    ]
  }
}

// 根据用户提供的 formats 选项，去我们自己的配置里取值进行生产配置文件
export default packageOptions.formats.map(format => createConfig(format, outputConfig[format]))

import { isObject } from "@ys-vue3/shared";
import { mutableHandler, readonlyHandlers, shallowReactiveHandler, shallowReadonlyHandlers } from "./baseHandlers";

export function reactive(target) {
  return createReactiveObject(target, false, mutableHandler);
}

export function shallowReactive(target) {
  return createReactiveObject(target, false, shallowReactiveHandler);
}

export function readonly(target) {
  return createReactiveObject(target, true, readonlyHandlers);
}

export function shallowReadonly(target) {
  return createReactiveObject(target, true, shallowReadonlyHandlers);
}

// weakmap 记录对象是否被代理过(防止多次代理)
// 如果后续对象置为 null，则自动回收，不需要手动管理缓存表
const reactiveMap = new WeakMap(); 
/**
 * 代理函数
 * @param target 代理的目标 
 * @param isReadonly 是否只读 
 * @param baseHandler 针对不同的方式创建不同的代理对象，就是 Proxy 的第二个参数
 * @returns 代理后的 Proxy 对象
 */
function createReactiveObject(target, isReadonly, baseHandler) {
   // new Proxy(target, baseHandler)
    if (!isObject(target)) return target;

   const existProxy = reactiveMap.get(target); // 是否代理过

   // 之前代理过则直接返回上一次的结果
   if (existProxy) return existProxy; 

   // 如果是对象, 则返回代理后的 proxy 对象
   const proxy = new Proxy(target, baseHandler);

   reactiveMap.set(target, proxy);

   return proxy;
}

import { extend, hasChanged, hasOwn, isArray, isIntegerKey, isObject } from "@ys-vue3/shared";
import { reactive, readonly } from "./reactive";

function createGetter(isReadonly = false, shallow = false) {
  // get 参数：源对象，当前访问的 key，代理对象 receiver
  return function get(target, key, receiver) {
    console.log(`${ key } 用户取值了`);
    // Reflect 就是后续慢慢替换掉 Object 的方法，一般使用 Reflect 去配合 proxy 
    // 他俩参数配套使用
    const res = Reflect.get(target, key, receiver); // 等价于 target[key]

    if (!isReadonly) {
      // 非只读，会收集依赖(属性收集 effect)，只读不进行依赖收集
      console.log(`需要收集依赖，当属性改变，稍后可能需要更新视图哦`);
    }

    // 如果是浅劫持，直接返回，劫持到这一层就可以了
    if (shallow) {
      return res;
    }

    // 非浅劫持，且取值的属性也为一个对象，这里做下懒代理(取值时代理)
    if (isObject(res)) {
      // 注意，只读对象也需要代理第一层，只有代理了才能拦截为只读并在值修改抛警告
      // 调用深层代理的方法做递归(readonly 深层代理或 reactive 深层代理)，传入该对象
      return isReadonly ? readonly(res) : reactive(res);
    }

    return res;
  }
}

function createSetter(isReadonly = false, shallow = false) {
  // set 参数：源对象，当前访问的 key，要设置的值，代理对象 receiver
  return function set(target, key, val, receiver) {
    console.log(`用户设置值了，可以更新视图, key: ${ key }  val: ${ val }`);
    const oldValue = target[key]; // 获取老值

    // 判断修改还是新增 
    // 针对数组而言，如果调用 push，会触发两次 set (下标赋值和 length 修改)
    // 数组且修改的属性名为字符串数字(下标)，而且该下标小于 target.length 说明是修改
    // 对象如果存在 key，说明是修改
    let hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
    const res = Reflect.set(target, key, val, receiver); // 设置新值

    if (!hadKey) {
      // 新增
      console.log('新增');
    } else if (hasChanged(oldValue, val)){
      // 新旧值不一样，则代表修改
      // 这里就绕过了数组 push 先赋值下标，再更改 length 导致的二次更新
      // 第二次修改 length时，发现 length 已经相等了，就不走新增也不走修改了
      console.log('修改');
    }

    return res;
  }
}

// readonlySet 拦截到 set 直接警告
let readonlySet = {
  set(target, key) {
    console.warn(`cannot set ${ JSON.stringify(target) } on key ${ key } failed`);
  }
}

// ------------------ 创建 get 方法 --------------
const get = createGetter(); // 默认不是仅读的，也不是浅的
const shallowGet = createGetter(false, true);
const readonlyGet = createGetter(true);
const shallowReadonlyGet = createGetter(true, true);

// ------------------ 创建 set 方法 --------------
const set = createSetter(); // 默认不是仅读的，也不是浅的
const shallowSet = createSetter(false, true);

// reactive 的拦截方式
export const mutableHandler = {
  get,
  set
}

// shallowReactive 的拦截方式
export const shallowReactiveHandler = {
  get: shallowGet,
  set: shallowSet
}

// readonly 的拦截方式
export const readonlyHandlers = extend({
  get: readonlyGet
}, readonlySet)

// shallowReadonly 的拦截方式
export const shallowReadonlyHandlers = extend({
  get: shallowReadonlyGet
}, readonlySet)

export function isObject(val) {
  return typeof val == 'object' && val !== null;
}

export let extend = Object.assign;

export function hasChanged(oldValue, newValue) {
  return oldValue !== newValue;
}

export let isArray = Array.isArray;

// 判断属性名是否为字符串数字，字符串数字转数字再加 ''，必定还是原来的字符串数字
export const isIntegerKey = (key) => {
  return parseInt(key) + '' === key
}

export const hasOwn = (target, key) => Object.prototype.hasOwnProperty.call(target, key)

export function effect(fn, options: any = {}) {
  const effect = createReactiveEffect(fn, options); // 响应式 effect

  if (!options.lazy) {
    effect();
  }

  return effect; // 返回响应式 effect
}

// 栈形结构，栈顶为当前要收集的 effect 方法
const effectStack = []; 
export let activeEffect; // 当前栈顶的 effect，也就是属性应该收集的 effect
let id = 0; // 构建 effect id

// 构建响应式 effect
// 当用户取值时需要将 activeEffect 属性做关联
// 当用户更改的时候，要通过属性找到收集的 effect 重新执行 
function createReactiveEffect(fn, options) {
  // 我们构建的 effect，默认第一次自动执行
  const effect = function() { 
    try {
      // 要让属性记住 effect
      effectStack.push(effect);
      activeEffect = effect;

      // 执行用户的函数，里面有取值操作，则会收集
      return fn(); 
    } finally {
      effectStack.pop(); // 移除栈顶
      activeEffect = effectStack[effectStack.length - 1]
    }
  }

  effect.id  = id++;
  effect.__isEffect = true;
  effect.options = options;
  effect.deps = []; // effect 用来收集依赖了那些属性

  return effect;
}

// 属性读取时收集 effect
// 一个属性对应多个 effct，一个 effect 还可以对应多个属性，我们需要如下的结构
// Map {
//   { name: 'ys' }: {
//     name: new Set(effct1, effect2)
//   },
//   { name: 'sy' }: {
//     name: new Set(effct1, effect2)
//   }
// }
const targetMap = new WeakMap;

export function track(target, type, key) {
  // console.log(activeEffect); // 利用 js 单线程，拿到 activeEffect
  if (activeEffect == undefined) return; // 用户只是取了下值，没有在 effect 中

  let depsMap = targetMap.get(target);

  if (!depsMap) {
    // 空的 map 结构，这里不能使用 weakMap，因为这一层 key 为 string
    // { 'name': new Set(...) }
    depsMap = new Map();

    targetMap.set(target, depsMap);
  }

  // 构建里面的 Set 结构
  let depSet = depsMap.get(key);

  if (!depSet) {
    // 利用 set 结构 O(1) 的查询，来防止收集相同 effect  
    depSet = new Set();
    depsMap.set(key, depSet);
  }

  if (!depSet.has(activeEffect)) {
    depSet.add(activeEffect);
  }
}

// 属性更改时 执行对应 effect
export function trigger(target, type, key, newValue?, oldValue?) {
  // 去映射表里找属性收集的 effct，让他重新执行
  const depsMap = targetMap.get(target);

  // 可能只是取了属性，这个属性没有在 effct 中使用
  // 所以属性没有收集到 effect，但是后续更改值，触发了 set 方法
  if (!depsMap) return; 

  const effectsSet = new Set(); // 收集要执行的 effct

  // 遍历属性收集到的 effcts
  const add = (curEffects) => {
    if (curEffects) {
      curEffects.forEach(effect => effectsSet.add(effect));
    }
  }

  add(depsMap.get(key));

  effectsSet.forEach((effect: any) => effect());
  console.log('me');
}

import { activeEffect, track, trigger } from './effect'

function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key, receiver) {
  	// ...
    if (!isReadonly) {
      // 非只读，会收集依赖(属性收集 effct)，只读不进行依赖收集
      console.log(`需要收集依赖，当属性改变，稍后可能需要更新视图哦`);
      track(target, 'get', key); // 关联当前属性和 effct
    }
    // ...
  }
}

function createSetter(isReadonly = false, shallow = false) {
  // set 参数：源对象，当前访问的 key，要设置的值，代理对象 receiver
  return function set(target, key, val, receiver) {
    console.log(`用户设置值了，可以更新视图, key: ${ key }  val: ${ val }`);
    // ...
    if (!hadKey) {
      // 新增
      console.log('新增');
      trigger(target, 'add', key, val); // 触发执行属性对应的 effect
    } else if (hasChanged(oldValue, val)) {
      // 新旧值不一样，则代表修改
      // 这里就绕过了数组 push 先赋值下标，再更改 length 导致的二次更新
      // 第二次修改 length时，发现 length 已经相等了，就不走新增也不走修改了
      console.log('修改');
      trigger(target, 'set', key, val, oldValue);
    }

    return res;
  }
}

// ...

import { hasChanged, isObject } from "@ys-vue3/shared";
import { track, trigger } from "./effect";
import { reactive } from "./reactive";

// 把普通值变为一个引用类型，让一个普通值也具备响应式的能力
// 也可以传入对象
export function ref(value, shallow) {
  return createRef(value, shallow);
}

// 传入的值是对象，使用 reactive 包裹，否则返回原始值
const convert = v => isObject(v) ? reactive(v) : v;

// ts 中实现类的话，私有属性必须先声明后使用
class RefImpl {
  public _value; // 存储原值
  public __v_isRef = true // 表示他是一个ref
  
  // public 代表声明一个实例属性，比如声明 rawValue，并把传入的参数赋值
  constructor(public rawValue, public shallow) {
    // 如果非浅代理，对传入的对象使用 Proxy，普通值这一步不作操作。 
    this._value = shallow ? rawValue : convert(rawValue);
    this.rawValue = rawValue;
  }

  get value() {
    // 收集依赖
    track(this, 'get', 'value');
    return this._value;
  }

  set value(newValue) {
    if (hasChanged(newValue, this.rawValue)) {
      this.rawValue = newValue; // 更新原值，用于下次比对
      this._value = this.shallow ? newValue : convert(newValue); // 更新值

      // 触发依赖
      trigger(this, 'get', 'value', newValue);
    } 
  }
}

function createRef(value, shallow = false) {
  // 借助类的属性访问器，同时用这个类标识 Ref
  return new RefImpl(value, shallow); 
}

// 需要支持 dom 操作的 api 及属性处理的 api
import { extend } from "@ys-vue3/shared";
import { createRenderer } from "packages/runtime-core";
import { nodeOps } from "./nodeOps"; // dom 操作的 api 
import { patchProp } from "./patchProp"; // 属性处理的 api

// 合并 dom 操作的 api 及属性处理的 api
const rendererOptions = extend(nodeOps, { patchProp });

// 创建应用的 api，  createApp(App, { xx: 123 }).mount('#app');
export function createApp(rootComponent, rootProps = null) {
  // 把创建 app 系列的操作交给 runtime-core，都交给 runtime-core 提供的渲染器 createRenderer
  let app = createRenderer(rendererOptions).createApp(rootComponent, rootProps);
  let { mount } = app;

  // 重写 app.mount，便于扩展和获取参数
  app.mount = function(container) {
    container = rendererOptions.querySelector(container); // 获取要挂载到的元素
    container.innerHTML = ''; // 对容器进行清空
    // 调用 app 内部 mount
    mount(container);
  }

  return app;
};

// 节点创建相关 api
export const nodeOps = {
  // 增、删、改、查、元素中插入文本、文本的创建、文本元素的内容设置、获取父亲、获取下一个元素
  createElement: tagName => document.createElement(tagName),
  remove: child => child.parentNode && child.parentNode.removeChild(child),
  insert: (child, parent, anchor = null) => parent.insertBefore(child, anchor), // anchor 不存在的时候就是appendChild
  querySelector: selector => document.querySelector(selector),
  setElementText: (el, text) => el.textContent = text,
  createText: text => document.createTextNode(text),
  setText: (node, text) => node.nodeValue = text,
  getParent: (node) => node.parentNode,
  getNextSibling: (node) => node.nextElementSibling
}

// 更新类名
const patchClass = (el, next) => {
  if (next == null) {
    next = ''
  }
  el.className = next;
}

// 增加一层代理函数包裹~ 省的 dom 函数更新还要解绑
const createInvoker = (fn) => {
  // 最终执行的时候，执行的是自己身上绑定的 fn，这样加了一层代理就可以实现 fn 可修改
  const invoker = (e) => { invoker.value(e) }; 
  invoker.value = fn; // invoker 上记住这个 fn
  return invoker
}

// 更新事件  key 为事件名 'onClick'，next 为新函数
const patchEvents = (el, key, next) => { // react中采用的是事件代理，但是vue中直接绑定给元素的
  // 在 dom 节点上存储了个属性 el._vei = { onClick: proxyFn }，dom 绑定 click 事件为 proxyFn
  // proxyFn.value = next;
  // proxyFn 就是 (e) => { proxyFn.value(e)  }，
  // 当我们改变事件的时候，只需要切换 next 就行，不用再卸载事件
  const invokers = el._vei || (el._vei = {}); // 缓存事件 

  const exists = invokers[key];

  if (exists && next) {
    exists.value = next; // 替换事件，但是不用解绑，这就是增加了个代理函数的好处
  } else {
    const eventName = key.toLowerCase().slice(2); // click

    if (next) {
      // 绑定事件
      invokers[key] = createInvoker(next);
      el.addEventListener(eventName, invokers[key] ); // 绑定事件
    } else {
      // 传 null 卸载事件
      el.removeEventListener(eventName, exists);
      invokers[key] = null;
    }
  }
}

// 更新 style  { color: 'red' } ---> { background: 'blue' }
const patchStyle = (el, prev, next) => {
  if (next == null) {
    el.removeAttribute('style'); // 如果最新的没有样式 直接移除样式就可以了
  } else {
    if (prev) {
      for (let key in prev) {
        if (next[key] == null) { 
          // 如果之前有，现在没有，移除就好
          el.style[key] = ''
        }
      }
    }

    // 新的一定要生效
    for (let key in next) {
      el.style[key] = next[key];
    }
  }
}

// 更新属性
const patchAttrs = (el, key, next) => {
  if (next == null) {
      el.removeAttribute(key);
  } else {
      el.setAttribute(key, next);
  }
}

/**
 * @description 属性更新方法策略模式~
 * @param el 操作元素
 * @param key 操作属性名
 * @param prev 上次的属性值
 * @param next 本次要更新的目标属性值
 */
export const patchProp = (el, key, prev, next) => {
  switch (key) {
    case 'class': // .className
      patchClass(el, next);
      break;
    case 'style': // .style.xx
      patchStyle(el, prev, next);
      break;
    default:
      if (/^on[A-Z]/.test(key)) { // 匹配 on + 一个大小字母，比如 onClick
        // 事件 addEventListener
        patchEvents(el, key, next);
      } else {
        // 其他属性 直接使用 setAttribute
        patchAttrs(el, key, next);
      }
  }
}

export { createRenderer } from './renderer';

// 这里不再关心什么平台了
export function createRenderer(rendererOptions) {
  return {
    createApp(rootComponent, rootProps) {
      const app = {
        mount(container) {
          console.log(rootComponent, rootProps, container);
        }
      };

      return app;
    }
  }
}

import { effect } from "@ys-vue3/reactivity/";
import { getSequence, ShapeFlags } from "@ys-vue3/shared";
import { createAppAPI } from "./apiCreateApi"
import { createComponentInstance, setupComponent } from "./component";
// 这里不再关心什么平台了

export function createRenderer(rendererOptions) {
  const {
    insert: hostInsert,
    remove: hostRemove,
    patchProp: hostPatchProp,
    createElement: hostCreateElement,
    createText: hostCreateText,
    setText: hostSetText,
    setElementText: hostSetElementText,
    parentNode: hostParentNode,
    nextSibling: hostNextSibling,
  } = rendererOptions

  // 创建渲染用的 effct(首次执行是进行渲染)
  const setupRenderEffct = function (instance, container) {
    // 每次状态变化后，都会重新执行 effct
    effect(function componentEffct() {
      if (!instance.isMounted) {
        // effct 默认执行一次，组件未被挂载过 执行组件渲染
        // 我们使用 call 方法，保持了 setup 中 this = proxy, 返回虚拟 dom 
        // 调用的是用户提供的 render 方法，生成 subTree 的虚拟 dom
        let subTree = instance.subTree = instance.render.call(instance.proxy, instance.proxy);

        // subTree 虚拟 dom 渲染成真实节点
        patch(null, subTree, container);

        instance.isMounted = true;
      } else {
        // 数据改变，effct 重新执行
        console.log('修改了数据，需要重新生成虚拟 dom，然后进行 diff 算法');
        // 旧的 subTree 虚拟 dom
        const prevTree = instance.subTree;
        // 新的 subTree 虚拟 dom
        const nextTree = instance.render.call(instance.proxy, instance.proxy);

        // 重新渲染
        let subTree = nextTree;

        // subTree 虚拟 dom 渲染成真实节点，这里进行 diff 算法
        patch(prevTree, subTree, container);
      }
    });
  }

  const mountComponent = (n2, container) => {
    // 1. 根据组件的虚拟节点创造一个实例 instance，并挂载到虚拟dom 的 component 属性上
    let instance = n2.component = createComponentInstance(n2); 

    // 2. 给 instance 增加属性，调用组件的 setup，解析出 render 方法(生成虚拟 dom 的 render)，挂载到实例上
    setupComponent(instance);

    // 3. 调用 render 生成 subTree 的虚拟 dom，为了响应式，我们使每个组件都有一个自己的 effct
    setupRenderEffct(instance, container);
  }

  const updateComponent = (n1, n2, container) => {

  }

  // 处理组件的更新或渲染的方法
  const processComponent = (n1, n2, container) => {
    if (n1 == null) {
      // 没有旧的 vnode，说明不是更新而是挂载组件(初次渲染)
      mountComponent(n2, container);
    } else {
      updateComponent(n1, n2, container);
    }
  }

  // 循环数组子节点，创建真实 dom 元素
  function mountChildren(children, container) {
    for (let i = 0; i < children.length; i++) {
      patch(null, children[i], container);
    }
  }

  // 把 subTree vnode 变为真实节点插入到 container 中，注意当前函数是个递归
  function mountElement(vnode, container, anchor) {
    const { type, props, children, shapeFlag } = vnode;

    // 1) 生成当前节点的真实 dom
    let el = vnode.el = hostCreateElement(type);

    // 2) 如果提供了 props，在元素上挂载 props 属性
    if (props) {
      // 给元素增加属性(属性挂载元素的真实 dom 节点上)
      for (let key in props) {
        // react-dom 模块提供的给元素增加属性的 api
        hostPatchProp(el, key, null, props[key]);
      }
    }

    // 3) 当前节点创建完毕后，需要创建儿子节点，挂载到当前节点
    // 注意按位与的写法
    if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      // 如果儿子节点是数组，需要循环创建元素
      mountChildren(children, el);
    } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
      // 如果儿子节点是文本
      hostSetElementText(el, children);
    }

    // 4) 当前节点插入容器
    hostInsert(el, container, anchor);
  }

  // 属性比对 diff 算法
  function patchProps(el, oldProps, newProps) {
    if (oldProps !== newProps) {
      for (let key in newProps) {
        const prev = oldProps[key];
        const next = newProps[key];
        if (prev !== next) {
          // 新旧属性不相等，则以新的为主
          hostPatchProp(el, key, prev, next)
        }
      }

      for (let key in oldProps) {
        if (!(key in newProps)) {
          // 旧属性中比新属性多的属性要干掉
          hostPatchProp(el, key, oldProps[key], null)
        }
      }
    }
  }

  // 新旧节点的儿子节点都为数组，需要进行数组的比对
  function patchKeyedChildren(oldChildren, newChildren, container) {
    let i = 0; // 比对的索引
    let oldLen = oldChildren.length - 1;
    let newLen = newChildren.length - 1;

    // 从前往后比 sync from start
    // 以短的为主，一方比完 或者 遇到不一样的节点则终止
    while (i <= oldLen && i <= newLen) {
      const n1 = oldChildren[i]; // 当前索引的旧儿子节点
      const n2 = newChildren[i]; // 当前索引的新儿子节点

      // 是同一个元素，要比较属性和这两个节点的儿子
      if (isSameVnode(n1, n2)) {
        // 因为我们 patch 包含了比较节点 + 更新的逻辑，这里直接用即可
        patch(n1, n2, container);
      } else {
        break;
      }

      i++;
    }

    // 从后往前比 sync from end
    while (i <= oldLen && i <= newLen) {
      const n1 = oldChildren[oldLen]; // 当前索引的旧儿子节点
      const n2 = newChildren[newLen]; // 当前索引的新儿子节点
      if (isSameVnode(n1, n2)) {
        patch(n1, n2, container);
      } else {
        break;
      }

      oldLen--;
      newLen--;
    }

    // console.log(i, oldLen, newLen);

    // 如果比对终止后 i > 老节点的 length，说明新的子节点较多
    // 无论新的子节点首部元素多还是尾部元素多，都满足 i > oldLen
    // 画图理解
    // 节点新增
    if (i > oldLen) { // 无论是头部增加 还是尾部增加 都是这个逻辑
      if (i <= newLen) { // 新增的节点的下标范围是 i ~ newLen，包括 newLen
        // 如果 newLen + 1 肯定大于 newChildren 的总长度，说明向后追加
        // 否则向前追加
        const nextPos = newLen + 1; 
        // 取到下一个元素
        // 如果没越界，新节点插入到下一个元素前面即可
        // 如果越界，新节点追到到最后面(传 null 代表 appentChild)
        const anchor = nextPos < newChildren.length ? newChildren[nextPos].el : null;

        while (i <= newLen) {
          // 塞进去或者插后面。
          patch(null, newChildren[i++], container, anchor)
        }
      }
    } else if (i > newLen) { // 节点减少
      while (i <= oldLen) { // 把 i 和 oldLen 之间的干掉
        unmount(oldChildren[i++])
      }
    } else { // 乱序比对 （最长递增子序列）
      // 需要尽可能复用，用新的元素做成一个映射表去老的里去找，一样的就复用，不一样的要不插入，要不删除
      // 双指针，对新旧 children 数组进行遍历，遍历到右窗口(更新后的 oldLen，newLen)
      // 我们把需要乱序对比的区域看做一个窗口
      let oldWinLeft = i;
      let newWinLeft = i;
      let oldWinLen = oldLen;
      let newWinLen = newLen;

      console.log(oldWinLeft, newWinLeft, oldWinLen, newWinLen);

      // Vue3 用的是新 children 窗口内元素做映射表，Vue2 用的是老的~
      // 方便遍历老窗口元素去新窗口元素 map 中查找，找不到直接干掉元素
      // 缓存的是虚拟节点的 key 和 窗口内下标。
      const keyToNewIndexMap = new Map();

      for (let i = newWinLeft; i <= newWinLen; i++) {
        const childVNode = newChildren[i]; // 窗口内的新的子节点

        // { key: i }
        keyToNewIndexMap.set(childVNode.key, i);
      }

      console.log(`新节点窗口对应 map 为`, keyToNewIndexMap);   // Map {"E" => 2, "C" => 3, "D" => 4, "H" => 5}

      // 新节点窗口的元素个数，目标渲染到页面的元素个数
      const toBePatched = newWinLen - newWinLeft + 1; 
      console.log(toBePatched);
      // 生成一个这么长的数组，给对比过的元素增加标记，最后位置仍然为 0 的元素则为新增元素
      const newIndexToOldIndexMap = new Array(toBePatched).fill(0); 

      // 去老节点窗口寻找，有没有可以复用的元素
      for (let oldWinidx = oldWinLeft; oldWinidx <= oldWinLen; oldWinidx++) {
        const oldVnode = oldChildren[oldWinidx];
        let newIdx = keyToNewIndexMap.get(oldVnode.key); // 如果老节点中存在该节点

        console.log(`老节点 key 为 ${ oldVnode.key }, 🍊去新节点 map 中找老节点索引，索引为：${ newIdx }`);
        if (newIdx === undefined) { 
          // 老节点不在新节点 map 中，删掉该虚拟节点代表的真实节点
          console.log(`新节点中该 key 不存在，${ oldVnode.key } 节点应该被干掉`);
          unmount(oldVnode);
        } else { 
          // 存在 key 相同的 Vnode
          console.log(`新节点中该 key 存在，${ oldVnode.key } 节点应该跟新节点做比对更新 dom`);

          // 1）做标记，为了防止老窗口的第 0 项走到这里导致此项为 0，我们记录 oldWinidx + 1
          //    不然数组元素默认为 0，就和没标记一样啦，故做了加 1 操作
          // 2）使用下标记录，保持相对顺序，我们生成最长增长子序列要用到这个排序哦
          newIndexToOldIndexMap[newIdx - newWinLeft] = oldWinidx + 1;
          
          // 则该 vnode 和 新的 vnode 去做比较，更新，但是 map 匹配，顺序没有保证，
          // 比如 C 在老窗口第一位，更新之后应该到老窗口第二位，所以在后面还会有移动元素的操作
          patch(oldVnode, newChildren[newIdx], container);
        }
      }

      console.log(newIndexToOldIndexMap, 'sssssssssss');
      // 针对标记数组(patch过为新)求最长递增序列 
      // 比如在我们收集到的数组是 [5, 3, 4, 0]，代表着 [4, 2, 3] 的元素(前面多加了 1，这里要减去)是之前存在的，本次要修改！
      // 也就是 [D, E, C] 元素要修改，该方法计算得出 [1, 2]，标识 [C, D] 新旧 vnode 中顺序正常，不需要更新顺序
      let increasingNewIndexSequence = getSequence(newIndexToOldIndexMap);
      console.log('👀 ', increasingNewIndexSequence);
      let whiteLen = increasingNewIndexSequence.length - 1; // 不需要移动节点的下标数组的length

      // 上面并没有遍历取到新增的节点，因为老窗口内不存在新节点的 key
      // 最后移动节点，处理新窗口比旧窗口新增的节点
      // newIndexToOldIndexMap 中为 0 的元素所以，即为新增的节点
      // 倒序插入的好处是，我们能把最后面的元素插入到容器底部，之后的往前摞就是 
      console.log(newIndexToOldIndexMap); // [5, 3, 4, 0]，h 元素为新增
      for (let i = toBePatched - 1; i >= 0; i--) {
        // 找到新增元素的真正索引，注意记录的数组的所以是 0, 1, 2, 3，需要加上窗口左边界索引
        let currentIdx = i + newWinLeft; 
        // 拿到窗口内的元素 vnode，比如 E，C，D，H
        let child = newChildren[currentIdx]; 
        // 拿到当前节点的下一个元素作为参照物，进行元素 insert 或者 append 操作
        let anchor = currentIdx + 1 < newChildren.length ? newChildren[currentIdx + 1].el : null;

        // 看 newIndexToOldIndexMap 中当前元素是否为 0，0 标识没有被 patch 过，为新增元素
        if (newIndexToOldIndexMap[i] == 0) {
          // 处理 H 
          patch(null, child, container, anchor); // 往参照物前插入或给容器尾部追加元素
        } else {
          console.log(increasingNewIndexSequence, '咕咕', i, increasingNewIndexSequence[whiteLen]);
          if (i !== increasingNewIndexSequence[whiteLen]) {
            // H 元素插入之后，移动已经渲染到页面的 D，C，E 元素，D -> H，C -> D，E -> C，整个移动插入一遍(性能有问题)
            // 所以这里我们采用了最长增长子序列算法来解决这个问题~，匹配到最优移动算法，走下面。
            hostInsert(child.el, container, anchor);
          } else {
            // 不需要重新插入了，当前顺序 ok，每次匹配成功消耗掉一个下标
            // [1, 2]，第一次是 2，一旦匹配到 2 后，就变成了 1
            // 跳过不需要移动的元素，为了减少移动操作，采取了最长增长子序列算法
            whiteLen--;
          }
        }
      }
    }
  }

  // 子节点比对(虚拟节点) diff 算法
  const patchChildren = function (n1, n2, container) {
    const c1 = n1.children;
    const c2 = n2.children;

    const prevShapeFlag = n1.shapeFlag; // n1 儿子节点类型
    const shapeFlag = n2.shapeFlag; // n2 儿子节点类型

    if (shapeFlag & ShapeFlags.TEXT_CHILDREN) { // 新节点儿子节点是文本
      // 新的儿子节点是文本，直接新的换掉老的儿子节点(不管是不是元素)
      // console.log('新节点的儿子节点为文本节点，干掉老节点的儿子节点');
      hostSetElementText(container, c2); // 直接干掉以前的
    } else { // 新节点儿子节点不是文本，说明是数组
      if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        // 之前和现在的儿子节点都是数组，对比数组
        // console.log('新旧节点的儿子节点都为数组，需要对比数组');
        patchKeyedChildren(c1, c2, container);
      } else {
        // 之前的是文本，现在是数组，需要先清空之前节点的文本，再进行渲染
        // console.log('旧节点的儿子节点为字符串，新节点儿子节点为数组，需要先清空字符串，再循环数组依次渲染数组内的子节点们');
        hostSetElementText(container, '');
        // 循环新节点的儿子数组，创建真实 dom
        console.log(c2);
        mountChildren(c2, container);
      }
    }
  }




  // diff 算法
  // 如果元素能直接复用，属性或者孩子不同，走这里进行 diff 比对
  const patchElement = function (n1, n2, container) {
    let el = n2.el = n1.el; // 复用 dom 节点
    const oldProps = n1.props || {};
    const newProps = n2.props || {};

    // 属性比对
    patchProps(el, oldProps, newProps);
    // 子节点比对
    patchChildren(n1, n2, el);
  }

  // 处理节点(subTree)的更新或渲染的方法
  const processElement = function (n1, n2, container, anchor) {
    if (n1 == null) {
      // 没有旧的 vnode，说明不是更新而是元素初次渲染(挂载)
      // 把虚拟 dom 变为真实 dom
      mountElement(n2, container, anchor);
    } else {
      // console.log('开始 diff 算法比对');
      // 说明元素能复用，但是属性或子节点不同
      // 开始 diff 算法，核心
      patchElement(n1, n2, container);
    }
  }

  const isSameVnode = (n1, n2) => {
    return n1.type == n2.type && n1.key == n2.key; // 是同一个元素  
  }

  // 从容器中删掉提供的虚拟节点
  const unmount = vnode => {
    hostRemove(vnode.el);
  }

  const patch = (n1, n2, container, anchor = null) => {
    // 判断 n1 和 n2 是同一个元素吗？对比 type 和 key
    // 初始化时 n1 为空，不进行比对
    // 节点改变，直接删除重来
    if (n1 && !isSameVnode(n1, n2)) {
      // 如果节点本身改变，直接干掉节点重新生成
      unmount(n1);
      // 清空 n1 后，走到下面 processElement 方法会重新生成 
      n1 = null;
    }

    // n2 可能为元素也可能是组件，我需要判断它的具体类型。
    const { shapeFlag } = n2;

    if (shapeFlag & ShapeFlags.ELEMENT) {
      // 当前虚拟节点为元素
      processElement(n1, n2, container, anchor);
    } else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
      // 当前虚拟节点为组件
      processComponent(n1, n2, container); // 处理组件的更新或渲染的方法
    }
  }

  // render 方法虚拟节点 -> 真实节点
  const render = (vnode, container) => {
    // 第一个参数为老的虚拟节点，第二个为虚拟节点，第三个为挂载容器, 第四个为插入节点的参照物
    patch(null, vnode, container)
  }

  return {
    createApp: createAppAPI(render),
    render
  }
}

import { createVnode } from './vnode';

// render 为将虚拟节点变成真实节点的函数
export function createAppAPI(render) {
  return (rootComponent, rootProps) => { // 返回一个函数
    // app 即为创建的应用，其上挂载了很多全局的方法
    // 比如 app.component, app.directives, app.mixin
    const app = {
      _component: rootComponent, // 根组件 稍后组件挂载前要校验组件是否有render函数或模板
      _props: rootProps, // 传给组件的 props 
      _container: null, // 要挂载的节点
      mount(container) {
        app._container = container; 
        // console.log(rootComponent, rootProps, container);
        // 1. 根据用户传入的组件生成一个虚拟节点
        const vnode = createVnode(rootComponent, rootProps);
        // 2. 将虚拟节点变成真实节点，插入到对应的容器中
        render(vnode, container);
      }
    };
  
    return app;
  }
}

import { isArray, isObject, isString, ShapeFlags } from "@ys-vue3/shared";

// type 可能为应用的对象 { setup: fn, ...  }，也就是注册的根组件，也 h('h1', {}, 'xxx') 这样调用 type 为标签名。
// props 为注册组件时，传给组件的 data
// 本方法将根组件实例转为虚拟节点，虚拟节点的好处就是跨平台
export function createVnode(type, props, children = null) {
  let shapeFlag = 0; // 默认是 0，代表不认识

  if (isString(type)) {
    shapeFlag = ShapeFlags.ELEMENT; // 为字符串，是标签渲染
  } else if (isObject(type)){
    shapeFlag = ShapeFlags.STATEFUL_COMPONENT; // 为对象，说明是组件注册
  }

  // 虚拟节点必须要有的属性: tag props children key _v_isVnode
  const vnode = {
    _v_isVnode: true,
    type, // 对于组件而言，type 就是个对象
    props: props, 
    children, // 对组件而言，它的 children 就是插槽
    key: props && props.key, // key 取自 props.key，不写就为 undefined
    el: null, // vnode 对应的真实节点，dom diff 后要更新该节点
    shapeFlag,
    component: null // 当前组件的实例
  }

  normalizeChildren(vnode, children); // 收集儿子节点的 shapeFlag

  // console.warn('虚拟节点', vnode);
  return vnode;
};

// 将儿子的类型一并记录在 vnode 中的 shapeFlag
function normalizeChildren(vnode, children) { 
  if (children == null) { // 组件的 children 默认为 null
    // 没有儿子 不用处理儿子的情况
  } else if (isArray(children)) { // h('h1', {}, [span1, span2, span3])
    // 儿子是数组，就使用 "按位或" 完成状态组合，这里简写为 "或等于"
    vnode.shapeFlag |= ShapeFlags.ARRAY_CHILDREN;
  } else { // h('h1', {}, '文本')
    vnode.shapeFlag |= ShapeFlags.TEXT_CHILDREN;
  } 
}

// ... 略 

// 用于标识组合组件能力 
// 1 << 1 代表二进制的 1 往左移一位，也就是 10 -> 2，同理 << 2 代表移两位
// 按位与 "|"，不足最大位前面补 0，有一个是 1，则结果是 1
// 100 | 10 也就是 100 | 010 也就是 110，表示它是带状态的函数组件组件(组合)
// 按位或 "&"，不足最大位前面补 0，都是 1 才转为 1，则结果是 1 
// 用来判断某个二进制数是否包含另一个数，比如 110 & 100 为 100 为 true，110 & 010 也为 true，表示它是带状态的函数组件组件(组合)
export const enum ShapeFlags {
  ELEMENT = 1, // 标识是一个元素
  FUNCTIONAL_COMPONENT = 1 << 1, // 函数组件 
  STATEFUL_COMPONENT = 1 << 2, // 带状态的组件
  TEXT_CHILDREN = 1 << 3, // 这个组件的孩子是文本
  ARRAY_CHILDREN = 1 << 4, // 孩子是数组
  SLOTS_CHILDREN = 1 << 5, // 插槽孩子
  TELEPORT = 1 << 6, // 传送门
  SUSPENSE = 1 << 7, // 实现异步组件等待
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, // 是否需要 keep-alive
  COMPONENT_KEPT_ALIVE = 1 << 9, // 组件的 keep-alive
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT // 100 | 10 就是 110
}

// const arr = [2, 3, 1, 5, 6, 8, 7, 9, 4]

// 求一个列表最长递增的子序列(获取不移动哪些下标的元素，可以更少操作去得到升序列表)
export function getSequence(arr) { // 最终结果是索引
  const len = arr.length;
  const idxs = [0]; // 索引，拿首位的索引跟之后做对比，我们递增子序列的递增就是索引的递增
  const p = arr.slice(); // 和原数组相同，用来存放索引
  let start;
  let end;
  let middle;

  for (let i = 1; i < len; i++) {
    // 0 代表新增元素，不参与比对
    if (arr[i] == 0) continue; 

    let LastIndex = idxs[idxs.length - 1];

    if (arr[i] > arr[LastIndex]) {
      // 如果当前元素大于已收集数组的尾元素(也是下标)所代表的值，让这个元素记录前一个尾元素的下标
      // 比如图示中 3 需要收集 2 的下标。
      p[i] = LastIndex;
      // 收集下标
      idxs.push(i);
      continue;
    } else {
      // 二分查找，找到第一个比当前值大的值，替换掉 
      start = 0;
      end = idxs.length - 1;

      while(start < end) { 
        // 舍弃尾部小数 1.7 | 0 = 1
        middle = ((start + end) / 2) | 0; 

        if (arr[idxs[middle]] < arr[i]) {
          start = middle + 1;
        } else {
          end = middle;
        }
      }

      // start 或者 end 就是找到的位置，更新收集的下标列表
      // 如果二分查找找到的值大于当前值，替换成当前值的下标(贪心，该值潜力更大)
      if (arr[idxs[start]] > arr[i]) {
        if (start > 0) {
          // 比对到 1 时，虽然此时匹配到 2，start = 0，但是它们都没有前驱结点，不需要替换前驱结点
          // 比如 4 替换 5，需要找到 5 的前一个元素，start 代表目标值 5， 那么 start - 1 是前一个元素
          p[i] = idxs[start - 1];
        }
        idxs[start] = i;
      }
    }
  }

  // console.log(idxs); // [ 2, 1, 8, 4, 6, 7 ] 这个是下标哈
  // console.log(p); // [2, 0, 1, 1, 3, 4, 4, 6, 1]

  // 标记完毕后，我们得到了 idxs 数组和 p 数组，这时候需要倒序遍历去组合真正的结果
  let idxsLen = idxs.length;

  // 收集到的下标最后一项，就是 9 所处的下标了
  let lastIdx = idxs[idxsLen - 1]; 

  // 通过 9 一路找前驱结点，串起来就是正确结果
  while(idxsLen-- > 0) {
    idxs[idxsLen] = lastIdx; // 把当前下标替换为上个节点下标
    lastIdx = p[lastIdx]; // 取记录在 p 数组中的当前节点的上一个结点的下标
  }

  return idxs; // [ 0, 1, 3, 4, 6, 7 ] 换算成值也就是 [2, 3, 5, 6, 7, 9]
}

import { isObject, isFunction, hasOwn } from "@ys-vue3/shared/src";
import { componentPublicInstance } from "./componentPublicInstance";

let uid = 0;
export function createComponentInstance(vnode) {
  const instance = {
    uid: uid++,
    vnode: vnode, // 实例上的 vnode 就是我们处理过的 vnode
    type: vnode.type, // 用户写的组件的内容，大对象 { setup: fn, ... }  
    props: {}, // 组件里用户用到过的属性
    attrs: {}, // 用户没用到的 props，就会放到 attrs 中
    slots: {},
    setUpState: {}, // setup 返回值，可能为函数(render 函数)或者对象
    proxy: null, 
    emit: null, // 组件通信
    ctx: {}, // 上下文
    isMounted: false, // 组件是否挂载
    subTree: null, // 组件对应的渲染内容
    render: null
  }

  // 将自己放到了实例的 ctx 属性上，加了一层下划线仅仅表示这是内部属性
  instance.ctx = { _: instance } 

  return instance;
}

export function setupComponent(instance) {
  let { props, children } = instance.vnode;

  // 初始化属性 initProps，这里属性应该是响应式的，我们再此留个口子
  instance.props = props;
  // 初始化插槽 initSlots，这里插槽应该是响应式的，我们再此留个口子
  instance.slots = children;

  // 不代理的话 instace.ctx.props.a  instace.ctx.attrs.a 好长呀
  // 我们希望 instance.proxy.a 可以自动去查找当前组件的属性，而且区分优先级
  instance.proxy = new Proxy(instance.ctx, componentPublicInstance);

  // 初始化带状态的组件(组件分为函数组件和带状态的组件)
  // setup 就是带状态的组件，我们可以在里面写一些组合式API，reactive 等。
  // 函数式组件没有自己的 data，且要加上 functional: true
  setupStatefulComponent(instance);
}

// 创建 setup 函数的第二个参数 ctx
function createSetupContext(instance) {
  return {
    attrs: instance.attrs,
    slots: instance.slots,
    emit: instance.emit,
    expose: () => {}
  }
};

// 处理 setup 返回结果
function handleSetupResult(instance, setupResult) {
  // 如果 setup 返回结果是对象，放到实例的 setupState 属性中
  // 如果 setup 返回结果是函数(render 函数)，放到实例的 render 属性中
  if (isObject(setupResult)) {
    instance.setupState = setupResult;
  } else if (isFunction) {
    instance.render = setupResult;
  }

  // render 相关挂载到 instance 后
  finishComponentSetup(instance);
}

// 解析完用户提供的 setup 返回结果后调用的函数(结果都挂到实例上了)
function finishComponentSetup(instance) {
  // 处理后可能 instance 上可能依旧没有 render
  // 1) 比如没写 setup，或者写了 setup 返回值没有命中函数或对象
  // 2) setup 返回一个对象，但是没额外提供 render 函数，这时候需要进行模板编译了
  let Component = instance.type;

  if (!instance.render) { // 实例上没有挂载 render 方法
    if (!Component.render && Component.template) {
      // 如果组件又没有额外提供 render 方法，则判断是否提供模板
      // 需要将 template 变成 render 函数  compileToFunctions()
    }
    
    instance.render = Component.render; // 把用户提供的 render 方法作为 render 函数
  }

  // console.log('当当', instance.render);
}


export function setupStatefulComponent(instance) {
  let Component = instance.type;
  let { setup } = Component;

  if (setup) { // 说明对象提供了 setup 方法
    let setupContest = createSetupContext(instance);

    // setup 默认有两个参数，分别是 props 和 ctx
    let setupResult = setup(instance.props, setupContest);
  
    // 注意 setup 如果返回函数，作为 render 方法使用。
    // 也可能返回一个对象(需要额外提供一个 render 函数，该对象就会作为 props 传入 render 函数，
    // 因为 runtime-dom 是运行时的，代码没有 compiler 能力，不能生成 render 函数)
    // 如果二者都写，函数优先级最高，也就是优先采用函数作为 render 函数
    handleSetupResult(instance, setupResult);
  } else {
    // 用户可能没写 setup 方法，直接用外面的 render 或者根据模板生成 render
    finishComponentSetup(instance); 
  }
}

import { hasOwn } from "@ys-vue3/shared/src";

export const componentPublicInstance = {
    get({ _: instance }, key) {
        const { setupState, props , ctx } = instance;

        if (hasOwn(setupState, key)) { // 先自己的状态，再向上下文中查找，再向属性中查找h('标签名', ...)
            return setupState[key];
        }else if (hasOwn(ctx, key)) {
            return ctx[key];
        } else if (hasOwn(props, key)) {
            return props[key];
        }
    },
    set({ _: instance }, key, value) {
        const { setupState, props } = instance;
        if (hasOwn(setupState, key)) {
            setupState[key] = value;
        }  else if (hasOwn(props, key)) {
            props[key] = value
        }
        return true;
    }
}

import { isArray, isObject } from "@ys-vue3/shared/src";
import { createVnode } from "./vnode";

function isVnode(vnode) {
  return vnode.__v_isVNode == true
}

// h 是创建虚拟 dom，它等价于 createVnode，最后调的就是 createVnode
// createAPP 函数内部调用 createVnode，是把组件本身生成虚拟 dom
// 用户提供的 render 内部的 h 方法是为了生成 subTree(组件内部内容) 的虚拟 dom
export function h(type, propsOrChildren, children) {
  // 第一个一定是类型，第二个参数可能是属性，可能是儿子，后面的一点是儿子
  // 一个儿子的情况可以写文本，多个儿子的情况可以写 数组 或者 多个(须标明第二个参数：属性)
  // h('h1', 'hello')
  // h('h1', ['hello', 'ys'])
  // h('h1', {}, 'hello', 'ys')
  // 虚拟节点也可以 h('h1', h('span', 111)), h('h1', {}, h('span', 111))
  const l = arguments.length;

  if (l == 2) { // h((div',h('p'))
    // 如果第二个参数为对象，可能是数组或者虚拟节点或函数..
    if (isObject(propsOrChildren) && !isArray(propsOrChildren)) { // 对象非数组
      if (isVnode(propsOrChildren)) {  // 虚拟节点
        return createVnode(type, null, [propsOrChildren]) 
      } else { // 其他对象
        return createVnode(type, propsOrChildren)
      }
    } else { // 数组
      return createVnode(type, null, propsOrChildren)
    }
  } else {
    // 如果 l > 3
    if (l > 3) {
      children = Array.from(arguments).slice(2);
    } else if (l == 3 && isVnode(children)) {
      // length 为3，children 可能是文本或数组或虚拟节点
      // 文本字符串就不需要包装成数组了，因为文本可以直接 innerHTML
      // 虚拟节点包装成数组
      children = [children];
    }

    return createVnode(type, propsOrChildren, children);
  }
}

export { createRenderer } from './renderer'; // 导出渲染器 生成 { createApp, render }
export { h } from './h'; 

// 其实源码没有导出 effct，这里为了方便都导出了
export * from '@ys-vue3/reactivity';

<!-- vue3 子包 runtime-core 测试 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <!-- <script src="node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script> -->
  <script src="../node_modules/@ys-vue3/runtime-dom/dist/runtime-dom.global.js"></script>
  <script>
    // VueRuntimeDOM 依赖了 runtime-core, runtime-core 依赖了 reactivity
    const { createApp, h, reactive, toRefs, ref } = VueRuntimeDOM;

    const App = {
      props: {
        age: Number
      },
      // 方式一
      // setup(props, ctx) {
      //   return () => {
      //     return h('h1', '1000'); // subTree 
      //   }
      // }

      // 方式二
      setup(props, ctx) {
        const state = reactive({ name: 'ys', age: 12 });


        const flag = ref(true);

        setTimeout(() => {
          flag.value = false;
        }, 1000);

        const handleclick = () => {
          state.name = 'sy';
        }

        return {
          // 为了保证用户随意解构使用，不至于得到字符串或数字，这里进行 torefs 转换
          ...toRefs(state),
          handleclick,
          flag
        };
      },
      render(proxy) {
        let { name, age, handleclick, flag } = proxy;

        // return h('h1', this.a);

        // 测试渲染真实 dom
        // return h('div', {}, [h('p', { style: { color: 'red' }}, 'hello world')]); 

        // 测试渲染动态属性，绑定事件
        // return h('div', {}, [h('p', { style: { color: 'red' }, onClick: handleclick }, `${ name.value } 今年 ${ age.value } 岁了`)]); // 测试动态属性

        // 调试 diff 算法，1s后，div 变成了 p 标签(基础对比之最顶层 subTree 改变)
        // if (flag.value) {
        //   return h('div', 'hello world');
        // } else {
        //   return h('p', 'hello world');
        // }


        // 调试 diff 算法，1s后，父节点相同，标签颜色改变(属性改变)
        // if (flag.value) {
        //   return h('div', { style: { color: 'red' }}, 'hello world');
        // } else {
        //   return h('div', { style: { color: 'blue' }}, 'hello world');
        // }

        // // 调试 diff 算法，1s后，父节点相同，文本内容(儿子节点为文本内容的改变)
        // if (flag.value) {
        //   return h('div', 'hello world123');
        // } else {
        //   return h('div', 'hello world456');
        // }

        // 调试 diff 算法，1s后，父节点相同，儿子节点替换(文本变数组)
        // if (flag.value) {
        //   return h('div', 'hello world123');
        // } else {
        //   return h('div', [h('p', 'hello'), h('span', 'world')]);
        // }

        // 调试 diff 算法，1s后，父节点相同，儿子节点替换(数组变数组)
        // if (flag.value) {
        //   return h('div', ['hello world123']);
        // } else {
        //   return h('div', ['hello world456']);
        // }

        // 调试 diff 算法，1s后，父节点相同，儿子节点替换(数组变数组，前插入，少变多)
        // if (flag.value) {
        //   return h('div', [
        //     h('li', { key: 'A' }, 'A'),
        //     h('li', { key: 'B' }, 'B'),
        //   ])
        // } else {
        //   return h('div', [
        //     h('li', { key: 'C' }, 'C'),
        //     h('li', { key: 'D' }, 'D'),
        //     h('li', { key: 'A' }, 'A'),
        //     h('li', { key: 'B' }, 'B'),
        //   ])
        // }


        // 调试 diff 算法，1s后，父节点相同，儿子节点替换(数组变数组，后插入，少变多)
        // if (flag.value) {
        //   return h('div', [
        //     h('li', { key: 'A' }, 'A'),
        //     h('li', { key: 'B' }, 'B'),
        //   ])
        // } else {
        //   return h('div', [
        //     h('li', { key: 'A' }, 'A'),
        //     h('li', { key: 'B' }, 'B'),
        //     h('li', { key: 'C' }, 'C'),
        //     h('li', { key: 'D' }, 'D'),
        //   ])
        // }

        // 调试 diff 算法，1s后，父节点相同，儿子节点替换(数组变数组，后插入，多变少)
        // if (flag.value) {
        //   return h('div', [
        //     h('li', { key: 'A' }, 'A'),
        //     h('li', { key: 'B' }, 'B'),
        //     h('li', { key: 'C' }, 'C'),
        //     h('li', { key: 'D' }, 'D'),
        //   ])
        // } else {
        //   return h('div', [
        //     h('li', { key: 'A' }, 'A'),
        //     h('li', { key: 'B' }, 'B'),
        //   ])
        // }

        // 调试 diff 算法，1s后，父节点相同，儿子节点替换(数组变数组，复杂乱序修改比对)
        // if (flag.value) {
        //   return h('div', [
        //     h('li', { key: 'A' }, 'A'),
        //     h('li', { key: 'B' }, 'B'),
        //     h('li', { key: 'C' }, 'C'),
        //     h('li', { key: 'D' }, 'D'),
        //     h('li', { key: 'E' }, 'E'),
        //     h('li', { key: 'F' }, 'F'),
        //     h('li', { key: 'G' }, 'G'),
        //   ])
        // } else {
        //   return h('div', [
        //     h('li', { key: 'A' }, 'A'),
        //     h('li', { key: 'B' }, 'B'),
        //     h('li', { key: 'E' }, 'E'),
        //     h('li', { key: 'C' }, 'C'),
        //     h('li', { key: 'D' }, 'D'),
        //     h('li', { key: 'H' }, 'H'),
        //     h('li', { key: 'F' }, 'F'),
        //     h('li', { key: 'G' }, 'G'),
        //   ])
        // }
        if (flag.value) {
          return h('div', [
            h('li', { key: 'A' }, 'A'),
            h('li', { key: 'B' }, 'B'),
            h('li', { key: 'C', style: { color: 'yellow' }}, 'C'),
            h('li', { key: 'D' }, 'D'),
            h('li', { key: 'E' }, 'E'),
            h('li', { key: 'Q' }, 'Q'),
            h('li', { key: 'F' }, 'F'),
            h('li', { key: 'G' }, 'G'),
          ])
        } else {
          return h('div', [
            h('li', { key: 'A' }, 'A'),
            h('li', { key: 'B' }, 'B'),
            h('li', { key: 'E' }, 'E'),
            h('li', { key: 'C', style: { color: 'green' }}, 'C'),
            h('li', { key: 'D' }, 'D'),
            h('li', { key: 'H' }, 'H'),
            h('li', { key: 'F' }, 'F'),
            h('li', { key: 'G' }, 'G'),
          ])
        }
      }
    }

    // createApp 将虚拟节点变成真实节点，最后插入到元素中
    createApp(App, { name: '测试属性', age: 12 }).mount('#app');
  </script>
</body>

</html>

// 这就是 getCurrentInstance 方法啦
export const getCurrentInstance = ()=>{
  return currentInstance
}

// 修改全局作用域的 currentInstance
export const setCurrentInstance = (instance)=>{
   currentInstance = instance
}

// ...

export let currentInstance; // 暴露当前组件实例

export function setupStatefulComponent(instance) {
  let Component = instance.type;
  let { setup } = Component;

  if (setup) { // 说明对象提供了 setup 方法
    let setupContest = createSetupContext(instance);

    currentInstance = instance;
    // 函数内部缓存了 currentInstance(闭包)，可以随时用哦
    let setupResult = setup(instance.props, setupContest);
    currentInstance = null;

    handleSetupResult(instance, setupResult);
    
  } else {
    // 用户可能没写 setup 方法，直接用外面的 render 或者根据模板生成 render
    finishComponentSetup(instance); 
  }
}

import { currentInstance, setCurrentInstance } from "./component";

// 生命周期相关
const enum LifeCycles {
  BEFORE_MOUNT = 'bm',
  MOUNTED = 'm',
  BEFORE_UPDATE = 'bu',
  UPDATED = 'u'
}

/**
 * @description 暂存 target
 * @param lifecycle 生命周期名
 * @param hook 钩子函数
 * @param target 当前生命周期对应的组件的实例
 * @returns Function
 */
function injectHook(lifecycle, hook, target) {
  // 后面可能是先渲染儿子，此时 currentInstance 已经变成儿子了，但是创建时的 target 永远都是缓存当前的 instance
  if (!target) {
    return
  }
  const hooks = target[lifecycle] || (target[lifecycle] = []); // 有就用之前的，没有改成空数组 { bm: [] }
  const wrap = () => {
    setCurrentInstance(target); // 修复 instance 为当前 injectHook 函数缓存的 instance
    hook(); // 执行生命周期前 用存储的正确的实例替换回去，保证instance正确性
    setCurrentInstance(null);
  }
  hooks.push(wrap);
}

function createHook(lifecycle) { // []  => currentInstance
  return function (hook, target = currentInstance) { 
    console.log(target, '🍇');
    // 利用函数的闭包特性，缓存当前的 target
    injectHook(lifecycle, hook, target)
  }
}

// 执行函数
export function invokeArrayFns(fns) {
  fns.forEach(fn => fn()); 
}

export const onBeforeMount = createHook(LifeCycles.BEFORE_MOUNT);
export const onMounted = createHook(LifeCycles.MOUNTED);
export const onBeforeUpdate = createHook(LifeCycles.BEFORE_UPDATE);
export const onUpdated = createHook(LifeCycles.UPDATED);

 const setupRenderEffct = function (instance, container) {
    // 每次状态变化后，都会重新执行 effct
    effect(function componentEffct() {
      if (!instance.isMounted) {
        // effct 默认执行一次，组件未被挂载过 执行组件渲染
        // 执行 onBeforeMount 和 onMounted 生命周期
        let { bm, m } = instance; // bm 和 m 都是数组哦

        // 挂载前生命周期
        bm && invokeArrayFns(bm);

        // 我们使用 call 方法，保持了 setup 中 this = proxy, 返回虚拟 dom 
        // 调用的是用户提供的 render 方法，生成 subTree 的虚拟 dom
        let subTree = instance.subTree = instance.render.call(instance.proxy, instance.proxy);

        // subTree 虚拟 dom 渲染成真实节点
        patch(null, subTree, container);

        instance.isMounted = true;

        // 挂载后生命周期
        m && invokeArrayFns(m);
      } else {
        // 数据改变，effct 重新执行

        // 执行 onBeforeUpdate 和 onUpdated 生命周期
        let { bu, u } = instance;

        // 更新前生命周期
        bu && invokeArrayFns(bu);

        console.log('修改了数据，需要重新生成虚拟 dom，然后进行 diff 算法');
        // 旧的 subTree 虚拟 dom
        const prevTree = instance.subTree;
        // 新的 subTree 虚拟 dom
        const nextTree = instance.render.call(instance.proxy, instance.proxy);

        // 重新渲染
        let subTree = nextTree;

        // subTree 虚拟 dom 渲染成真实节点，这里进行 diff 算法
        patch(prevTree, subTree, container);


        // 更新后生命周期
        u && invokeArrayFns(u);
      }
    }, {
      schedular: queueJob // 更新走这里~ 去调度 effct 执行
    });
  }

// 实现 watch 和 watchEffect api

import { effect } from "@ys-vue3/reactivity/src";
import { hasChanged } from "@ys-vue3/shared/src";

// 核心属性是 flush 刷新方式和 immediate 是否立即调用
function doWatch(source, cb?, options?) { 
  let oldValue; // 缓存旧值

  // 定义 schedular 函数
  let schedular = () => {
    if (cb) {
      const newValue = runner(); // 重新取值

      if (hasChanged(newValue, oldValue)) {
        cb(newValue, oldValue);
        oldValue = newValue;
      }
    } else { // watchEffect 上来就要执行一次
      source();
    }
  }

  // effct 返回一个函数，函数调用会执行用户的 fn(这里是 getter 函数)，并把结果作为返回时
  let runner = effect(() => source(), {
    lazy: true, // effct 首次不自动执行
    schedular
  });

  if (options && options.immediate) {
    schedular();
  }

  oldValue = runner();
}

// source 为监听的数据源，可以是个具有返回值 getter 函数
// 也可以是个元素为 ref 的数组，我们这里暂时不考虑数组形式
export function watch(source, cb, options) {
  return doWatch(source, cb, options);
};

export function watchEffect(source) {
  return doWatch(source, null, {} as any);
}

/// 实现 watch 和 watchEffect api

import { effect } from "@ys-vue3/reactivity/src";
import { hasChanged } from "@ys-vue3/shared/src";
// ------------------------
let queue = new Set();
let lock = false;

const patchQueue = function(queue) {
  queue.forEach(fn => fn());

  lock = false;
  queue.clear();
}

const queueJob = function() {
  if (!lock) {
    const { cb, runner, oldValue, schedular, flush } = schedularData;

    lock = true; // 锁住
    // 闭包缓存当前 schedularData 中的属性们
    const fn = () => {
      return schedular();
    }
  
    queue.add(fn); 

    // 配置了 flush: sync 不进行异步更新
    if (flush == 'sync') { 
      patchQueue(queue); // 直接执行
    } else {
      // 包装为微任务
      Promise.resolve().then(() => patchQueue(queue) as any);
    }
  }
}
// --------------------------
// 闭包缓存 schedular 函数需要的参数
let schedularData = { cb: () => {}, runner: () => {}, oldValue: null, schedular: () => {}, flush: null };

// 核心属性是 flush 刷新方式和 immediate 是否立即调用
function doWatch(source, cb?, options?) { 
  let oldValue; // 缓存旧值

  // 定义 schedular 函数
  let schedular = () => {
    if (cb) {
      const newValue = runner(); // 重新取值

      if (hasChanged(newValue, oldValue)) {
        cb(newValue, oldValue);
        oldValue = newValue;
      }
    } else { // watchEffect 上来就要执行一次
      source();
    }
  }

  // effct 返回一个函数，函数调用会执行用户的 fn(这里是 getter 函数)，并把结果作为返回时
  let runner = effect(() => source(), {
    lazy: true, // effct 首次不自动执行
    schedular: queueJob
  });

  if (options && options.immediate) {
    schedular();
  }

  if (options && options.flush && options.flush) {
    schedularData.flush = options.flush;
  }

  oldValue = runner();

  // 收集更新时 schedular 需要的参数
  schedularData = Object.assign(schedularData, { cb, runner, oldValue, schedular });
}

// source 为监听的数据源，可以是个具有返回值 getter 函数
// 也可以是个元素为 ref 的数组，我们这里暂时不考虑数组形式
export function watch(source, cb, options) {
  return doWatch(source, cb, options);
};

export function watchEffect(source) {
  return doWatch(source, null, {} as any);
}