refactor(createComponent): rename to defineComponent (#549)

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)

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,

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)

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')

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)]

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)

packages/runtime-core/src/apiCreateComponent.ts → 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<Props, RawBindings = object>(
+export function defineComponent<Props, RawBindings = object>(
   setup: (
     props: Readonly<Props>,
     ctx: SetupContext
@@ -38,7 +38,7 @@ export function createComponent<Props, RawBindings = object>(
 // 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<ComponentPropsOptions>,
@@ -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
 }

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

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
 ) {

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<P = any> {
   __isFragment?: never
   __isPortal?: never
@@ -130,7 +130,7 @@ export function h<O>(
   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<P>(
   type: Constructor<P>,

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 ----------------------------------------------------------------
 

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
     ))

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: [] }
       },

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

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(

test-dts/createComponent.test-d.tsx → 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<JSX.Element>(<MyComponent msg="foo" />)
   expectError(<MyComponent />)
   expectError(<MyComponent msg={1} />)
 })
 
 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 {

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' })

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'