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
})
test('computed', async () => {
- const Comp = createComponent({
+ const Comp = defineComponent({
data() {
return {
foo: 1
})
test('methods', async () => {
- const Comp = createComponent({
+ const Comp = defineComponent({
data() {
return {
foo: 1
})
test('accessing setup() state from options', async () => {
- const Comp = createComponent({
+ const Comp = defineComponent({
setup() {
return {
count: ref(0)
serializeInner,
nextTick,
watch,
- createComponent,
+ defineComponent,
triggerEvent,
TestElement
} from '@vue/runtime-test'
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
render: () => h(Child, { count: count.value })
}
- const Child = createComponent({
+ const Child = defineComponent({
setup(props: { count: number }) {
watch(() => {
dummy = props.count
render: () => h(Child, { count: count.value })
}
- const Child = createComponent({
+ const Child = defineComponent({
props: {
count: Number
},
})
}
- const Child = createComponent({
+ const Child = defineComponent({
props: {
count: {
type: Number,
render,
nextTick,
Ref,
- createComponent
+ defineComponent
} from '@vue/runtime-test'
// reference: https://vue-composition-api-rfc.netlify.com/api.html#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])
})
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)
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)
ref,
nextTick,
mockWarn,
- createComponent
+ defineComponent
} from '@vue/runtime-test'
import { setErrorRecovery } from '../src/errorHandling'
}
}
- const Child = createComponent(() => () => h('div', { ref }))
+ const Child = defineComponent(() => () => h('div', { ref }))
render(h(Comp), nodeOps.createElement('div'))
expect(fn).toHaveBeenCalledWith(err, 'ref function')
mergeProps,
ref,
onUpdated,
- createComponent
+ defineComponent
} from '@vue/runtime-dom'
import { mockWarn } from '@vue/runtime-test'
}
}
- const Child = createComponent({
+ const Child = defineComponent({
props: {
foo: Number
},
}
}
- const GrandChild = createComponent({
+ const GrandChild = defineComponent({
props: {
foo: Number
},
}
}
- const Child = createComponent({
+ const Child = defineComponent({
props: ['foo'],
inheritAttrs: false,
render() {
}
}
- const Child = createComponent({
+ const Child = defineComponent({
props: ['foo'],
inheritAttrs: false,
render() {
}
}
- const Child = createComponent({
+ const Child = defineComponent({
props: ['foo'],
render() {
return [h('div'), h('div')]
}
}
- const Child = createComponent({
+ const Child = defineComponent({
props: ['foo'],
render() {
return [h('div'), h('div', this.$attrs)]
serializeInner,
render,
h,
- createComponent,
+ defineComponent,
Portal,
Text,
Fragment,
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')
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')
h('div', 'teleported')
])
- const Comp = createComponent(() => () =>
+ const Comp = defineComponent(() => () =>
h(Portal, { target }, children.value)
)
render(h(Comp), root)
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
// 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,
// 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,
// 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>,
}
// implementation, close to no-op
-export function createComponent(options: unknown) {
+export function defineComponent(options: unknown) {
return isFunction(options) ? { setup: options } : options
}
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
const emptyAppContext = createAppContext()
-export function createComponentInstance(
+export function defineComponentInstance(
vnode: VNode,
parent: ComponentInternalInstance | null
) {
| VNodeChildren
| (() => any)
-// fake constructor type returned from `createComponent`
+// fake constructor type returned from `defineComponent`
interface Constructor<P = any> {
__isFragment?: never
__isPortal?: never
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>,
export * from './apiLifecycle'
export * from './apiInject'
export { nextTick } from './scheduler'
-export { createComponent } from './apiCreateComponent'
+export { defineComponent } from './apiDefineComponent'
// Advanced API ----------------------------------------------------------------
} from './vnode'
import {
ComponentInternalInstance,
- createComponentInstance,
+ defineComponentInstance,
setupStatefulComponent,
Component,
Data
parentSuspense: HostSuspenseBoundary | null,
isSVG: boolean
) {
- const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance(
+ const instance: ComponentInternalInstance = (initialVNode.component = defineComponentInstance(
initialVNode,
parentComponent
))
createApp,
h,
nextTick,
- createComponent,
+ defineComponent,
vModelDynamic,
withDirectives,
VNode
describe('vModel', () => {
it('should work with text input', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: null }
},
})
it('should work with textarea', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: null }
},
})
it('should support modifiers', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { number: null, trim: null, lazy: null }
},
})
it('should work with checkbox', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: null }
},
})
it('should work with checkbox and true-value/false-value', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: null }
},
})
it('should work with checkbox and true-value/false-value with object values', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: null }
},
})
it(`should support array as a checkbox model`, async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: [] }
},
})
it('should work with radio', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: null }
},
})
it('should work with single select', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: null }
},
})
it('should work with multiple select', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: [] }
},
import {
withDirectives,
- createComponent,
+ defineComponent,
h,
nextTick,
VNode
describe('runtime-dom: v-show directive', () => {
test('should check show value is truthy', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: true }
},
})
test('should check show value is falsy', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: false }
},
})
it('should update show value changed', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: true }
},
})
test('should respect display value in style attribute', async () => {
- const component = createComponent({
+ const component = defineComponent({
data() {
return { value: true }
},
// 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[]
})
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(
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 {
ddd: string[]
}
- const MyComponent = createComponent({
+ const MyComponent = defineComponent({
props: {
a: Number,
// required should make property non-void
})
describe('type inference w/ optional props declaration', () => {
- const MyComponent = createComponent({
+ const MyComponent = defineComponent({
setup(_props: { msg: string }) {
return {
a: 1
})
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
})
describe('type inference w/ options API', () => {
- createComponent({
+ defineComponent({
props: { a: Number },
setup() {
return {
import {
describe,
h,
- createComponent,
+ defineComponent,
ref,
Fragment,
Portal,
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: {
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 }) {}
})
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' })
-// 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'
projects / thirdparty / vuejs / core.git / commitdiff
