From a4098d587b7c2b3b336d5f6700de4d67012850fe Mon Sep 17 00:00:00 2001 From: Wick Date: Sun, 25 Feb 2024 21:08:06 +0800 Subject: [PATCH 01/24] chore(reactivity): consistent variable naming (#10350) --- packages/reactivity/src/baseHandlers.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts index a1b3003a5..7cee7aa9b 100644 --- a/packages/reactivity/src/baseHandlers.ts +++ b/packages/reactivity/src/baseHandlers.ts @@ -89,26 +89,26 @@ function hasOwnProperty(this: object, key: string) { class BaseReactiveHandler implements ProxyHandler { constructor( protected readonly _isReadonly = false, - protected readonly _shallow = false, + protected readonly _isShallow = false, ) {} get(target: Target, key: string | symbol, receiver: object) { const isReadonly = this._isReadonly, - shallow = this._shallow + isShallow = this._isShallow if (key === ReactiveFlags.IS_REACTIVE) { return !isReadonly } else if (key === ReactiveFlags.IS_READONLY) { return isReadonly } else if (key === ReactiveFlags.IS_SHALLOW) { - return shallow + return isShallow } else if (key === ReactiveFlags.RAW) { if ( receiver === (isReadonly - ? shallow + ? isShallow ? shallowReadonlyMap : readonlyMap - : shallow + : isShallow ? shallowReactiveMap : reactiveMap ).get(target) || @@ -143,7 +143,7 @@ class BaseReactiveHandler implements ProxyHandler { track(target, TrackOpTypes.GET, key) } - if (shallow) { + if (isShallow) { return res } @@ -164,8 +164,8 @@ class BaseReactiveHandler implements ProxyHandler { } class MutableReactiveHandler extends BaseReactiveHandler { - constructor(shallow = false) { - super(false, shallow) + constructor(isShallow = false) { + super(false, isShallow) } set( @@ -175,7 +175,7 @@ class MutableReactiveHandler extends BaseReactiveHandler { receiver: object, ): boolean { let oldValue = (target as any)[key] - if (!this._shallow) { + if (!this._isShallow) { const isOldValueReadonly = isReadonly(oldValue) if (!isShallow(value) && !isReadonly(value)) { oldValue = toRaw(oldValue) @@ -237,8 +237,8 @@ class MutableReactiveHandler extends BaseReactiveHandler { } class ReadonlyReactiveHandler extends BaseReactiveHandler { - constructor(shallow = false) { - super(true, shallow) + constructor(isShallow = false) { + super(true, isShallow) } set(target: object, key: string | symbol) { From eadce5b75356656fd2209ebdb406d34823c961b7 Mon Sep 17 00:00:00 2001 From: Shean de Montigny-Desautels Date: Sun, 25 Feb 2024 08:10:08 -0500 Subject: [PATCH 02/24] fix(types): better typing for direct setup signature of defineComponent (#10357) close #8604 close #8855 --- .../runtime-core/src/apiDefineComponent.ts | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts index 47bcf9f2a..d63bd8314 100644 --- a/packages/runtime-core/src/apiDefineComponent.ts +++ b/packages/runtime-core/src/apiDefineComponent.ts @@ -89,6 +89,30 @@ export type DefineComponent< > & PP +type DirectSetupComponent< + P extends Record, + E extends EmitsOptions = {}, + S extends SlotsType = SlotsType, + Props = P & EmitsToProps, + PP = PublicProps, +> = new ( + props: Props & PP, +) => CreateComponentPublicInstance< + Props, + {}, + {}, + {}, + {}, + ComponentOptionsMixin, + ComponentOptionsMixin, + E, + PP, + {}, + false, + {}, + S +> + // defineComponent is a utility that is primarily used for type inference // when declaring components. Type inference is provided in the component // options (provided as the argument). The returned value has artificial types @@ -111,7 +135,7 @@ export function defineComponent< emits?: E | EE[] slots?: S }, -): (props: Props & EmitsToProps) => any +): DirectSetupComponent export function defineComponent< Props extends Record, E extends EmitsOptions = {}, @@ -127,7 +151,7 @@ export function defineComponent< emits?: E | EE[] slots?: S }, -): (props: Props & EmitsToProps) => any +): DirectSetupComponent // overload 2: object format with no props // (uses user defined props interface) From ede2e3f030cd61c3ed0051ea51b26a6aff83ab94 Mon Sep 17 00:00:00 2001 From: Wick Date: Sun, 25 Feb 2024 21:11:04 +0800 Subject: [PATCH 03/24] test: remove unnecessary code in apiCreateApp tests (#10388) --- .../runtime-core/__tests__/apiCreateApp.spec.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/runtime-core/__tests__/apiCreateApp.spec.ts b/packages/runtime-core/__tests__/apiCreateApp.spec.ts index 05e51e43b..f63863397 100644 --- a/packages/runtime-core/__tests__/apiCreateApp.spec.ts +++ b/packages/runtime-core/__tests__/apiCreateApp.spec.ts @@ -143,10 +143,10 @@ describe('api: createApp', () => { }, setup() { // resolve in setup - const FooBar = resolveComponent('foo-bar') as any + const FooBar = resolveComponent('foo-bar') return () => { // resolve in render - const BarBaz = resolveComponent('bar-baz') as any + const BarBaz = resolveComponent('bar-baz') return h('div', [h(FooBar), h(BarBaz)]) } }, @@ -182,10 +182,10 @@ describe('api: createApp', () => { }, setup() { // resolve in setup - const FooBar = resolveDirective('foo-bar')! + const FooBar = resolveDirective('foo-bar') return () => { // resolve in render - const BarBaz = resolveDirective('bar-baz')! + const BarBaz = resolveDirective('bar-baz') return withDirectives(h('div'), [[FooBar], [BarBaz]]) } }, @@ -350,7 +350,7 @@ describe('api: createApp', () => { const handler = vi.fn((err, instance, info) => { expect(err).toBe(error) - expect((instance as any).count).toBe(count.value) + expect(instance.count).toBe(count.value) expect(info).toBe(`render function`) }) @@ -450,11 +450,6 @@ describe('api: createApp', () => { } const app = createApp(Root) - Object.defineProperty(app.config, 'isNativeTag', { - value: isNativeTag, - writable: false, - }) - app.mount(nodeOps.createElement('div')) expect( `Do not use built-in directive ids as custom directive id: bind`, From edbbb6da1216f4de8f219ba81d4ac186ba139387 Mon Sep 17 00:00:00 2001 From: Elodie Hill <34654733+royalknight56@users.noreply.github.com> Date: Sun, 25 Feb 2024 21:14:46 +0800 Subject: [PATCH 04/24] refactor(transition): remove unused getTransitionKey logic (#10283) --- .../src/components/BaseTransition.ts | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts index 20da25848..e99fe0e49 100644 --- a/packages/runtime-core/src/components/BaseTransition.ts +++ b/packages/runtime-core/src/components/BaseTransition.ts @@ -144,8 +144,6 @@ const BaseTransitionImpl: ComponentOptions = { const instance = getCurrentInstance()! const state = useTransitionState() - let prevTransitionKey: any - return () => { const children = slots.default && getTransitionRawChildren(slots.default(), true) @@ -211,23 +209,11 @@ const BaseTransitionImpl: ComponentOptions = { const oldChild = instance.subTree const oldInnerChild = oldChild && getKeepAliveChild(oldChild) - let transitionKeyChanged = false - const { getTransitionKey } = innerChild.type as any - if (getTransitionKey) { - const key = getTransitionKey() - if (prevTransitionKey === undefined) { - prevTransitionKey = key - } else if (key !== prevTransitionKey) { - prevTransitionKey = key - transitionKeyChanged = true - } - } - // handle mode if ( oldInnerChild && oldInnerChild.type !== Comment && - (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged) + !isSameVNodeType(innerChild, oldInnerChild) ) { const leavingHooks = resolveTransitionHooks( oldInnerChild, From c6defc8df12d2ac17d89a4309f893ffdca6a2bdf Mon Sep 17 00:00:00 2001 From: Evan You Date: Sun, 25 Feb 2024 21:50:35 +0800 Subject: [PATCH 05/24] chore: remove unused ts-expect-error --- packages/runtime-core/__tests__/apiOptions.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/runtime-core/__tests__/apiOptions.spec.ts b/packages/runtime-core/__tests__/apiOptions.spec.ts index 521b359e2..1d4e805ef 100644 --- a/packages/runtime-core/__tests__/apiOptions.spec.ts +++ b/packages/runtime-core/__tests__/apiOptions.spec.ts @@ -790,10 +790,8 @@ describe('api: options', () => { data() {}, } defineComponent({ - // @ts-expect-error edge case after #7963, unlikely to happen in practice // since the user will want to type the mixins themselves. mixins: [defineComponent(MixinA), defineComponent(MixinB)], - // @ts-expect-error data() {}, }) }) From 9a365fe00d0fde592dfc4d267f9619cc1b28926d Mon Sep 17 00:00:00 2001 From: Evan You Date: Sun, 25 Feb 2024 21:50:47 +0800 Subject: [PATCH 06/24] refactor: use more descriptive name for v-show original display key --- packages/runtime-core/__tests__/hydration.spec.ts | 4 ++-- packages/runtime-dom/src/directives/vShow.ts | 11 ++++++----- packages/runtime-dom/src/modules/style.ts | 6 +++--- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index da00d7635..6caa2442e 100644 --- a/packages/runtime-core/__tests__/hydration.spec.ts +++ b/packages/runtime-core/__tests__/hydration.spec.ts @@ -26,7 +26,7 @@ import { } from '@vue/runtime-dom' import { type SSRContext, renderToString } from '@vue/server-renderer' import { PatchFlags } from '@vue/shared' -import { vShowOldKey } from '../../runtime-dom/src/directives/vShow' +import { vShowOriginalDisplay } from '../../runtime-dom/src/directives/vShow' function mountWithHydration(html: string, render: () => any) { const container = document.createElement('div') @@ -1252,7 +1252,7 @@ describe('SSR hydration', () => { foo `) - expect((container.firstChild as any)[vShowOldKey]).toBe('') + expect((container.firstChild as any)[vShowOriginalDisplay]).toBe('') expect(vnode.el).toBe(container.firstChild) expect(`mismatch`).not.toHaveBeenWarned() }) diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts index 4bf6779ed..5bf48b277 100644 --- a/packages/runtime-dom/src/directives/vShow.ts +++ b/packages/runtime-dom/src/directives/vShow.ts @@ -1,15 +1,16 @@ import type { ObjectDirective } from '@vue/runtime-core' -export const vShowOldKey = Symbol('_vod') +export const vShowOriginalDisplay = Symbol('_vod') interface VShowElement extends HTMLElement { // _vod = vue original display - [vShowOldKey]: string + [vShowOriginalDisplay]: string } export const vShow: ObjectDirective & { name?: 'show' } = { beforeMount(el, { value }, { transition }) { - el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display + el[vShowOriginalDisplay] = + el.style.display === 'none' ? '' : el.style.display if (transition && value) { transition.beforeEnter(el) } else { @@ -24,7 +25,7 @@ export const vShow: ObjectDirective & { name?: 'show' } = { updated(el, { value, oldValue }, { transition }) { if ( !value === !oldValue && - (el.style.display === el[vShowOldKey] || !value) + (el.style.display === el[vShowOriginalDisplay] || !value) ) return if (transition) { @@ -51,7 +52,7 @@ if (__DEV__) { } function setDisplay(el: VShowElement, value: unknown): void { - el.style.display = value ? el[vShowOldKey] : 'none' + el.style.display = value ? el[vShowOriginalDisplay] : 'none' } // SSR vnode transforms, only used when user includes client-oriented render diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts index 11f7ce1c0..1f45966c3 100644 --- a/packages/runtime-dom/src/modules/style.ts +++ b/packages/runtime-dom/src/modules/style.ts @@ -1,6 +1,6 @@ import { capitalize, hyphenate, isArray, isString } from '@vue/shared' import { camelize, warn } from '@vue/runtime-core' -import { vShowOldKey } from '../directives/vShow' +import { vShowOriginalDisplay } from '../directives/vShow' import { CSS_VAR_TEXT } from '../helpers/useCssVars' type Style = string | Record | null @@ -53,8 +53,8 @@ export function patchStyle(el: Element, prev: Style, next: Style) { // indicates that the `display` of the element is controlled by `v-show`, // so we always keep the current `display` value regardless of the `style` // value, thus handing over control to `v-show`. - if (vShowOldKey in el) { - el[vShowOldKey] = hasControlledDisplay ? style.display : '' + if (vShowOriginalDisplay in el) { + el[vShowOriginalDisplay] = hasControlledDisplay ? style.display : '' style.display = currentDisplay } } From e0e02535cdea1aeb1cfaff0d61d4b2555e555c36 Mon Sep 17 00:00:00 2001 From: Evan You Date: Sun, 25 Feb 2024 23:04:26 +0800 Subject: [PATCH 07/24] fix(parser): should not treat uppercase components as special tags close #10395 --- packages/compiler-core/src/tokenizer.ts | 15 ++++++--------- packages/compiler-dom/__tests__/parse.spec.ts | 16 +++++++++++++++- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/compiler-core/src/tokenizer.ts b/packages/compiler-core/src/tokenizer.ts index c63ec6bfb..561a84b5f 100644 --- a/packages/compiler-core/src/tokenizer.ts +++ b/packages/compiler-core/src/tokenizer.ts @@ -553,12 +553,11 @@ export default class Tokenizer { // HTML mode // -