feat: remove pipe rules when node is unmounted

streamich · Mar 27, 2018 · d278cec · d278cec
1 parent f2a9087
commit d278cec
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/.storybook/ref.stories.js b/.storybook/ref.stories.js
@@ -16,19 +16,21 @@ class RefExample extends Component {
         super(props);
         this.state = {
             color: 'red',
+            show: true
         };
     }
 
     render () {
         var data = nano.ref({'&': {color: this.state.color}, '&:hover': {color: 'blue'}});
 
         return h('div', {},
-            h('div', data, 'Hello world'),
+            this.state.show && h('div', data, 'Hello world'),
 
             h('br'),
 
             h('button', {onClick: () => this.setState({color: 'red'})}, 'red'),
             h('button', {onClick: () => this.setState({color: 'blue'})}, 'blue'),
+            h('button', {onClick: () => this.setState({show: !this.state.show})}, 'show/hide'),
         );
     }
 }

diff --git a/addon/ref.js b/addon/ref.js
@@ -53,6 +53,29 @@ exports.addon = function (renderer) {
                 if (!pipe) {
                     el[sNano] = pipe = renderer.pipe();
                     el.setAttribute(pipe.attr, '');
+
+                    // Add unmount logic
+
+                    var observer = new MutationObserver(function (mutations) {
+                        for (var i = 0; i < mutations.length; i++) {
+                            var mutation = mutations[i];
+
+                            if (mutation.removedNodes.length) {
+                                var nodes = mutation.removedNodes;
+
+                                for (var j = 0; j < nodes.length; j++) {
+                                    if (nodes[j] === el) {
+                                        pipe.remove();
+                                        delete el[sNano];
+                                        observer.disconnect();
+                                        return;
+                                    }
+                                }
+                            }
+                        }
+                    });
+
+                    observer.observe(el.parentNode, {childList: true});
                 }
 
                 pipe.css(css);