Inline decorator syntax

[littledan]

Previous discussion: https://github.com/tc39/proposal-decorators-previous/issues/22

OK to leave for v2?

[bmeck]

I'd would prefer to leave it for a follow on.

[trusktr]

Maybe this can be closed unless there's a clear benefit. We can avoid designing class decorators in such a way as the linked issue.

For example, instead of something like this (coughAngularcough):

@component({
  props: {
    foo: Number,
  },
  template: html`
     <div>100 lines of HTML. {{foo}}</div>
  `
})
class MyComponent extends Component {} // why does this empty class even exist?

design it in a more semantic way:

class MyComponent extends Component {
  @numberAttribute accessor foo = 123

  template = () => html`
     <div>100 lines of HTML. ${this.foo}</div>
  `
}

Here's a real-world example:

• class header for component/element: https://github.com/lume/lume/blob/d6bf8fcf98bedb549d20983a561cf27c3cdb9639/src/cameras/CameraRig.ts#L62-L63
• field decorators for attributes/props inside of class: https://github.com/lume/lume/blob/d6bf8fcf98bedb549d20983a561cf27c3cdb9639/src/cameras/CameraRig.ts#L74-L85
• template inside of class: https://github.com/lume/lume/blob/d6bf8fcf98bedb549d20983a561cf27c3cdb9639/src/cameras/CameraRig.ts#L464-L499