vue 2.7.6 → 2.7.9

package/packages/compiler-sfc/src/compileTemplate.ts

@@ -144,8 +144,7 @@ function actuallyCompile(
       errors
     }
   } else {
-    // transpile code with vue-template-es2015-compiler, which is a forked
-    // version of Buble that applies ES2015 transforms + stripping `with` usage
+    // stripping `with` usage
     let code =
       `var __render__ = ${prefixIdentifiers(
         `function render(${isFunctional ? `_c,_vm` : ``}){${render}\n}`,

package/packages/compiler-sfc/src/rewriteDefault.ts

@@ -42,7 +42,12 @@ export function rewriteDefault(
   }).program.body
   ast.forEach(node => {
     if (node.type === 'ExportDefaultDeclaration') {
-      s.overwrite(node.start!, node.declaration.start!, `const ${as} = `)
+      if (node.declaration.type === 'ClassDeclaration') {
+        s.overwrite(node.start!, node.declaration.id.start!, `class `)
+        s.append(`\nconst ${as} = ${node.declaration.id.name}`)
+      } else {
+        s.overwrite(node.start!, node.declaration.start!, `const ${as} = `)
+      }
     }
     if (node.type === 'ExportNamedDeclaration') {
       for (const specifier of node.specifiers) {

package/packages/compiler-sfc/src/templateCompilerModules/utils.ts

@@ -24,10 +24,15 @@ export function urlToRequire(
     // does not apply to absolute urls or urls that start with `@`
     // since they are aliases
     if (firstChar === '.' || firstChar === '~') {
+      // Allow for full hostnames provided in options.base
+      const base = parseUriParts(transformAssetUrlsOption.base)
+      const protocol = base.protocol || ''
+      const host = base.host ? protocol + '//' + base.host : ''
+      const basePath = base.path || '/'
       // when packaged in the browser, path will be using the posix-
       // only version provided by rollup-plugin-node-builtins.
-      return `"${(path.posix || path).join(
-        transformAssetUrlsOption.base,
+      return `"${host}${(path.posix || path).join(
+        basePath,
         uriParts.path + (uriParts.hash || '')
       )}"`
     }
@@ -64,7 +69,7 @@ function parseUriParts(urlString: string): UrlWithStringQuery {
     // @see https://nodejs.org/api/url.html#url_url_parse_urlstring_parsequerystring_slashesdenotehost
     if ('string' === typeof urlString) {
       // check is an uri
-      return uriParse(urlString) // take apart the uri
+      return uriParse(urlString, false, true) // take apart the uri
     }
   }
   return returnValue

package/packages/compiler-sfc/test/rewriteDefault.spec.ts

