From d189b4beaa90b9fe58fd3f66ba9e09d340755196 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 1 Sep 2022 14:30:09 +0800 Subject: [PATCH 01/15] chore: special sponsor [ci skip] --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 5eef53d3fa0..cfaef3e361e 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,16 @@ You are looking at the repository for Vue 2. The repo for Vue 3 is [vuejs/core]( Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome [backers](https://github.com/vuejs/core/blob/main/BACKERS.md). If you'd like to join them, please consider [ sponsor Vue's development](https://vuejs.org/sponsor/). +

+

Special Sponsor

+

+ +

+ + special sponsor appwrite + +

+

sponsors From 60d268c4261a0b9c5125f308468b31996a8145ad Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 1 Sep 2022 14:31:31 +0800 Subject: [PATCH 02/15] chore: cache bust svg [ci skip] --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cfaef3e361e..bca41a49405 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ Vue.js is an MIT-licensed open source project with its ongoing development made

- sponsors + sponsors

From 2f335b2f9d09b962f40e38740826d444e4fff073 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 11 Oct 2022 11:41:31 +0800 Subject: [PATCH 03/15] fix(sfc): remove sfc scoped deep syntax deprecation warnings --- .../compiler-sfc/src/stylePlugins/scoped.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/compiler-sfc/src/stylePlugins/scoped.ts b/packages/compiler-sfc/src/stylePlugins/scoped.ts index 25332731ef6..55f17c386f3 100644 --- a/packages/compiler-sfc/src/stylePlugins/scoped.ts +++ b/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() instead.` - ) + // warn( + // `::v-deep usage as a combinator has ` + + // `been deprecated. Use :deep() instead.` + // ) const prev = selector.at(selector.index(n) - 1) if (prev && isSpaceCombinator(prev)) { selector.removeChild(prev) From 27eed829ccf9978a63b8cd989ff4c03897276bc2 Mon Sep 17 00:00:00 2001 From: ZHAO Jinxiang Date: Mon, 10 Oct 2022 20:51:05 -0700 Subject: [PATCH 04/15] fix(types): vue 3 directive type compatibility (#12792) --- types/options.d.ts | 7 +++++++ types/vue.d.ts | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/types/options.d.ts b/types/options.d.ts index 9fcdaca624f..93379edbef2 100644 --- a/types/options.d.ts +++ b/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 @@ -318,6 +319,9 @@ export interface DirectiveBinding extends Readonly { 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 diff --git a/types/vue.d.ts b/types/vue.d.ts index 5a2027a0179..f158cf01716 100644 --- a/types/vue.d.ts +++ b/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 { id: string, definition?: DirectiveOptions | DirectiveFunction ): DirectiveOptions + directive( + id: string, + definition?: Directive + ): ObjectDirective filter(id: string, definition?: Function): Function component(id: string): VueConstructor From 4a0d88e46e4180edc7f22e36c25df3f8ac5d60d2 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 11 Oct 2022 12:26:19 +0800 Subject: [PATCH 05/15] fix(reactivity): use WeakMap for proxy/raw checks, compat with non-extensible objects fix #12799 close #12798 --- src/core/observer/index.ts | 4 +++- src/v3/reactivity/reactive.ts | 9 +++++++-- src/v3/reactivity/readonly.ts | 10 +++++----- test/unit/features/v3/reactivity/reactive.spec.ts | 6 ++++++ test/unit/features/v3/reactivity/readonly.spec.ts | 7 +++++++ 5 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/core/observer/index.ts b/src/core/observer/index.ts index 3770c489a9f..dcf6bde1e76 100644 --- a/src/core/observer/index.ts +++ b/src/core/observer/index.ts @@ -17,6 +17,7 @@ import { noop } from '../util/index' import { isReadonly, isRef, TrackOpTypes, TriggerOpTypes } from '../../v3' +import { rawMap } from '../../v3/reactivity/reactive' const arrayKeys = Object.getOwnPropertyNames(arrayMethods) @@ -118,7 +119,8 @@ export function observe( (ssrMockReactivity || !isServerRendering()) && (isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && - !value.__v_skip /* ReactiveFlags.SKIP */ + !value.__v_skip /* ReactiveFlags.SKIP */ && + !rawMap.has(value) ) { ob = new Observer(value, shallow, ssrMockReactivity) } diff --git a/src/v3/reactivity/reactive.ts b/src/v3/reactivity/reactive.ts index 0ff682243a2..c65f25e67d8 100644 --- a/src/v3/reactivity/reactive.ts +++ b/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(observed: T): T { export function markRaw( value: T ): T & { [RawSymbol]?: true } { - def(value, ReactiveFlags.SKIP, true) + if (isObject(value)) { + rawMap.set(value, true) + } return value } diff --git a/src/v3/reactivity/readonly.ts b/src/v3/reactivity/readonly.ts index 933f910b69f..c3794bb53b3 100644 --- a/src/v3/reactivity/readonly.ts +++ b/src/v3/reactivity/readonly.ts @@ -32,8 +32,8 @@ export type DeepReadonly = T extends Builtin ? { readonly [K in keyof T]: DeepReadonly } : Readonly -const rawToReadonlyFlag = `__v_rawToReadonly` -const rawToShallowReadonlyFlag = `__v_rawToShallowReadonly` +const rawToReadonlyMap = new WeakMap() +const rawToShallowReadonlyMap = new WeakMap() export function readonly( 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) diff --git a/test/unit/features/v3/reactivity/reactive.spec.ts b/test/unit/features/v3/reactivity/reactive.spec.ts index f636d44d4a1..a8a30e0353c 100644 --- a/test/unit/features/v3/reactivity/reactive.spec.ts +++ b/test/unit/features/v3/reactivity/reactive.spec.ts @@ -258,6 +258,12 @@ describe('reactivity/reactive', () => { expect(isReactive(obj.bar)).toBe(false) }) + test('markRaw on non-extensible objects', () => { + const foo = Object.freeze({}) + markRaw(foo) + expect(isReactive(reactive(foo))).toBe(false) + }) + test('should not observe non-extensible objects', () => { const obj = reactive({ foo: Object.preventExtensions({ a: 1 }), diff --git a/test/unit/features/v3/reactivity/readonly.spec.ts b/test/unit/features/v3/reactivity/readonly.spec.ts index 012e142d451..fab99bbfbcb 100644 --- a/test/unit/features/v3/reactivity/readonly.spec.ts +++ b/test/unit/features/v3/reactivity/readonly.spec.ts @@ -525,4 +525,11 @@ describe('reactivity/readonly', () => { expect(readonlyFoo.x).toBe(1) expect(`et operation on key "x" failed`).toHaveBeenWarned() }) + + test('compatibility with non-extensible objects', () => { + const foo = Object.freeze({ a: 1 }) + const bar = readonly(foo) + expect(isReadonly(bar)).toBe(true) + expect(readonly(foo)).toBe(bar) + }) }) From 5d26f815c643d41e6ca6f29329593223b981fc24 Mon Sep 17 00:00:00 2001 From: Xiersa Date: Tue, 11 Oct 2022 13:26:20 +0800 Subject: [PATCH 06/15] fix(reactivity): check skip first before checking ref when creating observer (#12813) fix #12812 --- src/core/observer/index.ts | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/core/observer/index.ts b/src/core/observer/index.ts index dcf6bde1e76..51f928c5c24 100644 --- a/src/core/observer/index.ts +++ b/src/core/observer/index.ts @@ -7,7 +7,6 @@ import { hasOwn, isArray, hasProto, - isObject, isPlainObject, isPrimitive, isUndef, @@ -108,23 +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 */ && - !rawMap.has(value) + !rawMap.has(value) && + !isRef(value) && + !(value instanceof VNode) ) { - ob = new Observer(value, shallow, ssrMockReactivity) + return new Observer(value, shallow, ssrMockReactivity) } - return ob } /** From 87f69aa26f195390b948fbb0ff62cf954b58c82c Mon Sep 17 00:00:00 2001 From: Shiluo34 Date: Tue, 11 Oct 2022 13:36:50 +0800 Subject: [PATCH 07/15] fix(types): support Ref and function types in tsx ref attribute (#12759) fix #12758 --- types/test/v3/tsx-test.tsx | 7 ++++++- types/vnode.d.ts | 12 +++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/types/test/v3/tsx-test.tsx b/types/test/v3/tsx-test.tsx index 16a767acc5a..286c16997a0 100644 --- a/types/test/v3/tsx-test.tsx +++ b/types/test/v3/tsx-test.tsx @@ -1,4 +1,4 @@ -import { VNode, defineComponent } from '../../index' +import { VNode, defineComponent, ref } from '../../index' import { expectType } from '../utils' expectType(
) @@ -22,6 +22,11 @@ expectError(
) expectType(
) expectType(
) +// allow Ref type type on arbitrary element +const fooRef = ref() +expectType(
) +expectType(
{fooRef.value = el as HTMLElement}} />) + expectType( { diff --git a/types/vnode.d.ts b/types/vnode.d.ts index 7a543f0a39b..29bdb398c1c 100644 --- a/types/vnode.d.ts +++ b/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 + ) => void) + export interface VNodeData { key?: string | number slot?: string scopedSlots?: { [key: string]: ScopedSlot | undefined } - ref?: string + ref?: VNodeRef refInFor?: boolean tag?: string staticClass?: string From fb1393009660b38046b1f6dfb532b481cc53b3b7 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 11 Oct 2022 14:09:10 +0800 Subject: [PATCH 08/15] fix(sfc): prune returned bindings for non-TS as well In Vue 3, pruning is only done for TS to produce valid code and tree-shaking is done by inlining the template for production. In Vue 2 we do not inline the template in production, so return binding pruning is needed in all cases. fix #12765 --- packages/compiler-sfc/src/compileScript.ts | 36 +++++++++---------- .../__snapshots__/compileScript.spec.ts.snap | 2 +- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index 094120c38f7..7d171a9b78a 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/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] = { @@ -1782,7 +1780,7 @@ function getObjectOrArrayExpressionKeys(value: Node): string[] { const templateUsageCheckCache = new LRU(512) -function resolveTemplateUsageCheckString(sfc: SFCDescriptor) { +function resolveTemplateUsageCheckString(sfc: SFCDescriptor, isTS: boolean) { const { content } = sfc.template! const cached = templateUsageCheckCache.get(content) if (cached) { @@ -1809,7 +1807,7 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) { code += `,v${capitalize(camelize(baseName))}` } if (value) { - code += `,${processExp(value, baseName)}` + code += `,${processExp(value, isTS, baseName)}` } } } @@ -1817,7 +1815,7 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) { chars(text) { const res = parseText(text) if (res) { - code += `,${processExp(res.expression)}` + code += `,${processExp(res.expression, isTS)}` } } }) @@ -1829,8 +1827,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 +1837,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 +1865,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