fix v-model ordering w/ value bindings

Author: yyx990803

demos/model.html

@@ -9,6 +9,9 @@
   v-scope="{
   text: 'hello',
   checked: true,
+  checkToggle: { a: 1 },
+  trueValue: { a: 1 },
+  falseValue: { a: 2 },
   arr: ['one'],
   radioSelected: 'two',
   selected: 'two'
@@ -30,9 +33,20 @@ <h2>Checkbox</h2>
   <h2>Checkbox w/ Array</h2>
   <label><input type="checkbox" v-model="arr" value="one" /> one</label>
   <label><input type="checkbox" v-model="arr" value="two" /> two</label>
-  <label><input type="checkbox" v-model="arr" value="three" /> three</label>
+  <label
+    ><input type="checkbox" v-model="arr" :value="123" /> actual number</label
+  >
   <div>{{ arr }}</div>
 
+  <h2>Checkbox w/ true-value / false-value</h2>
+  <input
+    type="checkbox"
+    v-model="checkToggle"
+    :true-value="trueValue"
+    :false-value="falseValue"
+  />
+  <div>{{ checkToggle }}</div>
+
   <h2>Radio</h2>
   <label><input type="radio" v-model="radioSelected" value="one" /> one</label>
   <label><input type="radio" v-model="radioSelected" value="two" /> two</label>

package.json

@@ -14,7 +14,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "check": "tsc --noEmit",
+    "type": "tsc --noEmit",
     "build": "vite build"
   },
   "devDependencies": {

src/app.ts

@@ -1,4 +1,4 @@
-import { markRaw, reactive } from '@vue/reactivity'
+import { reactive } from '@vue/reactivity'
 import { Block } from './block'
 import { Directive } from './directives'
 import { createContext } from './walk'
@@ -10,17 +10,13 @@ export function createApp(initialData?: any) {
   if (initialData) {
     ctx.scope = reactive(initialData)
   }
+
   // global internal helpers
-  ctx.scope.$ = markRaw({
-    toDisplayString
-  })
+  ctx.scope.$s = toDisplayString
+
   let rootBlocks: Block[]
 
   return {
-    data(key: string, value: any) {
-      ctx.scope[key] = value
-      return this
-    },
     directive(name: string, def?: Directive) {
       if (def) {
         ctx.dirs[name] = def
@@ -29,6 +25,7 @@ export function createApp(initialData?: any) {
         return ctx.dirs[name]
       }
     },
+
     mount(el?: string | Element | null) {
       if (typeof el === 'string') {
         el = document.querySelector(el)
@@ -38,6 +35,7 @@ export function createApp(initialData?: any) {
           return
         }
       }
+
       el = el || document.documentElement
       let roots = el.hasAttribute('v-scope')
         ? [el]
@@ -46,6 +44,7 @@ export function createApp(initialData?: any) {
       if (!roots.length) {
         roots = [el]
       }
+
       if (
         import.meta.env.DEV &&
         roots.length === 1 &&
@@ -58,13 +57,15 @@ export function createApp(initialData?: any) {
             `with \`v-scope\`.`
         )
       }
+
       rootBlocks = roots.map((el) => new Block(el, ctx, true))
       // remove all v-cloak after mount
       ;[el, ...el.querySelectorAll(`[v-cloak]`)].forEach((el) =>
         el.removeAttribute('v-cloak')
       )
       return this
     },
+
     unmount() {
       rootBlocks.forEach((block) => block.teardown())
     }

src/directives/bind.ts

@@ -39,10 +39,10 @@ export const bind: Directive<Element> = ({
   })
 }
 
-function setProp(el: Element, arg: string, value: any, prevValue?: any) {
-  if (arg === 'class') {
+function setProp(el: Element, key: string, value: any, prevValue?: any) {
+  if (key === 'class') {
     el.setAttribute('class', normalizeClass(value) || '')
-  } else if (arg === 'style') {
+  } else if (key === 'style') {
     value = normalizeStyle(value)
     const { style } = el as HTMLElement
     if (!value) {
@@ -61,18 +61,26 @@ function setProp(el: Element, arg: string, value: any, prevValue?: any) {
         }
       }
     }
-  } else if (arg in el && !forceAttrRE.test(arg)) {
+  } else if (key in el && !forceAttrRE.test(key)) {
     // @ts-ignore
-    el[arg] = value
-    if (arg === 'value') {
+    el[key] = value
+    if (key === 'value') {
       // @ts-ignore
       el._value = value
     }
   } else {
-    if (value != null) {
-      el.setAttribute(arg, value)
+    // special case for <input v-model type="checkbox"> with
+    // :true-value & :false-value
+    // store value as dom properties since non-string values will be
+    // stringified.
+    if (key === 'true-value') {
+      ;(el as any)._trueValue = value
+    } else if (key === 'false-value') {
+      ;(el as any)._falseValue = value
+    } else if (value != null) {
+      el.setAttribute(key, value)
     } else {
-      el.removeAttribute(arg)
+      el.removeAttribute(key)
     }
   }
 }

src/directives/model.ts

@@ -1,6 +1,6 @@
 import { isArray, looseEqual, looseIndexOf, toNumber } from '@vue/shared'
 import { Directive } from '.'
-import { listen } from './on'
+import { listen } from '../utils'
 
 export const model: Directive<
   HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
@@ -58,7 +58,7 @@ export const model: Directive<
           assign(filtered)
         }
       } else {
-        assign(checked)
+        assign(getCheckboxValue(el as HTMLInputElement, checked))
       }
     })
 

src/directives/on.ts

@@ -1,14 +1,6 @@
 import { Directive } from '.'
 import { hyphenate } from '@vue/shared'
-
-export const listen = (
-  el: Element,
-  event: string,
-  handler: any,
-  options?: any
-) => {
-  el.addEventListener(event, handler, options)
-}
+import { listen } from '../utils'
 
 // same as vue 2
 const simplePathRE =

src/utils.ts

@@ -3,3 +3,12 @@ export const checkAttr = (el: Element, name: string): string | null => {
   if (val != null) el.removeAttribute(name)
   return val
 }
+
+export const listen = (
+  el: Element,
+  event: string,
+  handler: any,
+  options?: any
+) => {
+  el.addEventListener(event, handler, options)
+}

src/walk.ts

@@ -70,11 +70,21 @@ export function walk(node: Node, ctx: Context): ChildNode | null | void {
     }
 
     // other directives
+    let deferredModel
     for (const { name, value } of [...el.attributes]) {
       if (dirRE.test(name) && name !== 'v-cloak') {
-        processDirective(el, name, value, ctx)
+        if (name === 'v-model') {
+          // defer v-model since it relies on :value bindings to be processed
+          // first
+          deferredModel = value
+        } else {
+          processDirective(el, name, value, ctx)
+        }
       }
     }
+    if (deferredModel) {
+      processDirective(el, 'v-model', deferredModel, ctx)
+    }
   } else if (type === 3) {
     // Text
     const data = (node as Text).data
@@ -85,7 +95,7 @@ export function walk(node: Node, ctx: Context): ChildNode | null | void {
       while ((match = interpolationRE.exec(data))) {
         const leading = data.slice(lastIndex, match.index)
         if (leading) segments.push(JSON.stringify(leading))
-        segments.push(`$.toDisplayString(${match[1]})`)
+        segments.push(`$s(${match[1]})`)
         lastIndex = match.index + match[0].length
       }
       if (lastIndex < data.length - 1) {