mercredi 9 janvier 2019

How to resolve Ember deprecation: "Use defineProperty to define computed properties"

While attempting to update an Ember application to Ember 3.6 (currently on the 3.4 LTS), I have come across several instances of the following deprecation.

https://deprecations-app-prod.herokuapp.com/deprecations/v3.x/#toc_ember-meta-descriptor-on-object

Use defineProperty to define computed properties

until: 3.5.0

id: ember-meta.descriptor-on-object

Although uncommon, it is possible to assign computed properties directly to objects and have them be implicitly computed from eg Ember.get. As part of supporting ES5 getter computed properties, assigning computed properties directly is deprecated. You should replace these assignments with calls to defineProperty.

These deprecations display in the browser console as:

DEPRECATION: [DEPRECATED] computed property 'session' was not set on object '<app@component:component1::ember439>' via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object] See https://emberjs.com/deprecations/v3.x#toc_use-defineProperty-to-define-computed-properties for more details.

DEPRECATION: [DEPRECATED] computed property 'gStories' was not set on object '<app@component:component2::ember427>' via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object] See https://emberjs.com/deprecations/v3.x#toc_use-defineProperty-to-define-computed-properties for more details.

component1:

HBS:

<div>
  
    <h2>Signed in</h2>
  
    <h2>Sign Up</h2>
    
  
</div>

JS:

The session service is from ember-simple-auth: http://ember-simple-auth.com/api/classes/SessionService.html

import Component from '@ember/component';
import { service } from 'ember-decorators/service';

export default class Component1 extends Component {
  @service('session') session;
}

component2:

HBS:


  <h2>
    Stories
  </h2>

  
    
  


JS:

import Component from '@ember/component';
import { computed } from 'ember-decorators/object';
import { argument } from '@ember-decorators/argument';

export default class Component2 extends Component {
  constructor() {
    super(...arguments);
  }

  @argument
  stories = null;

  @computed('stories')
  get gStories() {
    let stories = this.get('stories');
    let gStories = [];
    stories.forEach((story) => {
      "use strict";

      if (story.get('type') === 'g') {
        gStories.pushObject(story);
      }
    });

    return gStories;
  }
}

I'm hoping that someone can show me how to resolve the two cases above in which I can clean up the remainder of my application. Perhaps there is a better coding practice that I should be using instead as the deprecation states "Although uncommon".

Any additional background information on this deprecation would be appreciated.

Thanks in advance!




Aucun commentaire:

Enregistrer un commentaire