ember @arg decorator

arg.js

/**
 * @description Declares a one-way read-only component property, which reads from `this.args`
 *  and falls back to default declared on the class property.
 * @export
 * @returns {ClassProperty}
 */
export default function arg(target, property, descriptor) {
  let _value;

  if (descriptor.initializer !== null) {
    _value = descriptor.initializer();
  }

  const newDescriptor = {
    get() {
      if (property in this.args) {
        return this.args[property];
      }

      if (!('_value' in newDescriptor)) {
        newDescriptor._value = _value;
      }

      return newDescriptor._value;
    },
    enumerable: true,
    configurable: true
  };

  return newDescriptor;
}

Helps with the ambiguity of whether to reference @aProperty or this.aProperty in templates. By this standard, if your component has a javascript file, you'll use this., and if it is template-only, you'll use @

Usage

export default SomeComponent extends Component {
  @arg aProperty = 'defaultValue';
}