upgrade deps

- fix mapbox styles not being included
- fix marker element removal timing issue

Author: kturney

.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

.eslintrc.js

@@ -1,9 +1,14 @@
+'use strict';
+
 module.exports = {
   root: true,
   parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: [
     'ember'

.travis.yml

@@ -1,7 +1,7 @@
 ---
 language: node_js
 node_js:
-  - "8"
+  - "10"
 
 services:
   - xvfb
@@ -25,32 +25,34 @@ branches:
     - /^v\d+\.\d+\.\d+/
 
 jobs:
-  fail_fast: true
+  fast_finish: true
 
   include:
     # runs linting and tests with current locked deps
 
     - stage: "Tests"
       name: "Tests"
-      install:
-        - yarn install --non-interactive
       script:
-        - yarn lint:hbs
-        - yarn lint:js
-        - yarn test
+        - yarn lint
+        - yarn test:ember
 
-    - name: "Floating Dependencies"
+    - stage: "Additional Tests"
+      name: "Floating Dependencies"
+      install:
+        - yarn install --no-lockfile --non-interactive
       script:
-        - yarn test
+        - yarn test:ember
 
-    - stage: "Additional Tests"
-      env: EMBER_TRY_SCENARIO=ember-lts-3.4
     - env: EMBER_TRY_SCENARIO=ember-lts-3.8
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.12
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.16
     - env: EMBER_TRY_SCENARIO=ember-release
     - env: EMBER_TRY_SCENARIO=ember-beta
+    - env: EMBER_TRY_SCENARIO=ember-canary
+    - env: EMBER_TRY_SCENARIO=ember-classic
 
 install:
-  - yarn install --no-lockfile --non-interactive
+  - yarn install --non-interactive
 
 script:
   - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019
+Copyright (c) 2020
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -30,9 +30,9 @@ module.exports = function(environment) {
 ```
 
 ## Compatibility
-* Ember.js v3.4 or above
+* Ember.js v3.8 or above
 * Ember CLI v2.13 or above
-* Node.js v8 or above
+* Node.js v10 or above
 
 ## API Documentation
 See the detailed [API Documentation](API.md).

addon/components/mapbox-gl-marker.js

@@ -1,8 +1,7 @@
 import { assert } from '@ember/debug';
 import { assign } from '@ember/polyfills';
 import { getOwner } from '@ember/application';
-import { getProperties, get, set } from '@ember/object';
-import { run } from '@ember/runloop';
+import { getProperties, get } from '@ember/object';
 import Component from '@ember/component';
 import layout from '../templates/components/mapbox-gl-marker';
 
@@ -13,6 +12,7 @@ import layout from '../templates/components/mapbox-gl-marker';
  */
 export default Component.extend({
   layout,
+  tagName: '',
 
   MapboxGl: null,
   map: null,
@@ -22,47 +22,32 @@ export default Component.extend({
   init() {
     this._super(...arguments);
 
-    this.marker = null;
-  },
+    this.domContent = document.createElement('div');
+    const { lngLat, initOptions } = getProperties(this, 'lngLat', 'initOptions');
 
-  didInsertElement() {
-    this._super(...arguments);
+    assert('mapbox-gl-marker requires lngLat, maybe you passed latLng?', lngLat);
+
+    const options = assign({},
+      get(getOwner(this).resolveRegistration('config:environment'), 'mapbox-gl.marker'),
+      initOptions);
 
-    run.scheduleOnce('afterRender', this, this._setup);
+    this.marker = new this.MapboxGl.Marker(this.domContent, options)
+      .setLngLat(lngLat)
+      .addTo(this.map);
   },
 
   didUpdateAttrs() {
     this._super(...arguments);
 
-    if (this.marker !== null) {
-      const lngLat = get(this, 'lngLat');
-      assert('mapbox-gl-marker requires lngLat, maybe you passed latLng?', lngLat);
+    const lngLat = get(this, 'lngLat');
+    assert('mapbox-gl-marker requires lngLat, maybe you passed latLng?', lngLat);
 
-      this.marker.setLngLat(lngLat);
-    }
+    this.marker.setLngLat(lngLat);
   },
 
   willDestroy() {
     this._super(...arguments);
 
-    if (this.marker !== null) {
-      this.marker.remove();
-    }
-  },
-
-  _setup() {
-    const { lngLat, initOptions } = getProperties(this, 'lngLat', 'initOptions');
-
-    assert('mapbox-gl-marker requires lngLat, maybe you passed latLng?', lngLat);
-
-    const options = assign({},
-      get(getOwner(this).resolveRegistration('config:environment'), 'mapbox-gl.marker'),
-      initOptions);
-
-    const marker = new this.MapboxGl.Marker(this.element, options)
-      .setLngLat(lngLat)
-      .addTo(this.map);
-
-    set(this, 'marker', marker);
+    this.marker.remove();
   }
 });

addon/templates/components/mapbox-gl-marker.hbs

@@ -1,7 +1,7 @@
-{{#if marker}}
+{{#in-element this.domContent}}
   {{yield
     (hash
       popup=(component 'mapbox-gl-popup' marker=this.marker MapboxGl=this.MapboxGl)
     )
   }}
-{{/if}}
+{{/in-element}}

addon/templates/components/mapbox-gl-popup.hbs

@@ -1,3 +1,3 @@
-{{#in-element domContent}}
+{{#in-element this.domContent}}
   {{yield (hash on=(component 'mapbox-gl-on' eventSource=this.popup))}}
 {{/in-element}}

addon/templates/components/mapbox-gl-source.hbs

@@ -1,5 +1,5 @@
 {{yield
   (hash
-    layer=(component 'mapbox-gl-layer' map=map _sourceId=sourceId)
+    layer=(component 'mapbox-gl-layer' map=this.map _sourceId=this.sourceId)
   )
 }}

config/ember-try.js

@@ -8,18 +8,26 @@ module.exports = async function() {
 
     scenarios: [
       {
-        name: 'ember-lts-3.4',
+        name: 'ember-lts-3.8',
         npm: {
           devDependencies: {
-            'ember-source': '~3.4.0'
+            'ember-source': '~3.8.0'
           }
         }
       },
       {
-        name: 'ember-lts-3.8',
+        name: 'ember-lts-3.12',
         npm: {
           devDependencies: {
-            'ember-source': '~3.8.0'
+            'ember-source': '~3.12.0'
+          }
+        }
+      },
+      {
+        name: 'ember-lts-3.16',
+        npm: {
+          devDependencies: {
+            'ember-source': '~3.16.0'
           }
         }
       },
@@ -39,6 +47,14 @@ module.exports = async function() {
           }
         }
       },
+      {
+        name: 'ember-canary',
+        npm: {
+          devDependencies: {
+            'ember-source': await getChannelURL('canary')
+          }
+        }
+      },
       // The default `.travis.yml` runs this scenario via `npm test`,
       // not via `ember try`. It's still included here so that running
       // `ember try:each` manually or from a customized CI config will run it
@@ -48,6 +64,21 @@ module.exports = async function() {
         npm: {
           devDependencies: {}
         }
+      },
+      {
+        name: 'ember-classic',
+        env: {
+          EMBER_OPTIONAL_FEATURES: JSON.stringify({
+            'application-template-wrapper': true,
+            'default-async-observers': false,
+            'template-only-glimmer-components': false
+          })
+        },
+        npm: {
+          ember: {
+            edition: 'classic'
+          }
+        }
       }
     ]
   };

index.js

@@ -16,27 +16,15 @@ module.exports = {
     }
   },
 
-  treeForStyles(tree) {
-    const Funnel = require('broccoli-funnel');
-
-    const mapboxDirName = require('path').dirname(require.resolve('mapbox-gl'));
-    const mapboxGlTree = new Funnel(mapboxDirName, {
-      files: [ 'mapbox-gl.css' ],
-      destDir: 'app/styles'
-    });
-
-    if (tree) {
-      const MergeTrees = require('broccoli-merge-trees');
-
-      return new MergeTrees([ tree, mapboxGlTree ]);
-    }
-
-    return mapboxGlTree;
-  },
-
   included(app) {
     this._super.included.apply(this, arguments);
 
-    app.import('app/styles/mapbox-gl.css');
+    const path = require('path');
+    const mapboxDirName = path.dirname(require.resolve('mapbox-gl'));
+
+    app.import(path.join(
+      mapboxDirName.slice(mapboxDirName.lastIndexOf('node_modules')),
+      'mapbox-gl.css'
+    ));
   }
 };