Composition-api: the `components` option in createComponent() doesn't support vue2 options

[HermitSun]

After I updated to 2.2.0, I found that when I run npm run serve, the develop server console ouput is just like this:

And I cannot run npm run build, the process will crash because of the error.

However, the browser console didn't show any errors, and it can run normally. So I cannot simply reproduce it online... In fact, I just create the project with vue-cli3, and change App.vue to this:

<script lang="ts">
    import {createComponent} from 'vue-function-api';
    import HelloWorld from './components/HelloWorld.vue';

    export default createComponent({
        components: {HelloWorld}
    });
</script>

I read the RFC again, and maybe 3.x will continue to be compatible with the 2.x components option?

And when I went back to 2.1.2, the type error disappeared. Did I go something wrong? Or how can I import and use *.vue components correctly?

[liximomo]

createComponent only support using with an inline render function return by setup now.

import {createComponent, createElement as h } from 'vue-function-api';
import HelloWorld from './components/HelloWorld.vue';

export default createComponent({
  setup() {
     return () => h(HelloWorld)
 }
});

You can make it work by a force-cast as well.

import {createComponent, createElement as h } from 'vue-function-api';
import HelloWorld from './components/HelloWorld.vue';

export default createComponent({
 components: {HelloWorld}
} as any);

[HermitSun]

OK, thank you. I have another question, could I use it along with template? Using render function will override the template.
And I changed the issue's title to avoid misleading.

[liximomo]

@HermitSun Yes. You can use it with the template, but it still requests a force-cast for passing components options.

[HermitSun]

I got your point. Thanks a lot.

[bigmeow]

This change is too big, I plan to downgrade the version。
Every time I upgrade to a new version, I have to change the code again.

[bigmeow]

the name option in createComponent() how to dealwith?
Is there any other way besides setting any type?

export default createComponent({
   name: 'componentName'
})

@liximomo

[LinusBorg]

I think you should not cast the options obect to any when you do provide a setup function. Then TS can correctly infer types for setup() arguments.

[HermitSun]

Maybe we can expand the interface? Just like @PatrykWalach said in issue#63:

import {ComponentOptions} from 'vue-function-api/dist/ts-api/component';
import {AsyncComponent, Component} from 'vue';

declare module 'vue-function-api/dist/ts-api/component' {
    interface ComponentOptions {
        components?: {
            [key: string]: Component<any, any, any, any> | AsyncComponent<any, any, any, any> 
        };
    }
}

[PatrykWalach]

Casting as any will break all the types support.
One of the workarounds right now is to take all the keys, except props an setup outside the createComponent function.

export default {
  components: {
  },
  ...createComponent({
    setup(props) {
    },
    props: {
    }
  })
}

[IlCallo]

createComponent only support using with an inline render function return by setup now.

Why so? By spec, its not written anywhere that setup() and other properties cannot be used together (especially component and name for which I don't see a clear alternative).
There even is an example of mixed-usage where setup() and data are used together.

[LinusBorg]

You are welcome to work on solving this challebge.

[IlCallo]

Before trying tackle the problem, I need to understand it in its entirety.
components and name are probably not the only properties which are needed but have been removed from the type, can you provide me some context about this change? Why was it necessary? Why implementing it required dropping those properties and/or not being a Vue instance anymore (if it was such before)? Are the two things related?

[PatrykWalach]

The properties probably has been removed unintentionally, the options inside createComponent should extend the default vue ComponentOptions. You can see inside /ts-api/component that VueProxy which is result of the function extends ComponentOptions, which means it should return a proper Vue instance. I'm not too familiar with the types inside Vue so I couldn't find a solution, but I think problem is located inside this file.

[Mister-Hope]

Casting as any will break all the types support.
One of the workarounds right now is to take all the keys, except props an setup outside the createComponent function.

export default {
  components: {
  },
  ...createComponent({
    setup(props) {
    },
    props: {
    }
  })
}

I thought this is a better solution. Yet I still wanna see types contain components option originally.

So why are you removing it actually?

[jorgy343]

I'm confused. Is the final behavior going to no longer allow name and components properties within the createComponent function? This is important to know so that I can either downgrade the package for the time being or begin migrating to a newer standard.

[liximomo]

@jorgy343 It will allow all vue2 options.

[liximomo]

This is already been fixed in dev branch.
https://github.com/vuejs/vue-function-api/blob/703bf300308ff3a550b236cd3de461fcec9f2213/src/component/component.ts#L70-L73

[pauloevpr]

While the issue is not fixed, I believe that best way to work it around is by temporarily replacing export default createComponent({ }) by export default { }. This will break Typescript inference but it will not break compilation. If using props, you might also need to go with setup(props: any) {}.

It should be fairly quick to rollback to using createComponent once the issue is fixed.

[kevinmarrec]

@liximomo Seems that on @vue/composition-api 0.1., components work BUT not for lazy ones :

Classic import

Lazy loading

[liximomo]

@kevinmarrec I couldn't reproduce it. Can you provide an online example?

[bigmeow]

This is already been fixed in dev branch.
https://github.com/vuejs/vue-function-api/blob/703bf300308ff3a550b236cd3de461fcec9f2213/src/component/component.ts#L70-L73

Can you release a version as soon as possible? 2.2.1 for vue-function-api

[liximomo]

@bigmeow The package has been rename to @vue/composition-api.

[liximomo]

This already got fixed in the new package @vue/composition-api.

[kevinmarrec]

@liximomo About https://github.com/vuejs/composition-api/issues/62#issuecomment-524566660, I opened https://github.com/vuejs/composition-api/issues/81 with reproduction