The proposed API in the tc39/proposal-decorators repository is significantly different from the previous decorators API. Although TypeScript 5 doesn't fully support the new API yet, it's only a matter of time before the old API becomes deprecated, so I'll proceed with using the newest API.
While the answer to the question "Into what do we need to convert the TypeScript class using decorators to get the valid Vue component?" is applicable to the old API, now we need to solve the same problem using the newest API.
Here's the initial code:
import { defineComponent } from "vue";
/* [ Theory ] Overrides the eponymous type of "typescript/lib/lib.decorators.d.ts".
* [ Reference ] https://github.com/tc39/proposal-decorators#classes */
type ClassDecorator = (value: Function, context: {
kind: "class";
name: string | undefined;
addInitializer: (initializer: () => void) => void;
}) => Function | void;
const VueComponentOptions: ClassDecorator = (targetClass: Function, context: ClassDecoratorContext): Function | void => {
// TODO check for the kind === "class"
const vueOptions: ComponentOptions = {
methods: {},
computed: {}
};
return defineComponent(vueOptions);
};
Currently, when using this:
/* https://stackoverflow.com/questions/75909821/the-classdecorator-type-defined-in-tc39-proposal-decorators-is-not-applicabl */
/* @ts-ignore TS1270 TS decorators are not fully TC39-compatible yet. */
@VueComponentOptions
export default class ReactiveStateExperimentalSample {
}
I encounter the following error:
ReactiveState-ExperimentalSample.vue?../../node_modules/ts-loader/index.js??clonedRuleSet-1!../../node_modules/vue-loader/dist/index.js??ruleSet%5B1%5D.rules%5B10%5D.use%5B0%5D:7 Uncaught TypeError: Function expected ... (remaining text)
The cause of this is that if any value other than a function is returned, an error will be thrown.
You can do it by wrapping defineComponent inside a function:
const VueComponentOptions: ClassDecorator = (targetClass: Function, context: ClassDecoratorContext): Function | void => {
const vueOptions: ComponentOptions = {
methods: {},
computed: {}
};
return (): ReturnType<typeof defineComponent> => defineComponent(vueOptions);
};
This time, there are no JavaScript runtime errors, but Vue emits the warning:
runtime-core.esm-bundler.js:170 [Vue warn]: Invalid VNode type: undefined (undefined) at at
As a result, the component will not be rendered. My question is, what should I do inside VueComponentOptions for the newest decorators API + Vue 3 case?
Please avoid recommending third-party libraries as my focus is on implementation.