From 8af1d9d45f5183e8db553ff05b897c85de2222ef Mon Sep 17 00:00:00 2001 From: ktsn Date: Thu, 12 Mar 2020 00:51:39 +0800 Subject: [PATCH 1/2] feat(runtime-core): add special property to get class component options --- packages/runtime-core/__tests__/vnode.spec.ts | 9 +++++++++ packages/runtime-core/src/component.ts | 7 ++++++- packages/runtime-core/src/h.ts | 2 +- packages/runtime-core/src/vnode.ts | 12 +++++++++--- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts index 8895938182f..8e6d85a72c7 100644 --- a/packages/runtime-core/__tests__/vnode.spec.ts +++ b/packages/runtime-core/__tests__/vnode.spec.ts @@ -46,6 +46,15 @@ describe('vnode', () => { } }) + test('create with class component', () => { + class Component { + $props: any + static __vueClassComponentOptions = { template: '
' } + } + const vnode = createVNode(Component) + expect(vnode.type).toEqual(Component.__vueClassComponentOptions) + }) + describe('class normalization', () => { test('string', () => { const vnode = createVNode('p', { class: 'foo baz' }) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 05112c70f74..0d479d045ea 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -58,13 +58,18 @@ export interface FunctionalComponent

extends SFCInternalOptions { displayName?: string } +export interface ClassComponent { + new (...args: any[]): ComponentPublicInstance + __vueClassComponentOptions: ComponentOptions +} + export type Component = ComponentOptions | FunctionalComponent // A type used in public APIs where a component type is expected. // The constructor type is an artificial type returned by defineComponent(). export type PublicAPIComponent = | Component - | { new (): ComponentPublicInstance } + | { new (...args: any[]): ComponentPublicInstance } export { ComponentOptions } diff --git a/packages/runtime-core/src/h.ts b/packages/runtime-core/src/h.ts index 30cb7a90fc5..e6f07fb1f1f 100644 --- a/packages/runtime-core/src/h.ts +++ b/packages/runtime-core/src/h.ts @@ -130,7 +130,7 @@ export function h( children?: RawChildren | RawSlots ): VNode -// fake constructor type returned by `defineComponent` +// fake constructor type returned by `defineComponent` or class component export function h(type: Constructor, children?: RawChildren): VNode export function h

( type: Constructor

, diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index 46089491191..0703c013fa6 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -14,7 +14,8 @@ import { ComponentInternalInstance, Data, SetupProxySymbol, - Component + Component, + ClassComponent } from './component' import { RawSlots } from './componentSlots' import { isReactive, Ref } from '@vue/reactivity' @@ -162,7 +163,7 @@ export function setBlockTracking(value: number) { // A block root keeps track of dynamic nodes within the block in the // `dynamicChildren` array. export function createBlock( - type: VNodeTypes, + type: VNodeTypes | ClassComponent, props?: { [key: string]: any } | null, children?: any, patchFlag?: number, @@ -203,7 +204,7 @@ export function isSameVNodeType(n1: VNode, n2: VNode): boolean { } export function createVNode( - type: VNodeTypes, + type: VNodeTypes | ClassComponent, props: (Data & VNodeProps) | null = null, children: unknown = null, patchFlag: number = 0, @@ -214,6 +215,11 @@ export function createVNode( type = Comment } + // class component normalization. + if (isFunction(type) && '__vueClassComponentOptions' in type) { + type = type.__vueClassComponentOptions + } + // class & style normalization. if (props !== null) { // for reactive or proxy objects, we need to clone it to enable mutation. From ae3cf2a38e14e8d7c28f46e310718f90423f620d Mon Sep 17 00:00:00 2001 From: ktsn Date: Thu, 12 Mar 2020 09:16:20 +0800 Subject: [PATCH 2/2] feat(runtime-core): use shorter key name for class component options --- packages/runtime-core/__tests__/vnode.spec.ts | 4 ++-- packages/runtime-core/src/component.ts | 2 +- packages/runtime-core/src/vnode.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts index 8e6d85a72c7..040e2f6bb21 100644 --- a/packages/runtime-core/__tests__/vnode.spec.ts +++ b/packages/runtime-core/__tests__/vnode.spec.ts @@ -49,10 +49,10 @@ describe('vnode', () => { test('create with class component', () => { class Component { $props: any - static __vueClassComponentOptions = { template: '

' } + static __vccOpts = { template: '
' } } const vnode = createVNode(Component) - expect(vnode.type).toEqual(Component.__vueClassComponentOptions) + expect(vnode.type).toEqual(Component.__vccOpts) }) describe('class normalization', () => { diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 0d479d045ea..94967d2760c 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -60,7 +60,7 @@ export interface FunctionalComponent

extends SFCInternalOptions { export interface ClassComponent { new (...args: any[]): ComponentPublicInstance - __vueClassComponentOptions: ComponentOptions + __vccOpts: ComponentOptions } export type Component = ComponentOptions | FunctionalComponent diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index 0703c013fa6..747c5a4e2ae 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -216,8 +216,8 @@ export function createVNode( } // class component normalization. - if (isFunction(type) && '__vueClassComponentOptions' in type) { - type = type.__vueClassComponentOptions + if (isFunction(type) && '__vccOpts' in type) { + type = type.__vccOpts } // class & style normalization.