From 1c4cdd841daa2ba9c1ec35068c92f1ae776cacea Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Sun, 22 Dec 2019 10:58:12 -0500 Subject: [PATCH] refactor(createComponent): rename to defineComponent (#549) --- .../runtime-core/__tests__/apiOptions.spec.ts | 10 ++++----- .../__tests__/apiSetupContext.spec.ts | 10 ++++----- .../__tests__/apiTemplateRef.spec.ts | 8 +++---- .../__tests__/errorHandling.spec.ts | 4 ++-- .../rendererAttrsFallthrough.spec.ts | 14 ++++++------ .../__tests__/rendererPortal.spec.ts | 8 +++---- ...eateComponent.ts => apiDefineComponent.ts} | 12 +++++----- packages/runtime-core/src/apiOptions.ts | 2 +- packages/runtime-core/src/component.ts | 2 +- packages/runtime-core/src/h.ts | 4 ++-- packages/runtime-core/src/index.ts | 2 +- packages/runtime-core/src/renderer.ts | 4 ++-- .../__tests__/directives/vModel.spec.ts | 22 +++++++++---------- .../__tests__/directives/vShow.spec.ts | 10 ++++----- .../__tests__/modules/class.spec.ts | 8 +++---- ....test-d.tsx => defineComponent.test-d.tsx} | 12 +++++----- test-dts/h.test-d.ts | 14 ++++++------ test-dts/tsx.test-d.tsx | 2 +- 18 files changed, 74 insertions(+), 74 deletions(-) rename packages/runtime-core/src/{apiCreateComponent.ts => apiDefineComponent.ts} (90%) rename test-dts/{createComponent.test-d.tsx => defineComponent.test-d.tsx} (95%) diff --git a/packages/runtime-core/__tests__/apiOptions.spec.ts b/packages/runtime-core/__tests__/apiOptions.spec.ts index a63d3a66f..8a0199e3f 100644 --- a/packages/runtime-core/__tests__/apiOptions.spec.ts +++ b/packages/runtime-core/__tests__/apiOptions.spec.ts @@ -8,13 +8,13 @@ import { nextTick, renderToString, ref, - createComponent, + defineComponent, mockWarn } from '@vue/runtime-test' describe('api: options', () => { test('data', async () => { - const Comp = createComponent({ + const Comp = defineComponent({ data() { return { foo: 1 @@ -42,7 +42,7 @@ describe('api: options', () => { }) test('computed', async () => { - const Comp = createComponent({ + const Comp = defineComponent({ data() { return { foo: 1 @@ -78,7 +78,7 @@ describe('api: options', () => { }) test('methods', async () => { - const Comp = createComponent({ + const Comp = defineComponent({ data() { return { foo: 1 @@ -536,7 +536,7 @@ describe('api: options', () => { }) test('accessing setup() state from options', async () => { - const Comp = createComponent({ + const Comp = defineComponent({ setup() { return { count: ref(0) diff --git a/packages/runtime-core/__tests__/apiSetupContext.spec.ts b/packages/runtime-core/__tests__/apiSetupContext.spec.ts index b9876870a..bc3c20650 100644 --- a/packages/runtime-core/__tests__/apiSetupContext.spec.ts +++ b/packages/runtime-core/__tests__/apiSetupContext.spec.ts @@ -7,7 +7,7 @@ import { serializeInner, nextTick, watch, - createComponent, + defineComponent, triggerEvent, TestElement } from '@vue/runtime-test' @@ -16,7 +16,7 @@ import { describe('api: setup context', () => { it('should expose return values to template render context', () => { - const Comp = createComponent({ + const Comp = defineComponent({ setup() { return { // ref should auto-unwrap @@ -53,7 +53,7 @@ describe('api: setup context', () => { render: () => h(Child, { count: count.value }) } - const Child = createComponent({ + const Child = defineComponent({ setup(props: { count: number }) { watch(() => { dummy = props.count @@ -82,7 +82,7 @@ describe('api: setup context', () => { render: () => h(Child, { count: count.value }) } - const Child = createComponent({ + const Child = defineComponent({ props: { count: Number }, @@ -177,7 +177,7 @@ describe('api: setup context', () => { }) } - const Child = createComponent({ + const Child = defineComponent({ props: { count: { type: Number, diff --git a/packages/runtime-core/__tests__/apiTemplateRef.spec.ts b/packages/runtime-core/__tests__/apiTemplateRef.spec.ts index d164d4571..8ff6b2c59 100644 --- a/packages/runtime-core/__tests__/apiTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/apiTemplateRef.spec.ts @@ -5,7 +5,7 @@ import { render, nextTick, Ref, - createComponent + defineComponent } from '@vue/runtime-test' // reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs @@ -83,7 +83,7 @@ describe('api: template refs', () => { const root = nodeOps.createElement('div') const fn = jest.fn() - const Comp = createComponent(() => () => h('div', { ref: fn })) + const Comp = defineComponent(() => () => h('div', { ref: fn })) render(h(Comp), root) expect(fn.mock.calls[0][0]).toBe(root.children[0]) }) @@ -94,7 +94,7 @@ describe('api: template refs', () => { const fn2 = jest.fn() const fn = ref(fn1) - const Comp = createComponent(() => () => h('div', { ref: fn.value })) + const Comp = defineComponent(() => () => h('div', { ref: fn.value })) render(h(Comp), root) expect(fn1.mock.calls).toHaveLength(1) @@ -113,7 +113,7 @@ describe('api: template refs', () => { const fn = jest.fn() const toggle = ref(true) - const Comp = createComponent(() => () => + const Comp = defineComponent(() => () => toggle.value ? h('div', { ref: fn }) : null ) render(h(Comp), root) diff --git a/packages/runtime-core/__tests__/errorHandling.spec.ts b/packages/runtime-core/__tests__/errorHandling.spec.ts index 77ddc8dcf..39aebe43c 100644 --- a/packages/runtime-core/__tests__/errorHandling.spec.ts +++ b/packages/runtime-core/__tests__/errorHandling.spec.ts @@ -8,7 +8,7 @@ import { ref, nextTick, mockWarn, - createComponent + defineComponent } from '@vue/runtime-test' import { setErrorRecovery } from '../src/errorHandling' @@ -235,7 +235,7 @@ describe('error handling', () => { } } - const Child = createComponent(() => () => h('div', { ref })) + const Child = defineComponent(() => () => h('div', { ref })) render(h(Comp), nodeOps.createElement('div')) expect(fn).toHaveBeenCalledWith(err, 'ref function') diff --git a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts index dfbf5d595..9e7b498bc 100644 --- a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts +++ b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts @@ -6,7 +6,7 @@ import { mergeProps, ref, onUpdated, - createComponent + defineComponent } from '@vue/runtime-dom' import { mockWarn } from '@vue/runtime-test' @@ -102,7 +102,7 @@ describe('attribute fallthrough', () => { } } - const Child = createComponent({ + const Child = defineComponent({ props: { foo: Number }, @@ -179,7 +179,7 @@ describe('attribute fallthrough', () => { } } - const GrandChild = createComponent({ + const GrandChild = defineComponent({ props: { foo: Number }, @@ -232,7 +232,7 @@ describe('attribute fallthrough', () => { } } - const Child = createComponent({ + const Child = defineComponent({ props: ['foo'], inheritAttrs: false, render() { @@ -255,7 +255,7 @@ describe('attribute fallthrough', () => { } } - const Child = createComponent({ + const Child = defineComponent({ props: ['foo'], inheritAttrs: false, render() { @@ -287,7 +287,7 @@ describe('attribute fallthrough', () => { } } - const Child = createComponent({ + const Child = defineComponent({ props: ['foo'], render() { return [h('div'), h('div')] @@ -308,7 +308,7 @@ describe('attribute fallthrough', () => { } } - const Child = createComponent({ + const Child = defineComponent({ props: ['foo'], render() { return [h('div'), h('div', this.$attrs)] diff --git a/packages/runtime-core/__tests__/rendererPortal.spec.ts b/packages/runtime-core/__tests__/rendererPortal.spec.ts index c8f82a528..e5146c494 100644 --- a/packages/runtime-core/__tests__/rendererPortal.spec.ts +++ b/packages/runtime-core/__tests__/rendererPortal.spec.ts @@ -3,7 +3,7 @@ import { serializeInner, render, h, - createComponent, + defineComponent, Portal, Text, Fragment, @@ -19,7 +19,7 @@ describe('renderer: portal', () => { const target = nodeOps.createElement('div') const root = nodeOps.createElement('div') - const Comp = createComponent(() => () => + const Comp = defineComponent(() => () => h(Fragment, [ h(Portal, { target }, h('div', 'teleported')), h('div', 'root') @@ -37,7 +37,7 @@ describe('renderer: portal', () => { const target = ref(targetA) const root = nodeOps.createElement('div') - const Comp = createComponent(() => () => + const Comp = defineComponent(() => () => h(Fragment, [ h(Portal, { target: target.value }, h('div', 'teleported')), h('div', 'root') @@ -64,7 +64,7 @@ describe('renderer: portal', () => { h('div', 'teleported') ]) - const Comp = createComponent(() => () => + const Comp = defineComponent(() => () => h(Portal, { target }, children.value) ) render(h(Comp), root) diff --git a/packages/runtime-core/src/apiCreateComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts similarity index 90% rename from packages/runtime-core/src/apiCreateComponent.ts rename to packages/runtime-core/src/apiDefineComponent.ts index 075b289ba..9244a8161 100644 --- a/packages/runtime-core/src/apiCreateComponent.ts +++ b/packages/runtime-core/src/apiDefineComponent.ts @@ -11,14 +11,14 @@ import { ExtractPropTypes, ComponentPropsOptions } from './componentProps' import { isFunction } from '@vue/shared' import { VNodeProps } from './vnode' -// createComponent is a utility that is primarily used for type inference +// 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 artifical types // for TSX / manual render function / IDE support. // overload 1: direct setup function // (uses user defined props interface) -export function createComponent( +export function defineComponent( setup: ( props: Readonly, ctx: SetupContext @@ -38,7 +38,7 @@ export function createComponent( // overload 2: object format with no props // (uses user defined props interface) // return type is for Vetur and TSX support -export function createComponent< +export function defineComponent< Props, RawBindings, D, @@ -60,7 +60,7 @@ export function createComponent< // overload 3: object format with array props declaration // props inferred as { [key in PropNames]?: any } // return type is for Vetur and TSX support -export function createComponent< +export function defineComponent< PropNames extends string, RawBindings, D, @@ -75,7 +75,7 @@ export function createComponent< // overload 4: object format with object props declaration // see `ExtractPropTypes` in ./componentProps.ts -export function createComponent< +export function defineComponent< // the Readonly constraint allows TS to treat the type of { required: true } // as constant instead of boolean. PropsOptions extends Readonly, @@ -97,6 +97,6 @@ export function createComponent< } // implementation, close to no-op -export function createComponent(options: unknown) { +export function defineComponent(options: unknown) { return isFunction(options) ? { setup: options } : options } diff --git a/packages/runtime-core/src/apiOptions.ts b/packages/runtime-core/src/apiOptions.ts index b50165a27..8af62b755 100644 --- a/packages/runtime-core/src/apiOptions.ts +++ b/packages/runtime-core/src/apiOptions.ts @@ -68,7 +68,7 @@ export interface ComponentOptionsBase< inheritAttrs?: boolean // type-only differentiator to separate OptionWithoutProps from a constructor - // type returned by createComponent() or FunctionalComponent + // type returned by defineComponent() or FunctionalComponent call?: never // type-only differentiators for built-in Vnode types __isFragment?: never diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 36412420b..0ee06d6b8 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -149,7 +149,7 @@ export interface ComponentInternalInstance { const emptyAppContext = createAppContext() -export function createComponentInstance( +export function defineComponentInstance( vnode: VNode, parent: ComponentInternalInstance | null ) { diff --git a/packages/runtime-core/src/h.ts b/packages/runtime-core/src/h.ts index 7fe3c3474..2137be2df 100644 --- a/packages/runtime-core/src/h.ts +++ b/packages/runtime-core/src/h.ts @@ -65,7 +65,7 @@ type RawChildren = | VNodeChildren | (() => any) -// fake constructor type returned from `createComponent` +// fake constructor type returned from `defineComponent` interface Constructor

{ __isFragment?: never __isPortal?: never @@ -130,7 +130,7 @@ export function h( children?: RawChildren | RawSlots ): VNode -// fake constructor type returned by `createComponent` +// fake constructor type returned by `defineComponent` export function h(type: Constructor, children?: RawChildren): VNode export function h

( type: Constructor

, diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts index 782f93f21..669399c29 100644 --- a/packages/runtime-core/src/index.ts +++ b/packages/runtime-core/src/index.ts @@ -6,7 +6,7 @@ export * from './apiWatch' export * from './apiLifecycle' export * from './apiInject' export { nextTick } from './scheduler' -export { createComponent } from './apiCreateComponent' +export { defineComponent } from './apiDefineComponent' // Advanced API ---------------------------------------------------------------- diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index 9fc0ebb68..013b082ec 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -11,7 +11,7 @@ import { } from './vnode' import { ComponentInternalInstance, - createComponentInstance, + defineComponentInstance, setupStatefulComponent, Component, Data @@ -917,7 +917,7 @@ export function createRenderer< parentSuspense: HostSuspenseBoundary | null, isSVG: boolean ) { - const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance( + const instance: ComponentInternalInstance = (initialVNode.component = defineComponentInstance( initialVNode, parentComponent )) diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts index bb263a3a1..cd187ff80 100644 --- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts @@ -2,7 +2,7 @@ import { createApp, h, nextTick, - createComponent, + defineComponent, vModelDynamic, withDirectives, VNode @@ -29,7 +29,7 @@ beforeEach(() => { describe('vModel', () => { it('should work with text input', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: null } }, @@ -60,7 +60,7 @@ describe('vModel', () => { }) it('should work with textarea', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: null } }, @@ -91,7 +91,7 @@ describe('vModel', () => { }) it('should support modifiers', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { number: null, trim: null, lazy: null } }, @@ -160,7 +160,7 @@ describe('vModel', () => { }) it('should work with checkbox', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: null } }, @@ -201,7 +201,7 @@ describe('vModel', () => { }) it('should work with checkbox and true-value/false-value', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: null } }, @@ -244,7 +244,7 @@ describe('vModel', () => { }) it('should work with checkbox and true-value/false-value with object values', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: null } }, @@ -287,7 +287,7 @@ describe('vModel', () => { }) it(`should support array as a checkbox model`, async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: [] } }, @@ -357,7 +357,7 @@ describe('vModel', () => { }) it('should work with radio', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: null } }, @@ -417,7 +417,7 @@ describe('vModel', () => { }) it('should work with single select', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: null } }, @@ -473,7 +473,7 @@ describe('vModel', () => { }) it('should work with multiple select', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: [] } }, diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts index bf093c094..76eef6513 100644 --- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts +++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts @@ -1,6 +1,6 @@ import { withDirectives, - createComponent, + defineComponent, h, nextTick, VNode @@ -19,7 +19,7 @@ beforeEach(() => { describe('runtime-dom: v-show directive', () => { test('should check show value is truthy', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: true } }, @@ -35,7 +35,7 @@ describe('runtime-dom: v-show directive', () => { }) test('should check show value is falsy', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: false } }, @@ -51,7 +51,7 @@ describe('runtime-dom: v-show directive', () => { }) it('should update show value changed', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: true } }, @@ -100,7 +100,7 @@ describe('runtime-dom: v-show directive', () => { }) test('should respect display value in style attribute', async () => { - const component = createComponent({ + const component = defineComponent({ data() { return { value: true } }, diff --git a/packages/runtime-dom/__tests__/modules/class.spec.ts b/packages/runtime-dom/__tests__/modules/class.spec.ts index 85f6e0a35..c12780859 100644 --- a/packages/runtime-dom/__tests__/modules/class.spec.ts +++ b/packages/runtime-dom/__tests__/modules/class.spec.ts @@ -1,6 +1,6 @@ // https://github.com/vuejs/vue/blob/dev/test/unit/features/directives/class.spec.js -import { h, render, createComponent } from '../../src' +import { h, render, defineComponent } from '../../src' type ClassItem = { value: string | object | string[] @@ -100,21 +100,21 @@ describe('class', () => { }) test('class merge between multiple nested components sharing same element', () => { - const component1 = createComponent({ + const component1 = defineComponent({ props: {}, render() { return this.$slots.default()[0] } }) - const component2 = createComponent({ + const component2 = defineComponent({ props: {}, render() { return this.$slots.default()[0] } }) - const component3 = createComponent({ + const component3 = defineComponent({ props: {}, render() { return h( diff --git a/test-dts/createComponent.test-d.tsx b/test-dts/defineComponent.test-d.tsx similarity index 95% rename from test-dts/createComponent.test-d.tsx rename to test-dts/defineComponent.test-d.tsx index aba58c718..4024f7526 100644 --- a/test-dts/createComponent.test-d.tsx +++ b/test-dts/defineComponent.test-d.tsx @@ -1,5 +1,5 @@ import { expectError, expectType } from 'tsd' -import { describe, createComponent, PropType, ref } from './index' +import { describe, defineComponent, PropType, ref } from './index' describe('with object props', () => { interface ExpectedProps { @@ -12,7 +12,7 @@ describe('with object props', () => { ddd: string[] } - const MyComponent = createComponent({ + const MyComponent = defineComponent({ props: { a: Number, // required should make property non-void @@ -126,7 +126,7 @@ describe('with object props', () => { }) describe('type inference w/ optional props declaration', () => { - const MyComponent = createComponent({ + const MyComponent = defineComponent({ setup(_props: { msg: string }) { return { a: 1 @@ -149,14 +149,14 @@ describe('type inference w/ optional props declaration', () => { }) describe('type inference w/ direct setup function', () => { - const MyComponent = createComponent((_props: { msg: string }) => {}) + const MyComponent = defineComponent((_props: { msg: string }) => {}) expectType() expectError() expectError() }) describe('type inference w/ array props declaration', () => { - createComponent({ + defineComponent({ props: ['a', 'b'], setup(props) { // props should be readonly @@ -179,7 +179,7 @@ describe('type inference w/ array props declaration', () => { }) describe('type inference w/ options API', () => { - createComponent({ + defineComponent({ props: { a: Number }, setup() { return { diff --git a/test-dts/h.test-d.ts b/test-dts/h.test-d.ts index 7998a6c55..99af6ba5f 100644 --- a/test-dts/h.test-d.ts +++ b/test-dts/h.test-d.ts @@ -2,7 +2,7 @@ import { expectError } from 'tsd' import { describe, h, - createComponent, + defineComponent, ref, Fragment, Portal, @@ -71,8 +71,8 @@ describe('h inference w/ plain object component', () => { expectError(h(Foo, { foo: 1 })) }) -describe('h inference w/ createComponent', () => { - const Foo = createComponent({ +describe('h inference w/ defineComponent', () => { + const Foo = defineComponent({ props: { foo: String, bar: { @@ -93,8 +93,8 @@ describe('h inference w/ createComponent', () => { expectError(h(Foo, { bar: 1, foo: 1 })) }) -describe('h inference w/ createComponent + optional props', () => { - const Foo = createComponent({ +describe('h inference w/ defineComponent + optional props', () => { + const Foo = defineComponent({ setup(_props: { foo?: string; bar: number }) {} }) @@ -109,8 +109,8 @@ describe('h inference w/ createComponent + optional props', () => { expectError(h(Foo, { bar: 1, foo: 1 })) }) -describe('h inference w/ createComponent + direct function', () => { - const Foo = createComponent((_props: { foo?: string; bar: number }) => {}) +describe('h inference w/ defineComponent + direct function', () => { + const Foo = defineComponent((_props: { foo?: string; bar: number }) => {}) h(Foo, { bar: 1 }) h(Foo, { bar: 1, foo: 'ok' }) diff --git a/test-dts/tsx.test-d.tsx b/test-dts/tsx.test-d.tsx index 34075ed1b..387533739 100644 --- a/test-dts/tsx.test-d.tsx +++ b/test-dts/tsx.test-d.tsx @@ -1,4 +1,4 @@ -// TSX w/ createComponent is tested in createComponent.test-d.tsx +// TSX w/ defineComponent is tested in defineComponent.test-d.tsx import { expectError, expectType } from 'tsd' import { KeepAlive, Suspense, Fragment, Portal } from '@vue/runtime-dom'