dispatcher-test.ts

import MyComponent from "./MyComponent";
type text = string | undefined;

type Callable = () => any;

interface ICallback {
	instance: Vue;
	callback: Callable;
};

type Notifiable = Callable | ICallback;

interface ICallable {
	[event: string]: Array<Notifiable>;
};

interface PostOfficeEvent {
	[key: string]: string | boolean;
}

interface PostOfficeEvents {
	[key: string]: string | PostOfficeEvent;
}

interface PostOfficeCollection {
	[key: string]: Array<Notifiable>;
}

interface PostOfficeContainer {
	$instance: PostOffice;
	$dispatch: PostOfficeCollection;
}

export 
class PostOffice
{
	private $listeners: Array<Vue> = [];
	private $controller: Vue | undefined = undefined;
	
	private $notifiable: ICallable = {};
	
	constructor() {
		this.$controller = new Vue({
			name: 'dispatcher',
		});
	}
	
	public get listeners(): Array<string> {
		const copy = Object.assign({}, this.$notifiable);
		return Object.keys(copy);
	}
	
	install(vue: VueConstructor) {
		if (vue.prototype.hasOwnProperty('$postOffice') === false)
		{	
			//dispatch.info( () => "Creating the PostOffice." );
			console.log( "Creating the PostOffice." );
			const $vmInst = this.$controller;
			
			const instance = vue.prototype.$postOffice = this;
			const discover = this.discover;
			
			vue.prototype.$notify = 
				this.$notify.bind(this);
			
			const finalize = function (vm: Vue) {
				
				console.log({ $postOffice: this.$postOffice });
				//console.log( "this:", this );
			};
			
			vue.mixin({ 
				// Create PO support structure
				created() {
					const self: Vue = this;
					const { $options } = self;
					
					if (PostOffice) {
						console.log( $options.PostOffice );
						console.log( $options );
					}
					
					/*
					self.$postConfig = 
						Object.assign({}, PostOffice);
					
						this.$postOffice = {
							$instance: instance,
							$dispatch: {},
						};
						
						console.log( "config:", PostOffice );
					}
					*/
				},
				
				// listen to Vue events.
				beforeMount() {
					const self: Vue = this;
					//discover.call(this, this.$postOffice);
					//finalize.call(this, $vmInst);
				}
			});
		}
	}
	
	publish(vm: Vue, handler: string, container: PostOfficeContainer)
	{
		
		
		
		
	}
	
	// [ event, params ], index
	/*
	private register(vm: Vue, event: string, params: string | object)
	{
		const handler: string = runtime.IsEqual(typeof params, typeof "")? 
			params as string: event;
		
		if (runtime.hasattr(vm, handler)) {
			const $instance: ICallback = {
				instance: vm,
				callback: vm[handler]
			};
			
			/*
			if (runtime.hasattr(vm.$postOffice.$dispatch, event))
				vm.$postOffice.$dispatch[event].push($instance);
			else vm.$postOffice.$dispatch[event] = [ $instance ];
			
			console.log({ 
				event,
				exists: runtime.hasattr($postOffice.$dispatch, event)
			});
			*
			//	this.$controller.$on( event, (event, params) => 
			//		vm[handler].call(vm, [ event, params ]));
		}
		else {
			dispatch.error( () => 
				runtime.sentence("Missing callback handler for handler", runtime.quote(handler)), null );
		}
	}
	*/
	
	private discover($postOffice: PostOfficeContainer) {
		/*
		const { name: optionKey } = 
			$postOffice.$instance.constructor;
		
		const params = runtime.getattr(this, '$options');
		console.log(params);
		
		if (runtime.hasattr( this, runtime.dot('$options', optionKey )))
		{	
			
			const options = collect(params);
			
			options.forEach(( [ event, params ], index ) => 
				this.register(vm, event, params ));
			
			logger.debug( () => 
				runtime.sentence(runtime.concat(optionKey, ':'), "Registered vm instance with PostOffice" ));
		}
		*/
	}
	
	$notify(param: string | object)  {
		/*
		const fieldName: string = runtime.hasattr(param, "msgType")?
			"msgType": "params.service";
		
		const vm = this.$controller;
		
		if (runtime.IsEqual(typeof param, typeof "")) {
			vm.$emit(param as string);
		}
		else {
			const args: object = param as object;
			const eventArgs = {};
			
			let eventName: string | undefined = undefined;
			
			if (runtime.hasattr(args, fieldName)) {
				eventName = runtime.getattr(args, fieldName) as string;
				
				// From an async (or UI) event
				if (runtime.hasattr(args, "msgType")) {
					Object.assign(eventArgs, args);
				}
				
				// TODO: Support me pls
				else {
					Object.assign(eventArgs, param);
				}
			}
			else {
				console.log(runtime.hasattr(param, 'params.service'));
				const invalidMsg = runtime.delim(runtime.quote(typeof runtime.getattr(param, 'callback')), 
									runtime.delim("is not a valid type for", runtime.quote("callback handler")));
				
				console.log(runtime.delim2( "Callback handler for", runtime.quote(eventName), 
								"is invalid:", invalidMsg));
			}
			
			console.log({ eventName, eventArgs });
			vm.$emit( eventName, eventArgs);
		}
		*/
	}
};

const dispatcher = new PostOffice;
Vue.use(dispatcher);

const app = new Vue({
	template: `<MyComponent></MyComponent>`,
	el: 'body',
	
	components: {
		MyComponent
	},
	
	mounted() {
		/*
		dispatcher.$notify({
			msgType: 'PaymentAuthorization',
			success: true
		});
		dispatcher.$notify(SLOT(actions.CreateAccount));
		*/
		//console.log({ slot: SLOT_NAME(actions.CreateAccount) });
	}
});

index.d.ts

import Vue from 'vue'
type Callable = () => any;

interface ICallback {
	instance: Vue;
	callback: Callable;
};

type Notifiable = Callable | ICallback;

interface ICallable {
	[event: string]: Array<Notifiable>;
};

interface PostOfficeEvent {
	[key: string]: string | boolean;
}

interface PostOfficeEvents {
	[key: string]: string | PostOfficeEvent;
}

interface PostOfficeCollection {
	[key: string]: Array<Notifiable>;
}

interface PostOfficeContainer {
	$instance: PostOffice;
	$dispatch: PostOfficeCollection;
}

export class PostOffice {
	private $listeners
	private $poBoxInst
	private $notifiable
	private $controller
	constructor()
	install(vue: VueConstructor): void
	indexOf(instance: any, field: any, defaultVal: any): any
	register(vm: Vue, event: string, params: string | object): void
	discover(vm: any): void
	find(scope: object, property: string, defValue?: any): any
	handle(args: object): void
}

module "vue/types/vue" {
	interface Vue {
		$postOffice: PostOffice
		$postConfig: {};
	}
	
	interface VueConstructor {
		PostOffice?: PostOfficeEvents
	}
}

module "vue/types/options" {
	interface ComponentOptions<V extends Vue> {
		PostOffice?: PostOfficeEvents
	}
}

MyComponent.ts

const MyComponent = {
	PostOffice: {
		PaymentAuthorization: {
			fromEcho: true,
			isPublic: false
		},
		
		"Foo": "Bar",
	},
	
	methods: {
		CreateAccount() {
			//this.$recent.push( "CreateAccount" );
		},
		
		PaymentAuthorization(event) {
			//console.log(this.$recent);
			//this.$recent.push( event.msgType );
			
			console.log( "Payment Event:", event);
		}
	}
};

export default MyComponent;