Added comments, improved code quality.

Author: tomasbonco

src/inject/constants.ts

@@ -1 +1,6 @@
-export const CSS_PREFIX: string = 'gitlab-tree-plugin';
+export const CSS_PREFIX: string = 'gitlab-tree-plugin';
+
+// Events
+export const EVENT_SETTINGS_CHANGED = 'settings-changed';
+export const EVENT_TOGGLE_NAVIGATION = 'toggle-navigation-is-open';
+export const EVENT_TOGGLE_EXTENSION = 'toggle-extension-is-on';

src/inject/index.ts

@@ -1,11 +1,20 @@
 import { Container } from './libs/container';
-import { GitLabTree } from './inject';
+import { GitLabTree } from './main';
 import { CSS_PREFIX } from './constants'
 import { SettingsStore } from './settings.store';
 
 let container: Container = new Container();
 let interval: number;
 
+/*
+	!! IMPORTANT NOTE !!
+
+	This file performs a quick test, whether plugin should be applied.
+	Actual plugin entry point can be found in `main.ts` file.
+*/
+
+
+
 /**
  * This is for fake AJAX re-renders of the page.
  */
@@ -24,7 +33,7 @@ function checkSiteChange(): void
 
 function startCheckInterval( time: number ): void
 {
-	clearInterval(  interval )
+	clearInterval( interval )
 	interval = setInterval( () => checkSiteChange(), time );
 }
 

src/inject/libs/container.ts

@@ -1,5 +1,14 @@
 import 'reflect-metadata';
 
+/**
+ * This is container manager inspirated by Aurelia's one. Will be published on npm and GitHub as solo soon.
+ * It works like a context, where all instances are registred as singletons. Then it resolves dependecies
+ * and passes singletons to constructor.
+ * 
+ * If you want to use it, just use @autoinject decorator on the class and inside constructor specify what
+ * dependencies you want to use.
+ */
+
 export class Container
 {
 	static instance: Container = undefined;

src/inject/libs/pubsub.ts

@@ -6,16 +6,42 @@ export class PubSub
 {
 	subscribers: Map<string, any[]> = new Map<string, any[]>();
 
-
-	subscribe( message: string, callback: any )
+	/**
+	 * Subscribes to specific message.
+	 * 
+	 * @param message - what message to receive
+	 * @param callback - what should happen once the message is received
+	 * @returns callback to unsubscribe
+	 */
+	subscribe( message: string, callback: any ): () => void
 	{
 		const subscribers = this.subscribers.get( message ) || [];
 		subscribers.push( callback );
 
 		this.subscribers.set( message, subscribers );
+
+		// Unsubscribe
+		return () =>
+		{
+			if ( subscribers.length > 1 )
+			{
+				subscribers.splice( subscribers.indexOf( callback ), 1 );
+			}
+
+			else
+			{
+				this.subscribers.delete( message );
+			}
+		}
 	}
 
 
+	/**
+	 * Sends a message.
+	 * 
+	 * @param message - message name
+	 * @param data - message data
+	 */
 	publish( message: string, data?: any )
 	{
 		const subscribers = this.subscribers.get( message ) || [];
@@ -24,4 +50,13 @@ export class PubSub
 			subscriber( message, data );
 		})
 	}
+
+
+	/**
+	 * 
+	 */
+	unsubscribeAll()
+	{
+		this.subscribers = new Map();
+	}
 }

src/inject/libs/views.ts

@@ -1,18 +1,45 @@
 import { patch } from 'superfine'
 
+/**
+ * Motivation:
+ * Saving data into classes (folder/file) is convenient. Displaying them, however, is a problem.
+ * Using Aurelia or Vue would bring a massive overhead for the otherwise simple plugin. So my
+ * goal was to sync data with the view as simple as possible, and virtual-dom based solutions
+ * do a great job. However, there is a problem with state management. You can't use the instance
+ * as a component (if you can please open an issue). But you can define generic component and
+ * send the state as a prop. I wanted to avoid duplication of state. Managing state is difficult
+ * as well because the structure is not flat. So updating such a structure with Immutable and Redux
+ * seemed complicated.
+ * 
+ * The solution is that everytime a change occurs, the whole new virtual dom is created, and changes
+ * are reflected. This class saves entry points for every view and in case of change it does the job.
+ */
+
 export class Views
 {
 	private views = new Map<string, { element: HTMLElement, renderFn: () => any, lastNode: any }>();
 
-
-	applyView( name: string, renderFn: () => any, element: HTMLElement )
+	/**
+	 * Create DOM structure and append it to given element. This will create a "view".
+	 * 
+	 * @param name - name of the "view" (so we can in future ask for redraw by name)
+	 * @param renderFn - function that generates virtual DOM
+	 * @param element - element, where "view" will be appended
+	 */
+	applyView( name: string, renderFn: () => any, element: HTMLElement ): void
 	{
 		this.views.set( name, { element, renderFn, lastNode: undefined } );
 		this.redrawView( name );
 	}
 
 
-	redrawView( name )
+	/**
+	 * This creates virtual dom reflecting current state, compares with last state and redraws
+	 * changes.
+	 * 
+	 * @param name - name of "view" to redraw
+	 */
+	redrawView( name: string ): void
 	{
 		if ( this.views.has( name ) )
 		{