useModel.ts

import { type Ref, customRef, ref } from '@vue/reactivity'
import { EMPTY_OBJ, camelize, hasChanged, hyphenate } from '@vue/shared'
import type { DefineModelOptions, ModelRef } from '../apiSetupHelpers'
import {
  type ComponentInternalInstance,
  getCurrentGenericInstance,
} from '../component'
import { warn } from '../warning'
import type { NormalizedProps } from '../componentProps'
import { watchSyncEffect } from '../apiWatch'
import { defaultPropGetter } from '../componentEmits'

export function useModel<
  M extends PropertyKey,
  T extends Record<string, any>,
  K extends keyof T,
  G = T[K],
  S = T[K],
>(
  props: T,
  name: K,
  options?: DefineModelOptions<T[K], G, S>,
): ModelRef<T[K], M, G, S>
export function useModel(
  props: Record<string, any>,
  name: string,
  options: DefineModelOptions = EMPTY_OBJ,
): Ref {
  const i = getCurrentGenericInstance()!
  if (__DEV__ && !i) {
    warn(`useModel() called without active instance.`)
    return ref() as any
  }

  const camelizedName = camelize(name)
  if (__DEV__ && !(i.propsOptions![0] as NormalizedProps)[camelizedName]) {
    warn(`useModel() called with prop "${name}" which is not declared.`)
    return ref() as any
  }

  const hyphenatedName = hyphenate(name)
  const modifiers = getModelModifiers(props, camelizedName, defaultPropGetter)

  const res = customRef((track, trigger) => {
    let localValue: any
    let prevSetValue: any = EMPTY_OBJ
    let prevEmittedValue: any

    watchSyncEffect(() => {
      const propValue = props[camelizedName]
      if (hasChanged(localValue, propValue)) {
        localValue = propValue
        trigger()
      }
    })

    return {
      get() {
        track()
        return options.get ? options.get(localValue) : localValue
      },

      set(value) {
        const emittedValue = options.set ? options.set(value) : value
        if (
          !hasChanged(emittedValue, localValue) &&
          !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))
        ) {
          return
        }

        let rawPropKeys
        let parentPassedModelValue = false
        let parentPassedModelUpdater = false

        if (i.rawKeys) {
          // vapor instance
          rawPropKeys = i.rawKeys()
        } else {
          const rawProps = (i as ComponentInternalInstance).vnode!.props
          rawPropKeys = rawProps && Object.keys(rawProps)
        }

        if (rawPropKeys) {
          for (const key of rawPropKeys) {
            if (
              key === name ||
              key === camelizedName ||
              key === hyphenatedName
            ) {
              parentPassedModelValue = true
            } else if (
              key === `onUpdate:${name}` ||
              key === `onUpdate:${camelizedName}` ||
              key === `onUpdate:${hyphenatedName}`
            ) {
              parentPassedModelUpdater = true
            }
          }
        }

        if (!parentPassedModelValue || !parentPassedModelUpdater) {
          // no v-model, local update
          localValue = value
          trigger()
        }

        i.emit(`update:${name}`, emittedValue)
        // #10279: if the local value is converted via a setter but the value
        // emitted to parent was the same, the parent will not trigger any
        // updates and there will be no prop sync. However the local input state
        // may be out of sync, so we need to force an update here.
        if (
          hasChanged(value, emittedValue) &&
          hasChanged(value, prevSetValue) &&
          !hasChanged(emittedValue, prevEmittedValue)
        ) {
          trigger()
        }
        prevSetValue = value
        prevEmittedValue = emittedValue
      },
    }
  })

  // @ts-expect-error
  res[Symbol.iterator] = () => {
    let i = 0
    return {
      next() {
        if (i < 2) {
          return { value: i++ ? modifiers || EMPTY_OBJ : res, done: false }
        } else {
          return { done: true }
        }
      },
    }
  }

  return res
}

export const getModelModifiers = (
  props: Record<string, any>,
  modelName: string,
  getter: (props: Record<string, any>, key: string) => any,
): Record<string, boolean> | undefined => {
  return (
    getter(props, `${modelName}Modifiers`) ||
    getter(props, `${camelize(modelName)}Modifiers`) ||
    getter(props, `${hyphenate(modelName)}Modifiers`)
  )
}