Vue-class-component: Are there any plans to make decorators optional?

[ArmorDarks]

Decorators don't seem to be a crucial feature for implementing class-based Vue components. However, right now they are mandatory.

Besides, because decorators are only a proposal, they do not play well with some additional systems. Like Flow, which can't type decorators (#237).

Because decorators are _almost_ a syntax sugar on top of the classes, maybe there are some chances that they will be made optional?

[HerringtonDarkholme]

Yes, we're planning Vue 3.0 which will support class syntax natively!

Decorators don't seem to be a crucial feature for implementing class-based Vue components

Sadly, for Vue 2.0, decorator is an important syntax sugar. Vue 2.0 requires a component object to create new component. There is no way to process a class function natively so we must convert the class to component object. The decorator is such function.

If you don't like decorator, you can use component as a plain function call. Other than the syntax sugar, it should work without stage-2 proposal.

[ArmorDarks]

Aha, Component actually can be used directly. Great, thanks for the hint!

So, that works flawlessly:

import Vue from 'vue'
import Component from 'vue-class-component'

export default Component({
  props: {
    propMessage: {
      type: String,
      default: 'hi'
    }
  }
})(class App extends Vue {
  // initial data
  msg = 555

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }

  render () {
    return <div>{this.helloMsg}</div>
  }
})

Should I make PR to the readme, which will explain that it is possible to use the library without decorators?

[HerringtonDarkholme]

Should I make PR to the readme

Probably no, decorator users should understand decorators before choosing this library.

[ArmorDarks]

The thing is not only decorator users would like to use it, and, logically, most of them will have no idea how decorators work and is it possible to use Component without actual decorators syntax

[ktsn]

Decorators on vue-class-component is expected to be used with decorator syntax. If you use only @Component decorator, the alternative way is simple. However if there are property decorators, you need to write much complex code and always consider its application order.

So I don't recommend the users use them without decorator syntax nor adding the way into docs. But it's totally fine if you are sure about decorator behaviour.

[ArmorDarks]

However if there are property decorators, you need to write much complex code and always consider its application order.

How is it so? Writing props with non-decorators syntax is straightforward. I don't see anything complexity here:

// without props
export default Component()(class App extends Vue {})

// same
export default Component(class App extends Vue {})

// with props
export default Component({ props: ... })(class App extends Vue {})

It is hard to do any error here. Lib contributors already ensured that Component is flexible enough not to make any confusion.

// the alternative way is simple.

As already been stated above, it isn't obvious for regular users. Don't forget that decorators aren't part of the specs yet, so it is strange to expect everybody to understand the ways they can be used.

[ktsn]

I'm talking about property decorators, not props.

If you want to use some property decorators you need to call them before class decorator.

class App extends Vue {
  foo(arg) {
    // ...
  }
}

// property decorator
somePropDecorator(App.prototype, 'foo')

// class decorator must be called after all other decorators.
export default Component(App)

In addition, as the latest decorator spec is much different with the legacy one (which vue-class-component currently supported), there will be much migration process if you use the decorators without decorator syntax. That is the reasons I don't recommend to use decorators by such for any users.

[ArmorDarks]

Or just don't use decorators on class properties at all. There are other ways to do the same thing. Problem solved.