vue 2.7.9 → 2.7.11

package/packages/compiler-sfc/node_modules/.bin/parser

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/evan/Vue/vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/@babel+parser@7.18.4/node_modules/@babel/parser/bin/babel-parser.js" "$@"
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/@babel+parser@7.19.4/node_modules/@babel/parser/bin/babel-parser.js" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/@babel+parser@7.18.4/node_modules/@babel/parser/bin/babel-parser.js" "$@"
+  exec node  "$basedir/../../../../node_modules/.pnpm/@babel+parser@7.19.4/node_modules/@babel/parser/bin/babel-parser.js" "$@"
 fi

package/packages/compiler-sfc/node_modules/.bin/sass

@@ -11,7 +11,7 @@ else
   export NODE_PATH="$NODE_PATH:/Users/evan/Vue/vue/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/sass@1.52.3/node_modules/sass/sass.js" "$@"
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/sass@1.55.0/node_modules/sass/sass.js" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/sass@1.52.3/node_modules/sass/sass.js" "$@"
+  exec node  "$basedir/../../../../node_modules/.pnpm/sass@1.55.0/node_modules/sass/sass.js" "$@"
 fi

package/packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "2.7.9",
+  "version": "2.7.11",
   "description": "compiler-sfc for Vue 2",
   "main": "dist/compiler-sfc.js",
   "types": "dist/compiler-sfc.d.ts",
