refactor: functional component

src/utils.js → src/bind-event-listeners.js

@@ -24,7 +24,15 @@ const normalizeEvent = (M_target, M_name, M_handler) => {
 	};
 };
 
-export const bindEventListners = ($listeners, element, handlers) => {
+const unbindEventListeners = (handlers) => {
+	let e;
+	while (e = handlers.shift()) { // eslint-disable-line no-cond-assign
+		e.M_target.removeEventListener(e.M_name, e.M_handler, e.M_opts);
+	}
+};
+
+const bindEventListners = (element, $listeners) => {
+	const handlers = [];
 	for (const eventName in $listeners) {
 		if (!hasOwn($listeners, eventName)) { continue; }
 		const eventHandler = $listeners[eventName];
@@ -36,8 +44,8 @@ export const bindEventListners = ($listeners, element, handlers) => {
 		e.M_target.addEventListener(e.M_name, e.M_handler, e.M_opts);
 		handlers.push(e);
 	}
+	return () => unbindEventListeners(handlers);
 };
 
-export const unbindEventListeners = (handlers) => handlers.forEach(
-	(e) => e.M_target.removeEventListener(e.M_name, e.M_handler, e.M_opts),
-);
+
+export default bindEventListners;

src/pseudo-window.js

@@ -1,45 +1,34 @@
-import { bindEventListners, unbindEventListeners } from './utils';
+import bindEventListners from './bind-event-listeners';
+
+const addEventListeners = ({ props, listeners, parent }) => {
+	const unbindEventListeners = bindEventListners(
+		props.document ? window.document : window,
+		listeners,
+	);
+
+	parent.$once('hook:beforeUpdate', unbindEventListeners);
+	parent.$once('hook:destroyed', unbindEventListeners);
+};
 
 export default {
 	name: 'pseudo-window',
 
+	functional: true,
+
 	props: {
 		document: Boolean,
 	},
 
-	render() {
-		const defSlot = this.$slots.default;
-		return defSlot && defSlot.length === 1 ? defSlot[0] : defSlot;
-	},
-
-	data() {
-		return { M_handlers: [] };
-	},
-
-	computed: {
-		M_target() {
-			return this.document ? window.document : window;
-		},
-	},
-
-	mounted() {
-		this.$watch(
-			() => this.M_target,
-			(target) => {
-				unbindEventListeners(this.M_handlers);
-				this.M_handlers = [];
+	render(h, ctx) {
+		if (ctx.parent._isMounted) { // eslint-disable-line no-underscore-dangle
+			addEventListeners(ctx);
+		} else {
+			ctx.parent.$once('hook:mounted', () => {
+				addEventListeners(ctx);
+			});
+		}
 
-				bindEventListners(
-					this.$listeners,
-					target,
-					this.M_handlers,
-				);
-			},
-			{ immediate: true },
-		);
-	},
-
-	destroyed() {
-		unbindEventListeners(this.M_handlers);
+		const defSlot = ctx.slots().default;
+		return defSlot && defSlot.length === 1 ? defSlot[0] : defSlot;
 	},
 };