Meteor and Ember Support in JavaScript Analyzer

New in DeepSource
,
1

Hey y’all — DeepSource JavaScript analyzer now supports two new plugins — Meteor and Ember.

Meteor

JavaScript analyzer can now detect 11 additional issues. Some of the are listed below:

JS- 0730 - Should use consistent event handler parameter
Prevent the use of differently named parameters in event handlers to achieve more consistent code.

The not-preferred way:

Template.foo.events({
  // 'foo' does not match 'event'
  'submit form': function (foo) {}
})

The preferred way:

Template.foo.events({
  'submit form': function (event) {}
})

JS-0735: Prevent DOM lookup in template onCreated callback

When the onCreated lifecycle callback is called, the template does not yet exist in the DOM. Trying to access its elements is most likely an error.

The not preferred way:

Template.foo.onCreated(function () {
  $('.bar').focus()
})

The preferred way:

Template.foo.onCreated(function () {
  console.log('hello')
})

Template.foo.onRendered(function () {
  $('.bar').focus()
  Template.instance().$('.bar').focus()
})

JS-0729: Should use Meteor.defer instead of Meteor.setTimeout

It is better to use the dedicated method instead of relying on a side-effect of Meteor.setTimeout.

The not-preferred way:

Meteor.setTimeout(function () {}, 0)

The preferred way:

Meteor.defer(function () {}, 0)

Ember

Ember Supports 50 issues and 13 autofixes. Some of the them are listed:

JS-0770: Should not use needs to load other controllers

needs is deprecated in ember 1.x and removed in 2.x.

The not-preferred way :

export default Controller.extend({
  needs: ['comments'],
  newComments: alias('controllers.comments.newest')
});

The preferred way :

import Controller, { inject as controller } from '@ember/controller';

export default Component.extend({
  comments: controller(),
  newComments: alias('comments.newest')
});

JS-0774: Should not use Arrow functions

Arrow functions should not be used in computed properties

The not preferred way:

import EmberObject, { computed } from '@ember/object';

const Person = EmberObject.extend({
  fullName: computed('firstName', 'lastName', () => {
    return `${this.firstName} ${this.lastName}`;
  })
});

The preferred way:

import EmberObject, { computed } from '@ember/object';

const Person = EmberObject.extend({
  fullName: computed('firstName', 'lastName', function () {
    return `${this.firstName} ${this.lastName}`;
  })
});

JS-0782: Should not use this._super ( autofixable )

While this._super() is the only way to invoke an overridden method in an EmberObject.extend-style class, the _super method doesn’t work properly when using native class syntax.

The not-preferred way :

import Component from '@ember/component';

export default class MyComponent extends Component {
  init(...args) {
    this._super(...args);
    // Other logic
  }
}

The preferred way:

import Component from '@ember/component';

export default class MyComponent extends Component {
  init(...args) {
    super.init(...args);
    // Other logic
  }
}

JS-0785: Should not use getWithDefault

The behaviour of getWithDefault is inconsistence with the native ||.

The not-preferred way:

import { getWithDefault } from '@ember/object';

const test = getWithDefault(this, 'key', []);

The preferred way:

const test = this.key === undefined ? [] : this.key;

How to enable the plugins?

To enable these plugins on your repository, add the following snippet to your .deepsource.toml :

version = 1

[[analyzers]]
name = "javascript"
enabled = true

  [analyzers.meta]
  plugins = ["meteor"]

and

version = 1

[[analyzers]]
name = "javascript"
enabled = true

  [analyzers.meta]
  plugins = ["ember"]