fix(type): fix type inference for component without props

Also remove `props` and `setupContext` from `render` in `setup()`.

Resolves: #112

Author: liximomo

src/component/component.ts

@@ -49,15 +49,13 @@ export interface SetupContext {
   emit(event: string, ...args: any[]): void;
 }
 
-type RenderFunction<Props> = (props: Props, ctx: SetupContext) => VNode;
-
 export type SetupFunction<Props, RawBindings> = (
   this: void,
   props: Props,
   ctx: SetupContext
-) => RawBindings | RenderFunction<Props>;
+) => RawBindings | (() => VNode | null);
 
-interface ComponentOptions<
+interface ComponentOptionsWithProps<
   PropsOptions = ComponentPropsOptions,
   RawBindings = Data,
   Props = ExtractPropTypes<PropsOptions>
@@ -66,16 +64,25 @@ interface ComponentOptions<
   setup?: SetupFunction<Props, RawBindings>;
 }
 
-// object format with object props declaration
+interface ComponentOptionsWithoutProps<Props = never, RawBindings = Data> {
+  props?: undefined;
+  setup?: SetupFunction<Props, RawBindings>;
+}
+
+// overload 1: object format with no props
+export function createComponent<RawBindings>(
+  options: ComponentOptionsWithoutProps<never, RawBindings>
+): VueProxy<never, RawBindings>;
+// overload 2: object format with object props declaration
 // see `ExtractPropTypes` in ./componentProps.ts
 export function createComponent<Props, RawBindings = Data, PropsOptions = ComponentPropsOptions>(
   // prettier-ignore
   options: (
     // prefer the provided Props, otherwise infer it from PropsOptions
     HasDefined<Props> extends true
-      ? ComponentOptions<PropsOptions, RawBindings, Props>
-      : ComponentOptions<PropsOptions, RawBindings>) &
-    Omit<Vue2ComponentOptions<Vue>, keyof ComponentOptions<never, never>>
+      ? ComponentOptionsWithProps<PropsOptions, RawBindings, Props>
+      : ComponentOptionsWithProps<PropsOptions, RawBindings>) &
+    Omit<Vue2ComponentOptions<Vue>, keyof ComponentOptionsWithProps<never, never>>
 ): VueProxy<PropsOptions, RawBindings>;
 // implementation, close to no-op
 export function createComponent(options: any) {

src/setup.ts

@@ -176,7 +176,7 @@ export function mixin(Vue: VueConstructor) {
       // keep currentInstance accessible for createElement
       vm.$options.render = () => {
         resolveScopedSlots(vm, ctx.slots);
-        return activateCurrentInstance(vm, vm_ => bindingFunc(vm_.$props, ctx));
+        return activateCurrentInstance(vm, () => bindingFunc());
       };
       return;
     }

test/createComponent.spec.ts

@@ -295,46 +295,37 @@ describe('setup', () => {
   });
 
   it('inline render function should receive proper params', () => {
-    let p, c;
+    let p;
     const vm = new Vue({
       template: `<child msg="foo" a="1" b="2"></child>`,
       components: {
         child: {
           name: 'child',
           props: ['msg'],
           setup() {
-            return (props, ctx) => {
+            return props => {
               p = props;
-              c = ctx;
               return null;
             };
           },
         },
       },
     }).$mount();
-    expect(p).toEqual({
-      msg: 'foo',
-    });
-    expect(c).toBeDefined();
-    expect(c.root).toBe(vm);
-    expect(c.attrs).toEqual({
-      a: '1',
-      b: '2',
-    });
+    expect(p).toBe(undefined);
   });
 
   it('inline render function should work', done => {
     // let createElement;
     const vm = new Vue({
       props: ['msg'],
       template: '<div>1</div>',
-      setup() {
+      setup(props) {
         const count = ref(0);
         const increment = () => {
           count.value++;
         };
 
-        return props =>
+        return () =>
           h('div', [
             h('span', props.msg),
             h(

test/setup.spec.js

@@ -0,0 +1,97 @@
+import { createComponent, createElement as h, ref, SetupContext } from '../../src';
+const Vue = require('vue/dist/vue.common.js');
+
+type Equal<Left, Right> = (<U>() => U extends Left ? 1 : 0) extends (<U>() => U extends Right
+  ? 1
+  : 0)
+  ? true
+  : false;
+
+const isTypeEqual = <Left, Right>(shouldBeEqual: Equal<Left, Right>) => {
+  void shouldBeEqual;
+  expect(true).toBe(true);
+};
+const isSubType = <SuperType, SubType>(shouldBeEqual: SubType extends SuperType ? true : false) => {
+  void shouldBeEqual;
+  expect(true).toBe(true);
+};
+
+describe('createComponent', () => {
+  it('should work', () => {
+    const Child = createComponent({
+      props: { msg: String },
+      setup(props) {
+        return () => h('span', props.msg);
+      },
+    });
+
+    const App = createComponent({
+      setup() {
+        const msg = ref('hello');
+        return () =>
+          h('div', [
+            h(Child, {
+              props: {
+                msg: msg.value,
+              },
+            }),
+          ]);
+      },
+    });
+    const vm = new Vue(App).$mount();
+    expect(vm.$el.querySelector('span').textContent).toBe('hello');
+  });
+
+  it('should infer props type', () => {
+    const App = createComponent({
+      props: {
+        a: {
+          type: Number,
+          default: 0,
+        },
+        b: String,
+      },
+      setup(props, ctx) {
+        type PropsType = typeof props;
+        isTypeEqual<SetupContext, typeof ctx>(true);
+        isSubType<PropsType, { readonly b?: string; readonly a: number }>(true);
+        isSubType<{ readonly b?: string; readonly a: number }, PropsType>(true);
+        return () => null;
+      },
+    });
+    new Vue(App).$mount();
+    expect.assertions(3);
+  });
+
+  it('custom props interface', () => {
+    interface IPropsType {
+      b: string;
+    }
+    const App = createComponent<IPropsType>({
+      props: {
+        b: {},
+      },
+      setup(props, ctx) {
+        type PropsType = typeof props;
+        isTypeEqual<SetupContext, typeof ctx>(true);
+        isSubType<PropsType, { b: string }>(true);
+        isSubType<{ b: string }, PropsType>(true);
+        return () => null;
+      },
+    });
+    new Vue(App).$mount();
+    expect.assertions(3);
+  });
+
+  it('no props', () => {
+    const App = createComponent({
+      setup(props, ctx) {
+        isTypeEqual<SetupContext, typeof ctx>(true);
+        isTypeEqual<never, typeof props>(true);
+        return () => null;
+      },
+    });
+    new Vue(App).$mount();
+    expect.assertions(2);
+  });
+});