feat(host event interceptor): technique for intercepting and exposing onevents for the components

Via this.rb.events.host object, see readme.md for more info.

Author: jyounce

README.md

@@ -24,6 +24,7 @@ $ yarn add @rapid-build-ui/rb-base
 * [API](#api) (creates this.rb object that contains a set of common helper objects):
 	* [this.rb.elms](#thisrbelms)
 	* [this.rb.events](#thisrbevents)
+	* [this.rb.events.host](#thisrbeventshost)
 	* [this.rb.view](#thisrbview)
 
 * [Callbacks](#callbacks-optional):
@@ -95,6 +96,27 @@ export class RbPopover extends RbBase() {
 				* forces events to be set to empty {}
 
 
+### this.rb.events.host
+* Properties
+	* events :object (readonly, hashmap of active host events)
+* Methods
+	* add([event types]) :void
+		* usually ran in component constructor
+		* event types example: ['click', 'focus']
+		* examples:
+			* this.rb.events.host.add(['click']);
+			* this.rb.events.add(this, 'click', this.rb.events.host.run);
+	* remove([event types]) :void
+		* event types example: ['click', 'focus']
+	* removeAll() :void
+	* run(event) :any (event :object)
+		* runs event that was added via add()
+		* supports promises (see isPending())
+		* example: this.rb.events.host.run(event)
+	* isPending(event) :boolean (event :object | string)
+		* returns true if function returned a promise and it's pending
+
+
 ### this.rb.view
 * Properties
 	* isReady :boolean (readonly, will be true when view is ready)

src/client/scripts/private/mixins/base.js

@@ -20,7 +20,10 @@ const Base = (BaseElm = HTMLElement) => class extends withComponent(BaseElm) {
 	disconnectedCallback() { // :void
 		super.disconnectedCallback && super.disconnectedCallback();
 		this.rb.events.removeAll({ force: true });
+		this.rb.events.host.removeAll();
+		this.rb.elms = {};
 		// console.log(`${this.localName} disconnected:`, this.rb.events.events);
+		// console.log(`${this.localName} disconnected:`, this.rb.events.host.events);
 	}
 
 	/* @skatejs/renderer-lit-html

src/client/scripts/private/services/event.js

@@ -12,6 +12,7 @@
  - this.rb.events.emit(elm, 'event' [, { detail: any } ]); :boolean
  ********************************************************************************/
 import Guid from '../../public/services/guid.js';
+import Type from '../../public/services/type.js';
 
 /* Event Helpers
  ****************/
@@ -107,6 +108,14 @@ const EventHelper = {
 
 		// bound functions are prefixed with 'bound '
 		return callback.name.replace(/^bound /, '');
+	},
+	setHostEvent(hostEvents, evt, func, opts={}) { // :void
+		hostEvents[evt] = {
+			pending: false,
+			func: func.bind(this) // by default bind to rb-component
+		}
+		if (!opts.clear) return;
+		this[opts.onEvt] = null; // nullify when onevent is declared in html
 	}
 };
 
@@ -116,6 +125,7 @@ const EventService = function() { // :object (this = rb-component)
 	/* Private
 	 **********/
 	let _events = {};
+	let _hostEvents = {};
 
 	/* Public
 	 *********/
@@ -175,6 +185,58 @@ const EventService = function() { // :object (this = rb-component)
 			const evtOpts = Object.assign({}, EventHelper.customEvtDefaults, opts);
 			const evtObj  = new CustomEvent(evt, evtOpts);
 			return target.dispatchEvent(evtObj);
+		},
+		/* Host Events
+		 **************/
+		host: {
+			get events() { // :object (readonly: hashmap of host events)
+				return _hostEvents;
+			},
+			add: (events=[]) => { // :void (usually ran in component constructor)
+				if (!events.length) return; // ex: ['click','focus']
+				for (const evt of events) {
+					const onEvt = `on${evt}`; // ex: onclick
+					if (this.hasAttribute(onEvt))
+						EventHelper.setHostEvent.call(this, _hostEvents, evt, this[onEvt], {
+							onEvt,
+							clear: true
+						});
+					// dynamic getters and setters
+					Object.defineProperty(this, onEvt, {
+						get() { // :object
+							return _hostEvents[evt];
+						},
+						set(func) {
+							EventHelper.setHostEvent.call(this, _hostEvents, evt, func);
+						}
+					});
+				}
+			},
+			remove: (events=[]) => { // :void
+				if (!events.length) return;
+				for (const evt of events)
+					delete _hostEvents[evt];
+			},
+			removeAll: () => { // :void
+				_hostEvents = {};
+			},
+			run: async evt => { // :any (evt :object<event>)
+				const hostEvent = _hostEvents[evt.type];
+				if (!hostEvent) return;
+				if (hostEvent.pending) return;
+				if (!Type.is.function(hostEvent.func)) return;
+				hostEvent.pending = true;
+				const result = await hostEvent.func(evt);
+				hostEvent.pending = false;
+				return result;
+			},
+			isPending: evt => { // :boolean (evt :object<event> | string<eventType>)
+				if (!evt) return false;
+				if (Type.is.object(evt)) evt = evt.type;
+				const hostEvent = _hostEvents[evt];
+				if (!hostEvent) return false;
+				return hostEvent.pending;
+			}
 		}
 	};
 };