Understanding more about toNative method when using vue-facing-decorator

[git-bhanu]

I would like to understand the usage of toNative in more detail.

We have a vue 2 project which we are trying to move to vue 3.
We currently were using "vue-property-decorator": "10.0.0-rc.3" but now have moved to vue-facing-decorator.

I saw a comment here by @rdhelms

@jaredmcateer You don't need to use toNative if you have experimentalDecorators: true.

We're using it in our codebase right now without toNative.

Can someone tell me more about this, why does experimentalDecorators: true. make it not necessary for toNative to ve used?

[ruojianll]

experimentalDecorators: true means stage2 decorator api, the decorator could return vue object directly, so we don't need to cast class constructor into vue object manually by toNative. But if it is false, we use stage3 decorator, which couldn't return a non-constructor value, so the casting must be processed by toNative.

[git-bhanu]

Thank you for the explanation. This makes sense.

[git-bhanu]

Hey @ruojianll,

We are using vue facing decorator(3.0.4) in our project and recently discovered that the vite version we were using earlier 4.3.9 has severe vulnerability issue and wanted to update it. We update the vite package to 4.5.2.

After updating the package we discovered that for vite > 4.4.0 it breaks typescript decorator support. You can see that here :
[TS Decorators don't work when using Vite 5.0.11 & TS 5.3.3 #15565] vitejs/vite#15565.

You can also see this mentioned here in changelog of vite - https://github.com/vitejs/vite/blob/v4.5.2/packages/vite/CHANGELOG.md#444-2023-07-14

fix(esbuild): enable experimentalDecorators by default (#13805) (e8880f0), closes vitejs/vite#13805 .

If we retain

    "experimentalDecorators": false,
    "emitDecoratorMetadata": false,

We get unexpected token error.

But,
If we change "experimentalDecorators": false as true the project start to run fine.
If we also remove toNative(<ClassName>) the project still works, with typescript 5.0.

I want to understand do we need to have toNative() in our project when we use the following:

1. "vue-facing-decorator": "3.0.4"
2. "vite": "4.5.2"
3. "typescript": "5.0"

with

    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,

even though vue-facing-decorator has asks to have them config as false here - https://facing-dev.github.io/vue-facing-decorator/#/en/stage3-decorators/stage3-decorators

[ruojianll]

In typescript config experimentalDecorators is true for stage 2 decorator and false for stage 3 decorator. But esbuild only support stage2 decorator(experimentalDecorators true only).

https://esbuild.github.io/content-types/#tsconfig-json

experimentalDecorators
This option enables the transformation of decorator syntax in TypeScript files. The transformation follows the outdated decorator design that TypeScript itself follows when experimentalDecorators is enabled.
Note that there is an updated design for decorators that is being added to JavaScript, as well as to TypeScript when experimentalDecorators is disabled. This is not something that esbuild implements yet, so esbuild will currently not transform decorators when experimentalDecorators is disabled.

For toNative, it is optional with stage 2 decorator, but it's necessary with stage 3 decorator. So we commended to use it for the coming upgrades.

[git-bhanu]

Alright, so we can use stage 2 decorators and we also don't have to necessarily use toNative method.

Thanks @ruojianll !