use ember-composability-tools 🎉

addon/components/base-layer.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import ChildMixin from 'ember-leaflet/mixins/child';
+import { ChildMixin } from 'ember-composability-tools';
 import { InvokeActionMixin } from 'ember-invoke-action';
 /* global L */
 
@@ -21,11 +21,11 @@ export default Component.extend(ChildMixin, InvokeActionMixin, {
   /*
    * Method called by parent when the layer needs to setup
    */
-  layerSetup() {
+  didInsertParent() {
     this._layer = this.createLayer();
     this._addObservers();
     this._addEventListeners();
-    if (this.get('containerLayer')) {
+    if (this.get('parentComponent')) {
       this.addToContainer();
     }
     this.didCreateLayer();
@@ -35,27 +35,27 @@ export default Component.extend(ChildMixin, InvokeActionMixin, {
    * Default logic for adding the layer to the container
    */
   addToContainer() {
-    this.get('containerLayer')._layer.addLayer(this._layer);
+    this.get('parentComponent')._layer.addLayer(this._layer);
   },
 
   /*
    * Method called by parent when the layer needs to teardown
    */
-  layerTeardown() {
+  willDestroyParent() {
     this.willDestroyLayer();
     this._removeEventListeners();
     this._removeObservers();
-    if (this.get('containerLayer') && this._layer) {
+    if (this.get('parentComponent') && this._layer) {
       this.removeFromContainer();
     }
-    this._layer = null;
+    delete this._layer;
   },
 
   /*
    * Default logic for removing the layer from the container
    */
   removeFromContainer() {
-    this.get('containerLayer')._layer.removeLayer(this._layer);
+    this.get('parentComponent')._layer.removeLayer(this._layer);
   },
 
   leafletOptions: [],

addon/components/div-overlay-layer.js

@@ -1,18 +1,11 @@
-import Ember from 'ember';
 import BaseLayer from 'ember-leaflet/components/base-layer';
 import layout from '../templates/div-overlay';
+import { RenderBlockMixin } from 'ember-composability-tools';
 
-const { computed } = Ember;
-
-export default BaseLayer.extend({
+export default BaseLayer.extend(RenderBlockMixin, {
   layout,
 
   leafletOptions: [
     'offset', 'className', 'pane'
-  ],
-
-  // creates a document fragment that will hold the DOM
-  destinationElement: computed(function() {
-    return document.createElement('div');
-  })
+  ]
 });

addon/components/leaflet-map.js

@@ -1,12 +1,12 @@
 import Ember from 'ember';
 import BaseLayer from 'ember-leaflet/components/base-layer';
-import ContainerMixin from 'ember-leaflet/mixins/container';
+import { ParentMixin } from 'ember-composability-tools';
 import toLatLng from 'ember-leaflet/macros/to-lat-lng';
 import layout from '../templates/leaflet-map';
 const { assert } = Ember;
 const assign = Ember.assign || Ember.merge;
 
-export default BaseLayer.extend(ContainerMixin, {
+export default BaseLayer.extend(ParentMixin, {
   tagName: 'div',
   layout,
 
@@ -44,26 +44,6 @@ export default BaseLayer.extend(ContainerMixin, {
 
   center: toLatLng(),
 
-  // Since no parent container layer is controling the rendering flow,
-  // we need to implement render hooks and call `layerSetup` and `layerTeardown` ourselves.
-  //
-  // This is the only case where it happens, because this is a real DOM element,
-  // and its rendering flow reverts back to Ember way.
-  containerLayer: null,
-
-  didInsertElement() {
-    this._super(...arguments);
-    this.layerSetup();
-    this.get('_childLayers').invoke('layerSetup');
-  },
-
-  willDestroyElement() {
-    this._super(...arguments);
-    this.get('_childLayers').invoke('layerTeardown');
-    this.get('_childLayers').clear();
-    this.layerTeardown();
-  },
-
   // By default all layers try to register in a container layer.
   // It is not the case of the map itself as it is the topmost container.
   registerWithParent() { },
@@ -80,7 +60,7 @@ export default BaseLayer.extend(ContainerMixin, {
   },
 
   // Manually call `remove` method in the case of the root map layer.
-  layerTeardown() {
+  willDestroyParent() {
     let layer = this._layer;
     this._super(...arguments);
     layer.remove();

addon/components/popup-layer.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
 import DivOverlayLayer from 'ember-leaflet/components/div-overlay-layer';
 
-const { computed, observer, run } = Ember;
+const { observer, run } = Ember;
 
 export default DivOverlayLayer.extend({
 
@@ -11,11 +11,6 @@ export default DivOverlayLayer.extend({
     'autoClose'
   ],
 
-  // creates a document fragment that will hold the DOM
-  destinationElement: computed(function() {
-    return document.createElement('div');
-  }),
-
   isOpen() {
     // leaflet 1 added an `isOpen` method
     return this._layer.isOpen ? this._layer.isOpen() : this._layer._isOpen;
@@ -30,9 +25,9 @@ export default DivOverlayLayer.extend({
 
   popupOpenDidChange: observer('popupOpen', function() {
     if (this.get('popupOpen')) {
-      if (!this.isOpen()) { this.get('containerLayer')._layer.openPopup(); }
+      if (!this.isOpen()) { this.get('parentComponent')._layer.openPopup(); }
     } else {
-      if (this.isOpen()) { this.get('containerLayer')._layer.closePopup(); }
+      if (this.isOpen()) { this.get('parentComponent')._layer.closePopup(); }
     }
   }),
 
@@ -55,19 +50,20 @@ export default DivOverlayLayer.extend({
 
   willDestroyLayer() {
     this._removePopupListeners();
+    this.closePopup();
   },
 
   addToContainer() {
-    this.get('containerLayer')._layer.bindPopup(this._layer);
+    this.get('parentComponent')._layer.bindPopup(this._layer);
   },
 
   removeFromContainer() {
-    this.get('containerLayer')._layer.unbindPopup();
+    this.get('parentComponent')._layer.unbindPopup();
   },
 
-  _onLayerRemove({layer}) {
+  _onLayerRemove({ layer }) {
     if (layer === this._layer) {
-      if (this.get('containerLayer')._layer._map._fadeAnimated) {
+      if (this.get('parentComponent')._layer._map._fadeAnimated) {
         this._destroyAfterAnimation = run.later(() => {
           if (!this.get('isDestroyed') && !this.get('isDestroying')) {
             this.set('shouldRender', false);
@@ -96,12 +92,12 @@ export default DivOverlayLayer.extend({
     };
     // we need to user `layerremove` event becase it's the only one that fires
     // *after* the popup was completely removed from the map
-    let containerLayer = this.get('containerLayer');
-    containerLayer._layer._map.addEventListener('layerremove', this._onLayerRemove, this);
+    let parentComponent = this.get('parentComponent');
+    parentComponent._layer._map.addEventListener('layerremove', this._onLayerRemove, this);
   },
 
   _removePopupListeners() {
-    let containerLayer = this.get('containerLayer');
-    containerLayer._layer._map.removeEventListener('layerremove', this._onLayerRemove, this);
+    let parentComponent = this.get('parentComponent');
+    parentComponent._layer._map.removeEventListener('layerremove', this._onLayerRemove, this);
   }
 });

addon/components/tooltip-layer.js

@@ -1,19 +1,14 @@
 import Ember from 'ember';
 import DivOverlayLayer from 'ember-leaflet/components/div-overlay-layer';
 
-const { computed, run } = Ember;
+const { run } = Ember;
 
 export default DivOverlayLayer.extend({
 
   leafletOptions: [
     'direction', 'permanent', 'sticky', 'interactive', 'opacity'
   ],
 
-  // creates a document fragment that will hold the DOM
-  destinationElement: computed(function() {
-    return document.createElement('div');
-  }),
-
   createLayer() {
     return this.L.tooltip(this.get('options')).setContent(this.get('destinationElement'));
   },
@@ -27,11 +22,11 @@ export default DivOverlayLayer.extend({
   },
 
   addToContainer() {
-    this.get('containerLayer')._layer.bindTooltip(this._layer);
+    this.get('parentComponent')._layer.bindTooltip(this._layer);
   },
 
   removeFromContainer() {
-    this.get('containerLayer')._layer.unbindTooltip();
+    this.get('parentComponent')._layer.unbindTooltip();
   },
 
   _onLayerRemove({layer}) {
@@ -60,12 +55,12 @@ export default DivOverlayLayer.extend({
     };
     // we need to user `layerremove` event becase it's the only one that fires
     // *after* the popup was completely removed from the map
-    let containerLayer = this.get('containerLayer');
-    containerLayer._layer._map.addEventListener('layerremove', this._onLayerRemove, this);
+    let parentComponent = this.get('parentComponent');
+    parentComponent._layer._map.addEventListener('layerremove', this._onLayerRemove, this);
   },
 
   _removePopupListeners() {
-    let containerLayer = this.get('containerLayer');
-    containerLayer._layer._map.removeEventListener('layerremove', this._onLayerRemove, this);
+    let parentComponent = this.get('parentComponent');
+    parentComponent._layer._map.removeEventListener('layerremove', this._onLayerRemove, this);
   }
 });

addon/mixins/div-overlayable.js

@@ -1,13 +1,9 @@
 import Ember from 'ember';
-import ContainerMixin from 'ember-leaflet/mixins/container';
+import { ParentMixin, ChildMixin } from 'ember-composability-tools';
 import layout from '../templates/div-overlayable';
 
 const { Mixin } = Ember;
 
-export default Mixin.create(ContainerMixin, {
-  layout,
-
-  didCreateLayer() {
-    this.get('_childLayers').invoke('layerSetup');
-  }
+export default Mixin.create(ParentMixin, ChildMixin, {
+  layout
 });

addon/mixins/style.js

@@ -10,12 +10,12 @@ export default Mixin.create({
     'clickable', 'pointerEvents', 'className'
   ],
 
-  layerSetup() {
+  didInsertParent() {
     this._super(...arguments);
     this._addStyleObservers();
   },
 
-  layerTeardown() {
+  willDestroyParent() {
     this._removeStyleObservers();
     this._super(...arguments);
   },

addon/templates/current/div-overlay.hbs

@@ -1,5 +1,5 @@
 {{#if shouldRender}}
-  {{#ember-wormhole destinationElement=destinationElement}}
+  {{#ember-wormhole destinationElement=destinationElement~}}
     {{yield (action closePopup)}}
-  {{/ember-wormhole}}
-{{/if}}
+  {{~/ember-wormhole}}
+{{/if}}

package.json

@@ -47,11 +47,12 @@
     "loader.js": "^4.0.1"
   },
   "dependencies": {
+    "broccoli-merge-trees": "^1.0.0",
     "ember-cli-babel": "^5.1.6",
+    "ember-cli-htmlbars": "^1.0.3",
     "ember-cli-version-checker": "^1.1.4",
+    "ember-composability-tools": "0.0.1",
     "ember-invoke-action": "1.2.0",
-    "broccoli-merge-trees": "^1.0.0",
-    "ember-cli-htmlbars": "^1.0.3",
     "ember-wormhole": "0.4.1"
   },
   "keywords": [

tests/integration/components/base-layer-test.js

@@ -30,6 +30,6 @@ test('using any layer outside a content layer throws', function(assert) {
 
   assert.throws(() => {
     this.render(hbs`{{new-base-layer}}`);
-  }, /Assertion Failed: Tried to use .* outside the context of a container layer\./);
+  }, /Assertion Failed: Tried to use .* outside the context of a parent component\./);
 });
 

tests/integration/components/marker-collection-test.js

@@ -25,11 +25,11 @@ moduleForComponent('marker-layer', 'Integration | Component | marker layer colle
         markersInitCount++;
         markers.push(this);
       },
-      layerSetup() {
+      didInsertParent() {
         this._super(...arguments);
         createLayersCount++;
       },
-      layerTeardown() {
+      willDestroyParent() {
         this._super(...arguments);
         destroyLayersCount++;
       }