Ensure attached transitions trigger properly

Author: tbranyen

Diff for: dist/inline-transitions.js

@@ -23,6 +23,12 @@ module.exports = function (_ref) {
   var addTransitionState = _ref.addTransitionState;
   var removeTransitionState = _ref.removeTransitionState;
 
+  var attached = function attached(element) {
+    if (element.attached) {
+      return element.attached(element, element);
+    }
+  };
+
   // Monitors whenever an element changes an attribute, if the attribute
   // is a valid state name, add this element into the related Set.
   var attributeChanged = function attributeChanged(element, name, oldVal, newVal) {
@@ -41,6 +47,7 @@ module.exports = function (_ref) {
   // This will unbind any internally bound transition states.
   var unsubscribe = function unsubscribe() {
     // Unbind all the transition states.
+    removeTransitionState('attached', attached);
     removeTransitionState('attributeChanged', attributeChanged);
 
     // Remove all elements from the internal cache.
@@ -63,6 +70,7 @@ module.exports = function (_ref) {
 
   // Set a "global" `attributeChanged` to monitor all elements for transition
   // states being attached.
+  addTransitionState('attached', attached);
   addTransitionState('attributeChanged', attributeChanged);
 
   // Add a transition for every type.
@@ -81,7 +89,10 @@ module.exports = function (_ref) {
       // If the child element triggered in the transition is the root element,
       // this is an easy lookup for the handler.
       else if (map.has(child)) {
-          return map.get(child).apply(child, [child].concat(rest));
+          // Attached is handled special by the separate global attached handler.
+          if (name !== 'attached') {
+            return map.get(child).apply(child, [child].concat(rest));
+          }
         }
         // The last resort is looping through all the registered elements to see
         // if the child is contained within. If so, it aggregates all the valid

Diff for: index.js

@@ -15,6 +15,12 @@ const boundHandlers = [];
  * nested children.
  */
 module.exports = function({ addTransitionState, removeTransitionState }) {
+  const attached = function(element) {
+    if (element.attached) {
+      return element.attached(element, element);
+    }
+  };
+
   // Monitors whenever an element changes an attribute, if the attribute
   // is a valid state name, add this element into the related Set.
   const attributeChanged = function(element, name, oldVal, newVal) {
@@ -33,6 +39,7 @@ module.exports = function({ addTransitionState, removeTransitionState }) {
   // This will unbind any internally bound transition states.
   const unsubscribe = () => {
     // Unbind all the transition states.
+    removeTransitionState('attached', attached);
     removeTransitionState('attributeChanged', attributeChanged);
 
     // Remove all elements from the internal cache.
@@ -55,6 +62,7 @@ module.exports = function({ addTransitionState, removeTransitionState }) {
 
   // Set a "global" `attributeChanged` to monitor all elements for transition
   // states being attached.
+  addTransitionState('attached', attached);
   addTransitionState('attributeChanged', attributeChanged);
 
   // Add a transition for every type.
@@ -69,7 +77,10 @@ module.exports = function({ addTransitionState, removeTransitionState }) {
       // If the child element triggered in the transition is the root element,
       // this is an easy lookup for the handler.
       else if (map.has(child)) {
-        return map.get(child).apply(child, [child].concat(rest));
+        // Attached is handled special by the separate global attached handler.
+        if (name !== 'attached') {
+          return map.get(child).apply(child, [child].concat(rest));
+        }
       }
       // The last resort is looping through all the registered elements to see
       // if the child is contained within. If so, it aggregates all the valid

Diff for: test/basics.js

@@ -66,4 +66,14 @@ describe('Basics', function() {
       done();
     }, 20);
   });
+
+  it('supports detached transitions on the root element', (done) => {
+    const detached = el => {
+      assert.equal(el.nodeName, 'p')
+      done();
+    };
+
+    innerHTML(this.fixture, html`<div><p detached=${detached}/></div>`);
+    innerHTML(this.fixture, html`<div></div>`);
+  });
 });

Diff for: test/regressions.js

@@ -15,12 +15,17 @@ describe('Regressions', function() {
   });
 
   it('does not error when non-Promises are returned', () => {
+    var count = 0;
+
     const attached = el => {
+      count++;
       return undefined;
     };
 
     innerHTML(this.fixture, html`<div attached=${attached}>
       <div></div>
     </div>`);
+
+    assert.equal(count, 2);
   });
 });