defineVaporComponent types

[TiBianMod]

I thought the types are fixed on this PR vuejs/core#13831

previous issue: #17

component

import { defineVaporComponent, ref } from "vue";
import type { ButtonHTMLAttributes } from "vue-jsx-vapor";

interface ButtonProps extends ButtonHTMLAttributes<{}> {
    variant?: "default" | "danger" | "light";
}

export const Button = defineVaporComponent<ButtonProps>({
    name: "Button",
    setup() {
        const foo = ref("4453");

        return { foo };
    },
    render(data, props) {
        return <button>Value: {data.foo}</button>;
    },
});

NO AUTOCOMPLETE !!!

[zhiyuanzmj]

Sorry, I just remove the options example. I didn't realize that they no longer wanted to support render function before i implement defineVaporComponent. vuejs/core#14179

[TiBianMod]

at the moment i don't get any autocompletion on any defineVaporComponent

// NO AUTOCOMPLETE !!!
export const Button = defineVaporComponent(() => {
    return <button>Click me!!!</button>;
});

// ALSO NO AUTOCOMPLETE !!!
export const Button = defineVaporComponent({
    name: "Button",
    setup() {
        return <button>Click me!!!</button>;
    },
});

[zhiyuanzmj]

If you wan't use defineVaporComponent you should to custom $props to props https://github.com/vuejs/core/blob/minor/packages-private/dts-test/vapor/jsx.d.ts

[TiBianMod]

I see this defineVaporComponent as very problematic at the moment!!!
I think is better to use defineComponent with __vapor: true option

import { defineComponent, ref } from "vue";
import type { ButtonHTMLAttributes } from "vue-jsx-vapor";

interface ButtonProps extends ButtonHTMLAttributes<{}> {
    variant?: "default" | "danger" | "light";
}

export const Button = defineComponent<ButtonProps>({
    name: "Button",
    __vapor: true,
    setup() {
        const foo = ref("4453");

        return { foo };
    },
    render(data, props) {
        return <button>Value: {data.foo}</button>;
    },
});

and the autocomplete is working great on the IDE.
let's see what the PR will fix.

[zhiyuanzmj]

But the defineComponent return a Virtual DOM types, and the render function don't running in production environment，only used for HRM in development environment.

[TiBianMod]

oh oh oh 😢

vuejs/core#14381 (comment)

[TiBianMod]

@zhiyuanzmj let's forget for the moment the vapor mode

can i use vue-jsx-vapor to replace
@vue/babel-plugin-jsx
@vitejs/plugin-vue-jsx

[zhiyuanzmj]

Yes, just set interop to true.

vueJsxVapor({
  interop: true
})

[zhiyuanzmj]

How about vue-jsx-vapor expose a defineVaporComponent api, that runtime is an object but its types is a function and support render function.

[TiBianMod]

i like the idea

[zhiyuanzmj]

vuejs/core#14398
I think add a $props type to VaporComponentInstance is nice solution. we need't to maintain two defineVaporComponent types. Don't worry, in SSR mode defineVaporComponent will be convert to defineVaporSSRComponent from vue-jsx-vpoar.

[TiBianMod]

working again with v3.6.0-beta.6