+ Update v-model to support deep binding. (#8)

* + Add util function.

* + With argument support.

* + Update.

* + Update unit testing.

* + Update README.md

* + Remove unnecessary code.

* 0.4.0-0

Author: LancerComet

Diff for: README.md

@@ -390,6 +390,11 @@ const Example = Vue.extend({
 
 #### With modifiers
 
+You can use modifiers to add some extra features:
+
+ - `lazy, number, trim`: These are the built-in modifiers from Vue.
+ - `direct`: See **"About IME"** section below.
+
 ```tsx
 const Example = Vue.extend({
   data: () => ({
@@ -421,16 +426,39 @@ const Example = defineComponent({
 
 #### With argument
 
+Argument of v-model is designed for binding properties.
+
+Due to limitation, binding properties in Vue 2 isn't that kinda convenient:
+
+```tsx
+const userRef = ref({
+  detail: {
+    address: ''
+  }
+})
+
+// This works in Vue 3 but doesn't work in Vue 2.
+<input v-model={userRef.value.detail.address} />
+```
+
+We have to use v-model like:
+
 ```tsx
 const Example = defineComponent({
   setup () {
-    const nameRef = ref('')
-    const ageRef = ref(0)
+    const userRef = ref({
+      username: '',
+      age: 0,
+      detail: {
+        address: ''
+      }
+    })
 
     return () => (
       <div>
-        <input v-model={[nameRef, 'value', ['lazy']]}/>
-        <input v-model={[agRef, 'value', ['number']]}/>
+        <input v-model={[userRef, 'username', ['lazy']]}/>
+        <input v-model={[userRef, 'age', ['number']]}/>
+        <input v-model={[userRef, 'detail.address']}/>
       </div>
     )
   }

Diff for: lib/directives/v-model.ts

@@ -1,13 +1,13 @@
-import { checkIsRefObj, isArray, isString, isUndefined } from '../utils'
+import { checkIsRefObj, getValueFromObject, isArray, isString, isUndefined, setValueToObject } from '../utils'
 import type { Ref } from '@vue/composition-api'
 import type { VNodeData } from 'vue'
 import { ConfigType, TagType } from '../type'
 import { getCurrentInstance } from '../runtime'
 
 const IME_START_KEY = '__ime_start__'
 
-type vModelBinding = string |
-  Ref<unknown> |
+type vModelBinding =
+  string | Ref<unknown> |
   [string | Ref<unknown>] |
   [string | Ref<unknown>, string[]] |
   [string | Ref<unknown>, string, string[]]
@@ -19,61 +19,83 @@ const dealWithVModel = (
   vNodeData: VNodeData,
   isHTMLElement: boolean
 ) => {
-  let bindingTarget: string | Ref<unknown>
-  // let argument: string | undefined
+  let bindingKeyPathOrRef: string | Ref<unknown>
+  let argument: string | undefined
   let modifiers: string[] = []
 
   if (isString(bindingExpression) || checkIsRefObj(bindingExpression)) {
-    bindingTarget = bindingExpression
+    bindingKeyPathOrRef = bindingExpression
   } else if (isArray(bindingExpression)) {
-    bindingTarget = bindingExpression[0]
+    bindingKeyPathOrRef = bindingExpression[0]
     if (bindingExpression.length === 2) {
-      modifiers = bindingExpression[1]
+      if (isArray(bindingExpression[1])) {
+        modifiers = bindingExpression[1]
+      } else if (isString(bindingExpression[1])) {
+        argument = bindingExpression[1]
+      }
     } else if (bindingExpression.length === 3) {
-      // argument = bindingExpression[1]
+      argument = bindingExpression[1]
       modifiers = bindingExpression[2]
     }
   }
 
   const instance = getCurrentInstance()
+  const getBindingValue = () => {
+    // v-model='a.b.c'
+    if (isString(bindingKeyPathOrRef)) {
+      return getValueFromObject(instance, bindingKeyPathOrRef)
+    }
+
+    // v-model={[xxRef, 'a.b.c']}
+    if (argument) {
+      return getValueFromObject(bindingKeyPathOrRef.value, argument)
+    }
+
+    // v-model={xxRef}
+    return bindingKeyPathOrRef.value
+  }
 
+  const emitValue = (payload: unknown) => {
+    if (isString(bindingKeyPathOrRef)) {
+      setValueToObject(instance, bindingKeyPathOrRef, payload)
+      // Vue.set(instance, bindingKeyPathOrRef, payload)
+    } else if (argument) {
+      setValueToObject(bindingKeyPathOrRef.value, argument, payload)
+      // Vue.set(bindingKeyPathOrRef.value as any, argument, payload)
+    } else {
+      bindingKeyPathOrRef.value = payload
+    }
+  }
+
+  // <select />.
   if (tag === 'select') {
-    vNodeData.domProps.value = isString(bindingTarget)
-      ? instance[bindingTarget]
-      : bindingTarget.value
+    vNodeData.domProps.value = getBindingValue()
     vNodeData.on.change = (event: Event) => {
       const target = event.target as HTMLSelectElement
-      if (isString(bindingTarget)) {
-        instance[bindingTarget] = target.value
-      } else {
-        bindingTarget.value = target.value
-      }
+      const payload = target.value
+      emitValue(payload)
     }
     return
   }
 
+  // <input radio|checkbox />.
   if (tag === 'input') {
     const inputType = config.type // 'file', 'text', 'number', .ect.
 
     // Skip unsupported input.
-    const isSkippedInput = /button|file|submit|reset/.test(inputType)
-    if (isSkippedInput) {
+    const isSkippedType = /button|file|submit|reset/.test(inputType)
+    if (isSkippedType) {
       return
     }
 
     // Radio.
     const isRadioInput = inputType === 'radio'
     if (isRadioInput) {
-      vNodeData.domProps.checked = isString(bindingTarget)
-        ? instance[bindingTarget] === config.value
-        : bindingTarget.value === config.value
+      vNodeData.domProps.checked = getBindingValue() === config.value
       vNodeData.on.change = (event: Event) => {
         const target = event.target as HTMLInputElement
-        if (isString(bindingTarget)) {
-          instance[bindingTarget] = target.value
-        } else {
-          bindingTarget.value = target.value
-        }
+        const payload = target.value
+        emitValue(payload)
       }
       return
     }
@@ -100,70 +122,49 @@ const dealWithVModel = (
           const target = event.target as HTMLInputElement
           const isValueSpecified = !isUndefined(config.value)
           const newCheckStatus = target.checked
-          if (isString(bindingTarget)) {
-            instance[bindingTarget] = isValueSpecified
-              ? target.value
-              : newCheckStatus ? checkboxDefaultValue : undefined
-          } else {
-            bindingTarget.value = isValueSpecified
-              ? target.value
-              : newCheckStatus ? checkboxDefaultValue : undefined
-          }
+          const payload = isValueSpecified
+            ? target.value
+            : newCheckStatus ? checkboxDefaultValue : undefined
+          emitValue(payload)
         }
       }
 
-      let bindingValue: unknown
-      if (isString(bindingTarget)) {
-        bindingValue = instance[bindingTarget]
-      } else {
-        bindingValue = bindingTarget.value
-      }
+      const bindingValue: unknown = getBindingValue()
 
       if (isArray(bindingValue)) {
-        // Array binding.
         arrayBindingExec(bindingValue)
       } else {
-        // Basic binding.
         basicBindingExec(bindingValue)
       }
       return
     }
   }
 
-  // Others are treated as text fields.
+  // <input /> | <textarea />.
   if (tag === 'input' || tag === 'textarea') {
     const isDirectInput = modifiers.includes('direct')
     const isLazyInput = modifiers.includes('lazy')
-    const emitValue = (value: string) => {
+    const emit = (value: string) => {
       const hasNumberModifier = modifiers.includes('number')
       const hasTrimModifier = modifiers.includes('trim')
-      const newValue = hasNumberModifier
+      const payload = hasNumberModifier
         ? parseFloat(value)
         : hasTrimModifier
           ? value.trim()
           : value
 
-      if (isString(bindingTarget)) {
-        instance[bindingTarget] = newValue
-      } else {
-        bindingTarget.value = newValue
-      }
+      emitValue(payload)
     }
 
     vNodeData.attrs[IME_START_KEY] = false
-    vNodeData.domProps.value = isString(bindingTarget)
-      ? instance[bindingTarget]
-      : bindingTarget.value
+    vNodeData.domProps.value = getBindingValue()
     vNodeData.on.input = (event: Event) => {
-      if (
-        isLazyInput ||
-        (!isDirectInput && vNodeData.attrs[IME_START_KEY])
-      ) {
+      if (isLazyInput || (!isDirectInput && vNodeData.attrs[IME_START_KEY])) {
         return
       }
 
       const target = event.target as HTMLInputElement
-      emitValue(target.value)
+      emit(target.value)
     }
 
     if (isLazyInput) {
@@ -190,16 +191,9 @@ const dealWithVModel = (
 
   // v-model on component.
   if (!isHTMLElement) {
-    const instance = getCurrentInstance()
-    vNodeData.props.value = isString(bindingTarget)
-      ? instance[bindingTarget]
-      : bindingTarget.value
-    vNodeData.on.input = (value) => {
-      if (isString(bindingTarget)) {
-        instance[bindingTarget] = value
-      } else {
-        bindingTarget.value = value
-      }
+    vNodeData.props.value = getBindingValue()
+    vNodeData.on.input = (payload) => {
+      emitValue(payload)
     }
   }
 }

Diff for: lib/utils.ts

@@ -61,6 +61,39 @@ const removeNativeOn = (key: string) => camelCase(key
   .replace(ON_EVENT_REGEXP, '')
 )
 
+const getValueFromObject = (target: any, keyPath: string): any => {
+  const keys = keyPath.split('.')
+  let value: any
+  for (let i = 0, length = keys.length; i < length; i++) {
+    const key = keys[i]
+    if (i === 0) {
+      value = target[key]
+      continue
+    }
+
+    if (typeof value !== 'undefined') {
+      const currentValue = value[key]
+      value = currentValue
+    }
+  }
+  return value
+}
+
+const setValueToObject = (target: any, keyPath: string, payload: any) => {
+  const keys = keyPath.split('.')
+  let lastTarget: any = target
+  for (let i = 0, length = keys.length; i < length; i++) {
+    const key = keys[i]
+
+    if (i === length - 1) {
+      lastTarget[key] = payload
+      return
+    }
+
+    lastTarget = lastTarget[key]
+  }
+}
+
 export {
   isArray,
   isBoolean,
@@ -86,5 +119,8 @@ export {
   checkKeyIsVueDirective,
 
   removeOn,
-  removeNativeOn
+  removeNativeOn,
+
+  getValueFromObject,
+  setValueToObject
 }