ember-responsive - npm Package Compare versions

Comparing version 3.0.6 to 4.0.0

addon-test-support/index.js

@@ -21,6 +21,4 @@ import { getContext, settled } from '@ember/test-helpers';
 
-  let matches = media.get('matches');
   run(() => {
-    matches.clear();
-    matches.addObjects(breakpointArray);
+    media.matches = breakpointArray;
     media._triggerMediaChanged();
@@ -27,0 +25,0 @@ });

addon/helpers/media.js

@@ -5,15 +5,16 @@ import Helper from '@ember/component/helper';
 
-export default Helper.extend({
+export default class MediaHelper extends Helper {
+  @service() media;
+
   init() {
-    this._super(...arguments);
-    this.get('media').on('mediaChanged', () => {
+    super.init(...arguments);
+
+    this.media.on('mediaChanged', () => {
       this.recompute();
     });
-  },
+  }
 
-  media: service(),
-
   compute([prop]) {
     return get(this, `media.${prop}`);
   }
-});
+}

addon/services/media.js

 import Ember from 'ember';
 import { run } from '@ember/runloop';
-import { A } from '@ember/array';
-import { computed, defineProperty } from '@ember/object';
+import { tracked } from '@glimmer/tracking'
+import { set } from '@ember/object';
 import Service from '@ember/service';
@@ -60,3 +60,3 @@ import { classify, dasherize } from '@ember/string';
 *
-* console.log(media.get('matches'));
+* console.log(media.matches);
 * // => Ember.Set(['desktop', 'mobile']);
@@ -81,23 +81,39 @@ * ```
 */
-export default Service.extend(Evented, {
-  _mocked: Ember.testing,
-  _mockedBreakpoint: 'desktop',
+export default class MediaService extends Service.extend(Evented) {
+  // Ember only sets Ember.testing when tests are starting
+  // eslint-disable-next-line ember/no-ember-testing-in-module-scope
+  _mocked = Ember.testing;
+  _mockedBreakpoint = 'desktop';
+
   /**
+  * @property  _matches
+  * @type      Array
+  */
+  @tracked _matches;
+
+  /**
   * A set of matching matchers.
   *
   * @property  matches
-  * @type      Ember.NativeArray
-  * @default   Ember.NativeArray
+  * @type      Array
   */
-  matches: computed(function() {
-    return A(this.get('_mocked') ? [this.get('_mockedBreakpoint')] : []);
-  }),
+  get matches() {
+    if (this._matches) {
+      return this._matches
+    }
 
+    return (Ember.testing && this._mocked) ? [this._mockedBreakpoint] : [];
+  }
+
+  set matches(value) {
+    this._matches = value;
+  }
+
   /**
-    * A hash of listeners indexed by their matcher's names
-    *
-    * @property
-    * @type Object
-    */
-  listeners: {},
+  * A hash of listeners indexed by their matcher's names
+  *
+  * @property
+  * @type Object
+  */
+  listeners = {};
 
@@ -107,3 +123,3 @@ /**
    */
-  matchers: {},
+  matchers = {};
 
@@ -118,3 +134,3 @@ /**
   */
-  mql: detectMatchMedia(),
+  mql = detectMatchMedia();
 
@@ -128,4 +144,4 @@ /**
   init() {
-    this._super(...arguments);
-    const owner = getOwner(this);
+    super.init(...arguments);
+
     const breakpoints = getOwner(this).lookup('breakpoints:main');
@@ -135,12 +151,18 @@ if (breakpoints) {
         const cpName = `is${classify(name)}`;
-        defineProperty(this, cpName, computed('matches.[]', function () {
-          return this.get('matches').indexOf(name) > -1;
-        }));
-        defineProperty(this, name, computed(cpName, function () {
-          return this.get(cpName);
-        }));
+        Object.defineProperty(this, cpName, {
+          get() {
+            return this.matches.indexOf(name) > -1;
+          }
+        });
+
+        Object.defineProperty(this, name, {
+          get() {
+            return this[cpName];
+          }
+        });
+
         this.match(name, breakpoints[name]);
       });
     }
-  },
+  }
 
@@ -154,15 +176,15 @@ /**
   */
-  classNames: computed('matches.[]', function() {
-    return this.get('matches').map(function(name) {
+  get classNames() {
+    return this.matches.map(function(name) {
       return `media-${dasherize(name)}`;
     }).join(' ');
-  }),
+  }
 
   _triggerMediaChanged() {
     this.trigger('mediaChanged', {});
-  },
+  }
 
   _triggerEvent() {
     run.once(this, this._triggerMediaChanged);
-  },
+  }
 
@@ -191,23 +213,26 @@ /**
   match(name, query) {
-    if (this.get('_mocked')) {
+    // see https://github.com/ember-cli/eslint-plugin-ember/pull/272
+    if (Ember.testing && this._mocked) {
       return;
     }
 
-    const matcher = this.get('mql')(query);
+    const mql = this.mql;
+    const matcher = mql(query);
 
     const listener = (matcher) => {
-      if (this.get('isDestroyed')) {
+      if (this.isDestroyed) {
         return;
       }
 
-      this.set(`matchers.${name}`, matcher);
+      set(this, `matchers.${name}`, matcher);
 
       if (matcher.matches) {
-        this.get('matches').addObject(name);
+        this.matches = Array.from(new Set([...this.matches, name]));
       } else {
-        this.get('matches').removeObject(name);
+        this.matches = Array.from(new Set(this.matches.filter(key => key !== name)));
       }
+
       this._triggerEvent();
     };
-    this.get('listeners')[name] = listener;
+    this.listeners[name] = listener;
 
@@ -221,3 +246,3 @@ if (matcher.addListener) {
   }
-});
+}
 
@@ -224,0 +249,0 @@ function detectMatchMedia() {

blueprints/ember-responsive/index.js

@@ -1,3 +0,1 @@
-/* jshint node: true */
-
 const EOL = require('os').EOL;
@@ -4,0 +2,0 @@

CHANGELOG.md

 # Changelog
 
+### [4.0.0]
+
+- Use Tracked based services on Match ([#286](https://github.com/freshbooks/ember-responsive/pull/286) @snewcomer) 
+- Breaking Change:  Bump Node 10
+
 ### [3.0.5]
@@ -4,0 +9,0 @@ - Update dependencies ([#153](https://github.com/freshbooks/ember-responsive/pull/153) @k-fish)

index.js

 'use strict';
 
 module.exports = {
-  name: 'ember-responsive'
+  name: require('./package').name
 };

package.json

 {
   "name": "ember-responsive",
-  "version": "3.0.6",
+  "version": "4.0.0",
   "description": "An ember-cli addon that gives you a simple, Ember-aware way of dealing with media queries.",
@@ -11,3 +11,3 @@ "directories": {
   "engines": {
-    "node": "^4.5 || 6.* || >= 7.*"
+    "node": "10.* || >= 12"
   },
@@ -17,6 +17,7 @@ "author": "FreshBooks",
   "scripts": {
-    "build": "ember build",
-    "lint:js": "eslint ./*.js addon addon-test-support app config lib server test-support tests",
+    "build": "ember build --environment=production",
+    "lint:js": "eslint .",
     "start": "ember serve",
-    "test": "ember try:each"
+    "test": "ember test",
+    "test:all": "ember try:each"
   },
@@ -27,26 +28,28 @@ "dependencies": {
   "devDependencies": {
+    "@ember/optional-features": "^1.3.0",
+    "@glimmer/tracking": "^1.0.0",
+    "babel-eslint": "^10.0.3",
+    "ember-auto-import": "^1.5.3",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-ajax": "^5.0.0",
-    "ember-cli": "~3.17.0",
+    "ember-cli": "~3.16.2",
     "ember-cli-dependency-checker": "^3.2.0",
-    "ember-cli-htmlbars": "^4.0.0",
-    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
+    "ember-cli-eslint": "^5.1.0",
+    "ember-cli-htmlbars": "^5.1.2",
     "ember-cli-inject-live-reload": "^2.0.1",
-    "ember-cli-qunit": "^4.4.0",
-    "ember-cli-shims": "^1.2.0",
+    "ember-qunit": "^4.6.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-uglify": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.0",
-    "ember-load-initializers": "^2.0.0",
+    "ember-export-application-global": "^2.0.1",
+    "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-resolver": "^5.1.3",
+    "ember-resolver": "^7.0.0",
     "ember-sinon": "^4.0.0",
-    "ember-source": "~3.13.0",
+    "ember-source": "~3.16.0",
     "ember-source-channel-url": "^2.0.1",
-    "ember-try": "^1.2.1",
-    "eslint-plugin-ember": "^7.0.0",
+    "ember-try": "^1.4.0",
+    "eslint-plugin-ember": "^8.5.2",
     "eslint-plugin-node": "^10.0.0",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^0.9.0"
+    "qunit-dom": "^1.0.0"
   },
@@ -53,0 +56,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

22829

decreased by-11.44%

Dev dependency count

26

increased by8.33%

Number of package files

17

decreased by-15%

Lines of code

322

decreased by-10.8%

No dependency changes