// 通过上面的分析，先把createApp给改造一下,需要一个新的函数来包裹，并且传入render函数
export function createAppApi(render){
 return function createApp(rootComponent){
  // ……原有的逻辑不变
 }
}
// 在createAppApi里面需要render，那就在createRenderer里面调用并且给他，
// 返回一个新的createApp
export function createRenderer(){
     function render(vnode, container) {
        // 调用patch
        patch(vnode, container, null)
      }
 // ……省略其他所有的函数
 return {
  // 这样设计是不是对外导出了一个新的createAPP哇
  createApp: createAppApi(render)
 }
}

在createRenderer里面加入参数options,并且结构出四个函数
export function createRenderer(options) {
  const {
   // 创建元素
    createElement,
    // 绑定key
    patchProps,
    // 插入操作
    insert,
    // 设置文本
    setElementText
  } = options
    function mountElement(vnode: any, container: any, parentComponent) {
        const el = createElement(vnode.type)
    // 设置vnode的el
    vnode.el = el
    // 设置属性
    const { props } = vnode
    for (let key in props) {
      patchProps(el, key, props[key])
    }
    // 处理子元素
    const children = vnode.children
    if (vnode.shapeflag & ShapeFlags.ARRAY_CHILDREN) {
      // 数组
      mountChildren(children, el, parentComponent)
    } else if (vnode.shapeflag & ShapeFlags.TEXT_CHILDREN) {
      // 自定义插入文本
      setElementText(el, String(children))
    }
    // 挂载元素
    insert(el, container)
    }
  }

 "dependencies": {
    "shared":"workspace:shared@*",
    "runtime-core":"workspace:runtime-core@*"
  }

function createElement(type) {
  return document.createElement(type);
}
function patchProps(el, key, value) {
  if (isOn(key)) {
    // 注册事件
    el.addEventListener(key.slice(2).toLowerCase(), value)
  }
  el.setAttribute(key, value)
}
function insert(el, container) {
  container.append(el)
}
function setElementText(el, text) {
  el.textContent = text;
}
const render: any = createRenderer({
  createElement,
  patchProps,
  insert,
  setElementText
});
// 对外导出createApp
export function createApp(...args) {
  return render.createApp(...args);
}
// 需要使用runtime-core里面的所有内容，因为里面有的变量是在闭包中进行使用的
export * from 'runtime-core'