@@ -0,0 +1,245 @@
+import { rewriteDefault } from '../src'
+
+describe('compiler sfc: rewriteDefault', () => {
+  test('without export default', () => {
+    expect(rewriteDefault(`export  a = {}`, 'script')).toMatchInlineSnapshot(`
+      "export  a = {}
+      const script = {}"
+    `)
+  })
+
+  test('rewrite export default', () => {
+    expect(
+      rewriteDefault(`export  default {}`, 'script')
+    ).toMatchInlineSnapshot(`"const script = {}"`)
+  })
+
+  test('rewrite export named default', () => {
+    expect(
+      rewriteDefault(
+        `const a = 1 \n export { a as b, a as default, a as c}`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+      "const a = 1 
+       export { a as b,  a as c}
+      const script = a"
+    `)
+
+    expect(
+      rewriteDefault(
+        `const a = 1 \n export { a as b, a as default    , a as c}`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+      "const a = 1 
+       export { a as b,  a as c}
+      const script = a"
+    `)
+  })
+
+  test('w/ comments', async () => {
+    expect(rewriteDefault(`// export default\nexport default {}`, 'script'))
+      .toMatchInlineSnapshot(`
+      "// export default
+      const script = {}"
+    `)
+  })
+
+  test('export named default multiline', () => {
+    expect(
+      rewriteDefault(`let App = {}\n export {\nApp as default\n}`, '_sfc_main')
+    ).toMatchInlineSnapshot(`
+      "let App = {}
+       export {
+      
+      }
+      const _sfc_main = App"
+    `)
+  })
+
+  test('export named default multiline /w comments', () => {
+    expect(
+      rewriteDefault(
+        `const a = 1 \n export {\n a as b,\n a as default,\n a as c}\n` +
+          `// export { myFunction as default }`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+      "const a = 1 
+       export {
+       a as b,
+       
+       a as c}
+      // export { myFunction as default }
+      const script = a"
+    `)
+
+    expect(
+      rewriteDefault(
+        `const a = 1 \n export {\n a as b,\n a as default      ,\n a as c}\n` +
+          `// export { myFunction as default }`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+      "const a = 1 
+       export {
+       a as b,
+       
+       a as c}
+      // export { myFunction as default }
+      const script = a"
+    `)
+  })
+
+  test(`export { default } from '...'`, async () => {
+    expect(
+      rewriteDefault(`export { default, foo } from './index.js'`, 'script')
+    ).toMatchInlineSnapshot(`
+    "import { default as __VUE_DEFAULT__ } from './index.js'
+    export {  foo } from './index.js'
+    const script = __VUE_DEFAULT__"
+    `)
+
+    expect(
+      rewriteDefault(`export { default    , foo } from './index.js'`, 'script')
+    ).toMatchInlineSnapshot(`
+    "import { default as __VUE_DEFAULT__ } from './index.js'
+    export {  foo } from './index.js'
+    const script = __VUE_DEFAULT__"
+    `)
+
+    expect(
+      rewriteDefault(`export { foo,   default } from './index.js'`, 'script')
+    ).toMatchInlineSnapshot(`
+    "import { default as __VUE_DEFAULT__ } from './index.js'
+    export { foo,    } from './index.js'
+    const script = __VUE_DEFAULT__"
+    `)
+
+    expect(
+      rewriteDefault(
+        `export { foo as default, bar } from './index.js'`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+    "import { foo } from './index.js'
+    export {  bar } from './index.js'
+    const script = foo"
+    `)
+
+    expect(
+      rewriteDefault(
+        `export { foo as default     , bar } from './index.js'`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+    "import { foo } from './index.js'
+    export {  bar } from './index.js'
+    const script = foo"
+    `)
+
+    expect(
+      rewriteDefault(
+        `export { bar,   foo as default } from './index.js'`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+    "import { foo } from './index.js'
+    export { bar,    } from './index.js'
+    const script = foo"
+    `)
+  })
+
+  test('export default class', async () => {
+    expect(rewriteDefault(`export default class Foo {}`, 'script'))
+      .toMatchInlineSnapshot(`
+      "class Foo {}
+      const script = Foo"
+    `)
+  })
+
+  test('export default class w/ comments', async () => {
+    expect(
+      rewriteDefault(`// export default\nexport default class Foo {}`, 'script')
+    ).toMatchInlineSnapshot(`
+      "// export default
+      class Foo {}
+      const script = Foo"
+    `)
+  })
+
+  test('export default class w/ comments 2', async () => {
+    expect(
+      rewriteDefault(
+        `export default {}\n` + `// export default class Foo {}`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+      "const script = {}
+      // export default class Foo {}"
+    `)
+  })
+
+  test('export default class w/ comments 3', async () => {
+    expect(
+      rewriteDefault(
+        `/*\nexport default class Foo {}*/\n` + `export default class Bar {}`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+      "/*
+      export default class Foo {}*/
+      class Bar {}
+      const script = Bar"
+    `)
+  })
+
+  test('@Component\nexport default class', async () => {
+    expect(rewriteDefault(`@Component\nexport default class Foo {}`, 'script'))
+      .toMatchInlineSnapshot(`
+      "@Component
+      class Foo {}
+      const script = Foo"
+    `)
+  })
+
+  test('@Component\nexport default class w/ comments', async () => {
+    expect(
+      rewriteDefault(`// export default\n@Component\nexport default class Foo {}`, 'script')
+    ).toMatchInlineSnapshot(`
+      "// export default
+      @Component
+      class Foo {}
+      const script = Foo"
+    `)
+  })
+
+  test('@Component\nexport default class w/ comments 2', async () => {
+    expect(
+      rewriteDefault(
+        `export default {}\n` + `// @Component\n// export default class Foo {}`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+      "const script = {}
+      // @Component
+      // export default class Foo {}"
+    `)
+  })
+
+  test('@Component\nexport default class w/ comments 3', async () => {
+    expect(
+      rewriteDefault(
+        `/*\n@Component\nexport default class Foo {}*/\n` + `export default class Bar {}`,
+        'script'
+      )
+    ).toMatchInlineSnapshot(`
+      "/*
+      @Component
+      export default class Foo {}*/
+      class Bar {}
+      const script = Bar"
+    `)
+  })
+})

package/src/compiler/codegen/index.ts

@@ -13,7 +13,7 @@ import {
   ASTText,
   CompilerOptions
 } from 'types/compiler'
-import { BindingMetadata } from 'sfc/types'
+import { BindingMetadata, BindingTypes } from 'sfc/types'
 
 type TransformFunction = (el: ASTElement, code: string) => string
 type DataGenFunction = (el: ASTElement) => string
@@ -95,18 +95,16 @@ export function genElement(el: ASTElement, state: CodegenState): string {
       code = genComponent(el.component, el, state)
     } else {
       let data
-      if (!el.plain || (el.pre && state.maybeComponent(el))) {
+      const maybeComponent = state.maybeComponent(el)
+      if (!el.plain || (el.pre && maybeComponent)) {
         data = genData(el, state)
       }
 
       let tag: string | undefined
       // check if this is a component in <script setup>
       const bindings = state.options.bindings
-      if (bindings && bindings.__isScriptSetup !== false) {
-        tag =
-          checkBindingType(bindings, el.tag) ||
-          checkBindingType(bindings, camelize(el.tag)) ||
-          checkBindingType(bindings, capitalize(camelize(el.tag)))
+      if (maybeComponent && bindings && bindings.__isScriptSetup !== false) {
+        tag = checkBindingType(bindings, el.tag)
       }
       if (!tag) tag = `'${el.tag}'`
 
@@ -126,9 +124,32 @@ export function genElement(el: ASTElement, state: CodegenState): string {
 }
 
 function checkBindingType(bindings: BindingMetadata, key: string) {
-  const type = bindings[key]
-  if (type && type.startsWith('setup')) {
-    return key
+  const camelName = camelize(key)
+  const PascalName = capitalize(camelName)
+  const checkType = (type) => {
+    if (bindings[key] === type) {
+      return key
+    }
+    if (bindings[camelName] === type) {
+      return camelName
+    }
+    if (bindings[PascalName] === type) {
+      return PascalName
+    }
+  }
+  const fromConst =
+    checkType(BindingTypes.SETUP_CONST) ||
+    checkType(BindingTypes.SETUP_REACTIVE_CONST)
+  if (fromConst) {
+    return fromConst
+  }
+
+  const fromMaybeRef =
+    checkType(BindingTypes.SETUP_LET) ||
+    checkType(BindingTypes.SETUP_REF) ||
+    checkType(BindingTypes.SETUP_MAYBE_REF)
+  if (fromMaybeRef) {
+    return fromMaybeRef
   }
 }
 

package/src/core/instance/init.ts

@@ -34,6 +34,7 @@ export function initMixin(Vue: typeof Component) {
     vm.__v_skip = true
     // effect scope
     vm._scope = new EffectScope(true /* detached */)
+    vm._scope._vm = true
     // merge options
     if (options && options._isComponent) {
       // optimize internal component instantiation

package/src/core/instance/inject.ts

@@ -1,8 +1,7 @@
 import { warn, hasSymbol, isFunction, isObject } from '../util/index'
 import { defineReactive, toggleObserving } from '../observer/index'
 import type { Component } from 'types/component'
-import { provide } from 'v3/apiInject'
-import { setCurrentInstance } from '../../v3/currentInstance'
+import { resolveProvided } from 'v3/apiInject'
 
 export function initProvide(vm: Component) {
   const provideOption = vm.$options.provide
@@ -13,12 +12,18 @@ export function initProvide(vm: Component) {
     if (!isObject(provided)) {
       return
     }
+    const source = resolveProvided(vm)
+    // IE9 doesn't support Object.getOwnPropertyDescriptors so we have to
+    // iterate the keys ourselves.
     const keys = hasSymbol ? Reflect.ownKeys(provided) : Object.keys(provided)
-    setCurrentInstance(vm)
     for (let i = 0; i < keys.length; i++) {
-      provide(keys[i], provided[keys[i]])
+      const key = keys[i]
+      Object.defineProperty(
+        source,
+        key,
+        Object.getOwnPropertyDescriptor(provided, key)!
+      )
     }
-    setCurrentInstance()
   }
 }
 

package/src/core/instance/lifecycle.ts

@@ -18,7 +18,7 @@ import {
   invokeWithErrorHandling
 } from '../util/index'
 import { currentInstance, setCurrentInstance } from 'v3/currentInstance'
-import { syncSetupAttrs } from 'v3/apiSetup'
+import { syncSetupProxy } from 'v3/apiSetup'
 
 export let activeInstance: any = null
 export let isUpdatingChildComponent: boolean = false
@@ -288,11 +288,12 @@ export function updateChildComponent(
     // force update if attrs are accessed and has changed since it may be
     // passed to a child component.
     if (
-      syncSetupAttrs(
+      syncSetupProxy(
         vm._attrsProxy,
         attrs,
         (prevVNode.data && prevVNode.data.attrs) || emptyObject,
-        vm
+        vm,
+        '$attrs'
       )
     ) {
       needsForceUpdate = true
@@ -300,7 +301,20 @@ export function updateChildComponent(
   }
   vm.$attrs = attrs
 
-  vm.$listeners = listeners || emptyObject
+  // update listeners
+  listeners = listeners || emptyObject
+  const prevListeners = vm.$options._parentListeners
+  if (vm._listenersProxy) {
+    syncSetupProxy(
+      vm._listenersProxy,
+      listeners,
+      prevListeners || emptyObject,
+      vm,
+      '$listeners'
+    )
+  }
+  vm.$listeners = vm.$options._parentListeners = listeners
+  updateComponentListeners(vm, listeners, prevListeners)
 
   // update props
   if (propsData && vm.$options.props) {
@@ -317,12 +331,6 @@ export function updateChildComponent(
     vm.$options.propsData = propsData
   }
 
-  // update listeners
-  listeners = listeners || emptyObject
-  const oldListeners = vm.$options._parentListeners
-  vm.$options._parentListeners = listeners
-  updateComponentListeners(vm, listeners, oldListeners)
-
   // resolve slots + force update if has children
   if (needsForceUpdate) {
     vm.$slots = resolveSlots(renderChildren, parentVnode.context)

package/src/core/instance/proxy.ts

@@ -19,7 +19,7 @@ if (__DEV__) {
         'referenced during render. Make sure that this property is reactive, ' +
         'either in the data option, or for class-based components, by ' +
         'initializing the property. ' +
-        'See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',
+        'See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',
       target
     )
   }
@@ -29,7 +29,7 @@ if (__DEV__) {
       `Property "${key}" must be accessed with "$data.${key}" because ` +
         'properties starting with "$" or "_" are not proxied in the Vue instance to ' +
         'prevent conflicts with Vue internals. ' +
-        'See: https://vuejs.org/v2/api/#data',
+        'See: https://v2.vuejs.org/v2/api/#data',
       target
     )
   }

package/src/core/instance/render.ts

@@ -25,7 +25,13 @@ export function initRender(vm: Component) {
   const parentVnode = (vm.$vnode = options._parentVnode!) // the placeholder node in parent tree
   const renderContext = parentVnode && (parentVnode.context as Component)
   vm.$slots = resolveSlots(options._renderChildren, renderContext)
-  vm.$scopedSlots = emptyObject
+  vm.$scopedSlots = parentVnode
+    ? normalizeScopedSlots(
+        vm.$parent!,
+        parentVnode.data!.scopedSlots,
+        vm.$slots
+      )
+    : emptyObject
   // bind the createElement fn to this instance
   // so that we get proper render context inside it.
   // args order: tag, data, children, normalizationType, alwaysNormalize
@@ -98,7 +104,7 @@ export function renderMixin(Vue: typeof Component) {
     const vm: Component = this
     const { render, _parentVnode } = vm.$options
 
-    if (_parentVnode) {
+    if (_parentVnode && vm._isMounted) {
       vm.$scopedSlots = normalizeScopedSlots(
         vm.$parent!,
         _parentVnode.data!.scopedSlots,

package/src/core/instance/state.ts

@@ -127,7 +127,7 @@ function initData(vm: Component) {
     __DEV__ &&
       warn(
         'data functions should return an object:\n' +
-          'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
+          'https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
         vm
       )
   }

package/src/core/observer/index.ts

@@ -191,7 +191,7 @@ export function defineReactive(
       } else if (getter) {
         // #7981: for accessor properties without setter
         return
-      } else if (isRef(value) && !isRef(newVal)) {
+      } else if (!shallow && isRef(value) && !isRef(newVal)) {
         value.value = newVal
         return
       } else {

package/src/core/observer/scheduler.ts

@@ -59,6 +59,15 @@ if (inBrowser && !isIE) {
   }
 }
 
+const sortCompareFn = (a: Watcher, b: Watcher): number => {
+  if (a.post) {
+    if (!b.post) return 1
+  } else if (b.post) {
+    return -1
+  }
+  return a.id - b.id
+}
+
 /**
  * Flush both queues and run the watchers.
  */
@@ -75,7 +84,7 @@ function flushSchedulerQueue() {
   //    user watchers are created before the render watcher)
   // 3. If a component is destroyed during a parent component's watcher run,
   //    its watchers can be skipped.
-  queue.sort((a, b) => a.id - b.id)
+  queue.sort(sortCompareFn)
 
   // do not cache length because more watchers might be pushed
   // as we run existing watchers

package/src/core/observer/watcher.ts

@@ -58,6 +58,7 @@ export default class Watcher implements DepTarget {
   noRecurse?: boolean
   getter: Function
   value: any
+  post: boolean
 
   // dev only
   onTrack?: ((event: DebuggerEvent) => void) | undefined
@@ -70,11 +71,18 @@ export default class Watcher implements DepTarget {
     options?: WatcherOptions | null,
     isRenderWatcher?: boolean
   ) {
-    recordEffectScope(this, activeEffectScope || (vm ? vm._scope : undefined))
-    if ((this.vm = vm)) {
-      if (isRenderWatcher) {
-        vm._watcher = this
-      }
+    recordEffectScope(
+      this,
+      // if the active effect scope is manually created (not a component scope),
+      // prioritize it
+      activeEffectScope && !activeEffectScope._vm
+        ? activeEffectScope
+        : vm
+        ? vm._scope
+        : undefined
+    )
+    if ((this.vm = vm) && isRenderWatcher) {
+      vm._watcher = this
     }
     // options
     if (options) {
@@ -93,6 +101,7 @@ export default class Watcher implements DepTarget {
     this.cb = cb
     this.id = ++uid // uid for batching
     this.active = true
+    this.post = false
     this.dirty = this.lazy // for lazy watchers
     this.deps = []
     this.newDeps = []

package/src/core/vdom/modules/directives.ts

@@ -103,7 +103,15 @@ function normalizeDirectives(
     }
     res[getRawDirName(dir)] = dir
     if (vm._setupState && vm._setupState.__sfc) {
-      dir.def = dir.def || resolveAsset(vm, '_setupState', 'v-' + dir.name)
+      const setupDef = dir.def || resolveAsset(vm, '_setupState', 'v-' + dir.name)
+      if (typeof setupDef === 'function') {
+        dir.def = {
+          bind: setupDef,
+          update: setupDef,
+        }
+      } else {
+        dir.def = setupDef
+      }
     }
     dir.def = dir.def || resolveAsset(vm.$options, 'directives', dir.name, true)
   }

package/src/core/vdom/vnode.ts

@@ -33,6 +33,7 @@ export default class VNode {
   fnOptions?: ComponentOptions | null // for SSR caching
   devtoolsMeta?: Object | null // used to store functional render context for devtools
   fnScopeId?: string | null // functional scope id support
+  isComponentRootElement?: boolean | null // for SSR directives
 
   constructor(
     tag?: string,

package/src/types/component.ts

@@ -111,6 +111,7 @@ export declare class Component {
   _setupProxy?: Record<string, any>
   _setupContext?: SetupContext
   _attrsProxy?: Record<string, any>
+  _listenersProxy?: Record<string, Function | Function[]>
   _slotsProxy?: Record<string, () => VNode[]>
   _preWatchers?: Watcher[]
 

package/src/v3/apiInject.ts

@@ -1,5 +1,6 @@
 import { isFunction, warn } from 'core/util'
 import { currentInstance } from './currentInstance'
+import type { Component } from 'types/component'
 
 export interface InjectionKey<T> extends Symbol {}
 
@@ -9,19 +10,23 @@ export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
       warn(`provide() can only be used inside setup().`)
     }
   } else {
-    let provides = currentInstance._provided
-    // by default an instance inherits its parent's provides object
-    // but when it needs to provide values of its own, it creates its
-    // own provides object using parent provides object as prototype.
-    // this way in `inject` we can simply look up injections from direct
-    // parent and let the prototype chain do the work.
-    const parentProvides =
-      currentInstance.$parent && currentInstance.$parent._provided
-    if (parentProvides === provides) {
-      provides = currentInstance._provided = Object.create(parentProvides)
-    }
     // TS doesn't allow symbol as index type
-    provides[key as string] = value
+    resolveProvided(currentInstance)[key as string] = value
+  }
+}
+
+export function resolveProvided(vm: Component): Record<string, any> {
+  // by default an instance inherits its parent's provides object
+  // but when it needs to provide values of its own, it creates its
+  // own provides object using parent provides object as prototype.
+  // this way in `inject` we can simply look up injections from direct
+  // parent and let the prototype chain do the work.
+  const existing = vm._provided
+  const parentProvides = vm.$parent && vm.$parent._provided
+  if (parentProvides === existing) {
+    return (vm._provided = Object.create(parentProvides))
+  } else {
+    return existing
   }
 }