glimmerjs/glimmer-component

Computed Property Syntax

Samsinite opened this issue · 1 comments

Hi guys! Again, excited about glimmer components.

One of my frustrations though, is with the current computed property syntax:

  @tracked('firstName', 'lastName')
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

I like the computed properties, and how it uses memoization to store result of the function call using the "tracked" params. The problem is, sometimes I find developers new to the ember equivalent called Ember.computed doing one of these two things, causing bugs:

@tracked('firstName')
get fullName() {
  return `${this.firstName} ${this.lastName}`;
}

or this:

@tracked('firstName', 'lastName')
get fancyName() {
  return `@${this.firstName}`;
}

I actually see this occasionally from new ember developers with Ember.computed(). What I've always wanted, is for the dependent params to be passed into the function, helping prevent developers from incorrectly tracking the wrong params:

@tracked('firstName', 'lastName')
fullName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

With some good decoration, couldn't this be turned into a getter?

function tracked(...args) {    
  return function(target, key, descriptor) {
    const fn = descriptor.value;    

    return {
      get() {                  
        const fnArgs = args.map(arg => this[arg]);
  
        return fn.apply(this, fnArgs);  
      }
    };
  };
}

Then, unless I am mistaken, this.fullName should continue to work.

Obviously the example tracked decorator directly above doesn't do any memoization, which would change it slightly.

Thoughts?

This repo has been merged with glimmerjs/glimmer.js (into a monorepo setup). I am not sure if this issue is still applicable, but if you could confirm it is still an ongoing concern and open it over there that would be very helpful.

Sorry for the noise, but thank you for your help!