@f-list/vue-ts
This is a little helper library for precompiling Vue class components using a TypeScript transformer.
It is mostly intended for internal usage, and will not necessarily respect SemVer.
Usage
import '@f-list/vue-ts'
exposes the following decorators:
-
@Component
for classes, accepting an optionalVue.ComponentOptions
object. Do not usecomputed
,props
,methods
,watch
,data
, or any lifecycle hooks here. -
@Prop
for properties, accepting an optionalVue.PropOptions
object - these will be added to theprops
specification. -
@Watch
for methods, accepting a watch expression string and an optionalVue.WatchOptions
object - these will be added to thewatch
specification. -
@Hook
for methods, accepting the name of a lifecycle function. These will be called in the respective lifecycle hooks.
In any class marked with @Component
:
- Property declarations not marked with
@Prop
will be added todata
. Properties without an initializer will be initialized toundefined
. - Method declarations not marked with
@Hook
will be added tomethods
. - Get and set accessor declarations will be added to
computed
. The existence of a set accessor without a corresponding get accessor is treated as an error.
The TypeScript transformer can be imported using const vueTransformer = require('@f-list/vue-ts/transform').default;
.
It can then be added to ts-loader using the getCustomTransformers: () => ({before: [vueTransformer]})
option.
Important Notes
For any decorator parameters, make sure to only use literals rather than references. While technically syntactically correct and not detected as an error by TypeScript, the transformer is not able to resolve such references, and the resulting behaviour is undefined.
The super
keyword is only allowed for base method references. The occurrence outside of the expression of a call is treated as an error.