chore: Merge branch 'master' into test-dom-class

haoqunjiang · haoqunjiang · commit 0997235e4a8f · 2019-11-15T18:05:06.000+08:00
diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -0,0 +1,21 @@
+import { parse } from '../src'
+import { mockWarn } from '@vue/runtime-test'
+
+describe('compiler:sfc', () => {
+  mockWarn()
+  describe('error', () => {
+    test('should only allow single template element', () => {
+      parse(`<template><div/></template><template><div/></template>`)
+      expect(
+        `Single file component can contain only one template element`
+      ).toHaveBeenWarned()
+    })
+
+    test('should only allow single script element', () => {
+      parse(`<script>console.log(1)</script><script>console.log(1)</script>`)
+      expect(
+        `Single file component can contain only one script element`
+      ).toHaveBeenWarned()
+    })
+  })
+})
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
@@ -7,6 +7,7 @@ import {
   SourceLocation
 } from '@vue/compiler-core'
 import { RawSourceMap } from 'source-map'
+import { generateCodeFrame } from '@vue/shared'
 
 export interface SFCParseOptions {
   needMap?: boolean
@@ -78,14 +79,14 @@ export function parse(
         if (!sfc.template) {
           sfc.template = createBlock(node) as SFCTemplateBlock
         } else {
-          // TODO warn duplicate template
+          warnDuplicateBlock(source, filename, node)
         }
         break
       case 'script':
         if (!sfc.script) {
           sfc.script = createBlock(node) as SFCScriptBlock
         } else {
-          // TODO warn duplicate script
+          warnDuplicateBlock(source, filename, node)
         }
         break
       case 'style':
@@ -105,6 +106,24 @@ export function parse(
   return sfc
 }
 
+function warnDuplicateBlock(
+  source: string,
+  filename: string,
+  node: ElementNode
+) {
+  const codeFrame = generateCodeFrame(
+    source,
+    node.loc.start.offset,
+    node.loc.end.offset
+  )
+  const location = `${filename}:${node.loc.start.line}:${node.loc.start.column}`
+  console.warn(
+    `Single file component can contain only one ${
+      node.tag
+    } element (${location}):\n\n${codeFrame}`
+  )
+}
+
 function createBlock(node: ElementNode): SFCBlock {
   const type = node.tag
   const text = node.children[0] as TextNode
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
@@ -295,7 +295,6 @@ export function setupStatefulComponent(
             `does not support it yet.`
         )
       }
-      return
     } else {
       handleSetupResult(instance, setupResult, parentSuspense)
     }
diff --git a/packages/runtime-core/src/scheduler.ts b/packages/runtime-core/src/scheduler.ts
@@ -8,6 +8,9 @@ const p = Promise.resolve()
 let isFlushing = false
 let isFlushPending = false
 
+const RECURSION_LIMIT = 100
+type CountMap = Map<Function, number>
+
 export function nextTick(fn?: () => void): Promise<void> {
   return fn ? p.then(fn) : p
 }
@@ -37,51 +40,57 @@ function queueFlush() {
 
 const dedupe = (cbs: Function[]): Function[] => [...new Set(cbs)]
 
-export function flushPostFlushCbs() {
+export function flushPostFlushCbs(seen?: CountMap) {
   if (postFlushCbs.length) {
     const cbs = dedupe(postFlushCbs)
     postFlushCbs.length = 0
+    if (__DEV__) {
+      seen = seen || new Map()
+    }
     for (let i = 0; i < cbs.length; i++) {
+      if (__DEV__) {
+        checkRecursiveUpdates(seen!, cbs[i])
+      }
       cbs[i]()
     }
   }
 }
 
-const RECURSION_LIMIT = 100
-type JobCountMap = Map<Function, number>
-
-function flushJobs(seenJobs?: JobCountMap) {
+function flushJobs(seen?: CountMap) {
   isFlushPending = false
   isFlushing = true
   let job
   if (__DEV__) {
-    seenJobs = seenJobs || new Map()
+    seen = seen || new Map()
   }
   while ((job = queue.shift())) {
     if (__DEV__) {
-      const seen = seenJobs!
-      if (!seen.has(job)) {
-        seen.set(job, 1)
-      } else {
-        const count = seen.get(job)!
-        if (count > RECURSION_LIMIT) {
-          throw new Error(
-            'Maximum recursive updates exceeded. ' +
-              "You may have code that is mutating state in your component's " +
-              'render function or updated hook.'
-          )
-        } else {
-          seen.set(job, count + 1)
-        }
-      }
+      checkRecursiveUpdates(seen!, job)
     }
     callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
   }
-  flushPostFlushCbs()
+  flushPostFlushCbs(seen)
   isFlushing = false
   // some postFlushCb queued jobs!
   // keep flushing until it drains.
   if (queue.length || postFlushCbs.length) {
-    flushJobs(seenJobs)
+    flushJobs(seen)
+  }
+}
+
+function checkRecursiveUpdates(seen: CountMap, fn: Function) {
+  if (!seen.has(fn)) {
+    seen.set(fn, 1)
+  } else {
+    const count = seen.get(fn)!
+    if (count > RECURSION_LIMIT) {
+      throw new Error(
+        'Maximum recursive updates exceeded. ' +
+          "You may have code that is mutating state in your component's " +
+          'render function or updated hook or watcher source function.'
+      )
+    } else {
+      seen.set(fn, count + 1)
+    }
   }
 }
diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
@@ -189,6 +189,101 @@ describe('vModel', () => {
     data.value = false
     await nextTick()
     expect(input.checked).toEqual(false)
+
+    data.value = true
+    await nextTick()
+    expect(input.checked).toEqual(true)
+
+    input.checked = false
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toEqual(false)
+  })
+
+  it('should work with checkbox and true-value/false-value', async () => {
+    const component = createComponent({
+      data() {
+        return { value: null }
+      },
+      render() {
+        return [
+          withVModel(
+            h('input', {
+              type: 'checkbox',
+              'true-value': 'yes',
+              'false-value': 'no',
+              'onUpdate:modelValue': setValue.bind(this)
+            }),
+            this.value
+          )
+        ]
+      }
+    })
+    app.mount(component, root)
+
+    const input = root.querySelector('input')
+    const data = root._vnode.component.data
+
+    input.checked = true
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toEqual('yes')
+
+    data.value = 'no'
+    await nextTick()
+    expect(input.checked).toEqual(false)
+
+    data.value = 'yes'
+    await nextTick()
+    expect(input.checked).toEqual(true)
+
+    input.checked = false
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toEqual('no')
+  })
+
+  it('should work with checkbox and true-value/false-value with object values', async () => {
+    const component = createComponent({
+      data() {
+        return { value: null }
+      },
+      render() {
+        return [
+          withVModel(
+            h('input', {
+              type: 'checkbox',
+              'true-value': { yes: 'yes' },
+              'false-value': { no: 'no' },
+              'onUpdate:modelValue': setValue.bind(this)
+            }),
+            this.value
+          )
+        ]
+      }
+    })
+    app.mount(component, root)
+
+    const input = root.querySelector('input')
+    const data = root._vnode.component.data
+
+    input.checked = true
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toEqual({ yes: 'yes' })
+
+    data.value = { no: 'no' }
+    await nextTick()
+    expect(input.checked).toEqual(false)
+
+    data.value = { yes: 'yes' }
+    await nextTick()
+    expect(input.checked).toEqual(true)
+
+    input.checked = false
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toEqual({ no: 'no' })
   })
 
   it(`should support array as a checkbox model`, async () => {
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
@@ -101,7 +101,7 @@ export const vModelCheckbox: ObjectDirective<HTMLInputElement> = {
           assign(filtered)
         }
       } else {
-        assign(checked)
+        assign(getCheckboxValue(el, checked))
       }
     })
   },
@@ -119,7 +119,7 @@ function setChecked(
   if (isArray(value)) {
     el.checked = looseIndexOf(value, vnode.props!.value) > -1
   } else if (value !== oldValue) {
-    el.checked = !!value
+    el.checked = looseEqual(value, getCheckboxValue(el, true))
   }
 }
 
@@ -228,6 +228,15 @@ function getValue(el: HTMLOptionElement | HTMLInputElement) {
   return '_value' in el ? (el as any)._value : el.value
 }
 
+// retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
+function getCheckboxValue(
+  el: HTMLInputElement & { _trueValue?: any; _falseValue?: any },
+  checked: boolean
+) {
+  const key = checked ? '_trueValue' : '_falseValue'
+  return key in el ? el[key] : checked
+}
+
 export const vModelDynamic: ObjectDirective<
   HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
 > = {
diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts
@@ -12,11 +12,15 @@ export function patchDOMProp(
 ) {
   if ((key === 'innerHTML' || key === 'textContent') && prevChildren != null) {
     unmountChildren(prevChildren, parentComponent, parentSuspense)
+    el[key] = value == null ? '' : value
+    return
   }
   if (key === 'value' && el.tagName !== 'PROGRESS') {
     // store value as _value as well since
     // non-string values will be stringified.
     el._value = value
+    el.value = value == null ? '' : value
+    return
   }
   if (value === '' && typeof el[key] === 'boolean') {
     // e.g. <select multiple> compiles to { multiple: '' }
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
@@ -5,9 +5,9 @@ import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
 import { isOn } from '@vue/shared'
 import {
-  VNode,
   ComponentInternalInstance,
-  SuspenseBoundary
+  SuspenseBoundary,
+  VNode
 } from '@vue/runtime-core'
 
 export function patchProp(
@@ -53,6 +53,15 @@ export function patchProp(
           unmountChildren
         )
       } else {
+        // 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 = nextValue
+        } else if (key === 'false-value') {
+          ;(el as any)._falseValue = nextValue
+        }
         patchAttr(el, key, nextValue)
       }
       break
diff --git a/packages/shared/src/codeframe.ts b/packages/shared/src/codeframe.ts
@@ -20,7 +20,10 @@ export function generateCodeFrame(
         if (j === i) {
           // push underline
           const pad = start - (count - lineLength) + 1
-          const length = end > count ? lineLength - pad : end - start
+          const length = Math.max(
+            0,
+            end > count ? lineLength - pad : end - start
+          )
           res.push(`   |  ` + ' '.repeat(pad) + '^'.repeat(length))
         } else if (j > i) {
           if (end > count) {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -295,7 +295,6 @@ export function setupStatefulComponent(`
`295`	`295`	`does not support it yet.`
`296`	`296`	`)`
`297`	`297`	`}`
`298`		`- return`
`299`	`298`	`} else {`
`300`	`299`	`handleSetupResult(instance, setupResult, parentSuspense)`
`301`	`300`	`}`