Merge branch 'main' into fix/12685

CHANGELOG.md

@@ -1,3 +1,65 @@
+## [2.7.7](https://github.com/vuejs/vue/compare/v2.7.6...v2.7.7) (2022-07-16)
+
+
+### Bug Fixes
+
+* **codegen:** script setup should not attempt to resolve native elements as component ([e8d3a7d](https://github.com/vuejs/vue/commit/e8d3a7d7a17f9e66d592fb1ddc4a603af9958d36)), closes [#12674](https://github.com/vuejs/vue/issues/12674)
+* **inject:** fix edge case of provided with async-mutated getters ([ea5d0f3](https://github.com/vuejs/vue/commit/ea5d0f3fbfd983cb0275457cbcef344f926381ea)), closes [#12667](https://github.com/vuejs/vue/issues/12667)
+* **setup:** ensure setup context slots can be accessed immediately ([67760f8](https://github.com/vuejs/vue/commit/67760f8d30778f58afeada3589d4ac4493329ad5)), closes [#12672](https://github.com/vuejs/vue/issues/12672)
+* **types:** vue.d.ts should use relative import to v3-component-public-instance ([#12668](https://github.com/vuejs/vue/issues/12668)) ([46ec648](https://github.com/vuejs/vue/commit/46ec64869479393f95b6abda7a4adecf19867d06)), closes [#12666](https://github.com/vuejs/vue/issues/12666)
+* **watch:** fix queueing multiple post watchers ([25ffdb6](https://github.com/vuejs/vue/commit/25ffdb62d22fe8688aca144d945671d5c82a8887)), closes [#12664](https://github.com/vuejs/vue/issues/12664)
+
+
+
+## [2.7.6](https://github.com/vuejs/vue/compare/v2.7.5...v2.7.6) (2022-07-15)
+
+
+### Bug Fixes
+
+* **types:** $refs can also contain ComponentPublicInstance ([#12659](https://github.com/vuejs/vue/issues/12659)) ([fffbb9e](https://github.com/vuejs/vue/commit/fffbb9e856de5e4b3053a6b4d01d1404bfb6f85e))
+* **types:** fix $children and $root instance types ([52a5979](https://github.com/vuejs/vue/commit/52a59790a5b6e16c9f8cc737fcd784413dda282d)), closes [#12655](https://github.com/vuejs/vue/issues/12655)
+* **types:** fix missing expose() type on setup context ([e0a9546](https://github.com/vuejs/vue/commit/e0a9546ef32fa4bbfc4bede3002b2d6a5be8cf72)), closes [#12660](https://github.com/vuejs/vue/issues/12660)
+
+
+
+## [2.7.5](https://github.com/vuejs/vue/compare/v2.7.4...v2.7.5) (2022-07-13)
+
+
+### Bug Fixes
+
+* add missing export from `vue.runtime.mjs` ([#12648](https://github.com/vuejs/vue/issues/12648)) ([08fb4a2](https://github.com/vuejs/vue/commit/08fb4a222c016c79af77ab96817d2ed9b7abbd80))
+* detect property add/deletion on reactive objects from setup when used in templates ([a6e7498](https://github.com/vuejs/vue/commit/a6e74985cf2eab6f16d03a8eda3bf3fc7950127c))
+* do not set currentInstance in beforeCreate ([0825d30](https://github.com/vuejs/vue/commit/0825d3087f9f39435838329c16adc2a7bfccd51d)), closes [#12636](https://github.com/vuejs/vue/issues/12636)
+* **reactivity:** fix watch behavior inconsistency + deep ref shallow check ([98fb01c](https://github.com/vuejs/vue/commit/98fb01c79c41c3b9f9134f0abb77d233ce4e5b44)), closes [#12643](https://github.com/vuejs/vue/issues/12643)
+* **sfc:** fix sfc name inference type check ([04b4703](https://github.com/vuejs/vue/commit/04b4703de72b1c1e686a3aa81d5b5b56799dabab)), closes [#12637](https://github.com/vuejs/vue/issues/12637)
+* **types:** support Vue interface augmentations in defineComponent ([005e52d](https://github.com/vuejs/vue/commit/005e52d0b6f1a5bf9679789c5c4b90afd442d86b)), closes [#12642](https://github.com/vuejs/vue/issues/12642)
+* **watch:** fix deep watch for structures containing raw refs ([1a2c3c2](https://github.com/vuejs/vue/commit/1a2c3c2d77ba96ef496f4c86329b7798026511ae)), closes [#12652](https://github.com/vuejs/vue/issues/12652)
+
+
+
+## [2.7.4](https://github.com/vuejs/vue/compare/v2.7.3...v2.7.4) (2022-07-08)
+
+
+### Bug Fixes
+
+* **build:** fix mjs dual package hazard ([012e10c](https://github.com/vuejs/vue/commit/012e10c9ca13fcbc9bf67bf2835883edcd4faace)), closes [#12626](https://github.com/vuejs/vue/issues/12626)
+* **compiler-sfc:** use safer deindent default for compatibility with previous behavior ([b70a258](https://github.com/vuejs/vue/commit/b70a2585fcd102def2bb5a3b2b589edf5311122d))
+* pass element creation helper to static render fns for functional components ([dc8a68e](https://github.com/vuejs/vue/commit/dc8a68e8c6c4e8ed4fdde094004fca272d71ef2e)), closes [#12625](https://github.com/vuejs/vue/issues/12625)
+* **ssr/reactivity:** fix array setting error at created in ssr [[#12632](https://github.com/vuejs/vue/issues/12632)] ([#12633](https://github.com/vuejs/vue/issues/12633)) ([ca7daef](https://github.com/vuejs/vue/commit/ca7daefaa15a192046d22d060220cd595a6a275f))
+* **types:** fix missing instance properties on defineComponent this ([f8de4ca](https://github.com/vuejs/vue/commit/f8de4ca9d458a03378e848b1e62d6507f7124871)), closes [#12628](https://github.com/vuejs/vue/issues/12628#issuecomment-1177258223)
+* **types:** fix this.$slots type for defineComponent ([d3add06](https://github.com/vuejs/vue/commit/d3add06e6e18a78a3745240632fecd076eb49d19))
+* **types:** fix type inference when using components option ([1d5a411](https://github.com/vuejs/vue/commit/1d5a411c1e3aa062aa5080432cf3f852f1583ed2))
+* **types:** global component registration type compat w/ defineComponent ([26ff4bc](https://github.com/vuejs/vue/commit/26ff4bc0ed75d8bf7921523a2e546df24ec81d8f)), closes [#12622](https://github.com/vuejs/vue/issues/12622)
+* **watch:** fix watchers triggered in mounted hook ([8904ca7](https://github.com/vuejs/vue/commit/8904ca77c2d675707728e6a50decd3ef3370a428)), closes [#12624](https://github.com/vuejs/vue/issues/12624)
+
+
+### Features
+
+* defineAsyncComponent ([9d12106](https://github.com/vuejs/vue/commit/9d12106e211e0cbf33f9066606a8ff29f8cc8e8d)), closes [#12608](https://github.com/vuejs/vue/issues/12608)
+* support functional components in defineComponent ([559600f](https://github.com/vuejs/vue/commit/559600f13d312915c0a1b54ed4edd41327dbedd6)), closes [#12619](https://github.com/vuejs/vue/issues/12619)
+
+
+
 ## [2.7.3](https://github.com/vuejs/vue/compare/v2.7.2...v2.7.3) (2022-07-06)
 
 
@@ -94,6 +156,12 @@ In addition, the following features are explicitly **NOT** ported:
 - ❌ Reactivity transform (still experimental)
 - ❌ `expose` option is not supported for options components (but `defineExpose()` is supported in `<script setup>`).
 
+### TypeScript Changes
+
+- `defineComponent` provides improved type inference similar to that of Vue 3. Note the type of `this` inside `defineComponent()` is not interoperable with `this` from `Vue.extend()`.
+
+- Similar to Vue 3, TSX support is now built-in. If your project previously had manual JSX type shims, make sure to remove them.
+
 ## Upgrade Guide
 
 ### Vue CLI / webpack

dist/vue.runtime.mjs

@@ -0,0 +1,76 @@
+import Vue from './vue.runtime.common.js'
+export default Vue
+
+// this should be kept in sync with src/v3/index.ts
+export const {
+  version,
+
+  // refs
+  ref,
+  shallowRef,
+  isRef,
+  toRef,
+  toRefs,
+  unref,
+  proxyRefs,
+  customRef,
+  triggerRef,
+  computed,
+
+  // reactive
+  reactive,
+  isReactive,
+  isReadonly,
+  isShallow,
+  isProxy,
+  shallowReactive,
+  markRaw,
+  toRaw,
+  readonly,
+  shallowReadonly,
+
+  // watch
+  watch,
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+
+  // effectScope
+  effectScope,
+  onScopeDispose,
+  getCurrentScope,
+
+  // provide / inject
+  provide,
+  inject,
+
+  // lifecycle
+  onBeforeMount,
+  onMounted,
+  onBeforeUpdate,
+  onUpdated,
+  onBeforeUnmount,
+  onUnmounted,
+  onErrorCaptured,
+  onActivated,
+  onDeactivated,
+  onServerPrefetch,
+  onRenderTracked,
+  onRenderTriggered,
+
+  // v2 only
+  set,
+  del,
+
+  // v3 compat
+  h,
+  getCurrentInstance,
+  useSlots,
+  useAttrs,
+  mergeDefaults,
+  nextTick,
+  useCssModule,
+  useCssVars,
+  defineComponent,
+  defineAsyncComponent
+} = Vue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "2.7.3",
+  "version": "2.7.7",
   "packageManager": "pnpm@7.1.0",
   "description": "Reactive, component-oriented view layer for modern web interfaces.",
   "main": "dist/vue.runtime.common.js",

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "2.7.3",
+  "version": "2.7.7",
   "description": "compiler-sfc for Vue 2",
   "main": "dist/compiler-sfc.js",
   "types": "dist/compiler-sfc.d.ts",
@@ -29,7 +29,6 @@
     "postcss-selector-parser": "^6.0.10",
     "pug": "^3.0.2",
     "sass": "^1.52.3",
-    "stylus": "^0.58.1",
-    "vue-template-es2015-compiler": "^1.9.1"
+    "stylus": "^0.58.1"
   }
 }

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}`,

packages/compiler-sfc/src/parseComponent.ts

@@ -10,7 +10,6 @@ export const DEFAULT_FILENAME = 'anonymous.vue'
 const splitRE = /\r?\n/g
 const replaceRE = /./g
 const isSpecialTag = makeMap('script,style,template', true)
-const isNeedIndentLang = makeMap('pug,jade')
 
 export interface SFCCustomBlock {
   type: string
@@ -179,9 +178,13 @@ export function parseComponent(
       currentBlock.end = start
       let text = source.slice(currentBlock.start, currentBlock.end)
       if (
-        options.deindent ||
-        // certain langs like pug are indent sensitive, preserve old behavior
-        (currentBlock.lang && isNeedIndentLang(currentBlock.lang))
+        options.deindent === true ||
+        // by default, deindent unless it's script with default lang or ts
+        (options.deindent !== false &&
+          !(
+            currentBlock.type === 'script' &&
+            (!currentBlock.lang || currentBlock.lang === 'ts')
+          ))
       ) {
         text = deindent(text)
       }

packages/compiler-sfc/test/parseComponent.spec.ts

@@ -25,8 +25,7 @@ describe('Single File Component parser', () => {
       <div>
         <style>nested should be ignored</style>
       </div>
-    `,
-      { deindent: true }
+    `
     )
     expect(res.template!.content.trim()).toBe('<div>hi</div>')
     expect(res.styles.length).toBe(4)
@@ -76,8 +75,7 @@ describe('Single File Component parser', () => {
       </style>
     `
     const deindentDefault = parseComponent(content.trim(), {
-      pad: false,
-      deindent: true
+      pad: false
     })
     const deindentEnabled = parseComponent(content.trim(), {
       pad: false,
@@ -89,7 +87,9 @@ describe('Single File Component parser', () => {
     })
 
     expect(deindentDefault.template!.content).toBe('\n<div></div>\n')
-    expect(deindentDefault.script!.content).toBe('\nexport default {}\n')
+    expect(deindentDefault.script!.content).toBe(
+      '\n        export default {}\n      '
+    )
     expect(deindentDefault.styles[0].content).toBe('\nh1 { color: red }\n')
     expect(deindentEnabled.template!.content).toBe('\n<div></div>\n')
     expect(deindentEnabled.script!.content).toBe('\nexport default {}\n')
@@ -203,8 +203,7 @@ describe('Single File Component parser', () => {
       }
       </test>
       <custom src="./x.json"></custom>
-    `,
-      { deindent: true }
+    `
     )
     expect(res.customBlocks.length).toBe(4)
 

packages/server-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-server-renderer",
-  "version": "2.7.3",
+  "version": "2.7.7",
   "description": "server renderer for Vue 2.0",
   "main": "index.js",
   "types": "types/index.d.ts",

packages/server-renderer/test/ssr-reactivity.spec.ts

@@ -93,6 +93,10 @@ describe('SSR Reactive', () => {
 
     set(state.value, 1, {})
     expect(isReactive(state.value[1])).toBe(true)
+
+    const rawArr = []
+    set(rawArr, 1, {})
+    expect(isReactive(rawArr[1])).toBe(false)
   })
 
   // #550

packages/template-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-template-compiler",
-  "version": "2.7.3",
+  "version": "2.7.7",
   "description": "template compiler for Vue 2.0",
   "main": "index.js",
   "unpkg": "browser.js",

scripts/config.js

@@ -71,13 +71,6 @@ const builds = {
     format: 'es',
     banner
   },
-  // Runtime only ES modules build (for Node)
-  'runtime-mjs': {
-    entry: resolve('web/entry-runtime-esm.ts'),
-    dest: resolve('dist/vue.runtime.mjs'),
-    format: 'es',
-    banner
-  },
   // Runtime+compiler ES modules build (for bundlers)
   'full-esm': {
     entry: resolve('web/entry-runtime-with-compiler-esm.ts'),

src/compiler/codegen/index.ts

@@ -95,7 +95,8 @@ 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)
       }
 

src/core/components/keep-alive.ts

@@ -3,6 +3,7 @@ import { getFirstComponentChild } from 'core/vdom/helpers/index'
 import type VNode from 'core/vdom/vnode'
 import type { VNodeComponentOptions } from 'types/vnode'
 import type { Component } from 'types/component'
+import { getComponentName } from '../vdom/create-component'
 
 type CacheEntry = {
   name?: string
@@ -12,8 +13,8 @@ type CacheEntry = {
 
 type CacheEntryMap = Record<string, CacheEntry | null>
 
-function getComponentName(opts?: VNodeComponentOptions): string | null {
-  return opts && (opts.Ctor.options.name || opts.tag)
+function _getComponentName(opts?: VNodeComponentOptions): string | null {
+  return opts && (getComponentName(opts.Ctor.options as any) || opts.tag)
 }
 
 function matches(
@@ -81,7 +82,7 @@ export default {
       if (vnodeToCache) {
         const { tag, componentInstance, componentOptions } = vnodeToCache
         cache[keyToCache] = {
-          name: getComponentName(componentOptions),
+          name: _getComponentName(componentOptions),
           tag,
           componentInstance
         }
@@ -126,7 +127,7 @@ export default {
     const componentOptions = vnode && vnode.componentOptions
     if (componentOptions) {
       // check pattern
-      const name = getComponentName(componentOptions)
+      const name = _getComponentName(componentOptions)
       const { include, exclude } = this
       if (
         // not included

src/core/global-api/extend.ts

@@ -3,6 +3,7 @@ import type { Component } from 'types/component'
 import type { GlobalAPI } from 'types/global-api'
 import { defineComputed, proxy } from '../instance/state'
 import { extend, mergeOptions, validateComponentName } from '../util/index'
+import { getComponentName } from '../vdom/create-component'
 
 export function initExtend(Vue: GlobalAPI) {
   /**
@@ -25,7 +26,8 @@ export function initExtend(Vue: GlobalAPI) {
       return cachedCtors[SuperId]
     }
 
-    const name = extendOptions.name || Super.options.name
+    const name =
+      getComponentName(extendOptions) || getComponentName(Super.options)
     if (__DEV__ && name) {
       validateComponentName(name)
     }

src/core/instance/init.ts

@@ -58,7 +58,7 @@ export function initMixin(Vue: typeof Component) {
     initLifecycle(vm)
     initEvents(vm)
     initRender(vm)
-    callHook(vm, 'beforeCreate')
+    callHook(vm, 'beforeCreate', undefined, false /* setContext */)
     initInjections(vm) // resolve injections before data/props
     initState(vm)
     initProvide(vm) // resolve provide after data/props