#15 - Wire in destroy flow

Author: fredevery

src/scripts/core/Mediator.js

@@ -122,6 +122,10 @@ const Mediator = function (opts={}) {
             if (requestHandler) {
                 return requestHandler(options);
             }
+        },
+
+        destroy () {
+            requests.handlers = {};
         }
     };
 
@@ -152,6 +156,10 @@ const Mediator = function (opts={}) {
             if (commandHandler) {
                 commandHandler(options);
             }
+        },
+
+        destroy () {
+            commands.handlers = {};
         }
     };
 
@@ -176,9 +184,18 @@ const Mediator = function (opts={}) {
 
         emit (eventKey, options) {
             const eventHandlers = events.getHandlers(eventKey);
+
             if (eventHandlers.length) {
                 eventHandlers.forEach((eventHandler) => eventHandler(options));
             }
+
+            if (eventKey === 'app:destroy') {
+                fn.destroy();
+            }
+        },
+
+        destroy () {
+            events.handlers = {};
         }
     };
 
@@ -370,6 +387,12 @@ const Mediator = function (opts={}) {
 
         getId () {
             return internal.id;
+        },
+
+        destroy () {
+            requests.destroy();
+            commands.destroy();
+            events.destroy();
         }
     };
 

src/scripts/core/Module.js

@@ -112,6 +112,11 @@ const Module = function (moduleObj) {
             moduleUtils.bindDomEvents(handlerMethods, context);
         },
 
+        deregisterDomHandlers (domHandlersMap, context) {
+            let handlerMethods = moduleUtils.getHandlerMethods(domHandlersMap, context);
+            moduleUtils.unbindDomEvents(handlerMethods, context);
+        },
+
         getHandlerMethods (handlerMap, context) {
             let routedHandlers = {};
 
@@ -171,6 +176,22 @@ const Module = function (moduleObj) {
             });
         },
 
+        unbindDomEvents (handlers, context) {
+            const { dom } = context;
+
+            if (!dom) {
+                return;
+            }
+
+            Object.keys(handlers).forEach((eventElKey) => {
+                const [eventKey, elemKey] = eventElKey.split(' @');
+                const elem = elemKey ? dom[elemKey][0] : dom.el[0];
+                const eventHandler = handlers[eventElKey];
+
+                elem.removeEventListener(eventKey, eventHandler);
+            });
+        },
+
         mergeProps (defaultProps, props={}) {
             let mergedProps = {};
 
@@ -248,6 +269,10 @@ const Module = function (moduleObj) {
                 context.setup();
             }
 
+            context.mediator.registerHandler('event', 'app:destroy', function () {
+                moduleProto.destroyModule(opts);
+            });
+
             if (moduleHandlers) {
                 moduleUtils.registerHandlers(opts.mediator, moduleHandlers, context);
             }
@@ -280,8 +305,12 @@ const Module = function (moduleObj) {
             }
         },
 
-        destroyModule () {
+        destroyModule (opts) {
+            const { context } = opts;
 
+            if (moduleHandlers.domEvents) {
+                moduleUtils.deregisterDomHandlers(moduleHandlers.domEvents, context);
+            }
         }
     };
 

src/scripts/modules/Styles.js

@@ -16,7 +16,11 @@ const Styles = Module({
         stylesheet: null,
     },
 
-    handlers: {},
+    handlers: {
+        events: {
+            'app:destroy': 'destroy'
+        }
+    },
 
     methods: {
         setup () {
@@ -85,6 +89,14 @@ const Styles = Module({
 
         updateStylesheet (stylesheetContent) {
             this.stylesheet.textContent = stylesheetContent;
+        },
+
+        removeStylesheet () {
+            document.head.removeChild(this.stylesheet);
+        },
+
+        destroy () {
+            this.removeStylesheet();
         }
     }
 });

test/server/html/index.html

@@ -133,7 +133,6 @@ <h1>
                 }
               }
           });
-          console.log(typesterInstance);
         </script>
 
         <script>