8000 refactor: rename createComponent as defineComponent (#230) · aztalbot/vue-function-api@3463fbc · GitHub
[go: up one dir, main page]
Skip to content

Commit 3463fbc

Browse files
cexbrayatcexbrayat
authored
refactor: rename createComponent as defineComponent (vuejs#230)
Since Vue `3.0.0-alpha.1`, `createComponent` has been renamed `defineComponent`. See vuejs/core@1c4cdd8
1 parent 1b58a67 commit 3463fbc

File tree

11 files changed

+94
-27
lines changed

11 files changed

+94
-27
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@ After installing the plugin you can use the [Composition API](https://vue-compos
5757

5858
**This plugin requires TypeScript version >3.5.1. If you are using vetur, make sure to set `vetur.useWorkspaceDependencies` to `true`.**
5959

60-
To let TypeScript properly infer types inside Vue component options, you need to define components with `createComponent`:
60+
To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent`:
6161

6262
```ts
63-
import { createComponent } from '@vue/composition-api';
63+
import { defineComponent } from '@vue/composition-api';
6464

65-
const Component = createComponent({
65+
const Component = defineComponent({
6666
// type inference enabled
6767
});
6868

‎README.zh-CN.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@ Vue.use(VueCompositionApi);
5757

5858
**请使用最新版的 TypeScript，如果你使用了 `vetur`，请将 `vetur.useWorkspaceDependencies` 设为 `true`。**
5959

60-
为了让 TypeScript 正确的推导类型，我们必须使用 `createComponent` 来定义组件:
60+
为了让 TypeScript 正确的推导类型，我们必须使用 `defineComponent` 来定义组件:
6161

6262
```ts
63-
import { createComponent } from '@vue/composition-api';
63+
import { defineComponent } from '@vue/composition-api';
6464

65-
const Component = createComponent({
65+
const Component = defineComponent({
6666
// 启用类型推断
6767
});
6868

‎src/apis/computed.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getCurrentVue, getCurrentVM } from '../runtimeContext';
22
import { createRef, Ref } from '../reactivity';
3-
import { createComponentInstance } from '../helper';
3+
import { defineComponentInstance } from '../helper';
44
import { warn } from '../utils';
55

66
interface Option<T> {
@@ -25,7 +25,7 @@ export function computed<T>(
2525
set = options.set;
2626
}
2727

28-
const computedHost = createComponentInstance(getCurrentVue(), {
28+
const computedHost = defineComponentInstance(getCurrentVue(), {
2929
computed: {
3030
$$state: {
3131
get,

‎src/apis/watch.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ComponentInstance } from '../component';
22
import { Ref, isRef } from '../reactivity';
33
import { assert, logError, noopFn } from '../utils';
4-
import { createComponentInstance } from '../helper';
4+
import { defineComponentInstance } from '../helper';
55
import { getCurrentVM, getCurrentVue } from '../runtimeContext';
66
import { WatcherPreFlushQueueKey, WatcherPostFlushQueueKey } from '../symbols';
77

@@ -262,7 +262,7 @@ export function watch(
262262
let vm = getCurrentVM();
263263
if (!vm) {
264264
if (!fallbackVM) {
265-
fallbackVM = createComponentInstance(getCurrentVue());
265+
fallbackVM = defineComponentInstance(getCurrentVue());
266266
}
267267
vm = fallbackVM;
268268
} else if (!hasWatchEnv(vm)) {

‎src/component/component.ts

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,31 @@ interface ComponentOptionsWithoutProps<Props = unknown, RawBindings = Data> {
7070
setup?: SetupFunction<Props, RawBindings>;
7171
}
7272

73+
// overload 1: object format with no props
74+
export function defineComponent<RawBindings>(
75+
options: ComponentOptionsWithoutProps<unknown, RawBindings>
76+
): VueProxy<unknown, RawBindings>;
77+
// overload 2: object format with object props declaration
78+
// see `ExtractPropTypes` in ./componentProps.ts
79+
export function defineComponent<
80+
Props,
81+
RawBindings = Data,
82+
PropsOptions extends ComponentPropsOptions = ComponentPropsOptions
83+
>(
84+
// prettier-ignore
85+
options: (
86+
// prefer the provided Props, otherwise infer it from PropsOptions
87+
HasDefined<Props> extends true
88+
? ComponentOptionsWithProps<PropsOptions, RawBindings, Props>
89+
: ComponentOptionsWithProps<PropsOptions, RawBindings>) &
90+
Omit<Vue2ComponentOptions<Vue>, keyof ComponentOptionsWithProps<never, never>>
91+
): VueProxy<PropsOptions, RawBindings>;
92+
// implementation, close to no-op
93+
export function defineComponent(options: any) {
94+
return options as any;
95+
}
96+
97+
// createComponent is kept around for retro-compatibility
7398
// overload 1: object format with no props
7499
export function createComponent<RawBindings>(
75100
options: ComponentOptionsWithoutProps<unknown, RawBindings>
@@ -89,7 +114,10 @@ export function createComponent<
89114
: ComponentOptionsWithProps<PropsOptions, RawBindings>) &
90115
Omit<Vue2ComponentOptions<Vue>, keyof ComponentOptionsWithProps<never, never>>
91116
): VueProxy<PropsOptions, RawBindings>;
92-
// implementation, close to no-op
117+
// implementation, deferring to defineComponent, but logging a warning in dev mode
93118
export function createComponent(options: any) {
94-
return options as any;
119+
if (process.env.NODE_ENV !== 'production') {
120+
Vue.util.warn('`createComponent` has been renamed to `defineComponent`.');
121+
}
122+
return defineComponent(options);
95123
}

‎src/component/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export {
22
Data,
33
createComponent,
4+
defineComponent,
45
SetupFunction,
56
SetupContext,
67
ComponentInstance,

‎src/createElement.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from 'vue';
22
import { currentVM, getCurrentVue } from './runtimeContext';
3-
import { createComponentInstance } from './helper';
3+
import { defineComponentInstance } from './helper';
44
import { warn } from './utils';
55

66
type CreateElement = Vue['$createElement'];
@@ -11,7 +11,7 @@ const createElement: CreateElement = function createElement(...args: any) {
1111
if (!currentVM) {
1212
warn('`createElement()` has been called outside of render function.');
1313
if (!fallbackCreateElement) {
14-
fallbackCreateElement = createComponentInstance(getCurrentVue()).$createElement;
14+
fallbackCreateElement = defineComponentInstance(getCurrentVue()).$createElement;
1515
}
1616

1717
return fallbackCreateElement.apply(fallbackCreateElement, args);

‎src/helper.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function ensureCurrentVMInFn(hook: string): ComponentInstance {
1111
return vm!;
1212
}
1313

14-
export function createComponentInstance<V extends Vue = Vue>(
14+
export function defineComponentInstance<V extends Vue = Vue>(
1515
Ctor: VueConstructor<V>,
1616
options: ComponentOptions<V> = {}
1717
) {

‎src/index.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,13 @@ if (currentVue && typeof window !== 'undefined' && window.Vue) {
2323
export default plugin;
2424
export { default as createElement } from './createElement';
2525
export { SetupContext };
26-
export { createComponent, ComponentRenderProxy, PropType, PropOptions } from './component';
26+
export {
27+
createComponent,
28+
defineComponent,
29+
ComponentRenderProxy,
30+
PropType,
31+
PropOptions,
32+
} from './component';
2733
// For getting a hold of the interal instance in setup() - useful for advanced
2834
// plugins
2935
export { getCurrentVM as getCurrentInstance } from './runtimeContext';

‎src/reactivity/reactive.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { AnyObject } from '../types/basic';
22
import { getCurrentVue } from '../runtimeContext';
33
import { isPlainObject, def, hasOwn, warn } from '../utils';
4-
import { isComponentInstance, createComponentInstance } from '../helper';
4+
import { isComponentInstance, defineComponentInstance } from '../helper';
55
import {
66
AccessControlIdentifierKey,
77
ReactiveIdentifierKey,
@@ -113,7 +113,7 @@ function observe<T>(obj: T): T {
113113
if (Vue.observable) {
114114
observed = Vue.observable(obj);
115115
} else {
116-
const vm = createComponentInstance(Vue, {
116+
const vm = defineComponentInstance(Vue, {
117117
data: {
118118
$$state: obj,
119119
},

‎test/types/createComponent.spec.ts renamed to ‎test/types/defineComponent.spec.ts

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createComponent, createElement as h, ref, SetupContext } from '../../src';
1+
import { createComponent, defineComponent, createElement as h, ref, SetupContext } from '../../src';
22
import Router from 'vue-router';
33

44
const Vue = require('vue/dist/vue.common.js');
@@ -18,16 +18,16 @@ const isSubType = <SuperType, SubType>(shouldBeEqual: SubType extends SuperType
1818
expect(true).toBe(true);
1919
};
2020

21-
describe('createComponent', () => {
21+
describe('defineComponent', () => {
2222
it('should work', () => {
23-
const Child = createComponent({
23+
const Child = defineComponent({
2424
props: { msg: String },
2525
setup(props) {
2626
return () => h('span', props.msg);
2727
},
2828
});
2929

30-
const App = createComponent({
30+
const App = defineComponent({
3131
setup() {
3232
const msg = ref('hello');
3333
return () =>
@@ -45,7 +45,7 @@ describe('createComponent', () => {
4545
});
4646

4747
it('should infer props type', () => {
48-
const App = createComponent({
48+
const App = defineComponent({
4949
props: {
5050
a: {
5151
type: Number,
@@ -69,7 +69,7 @@ describe('createComponent', () => {
6969
interface IPropsType {
7070
b: string;
7171
}
72-
const App = createComponent<IPropsType>({
72+
const App = defineComponent<IPropsType>({
7373
props: {
7474
b: {},
7575
},
@@ -86,7 +86,7 @@ describe('createComponent', () => {
8686
});
8787

8888
it('no props', () => {
89-
const App = createComponent({
89+
const App = defineComponent({
9090
setup(props, ctx) {
9191
isTypeEqual<SetupContext, typeof ctx>(true);
9292
isTypeEqual<unknown, typeof props>(true);
@@ -98,7 +98,7 @@ describe('createComponent', () => {
9898
});
9999

100100
it('infer the required prop', () => {
101-
const App = createComponent({
101+
const App = defineComponent({
102102
props: {
103103
foo: {
104104
type: String,
@@ -138,10 +138,42 @@ describe('createComponent', () => {
138138
{
139139
path: '/',
140140
name: 'root',
141-
component: createComponent({}),
141+
component: defineComponent({}),
142142
},
143143
],
144144
});
145145
});
146146
});
147+
148+
describe('retro-compatible with createComponent', () => {
149+
it('should still work and warn', () => {
150+
const warn = jest.spyOn(global.console, 'error').mockImplementation(() => null);
151+
const Child = createComponent({
152+
props: { msg: String },
153+
setup(props) {
154+
return () => h('span', props.msg);
155+
},
156+
});
157+
158+
const App = createComponent({
159+
setup() {
160+
const msg = ref('hello');
161+
return () =>
162+
h('div', [
163+
h(Child, {
164+
props: {
165+
msg: msg.value,
166+
},
167+
}),
168+
]);
169+
},
170+
});
171+
const vm = new Vue(App).$mount();
172+
expect(vm.$el.querySelector('span').textContent).toBe('hello');
173+
expect(warn.mock.calls[0][0]).toMatch(
174+
'[Vue warn]: `createComponent` has been renamed to `defineComponent`.'
175+
);
176+
warn.mockRestore();
177+
});
178+
});
147179
});

0 commit comments

Comments
 (0)
0