@@ -13,7 +13,7 @@
     "source-map": "^0.6.1"
   },
   "devDependencies": {
-    "@babel/types": "^7.18.4",
+    "@babel/types": "^7.19.4",
     "@types/estree": "^0.0.48",
     "@types/hash-sum": "^1.0.0",
     "@types/lru-cache": "^5.1.1",

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

@@ -284,11 +284,9 @@ export function compileScript(
       userImportAlias[imported] = local
     }
 
-    // template usage check is only needed in non-inline mode, so we can skip
-    // the work if inlineTemplate is true.
     let isUsedInTemplate = true
-    if (isTS && sfc.template && !sfc.template.src && !sfc.template.lang) {
-      isUsedInTemplate = isImportUsed(local, sfc)
+    if (sfc.template && !sfc.template.src && !sfc.template.lang) {
+      isUsedInTemplate = isImportUsed(local, sfc, isTS)
     }
 
     userImports[local] = {
@@ -782,7 +780,7 @@ export function compileScript(
     if (node.trailingComments && node.trailingComments.length > 0) {
       const lastCommentNode =
         node.trailingComments[node.trailingComments.length - 1]
-      end = lastCommentNode.end + startOffset
+      end = lastCommentNode.end! + startOffset
     }
     // locate the end of whitespace between this statement and the next
     while (end <= source.length) {
@@ -1584,14 +1582,18 @@ function extractEventNames(
   ) {
     const typeNode = eventName.typeAnnotation.typeAnnotation
     if (typeNode.type === 'TSLiteralType') {
-      if (typeNode.literal.type !== 'UnaryExpression') {
+      if (
+        typeNode.literal.type !== 'UnaryExpression' &&
+        typeNode.literal.type !== 'TemplateLiteral'
+      ) {
         emits.add(String(typeNode.literal.value))
       }
     } else if (typeNode.type === 'TSUnionType') {
       for (const t of typeNode.types) {
         if (
           t.type === 'TSLiteralType' &&
-          t.literal.type !== 'UnaryExpression'
+          t.literal.type !== 'UnaryExpression' &&
+          t.literal.type !== 'TemplateLiteral'
         ) {
           emits.add(String(t.literal.value))
         }
@@ -1782,7 +1784,7 @@ function getObjectOrArrayExpressionKeys(value: Node): string[] {
 
 const templateUsageCheckCache = new LRU<string, string>(512)
 
-function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
+function resolveTemplateUsageCheckString(sfc: SFCDescriptor, isTS: boolean) {
   const { content } = sfc.template!
   const cached = templateUsageCheckCache.get(content)
   if (cached) {
@@ -1809,7 +1811,7 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
             code += `,v${capitalize(camelize(baseName))}`
           }
           if (value) {
-            code += `,${processExp(value, baseName)}`
+            code += `,${processExp(value, isTS, baseName)}`
           }
         }
       }
@@ -1817,7 +1819,7 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
     chars(text) {
       const res = parseText(text)
       if (res) {
-        code += `,${processExp(res.expression)}`
+        code += `,${processExp(res.expression, isTS)}`
       }
     }
   })
@@ -1829,8 +1831,8 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
 
 const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
 
-function processExp(exp: string, dir?: string): string {
-  if (/ as\s+\w|<.*>|:/.test(exp)) {
+function processExp(exp: string, isTS: boolean, dir?: string): string {
+  if (isTS && / as\s+\w|<.*>|:/.test(exp)) {
     if (dir === 'slot') {
       exp = `(${exp})=>{}`
     } else if (dir === 'on') {
@@ -1839,7 +1841,7 @@ function processExp(exp: string, dir?: string): string {
       const inMatch = exp.match(forAliasRE)
       if (inMatch) {
         const [, LHS, RHS] = inMatch
-        return processExp(`(${LHS})=>{}`) + processExp(RHS)
+        return processExp(`(${LHS})=>{}`, true) + processExp(RHS, true)
       }
     }
     let ret = ''
@@ -1867,36 +1869,38 @@ function stripTemplateString(str: string): string {
   return ''
 }
 
-function isImportUsed(local: string, sfc: SFCDescriptor): boolean {
+function isImportUsed(
+  local: string,
+  sfc: SFCDescriptor,
+  isTS: boolean
+): boolean {
   return new RegExp(
     // #4274 escape $ since it's a special char in regex
     // (and is the only regex special char that is valid in identifiers)
     `[^\\w$_]${local.replace(/\$/g, '\\$')}[^\\w$_]`
-  ).test(resolveTemplateUsageCheckString(sfc))
+  ).test(resolveTemplateUsageCheckString(sfc, isTS))
 }
 
 /**
  * Note: this comparison assumes the prev/next script are already identical,
- * and only checks the special case where <script setup lang="ts"> unused import
+ * and only checks the special case where <script setup> unused import
  * pruning result changes due to template changes.
  */
 export function hmrShouldReload(
   prevImports: Record<string, ImportBinding>,
   next: SFCDescriptor
 ): boolean {
-  if (
-    !next.scriptSetup ||
-    (next.scriptSetup.lang !== 'ts' && next.scriptSetup.lang !== 'tsx')
-  ) {
+  if (!next.scriptSetup) {
     return false
   }
 
+  const isTS = next.scriptSetup.lang === 'ts' || next.scriptSetup.lang === 'tsx'
   // for each previous import, check if its used status remain the same based on
   // the next descriptor's template
   for (const key in prevImports) {
     // if an import was previous unused, but now is used, we need to force
     // reload so that the script now includes that import.
-    if (!prevImports[key].isUsedInTemplate && isImportUsed(key, next)) {
+    if (!prevImports[key].isUsedInTemplate && isImportUsed(key, next, isTS)) {
       return true
     }
   }

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

@@ -6,6 +6,13 @@ export { compileScript } from './compileScript'
 export { generateCodeFrame } from 'compiler/codeframe'
 export { rewriteDefault } from './rewriteDefault'
 
+// For backwards compat only. Some existing tools like
+// fork-ts-checker-webpack-plugin relies on its presence for differentiating
+// between Vue 2 and Vue 3.
+// ref #12719
+// ref https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/issues/765
+export { parseComponent } from './parseComponent'
+
 // types
 export { SFCParseOptions } from './parse'
 export { CompilerOptions, WarningMessage } from 'types/compiler'

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

@@ -179,11 +179,11 @@ export function parseComponent(
       let text = source.slice(currentBlock.start, currentBlock.end)
       if (
         options.deindent === true ||
-        // by default, deindent unless it's script with default lang or ts
+        // by default, deindent unless it's script with default lang or (j/t)sx?
         (options.deindent !== false &&
           !(
             currentBlock.type === 'script' &&
-            (!currentBlock.lang || currentBlock.lang === 'ts')
+            (!currentBlock.lang || /^(j|t)sx?$/.test(currentBlock.lang))
           ))
       ) {
         text = deindent(text)

package/packages/compiler-sfc/src/stylePlugins/scoped.ts

@@ -1,6 +1,5 @@
 import { PluginCreator, Rule, AtRule } from 'postcss'
 import selectorParser from 'postcss-selector-parser'
-import { warn } from '../warn'
 
 const animationNameRE = /^(-\w+-)?animation-name$/
 const animationRE = /^(-\w+-)?animation$/
@@ -94,10 +93,10 @@ function rewriteSelector(
     ) {
       n.value = ' '
       n.spaces.before = n.spaces.after = ''
-      warn(
-        `the >>> and /deep/ combinators have been deprecated. ` +
-          `Use :deep() instead.`
-      )
+      // warn(
+      //   `the >>> and /deep/ combinators have been deprecated. ` +
+      //     `Use :deep() instead.`
+      // )
       return false
     }
 
@@ -126,12 +125,12 @@ function rewriteSelector(
           }
           selector.removeChild(n)
         } else {
-          // DEPRECATED usage
+          // DEPRECATED usage in v3
           // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
-          warn(
-            `::v-deep usage as a combinator has ` +
-              `been deprecated. Use :deep(<inner-selector>) instead.`
-          )
+          // warn(
+          //   `::v-deep usage as a combinator has ` +
+          //     `been deprecated. Use :deep(<inner-selector>) instead.`
+          // )
           const prev = selector.at(selector.index(n) - 1)
           if (prev && isSpaceCombinator(prev)) {
             selector.removeChild(prev)

package/packages/compiler-sfc/test/__snapshots__/compileScript.spec.ts.snap

@@ -20,7 +20,7 @@ exports[`SFC analyze <script> bindings > auto name inference > do not overwrite
 export default /*#__PURE__*/Object.assign(__default__, {
   setup(__props) {
 const a = 1
-return { a, defineComponent }
+return { a }
 }
 
 })"

package/src/core/instance/init.ts

@@ -1,6 +1,6 @@
 import config from '../config'
 import { initProxy } from './proxy'
-import { initState } from './state'
+import { initProps, initState } from './state'
 import { initRender } from './render'
 import { initEvents } from './events'
 import { mark, measure } from '../util/perf'
@@ -10,6 +10,7 @@ import { extend, mergeOptions, formatComponentName } from '../util/index'
 import type { Component } from 'types/component'
 import type { InternalComponentOptions } from 'types/options'
 import { EffectScope } from 'v3/reactivity/effectScope'
+import { initSetup } from '../../v3/apiSetup'
 
 let uid = 0
 
@@ -59,8 +60,12 @@ export function initMixin(Vue: typeof Component) {
     initLifecycle(vm)
     initEvents(vm)
     initRender(vm)
-    callHook(vm, 'beforeCreate', undefined, false /* setContext */)
+
+    const opts = vm.$options
     initInjections(vm) // resolve injections before data/props
+    initProps(vm, opts.props)
+    initSetup(vm)
+    callHook(vm, 'beforeCreate', undefined, false /* setContext */)
     initState(vm)
     initProvide(vm) // resolve provide after data/props
     callHook(vm, 'created')

package/src/core/instance/lifecycle.ts

@@ -83,8 +83,15 @@ export function lifecycleMixin(Vue: typeof Component) {
       vm.$el.__vue__ = vm
     }
     // if parent is an HOC, update its $el as well
-    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
-      vm.$parent.$el = vm.$el
+    let wrapper: Component | undefined = vm
+    while (
+      wrapper &&
+      wrapper.$vnode &&
+      wrapper.$parent &&
+      wrapper.$vnode === wrapper.$parent._vnode
+    ) {
+      wrapper.$parent.$el = wrapper.$el
+      wrapper = wrapper.$parent
     }
     // updated hook is called by the scheduler to ensure that children are
     // updated in a parent's updated hook.

package/src/core/instance/state.ts

@@ -2,7 +2,6 @@ import config from '../config'
 import Watcher from '../observer/watcher'
 import Dep, { pushTarget, popTarget } from '../observer/dep'
 import { isUpdatingChildComponent } from './lifecycle'
-import { initSetup } from 'v3/apiSetup'
 
 import {
   set,
@@ -51,11 +50,6 @@ export function proxy(target: Object, sourceKey: string, key: string) {
 
 export function initState(vm: Component) {
   const opts = vm.$options
-  if (opts.props) initProps(vm, opts.props)
-
-  // Composition API
-  initSetup(vm)
-
   if (opts.methods) initMethods(vm, opts.methods)
   if (opts.data) {
     initData(vm)
@@ -69,7 +63,8 @@ export function initState(vm: Component) {
   }
 }
 
-function initProps(vm: Component, propsOptions: Object) {
+export function initProps(vm: Component, propsOptions: Object | undefined) {
+  if (!propsOptions) return
   const propsData = vm.$options.propsData || {}
   const props = (vm._props = shallowReactive({}))
   // cache prop keys so that future props updates can iterate using Array

package/src/core/observer/dep.ts

@@ -1,9 +1,19 @@
-import { remove } from '../util/index'
 import config from '../config'
 import { DebuggerOptions, DebuggerEventExtraInfo } from 'v3'
 
 let uid = 0
 
+const pendingCleanupDeps: Dep[] = []
+
+export const cleanupDeps = () => {
+  for (let i = 0; i < pendingCleanupDeps.length; i++) {
+    const dep = pendingCleanupDeps[i]
+    dep.subs = dep.subs.filter(s => s)
+    dep._pending = false
+  }
+  pendingCleanupDeps.length = 0
+}
+
 /**
  * @internal
  */
@@ -21,7 +31,9 @@ export interface DepTarget extends DebuggerOptions {
 export default class Dep {
   static target?: DepTarget | null
   id: number
-  subs: Array<DepTarget>
+  subs: Array<DepTarget | null>
+  // pending subs cleanup
+  _pending = false
 
   constructor() {
     this.id = uid++
@@ -33,7 +45,15 @@ export default class Dep {
   }
 
   removeSub(sub: DepTarget) {
-    remove(this.subs, sub)
+    // #12696 deps with massive amount of subscribers are extremely slow to
+    // clean up in Chromium
+    // to workaround this, we unset the sub for now, and clear them on
+    // next scheduler flush.
+    this.subs[this.subs.indexOf(sub)] = null
+    if (!this._pending) {
+      this._pending = true
+      pendingCleanupDeps.push(this)
+    }
   }
 
   depend(info?: DebuggerEventExtraInfo) {
@@ -50,7 +70,7 @@ export default class Dep {
 
   notify(info?: DebuggerEventExtraInfo) {
     // stabilize the subscriber list first
-    const subs = this.subs.slice()
+    const subs = this.subs.filter(s => s) as DepTarget[]
     if (__DEV__ && !config.async) {
       // subs aren't sorted in scheduler if not running async
       // we need to sort them now to make sure they fire in correct
@@ -58,15 +78,15 @@ export default class Dep {
       subs.sort((a, b) => a.id - b.id)
     }
     for (let i = 0, l = subs.length; i < l; i++) {
+      const sub = subs[i]
       if (__DEV__ && info) {
-        const sub = subs[i]
         sub.onTrigger &&
           sub.onTrigger({
             effect: subs[i],
             ...info
           })
       }
-      subs[i].update()
+      sub.update()
     }
   }
 }

package/src/core/observer/index.ts

@@ -7,7 +7,6 @@ import {
   hasOwn,
   isArray,
   hasProto,
-  isObject,
   isPlainObject,
   isPrimitive,
   isUndef,
@@ -17,6 +16,7 @@ import {
   noop
 } from '../util/index'
 import { isReadonly, isRef, TrackOpTypes, TriggerOpTypes } from '../../v3'
+import { rawMap } from '../../v3/reactivity/reactive'
 
 const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
 
@@ -107,22 +107,21 @@ export function observe(
   shallow?: boolean,
   ssrMockReactivity?: boolean
 ): Observer | void {
-  if (!isObject(value) || isRef(value) || value instanceof VNode) {
-    return
+  if (value && hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
+    return value.__ob__
   }
-  let ob: Observer | void
-  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
-    ob = value.__ob__
-  } else if (
+  if (
     shouldObserve &&
     (ssrMockReactivity || !isServerRendering()) &&
     (isArray(value) || isPlainObject(value)) &&
     Object.isExtensible(value) &&
-    !value.__v_skip /* ReactiveFlags.SKIP */
+    !value.__v_skip /* ReactiveFlags.SKIP */ &&
+    !rawMap.has(value) &&
+    !isRef(value) &&
+    !(value instanceof VNode)
   ) {
-    ob = new Observer(value, shallow, ssrMockReactivity)
+    return new Observer(value, shallow, ssrMockReactivity)
   }
-  return ob
 }
 
 /**

package/src/core/observer/scheduler.ts

@@ -1,6 +1,6 @@
 import type Watcher from './watcher'
 import config from '../config'
-import Dep from './dep'
+import Dep, { cleanupDeps } from './dep'
 import { callHook, activateChildComponent } from '../instance/lifecycle'
 
 import { warn, nextTick, devtools, inBrowser, isIE } from '../util/index'
@@ -121,6 +121,7 @@ function flushSchedulerQueue() {
   // call component updated and activated hooks
   callActivatedHooks(activatedQueue)
   callUpdatedHooks(updatedQueue)
+  cleanupDeps()
 
   // devtool hook
   /* istanbul ignore if */

package/src/shared/util.ts

@@ -133,7 +133,13 @@ export const isReservedAttribute = makeMap('key,ref,slot,slot-scope,is')
  * Remove an item from an array.
  */
 export function remove(arr: Array<any>, item: any): Array<any> | void {
-  if (arr.length) {
+  const len = arr.length
+  if (len) {
+    // fast path for the only / last item
+    if (item === arr[len - 1]) {
+      arr.length = len - 1
+      return
+    }
     const index = arr.indexOf(item)
     if (index > -1) {
       return arr.splice(index, 1)

package/src/v3/reactivity/reactive.ts

@@ -5,10 +5,13 @@ import {
   isPrimitive,
   warn,
   toRawType,
-  isServerRendering
+  isServerRendering,
+  isObject
 } from 'core/util'
 import type { Ref, UnwrapRefSimple, RawSymbol } from './ref'
 
+export const rawMap = new WeakMap()
+
 export const enum ReactiveFlags {
   SKIP = '__v_skip',
   IS_READONLY = '__v_isReadonly',
@@ -119,7 +122,9 @@ export function toRaw<T>(observed: T): T {
 export function markRaw<T extends object>(
   value: T
 ): T & { [RawSymbol]?: true } {
-  def(value, ReactiveFlags.SKIP, true)
+  if (isObject(value)) {
+    rawMap.set(value, true)
+  }
   return value
 }
 

package/src/v3/reactivity/readonly.ts

@@ -32,8 +32,8 @@ export type DeepReadonly<T> = T extends Builtin
   ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
   : Readonly<T>
 
-const rawToReadonlyFlag = `__v_rawToReadonly`
-const rawToShallowReadonlyFlag = `__v_rawToShallowReadonly`
+const rawToReadonlyMap = new WeakMap()
+const rawToShallowReadonlyMap = new WeakMap()
 
 export function readonly<T extends object>(
   target: T
@@ -63,14 +63,14 @@ function createReadonly(target: any, shallow: boolean) {
   }
 
   // already has a readonly proxy
-  const existingFlag = shallow ? rawToShallowReadonlyFlag : rawToReadonlyFlag
-  const existingProxy = target[existingFlag]
+  const map = shallow ? rawToShallowReadonlyMap : rawToReadonlyMap
+  const existingProxy = map.get(target)
   if (existingProxy) {
     return existingProxy
   }
 
   const proxy = Object.create(Object.getPrototypeOf(target))
-  def(target, existingFlag, proxy)
+  map.set(target, proxy)
 
   def(proxy, ReactiveFlags.IS_READONLY, true)
   def(proxy, ReactiveFlags.RAW, target)

package/types/options.d.ts

@@ -4,6 +4,7 @@ import { SetupContext } from './v3-setup-context'
 import { DebuggerEvent } from './v3-generated'
 import { DefineComponent } from './v3-define-component'
 import { ComponentOptionsMixin } from './v3-component-options'
+import { ObjectDirective, FunctionDirective } from './v3-directive'
 
 type Constructor = {
   new (...args: any[]): any
@@ -95,8 +96,8 @@ export type ThisTypedComponentOptionsWithArrayProps<
   Computed,
   PropNames extends string,
   SetupBindings,
-  Mixin,
-  Extends
+  Mixin extends ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin
 > = object &
   ComponentOptions<
     V,
@@ -132,8 +133,8 @@ export type ThisTypedComponentOptionsWithRecordProps<
   Computed,
   Props,
   SetupBindings,
-  Mixin,
-  Extends
+  Mixin extends ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin
 > = object &
   ComponentOptions<
     V,
@@ -180,7 +181,7 @@ export interface ComponentOptions<
   propsData?: object
   computed?: Accessors<Computed>
   methods?: Methods
-  watch?: Record<string, WatchOptionsWithHandler<any> | WatchHandler<any>>
+  watch?: Record<string, WatchOptionsWithHandler<any> | WatchHandler<any> | Array<WatchOptionsWithHandler<any> | WatchHandler<any>>>
 
   setup?: (
     this: void,
@@ -318,6 +319,9 @@ export interface DirectiveBinding extends Readonly<VNodeDirective> {
   readonly modifiers: { [key: string]: boolean }
 }
 
+/**
+ * @deprecated use {@link FunctionDirective} instead
+ */
 export type DirectiveFunction = (
   el: HTMLElement,
   binding: DirectiveBinding,
@@ -325,6 +329,9 @@ export type DirectiveFunction = (
   oldVnode: VNode
 ) => void
 
+/**
+ * @deprecated use {@link ObjectDirective} instead
+ */
 export interface DirectiveOptions {
   bind?: DirectiveFunction
   inserted?: DirectiveFunction

package/types/vnode.d.ts

@@ -1,5 +1,7 @@
 import { Vue } from './vue'
 import { DirectiveFunction, DirectiveOptions } from './options'
+import { Ref } from './v3-generated'
+import { ComponentPublicInstance } from './v3-component-public-instance'
 
 /**
  * For extending allowed non-declared props on components in TSX
@@ -65,11 +67,19 @@ export interface VNodeComponentOptions {
   tag?: string
 }
 
+export type VNodeRef =
+  | string
+  | Ref
+  | ((
+      ref: Element | ComponentPublicInstance | null,
+      refs: Record<string, any>
+    ) => void)
+
 export interface VNodeData {
   key?: string | number
   slot?: string
   scopedSlots?: { [key: string]: ScopedSlot | undefined }
-  ref?: string
+  ref?: VNodeRef
   refInFor?: boolean
   tag?: string
   staticClass?: string

package/types/vue.d.ts

@@ -22,6 +22,7 @@ import {
   ExtractComputedReturns,
   ComponentOptionsMixin
 } from './v3-component-options'
+import { Directive, ObjectDirective } from './v3-directive'
 
 export interface CreateElement {
   (
@@ -338,6 +339,10 @@ export interface VueConstructor<V extends Vue = Vue> {
     id: string,
     definition?: DirectiveOptions | DirectiveFunction
   ): DirectiveOptions
+  directive(
+    id: string,
+    definition?: Directive
+  ): ObjectDirective
   filter(id: string, definition?: Function): Function
 
   component(id: string): VueConstructor