const Comp = {
  // 用户声明的属性
  props: {
    msg: String
  },
  render() {
    return h('div', 'hello world')
  }
}

createApp(Comp, { msg: 'hello world', count: 0 }).mount('#app')

/**
 * 创建组件实例
 */
export function createComponentInstance(vnode) {
  const { type } = vnode
  const instance = {
    // 省略部分代码...
    // 将 props 进行标准化，不管是数组还是对象都转化为对象
    propsOptions: normalizePropsOptions(type.props)
  }

  return instance
}

// componentProps.ts
export function normalizePropsOptions(props = {}) {
  /**
   * 要把数组转换成对象
   */

  if (isArray(props)) {
    /**
     * 把数组转换成对象
     * ['msg','count']
     * =>
     * { msg:true, count:true }
     */
    return props.reduce((prev, cur) => {
      prev[cur] = {}

      return prev
    }, {})
  }

  return props
}

/**
 * 设置所有的 props 和 attrs
 */
function setFullProps(instance, rawProps, props, attrs) {
  // 拿到 propsOptions
  const propsOptions = instance.propsOptions
  if (rawProps) {
    // 如果用户传递了 props
    for (const key in rawProps) {
      const value = rawProps[key]
      if (hasOwn(propsOptions, key)) {
        // 如果 propsOptions 里面有这个 key，应该放到 props 里面
        props[key] = value
      } else {
        // 否则就是 attrs 里面的
        attrs[key] = value
      }
    }
  }
}

export function initProps(instance) {
  // 初始化 props
  const { vnode } = instance
  // 拿到用户使用组件时传递的 props
  const rawProps = vnode.props

  const props = {}
  const attrs = {}
  setFullProps(instance, rawProps, props, attrs)
  // props 是响应式的，所以需要 reactive
  instance.props = reactive(props)
  // attrs 不是响应式的
  instance.attrs = attrs
}

/**
 * 初始化组件
 */
export function setupComponent(instance) {
  /**
   * 初始化属性
   */
  const { type } = instance
  // 💡 初始化 props
  initProps(instance)

  if (isFunction(type.setup)) {
    const setupResult = proxyRefs(type.setup(instance.props))
    // 拿到 setup 返回的状态
    instance.setupState = setupResult
  }

  // 将 render 函数，绑定给 instance
  instance.render = type.render
}