@twobirds/microcomponents 0.0.82 → 0.0.84

package/public/test/MC.ts

@@ -1,19 +1,20 @@
 'use strict';
 
 import { LooseObject } from './helpers.js';
-import { McEvent } from './McEvent.js';
 
 var isBrowser = new Function(
 	'try {return this===window;}catch(e){ return false;}'
 );
 
-let nativeEventNames: Set<string> = new Set();
-
-// HTMLElement native event names
-if (isBrowser()) {
-	Object.keys(HTMLElement.prototype)
-		.filter((key) => /^on/.test(key))
-		.forEach((eventName) => nativeEventNames.add(eventName));
+// get HTMLElement native event names
+function getNativeEventNames( domNode: HTMLElement ): string[] {
+	let nativeEventNames: Array<string> = [];
+	if (isBrowser()) {
+		Object.keys(HTMLElement.prototype)
+			.filter((key) => /^on/.test(key))
+			.forEach((eventName) => nativeEventNames.push(eventName));
+	}
+	return nativeEventNames;
 }
 
 export interface HTMLMcElement extends HTMLElement {
@@ -64,34 +65,6 @@ function isDOM(element: { [key: string]: any }) {
 	return element && element instanceof HTMLElement;
 }
 
-function addListener(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject | null,
-	capture: boolean = false,
-	once: boolean = false
-) {
-	let options: EventListenerOptions & { once: boolean } = { once: false };
-	if (capture) {
-		options.capture = capture;
-	}
-
-	if (once) {
-		options.once = once;
-	}
-
-	//console.log( 'addEventListener', eventName, ( handler as Function ).name, options );
-	domNode.addEventListener(eventName, handler, options);
-}
-
-function removeListener(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject | null
-) {
-	domNode.removeEventListener(eventName, handler);
-}
-
 // add a microcomponent to a target DOM node
 function add(target: HTMLElement, key: string, element = {}): any {
 	let node = target as HTMLMcElement;
@@ -111,8 +84,8 @@ function add(target: HTMLElement, key: string, element = {}): any {
 	if (key.length && !_mc[key]) {
 		_mc[key] = element;
 		// add attribute if HTMLElement
-		if (target instanceof HTMLElement && ! target.getAttribute('_mc') ) {
-			target.setAttribute('_mc', '');
+		if (target instanceof HTMLElement && ! target.getAttribute('data-mc') ) {
+			target.setAttribute('data-mc', '');
 		}
 	}
 	return element;
@@ -133,41 +106,10 @@ function remove(target: HTMLMcElement, key: string) {
 	if (
 		!Object.keys(_mc).length &&
 		target instanceof HTMLElement &&
-		target.hasAttribute('_mc')
+		target.hasAttribute('data-mc')
 	) {
-		target.removeAttribute('_mc');
-	}
-	return;
-}
-
-// trigger an event
-function trigger(
-	target: HTMLElement,
-	ev: McEvent | string,
-	data: any = {},
-	bubble: string = 'l'
-) {
-	let _mc = (target as any)?._mc;
-	if (!_mc) return;
-
-	let event =
-			ev instanceof McEvent
-				? new McEvent(ev.type, ev.data, 'l')
-				: new McEvent(ev, data, 'l'),
-		mcEvent: McEvent =
-			typeof ev !== 'string' ? (ev as McEvent) : new McEvent(ev, data, bubble);
-
-	[...Object.values(_mc)].forEach((mc: any) => {
-		//console.log( 'mc [', mc.constructor.name, ']', mc.constructor.prototype?.oneInit );
-		if ((mc as any)?.trigger && typeof (mc as any)?.trigger === 'function') {
-			(mc as any)?.trigger(event);
-		}
-	});
-
-	if (/[ud]/.test(mcEvent.bubble)) {
-		bubbleEvent(target, mcEvent);
+		target.removeAttribute('data-mc');
 	}
-
 	return;
 }
 
@@ -193,6 +135,77 @@ function init(element: MC | DC) {
 	}, 0);
 }
 
+function getMcEventName( eventName: string ): string {
+	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
+}
+
+/*
+CustomEvent Section...
+*/
+function off( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ){
+	domNode.removeEventListener( getMcEventName(eventName), handler );
+}
+
+function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ) {
+	domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
+}
+
+function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ) {
+	on(domNode, eventName, handler, true );
+}
+
+// create and dispatch custom event
+function trigger( 
+	domNode: HTMLElement, 
+	event: CustomEvent | string, 
+	data: any = {},
+	bubble: string = 'l'
+){
+	const ev = typeof event === 'string'
+		? new CustomEvent( getMcEventName( event ), { detail: {data, bubble} } )
+		: event;
+	
+	// execute locally if 'l' or nothing is given as bubble
+	if( bubble.length && bubble.indexOf('l') > -1 ){
+		domNode.dispatchEvent( ev );
+	}
+	
+	// bubble if up or down is indicated
+	if( /[u|d]/.test( bubble ) ){
+		bubbleEvent( domNode, ev );
+	}	
+}
+
+function bubbleEvent( domNode: HTMLElement, ev: CustomEvent) {
+	// at this point, either 'u' or 'd' bubbling should be indicated
+	// event bubbling is asynchronous!
+	setTimeout(() => {
+
+		// add missing 'l', or else no handlers are executed
+		if (ev.detail.bubble.indexOf('l') === -1) {
+			ev.detail.bubble += 'l';
+		}
+
+		// bubble up towards root
+		if (ev.detail.bubble.indexOf('u') > -1 ) {
+			domNode.closest('[data-mc]')?.dispatchEvent( ev );
+		}
+
+		// bubble down
+		if (ev.detail.bubble.indexOf('d') > -1) {
+			let targets = new Set<HTMLMcElement>(
+				(domNode as HTMLMcElement)._mc
+					.children()
+					.map((c: unknown) => (c as any)?.target)
+			);
+			targets.forEach((target: HTMLMcElement) => {
+				if (target) DC.trigger(target, ev);
+			});
+		}
+
+	}, 0);
+}
+
 function autoAttachListeners(element: MC | DC) {
 	if (!isBrowser() || element.constructor === DC) return;
 
@@ -209,71 +222,41 @@ function autoAttachListeners(element: MC | DC) {
 			.forEach((key) => {
 				let once = /^one/.test(key),
 					withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
-					nativeEventName = withoutOnOne.toLowerCase(),
-					listener = (ev: McEvent | Event | CustomEvent) => {
-						that.trigger(withoutOnOne, ev);
-					};
-				if (once) {
-					// console.log( '...is only called once', that.constructor.prototype[key] );
-					Object.defineProperty(element, 'on' + withoutOnOne, {
-						configurable: true,
-						enumerable: false,
-						writable: true,
-						value: (ev: any) => {
-							// console.log( 'onceHandler execute:', that.constructor.prototype[key] );
-							that.constructor.prototype[key].bind(that)(ev);
-						},
-					});
-				}
+					nativeEventName = withoutOnOne.toLowerCase();  // lowercase for native event names
 
-				if (nativeEventNames.has('on' + nativeEventName)) {
-					// native event defined in HTMLElement
-					// console.log('added as native listener', target, nativeEventName );
-					addListener(target, nativeEventName, listener, false, once);
+				let listener = (ev: Event | CustomEvent) => {
+					that[key]( ev );
+				}
+					
+				if ( !!( target as any )['on' + nativeEventName] ) {
+					// it is a native HTML event
+					//console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
+					target.addEventListener( nativeEventName, listener);
+				} else {
+					// it is a customEvent
+					//console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
+					on( target, withoutOnOne, listener, once );
 				}
 			});
 	}
 }
 
-function bubbleEvent(target: HTMLElement, ev: McEvent) {
-	// at this point, either 'u' or 'd' bubbling should be indicated
-	// mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
-	if (/[ud]/.test(ev.bubble)) {
-		setTimeout(() => {
-			// bubbling must include 'l' for local, or else no handlers are executed'
-			if (ev.bubble.indexOf('l') === -1) {
-				ev.bubble += 'l';
-			}
-
-			// bubble up towards root
-			if (ev.bubble.indexOf('u') > -1) {
-				let parent = traverseNodes(target, '', true)?.[0].target;
-				if (parent) DC.trigger(parent, ev);
-			}
-
-			// bubble down
-			if (ev.bubble.indexOf('d') > -1) {
-				let targets = new Set<HTMLMcElement>(
-					(target as HTMLMcElement)._mc
-						.children()
-						.map((c: unknown) => (c as any)?.target)
-				);
-				targets.forEach((target: HTMLMcElement) => {
-					if (target) DC.trigger(target, ev);
-				});
-			}
-		}, 0);
-	}
+function getMcChildNodes(domNode: HTMLElement): NodeListOf<Element> {
+	const id = Math.random().toString().replace('.', '');
+	const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
+	domNode.setAttribute('temp_id', id);
+	const myDomElements = domNode.querySelectorAll(selector);
+	domNode.removeAttribute('temp_id');
+	return myDomElements;
 }
 
 class McBase {
-	#target: WeakRef<any>; // avoid circular reference
+	private _target: WeakRef<any>; // avoid circular reference
 
 	constructor(target?: { [key: string]: any }, debug: boolean = false) {
-		let that: unknown = this,
-			element = that as MC | DC;
+		let element = this as unknown as MC | DC;
 
-		this.#target = new WeakRef(target || {});
+		this._target = new WeakRef(target || {});
 
 		init(element); // async lifecycle event
 
@@ -281,91 +264,24 @@ class McBase {
 	}
 
 	get target(): any {
-		return this.#target.deref();
+		return this._target.deref();
 	}
+
 }
 
 class MC extends McBase {
-	_mc?: LooseObject = {};
-
 	constructor(target?: any) {
 		super(target);
 	}
 
 	static trigger = trigger;
-
-	trigger(ev: McEvent | string, data: any = {}, bubble: string = 'l') {
-		let that = this;
-
-		//console.log( that, '.trigger(', ev, data, bubble, ')' );
-
-		// run all triggers
-		if (that.constructor === MC || that.constructor === DC) {
-			let event =
-					ev instanceof McEvent
-						? new McEvent(ev.type, ev.data, 'l')
-						: new McEvent(ev, data, 'l'),
-				mcEvent: McEvent =
-					typeof ev !== 'string'
-						? (ev as McEvent)
-						: new McEvent(ev, data, bubble);
-			[...Object.getOwnPropertyNames(that)].forEach((mc) => {
-				if (
-					(that as any)[mc]?.trigger &&
-					typeof (that as any)[mc]?.trigger === 'function'
-				) {
-					(that as any)[mc]?.trigger(event);
-				}
-			});
-
-			if (/[ud]/.test(mcEvent.bubble)) {
-				bubbleEvent(that.target, mcEvent);
-			}
-
-			return; // must return here!
-		}
-
-		// only this instance
-		if ((that as any) instanceof MC || (that as any) instanceof DC) {
-			const that = this,
-				mcEvent: McEvent =
-					typeof ev !== 'string'
-						? (ev as McEvent)
-						: new McEvent(ev, data, bubble),
-				handlerName =
-					'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
-			// console.log('trigger', handlerName, mcEvent, data, bubble );
-
-			if (mcEvent.bubble.indexOf('l') > -1) {
-				if (
-					!mcEvent.immediateStopped &&
-					typeof (that as any)[handlerName] === 'function'
-				) {
-					// console.log( 'execute handler:', handlerName );
-					(that as any)[handlerName](mcEvent);
-					if ((that as any).hasOwnProperty(handlerName)) {
-						// it is a once handler
-						delete (that as any)[handlerName]; // remove after first execution
-					}
-				}
-			}
-
-			// if event stopped or local only, handling is cancelled
-			if (mcEvent.stopped || mcEvent.bubble === 'l') {
-				return that;
-			}
-
-			//console.log('bubble', mcEvent);
-			if (/[ud]/.test(mcEvent.bubble)) {
-				bubbleEvent(that.target, mcEvent);
-			}
-		}
+	
+	trigger(ev: string, data: any = {}, bubble: string = 'l') {
+		// TBD
 	}
 }
 
 class DC extends McBase {
-	_mc?: LooseObject = {};
-
 	constructor(target: HTMLElement, debug: boolean = false) {
 		super(target);
 	}
@@ -374,8 +290,23 @@ class DC extends McBase {
 	static remove: Function = remove;
 	static trigger: Function = trigger;
 
-	trigger(ev: McEvent | string, data: any = {}, bubble?: string) {
-		MC.prototype.trigger.call(this, ev, data, bubble);
+	off( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		off( this.target, eventName, handler );
+	}
+
+	on( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		on( this.target, eventName, handler );
+	}
+
+	one( eventName: string, handler: EventListenerOrEventListenerObject ) {
+		one( this.target, eventName, handler );
+	}
+
+	trigger(ev: CustomEvent | string, data: any = {}, bubble: string = 'l') {
+		if ( typeof ev === 'string' ){
+
+		}
+		//trigger( this.target, ev, data, bubble);
 	}
 
 	parent(search: string = ''): any[] {
@@ -393,62 +324,66 @@ class DC extends McBase {
 	children(search: string = ''): any[] {
 		let target: any = (this as any)?.target;
 		if (!isDOM(target)) return [];
-		const id = Math.random().toString().replace('.', '');
-		const selector = '[_mc]:not([temp_id="' + id + '"] [_mc] [_mc])';
-		target.setAttribute('temp_id', id);
-		const myDomElements = target.querySelectorAll(selector);
+		const myDomElements = getMcChildNodes(target);
 		const mcValues = getMicroComponents([...myDomElements], search);
-		target.removeAttribute('temp_id');
 		return mcValues;
 	}
 
 	descendants(search: string = ''): any[] {
 		let target: any = (this as any)?.target;
 		if (!isDOM(target)) return [];
-		const myDomElements = target.querySelectorAll('*[_mc]');
+		const myDomElements = target.querySelectorAll('*[data-mc]');
 		return getMicroComponents([...myDomElements], search);
 	}
 }
 
-/*
-unresolvedCEs (code below this comment):
+const loadingDCs = new Set<string>();
 
-a repository (a hashmap) of undefined custom elements: 
-the name is the tagname of the micro component (like "my-custom-component")
-if they are loading, the value is a script element
-if they are loaded, the entry is deleted and the browser instanciates it automatically
-if they cannot be loaded, the browser will throw an error
+// this only applies to DCs defined in the data-mc attribute, 
+// since they need to be attached manually
+function attachDC(element: string): Function {
 
-If the custom element ( defined by its tagname, like "my-custom-component") is not defined, it will be on-demand loaded:
-The file name is assumed to be "/my/custom/component.js"
-The file must define a custom element via the defineCE() function included in the "elements" module. 
-This function is a wrapper for customElementRegistry.define(), which you can also use directly in the imported code.
+	//@ts-ignore
+	return () => {
+		const elements: HTMLElement[] = Array
+					.from(document.querySelectorAll(`[data-mc*="${element}"]`))
+					.filter( element => element instanceof HTMLElement );
 
-In general this behaves like a custom runtime import for custom elements in the browser.
-The only difference is that the micro component is loaded only when needed, and not on page load.
-*/	
+		if ( elements.length === 0 ) return;
 
-const CEs = new Map();
+		//console.log( 'loadedPromise elements', elements );
 
-/*
-loadedMCs (code below this comment): 
-a repository (a hashmap) of micro components: 
-the name is the name of the micro component (like "my-mc")
-if they are loading, the value is a script element
-if they are loaded, the value is the micro component class itself
+		const klass = customElements.get( element );
+
+		elements.forEach((node: HTMLElement) => {
+			//console.log( 'add', klass!.name, 'to', node );
+			DC.add(node, klass!.name, new klass!(node));
+
+			//@ts-ignore
+			const new_mc = node
+				.getAttribute( 'data-mc' )
+				.split(' ')
+				.filter( (name) => name !== element && name !== '' )
+				.join(' ')
+				.trim();
 
-This is mostly used for old style progressive enhancement:
-If the micro component ( defined in the HTMLElements "_mc" attribute, like "my-mc") is not defined, it will be on-demand loaded:
-The file name is assumed to be "/my/mc.js"
-The file needs to have a default export, and it should be a class that extends the DC class ( since it is in a HTMLElements attribute )
+			//@ts-ignore
+			node.setAttribute( 
+				'data-mc',
+				//@ts-ignore
+				new_mc
+			)
+		});
+	};
+};
 
-In general this behaves like a custom runtime import for classes in the browser.
-The only difference is that the micro component is loaded only when needed, and not on page load.
-*/	
-const MCs = new Map(); 
+function makeLoadScript( element: string ) {
 
-function makeLoadScript( element: string ): HTMLScriptElement {
+	if ( loadingDCs.has( element ) ) return; // already loading
 
+	loadingDCs.add( element );
+
+	//console.log( 'makeLoadScript:', element);
 	const fileName: string = './' + element.split('-').join('/')+'.js';	
 
 	const se: HTMLScriptElement = document.createElement('script');
@@ -457,123 +392,53 @@ function makeLoadScript( element: string ): HTMLScriptElement {
 	se.setAttribute('blocking', 'render');
 	se.async = true;
 	se.setAttribute('type', 'module');
-	se.setAttribute( 'name', element);
+	se.setAttribute( 'data-name', element);
 	se.setAttribute( 'loading', '');
 
-	addListener( se, 'load', (ev) => {
-		// console.info('loaded MC', elementName);
-		se.removeAttribute( 'loading' );
-		se.setAttribute( 'loaded', '');
-	});
+	const loadedPromise = customElements.whenDefined( element );
 
-	addListener( se, 'error', (ev) => {
-		console.error('could not load Custom Element code from', fileName);
-	});
-
-	return se;
-}
+	//@ts-ignore
+	loadedPromise.then( attachDC( element ) );
 
-function onLoadCallback( script: HTMLScriptElement ) {
-	// create callback script tag
-	// it is essential to do this in a timeout and via another script tag, 
-	// to force it to be a top level module allowing for the use of "import"
-	setTimeout( function(){
-		// create callback script tag
-		const importFileName = script.getAttribute('src');
-		const elementName = script.getAttribute('name');
-		
-		const se: HTMLScriptElement = document.createElement('script');
-
-		se.async = true;
-		se.setAttribute( 'type', 'module');
-
-		// --- autoload script
-		const code = /*javascript*/`
-
-			import _ from "${importFileName}";
-			import { DC } from "./microcomponents.js";
-
-			const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
-
-			elements.forEach((element) => {
-				// add class to MCs repository
-				autoload.state.MCs.set( '${elementName}', _ );
-				// add instance to HTMLElement 
-				DC.add(element, _.name, new _(element));
-				// remove instance name from elements "_mc" attribute
-				element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); 
-			});
+	se.addEventListener( 'load', (ev: Event) => {
+		loadingDCs.delete( element );
 
-			setTimeout( () => {
-				document.body.querySelector('script[name="${elementName}]"')?.remove();
-			},0);
+		document.head.querySelector(`script[data-name="${element}"]`)?.remove();
+	});
 
-		`;
-		// --- end autoload script
+	se.addEventListener( 'error', (ev: Event) => {
+		console.error('could not load DC code from', fileName);
+	});
 
-		se.innerHTML = code;
-		document.body.append(se);
-	}, 0);
+	document.head.append(se);
 }
 
-function loadUndefinedMicroComponents() {
+function loadUndefinedMCs() {
 
-	// load unresolved custom eleents
-	[ ...document.querySelectorAll(':not(:defined)') ] // undefined custom elements
+	// load unresolved custom elements
+	[ ...document.querySelectorAll(':not(:defined)') ]
 		.filter( (element) => !!element 
 			&& !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
-			&& !CEs.has(element.tagName.toLowerCase()) // not in loading list
+			&& !loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
 		)
 		.forEach((el) => {
-			const elementName = el.tagName.toLowerCase(),
-				fileName: string = './'+elementName.split('-').join('/')+'.js';	
-
-			const se: HTMLScriptElement = makeLoadScript( elementName );
-
-			addListener( se, 'load', () => { 
-				CEs.set( elementName, customElements.get(el.tagName.toLowerCase()) );
-			});
-
-			CEs.set( elementName, 'loading');
-			document.head.append(se);
-
-			// instanciation of the micro component will be handled by the browser automatically
-			// module code must define the micro component class and add it to the customElementRegistry
+			//console.log( 'detected CE', el.tagName.toLowerCase() );
+			makeLoadScript( el.tagName.toLowerCase() ); // will automatically be instanciated
 		});
 
-	[ ...document.querySelectorAll('[_mc]:not([_mc=""]') ] // undefined DOM components
+	// if defined in _mc attribute: instanciate DCs, load if necessary
+	[ ...document.querySelectorAll('[data-mc]:not([data-mc=""]') ]
 		.filter( (element) => !!element )
 		.forEach((el) => {
-			const elements = el.getAttribute('_mc')?.split(' ').filter( m => !!m ) || [];
-			const elementsToBeLoaded = elements.filter( m => !MCs.has( m ) );
-
-			// load MC components that do not exist yet
-			elementsToBeLoaded?.forEach( elementName => {
-				const se: HTMLScriptElement = makeLoadScript( elementName );
-
-				addListener( se, 'load', () => onLoadCallback( document.head.querySelector(`script[name="${elementName}"]`) as HTMLScriptElement) );
-			
-				MCs.set( elementName, 'loading');
-
-				document.head.append(se);
-			});
-
-			// loading MC components already have callbacks attached
-			const elementsAlreadyLoaded = elements.filter( m => MCs.has( m ) && !MCs.get( m )!.length); 
-
-			// MCs that are already loaded will trigger the onLoadCallback manually
-			elementsAlreadyLoaded?.forEach( elementName => {
-				setTimeout( ()=>{
-					//console.log('attaching', elementName, (autoload as any).state.MCs.get(elementName));
-					DC.add(el, elementName, new ( (autoload as any).state.MCs.get(elementName) as any)(el)); // add instance to DOM
-					
-					const newAttribute = (el as any).getAttribute('_mc')
-						.replace('${elementName}', '')
-						.replace( /\w\w/g, ' ')
-						.trim() || '_mc';
-
-					(el as any).setAttribute('_mc', ); // set new "_mc" attribute
-				}, 5);
+			const _mc = el.getAttribute('data-mc')?.split(' ').filter( name => name !== '' );
+			_mc?.forEach( element => {
+				//console.log( 'detected DC', dc );
+				const isDefined = customElements.get(element);
+				if ( !loadingDCs.has(element) && !isDefined ) {
+					makeLoadScript( element );
+				} else if ( isDefined ) {
+					attachDC(element)();
+				}
 			});
 		});
 }
@@ -590,11 +455,11 @@ function autoload(enable: boolean = true): boolean {
 	}
 
 	autoloadEnabled = enable;
-	observer = new MutationObserver(loadUndefinedMicroComponents);
+	observer = new MutationObserver(loadUndefinedMCs);
 
 	setTimeout(() => {
 		observer!.observe(document.body, { childList: true, subtree: true });
-		loadUndefinedMicroComponents();
+		loadUndefinedMCs();
 	}, 5);
 
 	(window as any).autoload = (window as any).autoload || autoload;
@@ -602,7 +467,7 @@ function autoload(enable: boolean = true): boolean {
 	return autoloadEnabled;
 }
 
-(autoload as LooseObject).state = { CEs, MCs };
+(autoload as LooseObject).state = loadingDCs;
 
-export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
+export { McBase, MC, DC, autoload, on, one, off, trigger };