use webpack for content inlining and html minification (WIP)

2017-11-12 11:46:34 +13:00
7 changed files with 367 additions and 274 deletions
--- a/bindata.go
+++ b/bindata.go
--- a/client/dcwebui.js
+++ b/client/dcwebui.js
@@ -1,37 +1,33 @@
 /* dcwebui.js */

-import "./dcwebui.less"; // for webpack
-import * as io from 'socket.io-client'
+require("./dcwebui.less");
+
+import io from 'socket.io-client'

 "use strict";

-/**
- * Display value when loading a saved password
- */
 var SENTINEL_PASSWORD = "************";
-
-/**
- * Number of lines of chat to keep in the scroll area.
- * Once there are over 2x $limit lines, the first $limit lines will be trimmed off the list
- */
-var CHAT_SCROLLBACK_LIMIT = 200; 
-
-/**
- * Our externally-accessible URL
- */
+var CHAT_SCROLLBACK_LIMIT = 200; // Once over 2x $limit, the first $limit will be trimmed off the list
 var EXTERN_ROOT = window.location.protocol + "//" + window.location.host + "/";

-// Help out the braindead minifier, use these functions instead
-var document_getElementById = function(x) { return document.getElementById(x); }
-var document_getElementsByClassName = function(x) { return document.getElementsByClassName(x); }
-var document_createElement = function(x) { return document.createElement(x); }
+var el = function(s) {
+	// There used to be a querySelectorAll implementation, but, better that we don't have
+	//  potentially-incompatible implementations if this one does actually work.
+	// i'm not writing a selector engine...
+	if (! s.length) {
+		return [];
+	}
+	
+	if (s[0] === '#') {
+		return document.getElementById(s.slice(1)); // single element
+	} else if (s[0] === '.') {
+		return document.getElementsByClassName(s.slice(1)); // multiple elements
+	} else {
+		return document.getElementsByTagName(s); // multiple elements
+	}
+};

-/**
- * Encode a string for NMDC
- * 
- * @param str 
- */
-var nmdc_escape = function(str: string): string {
+var nmdc_escape = function(str) {
 	return (
 		(''+str).length
 			? (''+str).replace(/&/g,'&amp;').replace(/\|/g,'&#124;').replace(/\$/g,'&#36;')
@@ -39,24 +35,14 @@ var nmdc_escape = function(str: string): string {
 	);
 };

-/**
- * Encode a string for HTML
- * 
- * @param s 
- */
-var hesc = function(s: string): string {
+var hesc = function(s) {
 	var filter = {
 		'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&#34;', '\'': '&#39;'
 	};
 	return s.toString().replace(/[&<>'"]/g, function(s) { return filter[s]; });
 };

-/**
- * Format a number of bytes as a human-readable string
- * 
- * @param b 
- */
-var fmtBytes = function(b: number): string {
+var fmtBytes = function(b) {
 	if (b == 0) {
 		return '(nothing)';
 	}
@@ -67,21 +53,12 @@ var fmtBytes = function(b: number): string {
 	return parseFloat((b / Math.pow(k, i)).toFixed(3)) + sizes[i];
 };

-/**
- * Decode a string that was previously encoded in raw-url format.
- * 
- * @param s 
- */
-var urldesc = function(s: string):string {
+
+var urldesc = function(s) {
 	return decodeURIComponent(s.replace(/\+/g, " "));
 }

-/**
- * Enhance an HTML string by automatically making links clickable, etc.
- * 
- * @param str An HTML-safe string 
- */
-var linkify = function(str : string):string {
+var linkify = function(str) {
 	// n.b. str is already hesced
 	return (str
 		.replace(
@@ -95,39 +72,17 @@ var linkify = function(str : string):string {
 	);
 };

-/**
- * Convert a plain-text string into an enhanced, HTML-safe string.
- * 
- * @param s 
- */
-var sanitise = function(s:string): string {
+var sanitise = function(s) {
 	return linkify(hesc(s));
 };

-/**
- * Retrieve the plain-text content from an HTML element in a browser-compatible way.
- * 
- * @param $el
- */
-var textContent = function($el : HTMLElement) : string {
-	if ($el.textContent) {
-		return $el.textContent;
-	}
-
-	if ($el.innerText) {
-		return $el.innerText;
-	}
-
+var textContent = function($el) {
+	if ($el.textContent) return $el.textContent;
+	if ($el.innerText) return $el.innerText;
 	return "";
 };

-/**
- * Calculate the positive modulo of (l % r).
- * 
- * @param l 
- * @param r 
- */
-var negmod = function(l:number, r:number):number {
+var negmod = function(l, r) {
 	var ret = l % r;
 	if (l < 0) {
 		return ret + r;
@@ -136,27 +91,16 @@ var negmod = function(l:number, r:number):number {
 	}
 };

-/**
- * Encode a string to base64 in a UTF8-safe way.
- * 
- * @ref https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
- * @param str 
- */
-var b64 = function(str : string):string {
+// @ref https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
+var b64 = function(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
-        return String.fromCharCode(parseInt('0x' + p1));
+        return String.fromCharCode('0x' + p1);
    })).replace(/=/g, '');
 }

-/**
- * Append content to an HTML element in a browser-compatible way.
- * 
- * @ref https://gist.github.com/eligrey/1276030
- * @param $el
- * @param html 
- */
-var appendInnerHTML = function($el: HTMLElement, html:string) {
-	var child = document_createElement("span");
+// @ref https://gist.github.com/eligrey/1276030
+var appendInnerHTML = function($el, html) {
+	var child = document.createElement("span");
 	child.innerHTML = html;
 	
 	var node;
@@ -165,48 +109,30 @@ var appendInnerHTML = function($el: HTMLElement, html:string) {
 	}
 };

-/**
- * Retrieve the left offset of a DOM element relative to the document.
- * 
- * @ref http://stackoverflow.com/a/5598797
- * @param elem 
- */
-function getOffsetLeft( elem: HTMLElement ):number {
+// @ref http://stackoverflow.com/a/5598797
+function getOffsetLeft( elem ) {
    var offsetLeft = 0;
 	do {
 		if (!isNaN(elem.offsetLeft)) {
 			offsetLeft += elem.offsetLeft;
 		}
-	} while (elem = <HTMLElement>elem.offsetParent);
+	} while (elem = elem.offsetParent);
 	return offsetLeft;
 }

-/**
- * Retrieve the top offset for a DOM element relative to the document.
- * 
-* @ref http://stackoverflow.com/a/5598797
- * @param elem 
- */
-function getOffsetTop( elem: HTMLElement ):number {
+function getOffsetTop( elem ) {
    var offsetTop = 0;
 	do {
 		if (!isNaN(elem.offsetTop)) {
 			offsetTop += elem.offsetTop;
 		}
-	} while (elem = <HTMLElement>elem.offsetParent);
+	} while (elem = elem.offsetParent);
 	return offsetTop;
 }

 /* */

-/**
- * Format a string in a date format, analgous to strftime().
- * 
- * @param d
- * @param format Formatting string, supporting HisYmd character specifiers
- * @return Plain text string
- */
-var date_format = function(d:Date, format:string):string {
+var date_format = function(d, format) {
 	var pad = function(s) {
 		return (s < 10) ? '0'+s : ''+s ;
 	};
@@ -215,25 +141,20 @@ var date_format = function(d:Date, format:string):string {
 	ret = ret.replace(/H/g, pad(d.getHours()));
 	ret = ret.replace(/i/g, pad(d.getMinutes()));
 	ret = ret.replace(/s/g, pad(d.getSeconds()));
-	ret = ret.replace(/Y/g, "" + d.getFullYear());
+	ret = ret.replace(/Y/g, d.getFullYear());
 	ret = ret.replace(/m/g, pad(d.getMonth() + 1));
 	ret = ret.replace(/d/g, pad(d.getDate()));
 	return ret;
 };

-/**
- * Emit an HTML5 notification.
- * 
- * @param title 
- * @param body 
- * @param tab 
- */
-var notify = function(title:string, body:string, tab:string) {
+/* */
+
+var notify = function(title, body, tab) {
 	if (!("Notification" in window)) {
 		return; // not supported by browser
 	}
 	
-	switch ( (window as any).Notification.permission) {
+	switch (window.Notification.permission) {
 		case "granted": {
 			var n = new Notification(title, {
 				body: body,
@@ -252,7 +173,7 @@ var notify = function(title:string, body:string, tab:string) {
 		default: {
 			// Clarify permission and retry
 			Notification.requestPermission(function(permission) {
-				notify(title, body, "tab-main");
+				notify(title, body);
 			});
 		} break;
 	}
@@ -261,7 +182,7 @@ var notify = function(title:string, body:string, tab:string) {
 /* Tab writers */ 

 var write = function(tab) {
-	var $tab = document_getElementById("inner-"+tab);
+	var $tab = el('#inner-'+tab);
 	return {
 		'cls': function() {
 			$tab.innerHTML = '';
@@ -337,11 +258,11 @@ var userlist = {
 	'add': function(u) {
 		if (this.has(u)) return;
 		
-		var userlists = document_getElementsByClassName("userlist");
+		var userlists = el(".userlist");
 		for (var l = 0, e = userlists.length; l !== e; ++l) {
 			var userlist = userlists[l];
 			
-			var to_add = document_createElement('li');
+			var to_add = document.createElement('li');
 			to_add.className = "user-" + b64(u);
 			to_add.innerHTML = hesc(u);
 			
@@ -366,7 +287,7 @@ var userlist = {
 		return this;
 	},
 	'del': function(u) {
-		var userlists = document_getElementsByClassName("userlist");
+		var userlists = el(".userlist");
 		for (var l = 0, e = userlists.length; l !== e; ++l) {
 			if (! userlists[l].children) continue;
 			var userlist = userlists[l];
@@ -383,7 +304,7 @@ var userlist = {
 		return this;
 	},
 	'clear': function() {
-		var userlists = document_getElementsByClassName("userlist");
+		var userlists = el(".userlist");
 		for (var i in userlists) {
 			if (! userlists[i].children) continue;
 			var userlist = userlists[i];
@@ -396,22 +317,22 @@ var userlist = {
 		return this;
 	},
 	'names': function() {
-		var userlist = document_getElementsByClassName("userlist")[0].children;
+		var userlist = el(".userlist")[0].children;
 		var ret = [];
 		for (var i = 0, e = userlist.length; i < e; ++i) {
-			ret.push( textContent((<HTMLElement>userlist[i])) );
+			ret.push( textContent(userlist[i]) );
 		}
 		return ret;
 	},
 	'has': function(u) {
-		return document_getElementsByClassName("user-" + b64(u)).length !== 0; /* there are two - large and non-large */
+		return el(".user-" + b64(u)).length !== 0; /* there are two - large and non-large */
 	},
 	'count': function() {
-		return document_getElementsByClassName("userlist")[0].children.length;
+		return el(".userlist")[0].children.length;
 	},
 	'setInfo': function(nick, props) {
 		var baseClass = "user-" + b64(nick);
-		var $el = document_getElementsByClassName("" + baseClass);
+		var $el = el("." + baseClass);
 		var prop_str = [];
 		if (props.Description.length > 0) {
 			prop_str.push(props.Description);
@@ -428,7 +349,7 @@ var userlist = {
 		prop_str.push("Sharing " + fmtBytes(props.ShareSize));
 		
 		for (var i = 0; i < $el.length; ++i) {
-			(<HTMLElement> $el[i]).title = prop_str.join("\n");
+			$el[i].title = prop_str.join("\n");
 			
 			if (props.IsOperator) {
 				$el[i].className = baseClass + " user-is-operator";
@@ -440,7 +361,7 @@ var userlist = {
 };

 var submit = function() {
-	var str = (<HTMLInputElement>document_getElementById("chatbox")).value;
+	var str = el("#chatbox").value;
 	if (! str.length) return;

 	if (hub_state === STATE_READY_FOR_LOGIN) {
@@ -466,7 +387,7 @@ var submit = function() {
 		write("tab-main").system("Connecting...");
 		
 	} else if (hub_state === STATE_ACTIVE) {
-		if (pm_target !== PM_TARGET_NONE) {
+		if (pm_target !== false) {
 			sock.emit('priv', {'user': pm_target, 'message': str});
 			writerFor(pm_target).pub(hub_last_nick, str );
 		} else {
@@ -483,7 +404,7 @@ var submit = function() {
 		write("tab-main").system("Invalid internal state.");
 	}
 	
-	(<HTMLInputElement>document_getElementById("chatbox")).value = '';
+	el("#chatbox").value = '';
 };

 /* page visibility */
@@ -496,10 +417,10 @@ var pagevis_setup = function(fnActive, fnInactive) {
 	if (typeof document.hidden !== "undefined") {
 		h = "hidden";
 		vc = "visibilitychange";
-	} else if (typeof (document as any).msHidden !== "undefined") {
+	} else if (typeof document.msHidden !== "undefined") {
 		h = "msHidden";
 		vc = "msvisibilitychange";
-	} else if (typeof (document as any).webkitHidden !== "undefined") {
+	} else if (typeof document.webkitHidden !== "undefined") {
 		h = "webkitHidden";
 		vc = "webkitvisibilitychange";
 	}
@@ -530,13 +451,13 @@ var pagevis_setup = function(fnActive, fnInactive) {
 */
 var tab_set = function(tab) {
 	
-	var tabs = document_getElementsByClassName("tabpane");
+	var tabs = el(".tabpane");
 	for (var i in tabs) {
 		try {
-			(<HTMLElement> tabs[i]).style.display = (tabs[i].id === tab ? 'block' : 'none');
+			tabs[i].style.display = (tabs[i].id === tab ? 'block' : 'none');
 		} catch (e) {};
 	}
-	var tabitems = document_getElementsByClassName("tabitem");
+	var tabitems = el(".tabitem");
 	for (var i in tabitems) {
 		try {
 			// Update UNREAD/SELECTED flags for the target
@@ -549,7 +470,7 @@ var tab_set = function(tab) {
 		} catch (e) {};
 	}
 	
-	pm_target = PM_TARGET_NONE;
+	pm_target = false;
 	for (var i in pm_tabs) {
 		if (pm_tabs[i] === tab) {
 			pm_target = i;
@@ -564,13 +485,13 @@ var tab_set = function(tab) {
 	updateTitle();
 	
 	write(tab).scroll();
-	document_getElementById("chatbox").focus();
+	el("#chatbox").focus();
 	last_tab = tab;
 	
 };

 var tab_new = function(id, name) {
-	appendInnerHTML(document_getElementById("bar"),
+	appendInnerHTML(el("#bar"),
 		' <div class="tabitem" data-tab="tab-ext-'+id+'" id="tabitem-tab-ext-'+id+'">'+
 			'<span class="tab-label">'+
 				hesc(name)+
@@ -578,7 +499,7 @@ var tab_new = function(id, name) {
 			'<a class="tab-closer" data-tab="tab-ext-'+id+'">&times;</a>'+
 		'</div> '
 	);
-	appendInnerHTML(document_getElementById("extratabs"),
+	appendInnerHTML(el("#extratabs"),
 		' <div class="tabpane content placement-mid" id="tab-ext-'+id+'" style="display:none;">'+
 			'<div class="content-inner" id="inner-tab-ext-'+id+'"></div>'+
 		'</div>'
@@ -591,10 +512,10 @@ var tab_free = function(id) {
 	if (id === "tab-main") return;

 	// remove tab item and body
-	var $el = document_getElementById("tabitem-"+id);
+	var $el = el("#tabitem-"+id);
 	$el.parentNode.removeChild($el);
 	
-	$el = document_getElementById(""+id);
+	$el = el("#"+id);
 	$el.parentNode.removeChild($el);
 	
 	// clear from PM tabs
@@ -629,26 +550,22 @@ var noprop = function(ev) {
 }

 var tab_addHandlers = function() {
-	var tabitems = document_getElementsByClassName("tabitem");
+	var tabitems = el(".tabitem");
 	for (var i = 0; i < tabitems.length; i++) {
-		if (! tabitems[i]) {
-			continue;
-		}
+		if (! tabitems[i]) continue;
 		
-		(<HTMLElement> tabitems[i]).onclick = function(ev) {
+		tabitems[i].onclick = function(ev) {
 			tab_set( this.getAttribute('data-tab') );
 			
 			return noprop(ev);
 		};
 	}
 	
-	var tabclosers = document_getElementsByClassName("tab-closer");
+	var tabclosers = el(".tab-closer");
 	for (var i = 0; i < tabclosers.length; i++) {
-		if (! tabclosers[i]) {
-			continue;
-		}
+		if (! tabclosers[i]) continue;
 		
-		(<HTMLElement> tabclosers[i]).onclick = function(ev) {
+		tabclosers[i].onclick = function(ev) {
 			tab_free( this.getAttribute('data-tab') );
 			
 			return noprop(ev);
@@ -658,8 +575,8 @@ var tab_addHandlers = function() {

 /* */

-var maybeWriterFor = function(username: string) {
-	if (! (username in pm_tabs) || ! pm_tabs[username]) {
+var maybeWriterFor = function(username) {
+	if (! username in pm_tabs || ! pm_tabs[username]) {
 		return null;
 	}
 	
@@ -684,7 +601,7 @@ var tabcomplete_state = '';

 var tabcompletion_start = function(direction) {
 	
-	var cursor = (<HTMLInputElement>document_getElementById("chatbox")).value.replace(/^.*\s([^\s]+)$/, '$1');
+	var cursor = el("#chatbox").value.replace(/^.*\s([^\s]+)$/, '$1');
 	
 	if (tabcomplete_state === '') {
 		// new tab completion
@@ -720,11 +637,10 @@ var tabcompletion_start = function(direction) {
 	
 	// Replace in textbox
 	
-	var $chatbox = (<HTMLInputElement>document_getElementById("chatbox"));
-	var chatprefix = $chatbox.value.substr(0, $chatbox.value.length - cursor.length);
+	var chatprefix = el("#chatbox").value.substr(0, el("#chatbox").value.length - cursor.length);
 	
-	$chatbox.value = chatprefix + targetName;
-	$chatbox.focus();
+	el("#chatbox").value = chatprefix + targetName;
+	el("#chatbox").focus();
 };

 var tabcompletion_inactive = function() {
@@ -736,11 +652,11 @@ var tabcompletion_inactive = function() {
 var MenuList = function(el) {
 	this.el = el;
 	
-	this.div = document_createElement("div");
+	this.div = document.createElement("div");
 	this.div.classList.add("menu");
 	this.div.style.position = "absolute";
 	
-	this.ul = document_createElement("ul");
+	this.ul = document.createElement("ul");
 	this.div.appendChild(this.ul);
 	
 	document.body.appendChild(this.div);
@@ -752,7 +668,7 @@ MenuList.prototype.clear = function() {
 	}
 };
 MenuList.prototype.add = function(txt, cb) {
-	var li = document_createElement("li");
+	var li = document.createElement("li");
 	li.innerHTML = txt;
 	li.onclick = cb;
 	this.ul.appendChild(li);
@@ -773,7 +689,7 @@ MenuList.prototype.toggle = function() {

 /* */ 

-var menu = new MenuList(document_getElementById("menubutton"));
+var menu = new MenuList(el("#menubutton"));

 menu.reset = function() {
 	this.clear();
@@ -876,7 +792,7 @@ var toggle_joinparts = function(ev) {

 var updateTitle = function() {
 	var prefix = "";
-	var unrTabs = document_getElementsByClassName("unread");
+	var unrTabs = el(".unread");
 	if (unrTabs.length === 1 && unrTabs[0].getAttribute('data-tab') == "tab-main") {
 		prefix = "[" + mainchat_unread_count + " NEW] "
 	} else if (unrTabs.length > 0) {
@@ -890,15 +806,14 @@ var updateTitle = function() {
 	document.title = prefix + hub_hubname + suffix;
 };

-var sock:SocketIOClient.Socket = null;
+var sock = {};
 var hub_state     = 0; // [disconnected, sent-nick, connected]
 var hub_last_nick = '';
 var hub_hubname   = "Loading...";

 var pm_tabs = {}; // nick => tabid
 var next_tabid = 1;
-const PM_TARGET_NONE = "";
-var pm_target = PM_TARGET_NONE;
+var pm_target = false;

 var last_tab = "tab-main";

@@ -982,7 +897,7 @@ var scrollback_move = function(delta) {
 		}
 	}
 	
-	(<HTMLInputElement>document_getElementById("chatbox")).value = chat_scrollback[chat_scrollback_index];
+	el("#chatbox").value = chat_scrollback[chat_scrollback_index];
 };

 /* */
@@ -1003,30 +918,29 @@ var persistence_get = function(key, fallback) {

 var transition = function(new_state) {
 	hub_state = new_state;
-	var $chatbox = (<HTMLInputElement>document_getElementById("chatbox"));
 	
 	switch(new_state) {
 		case STATE_DISCONNECTED: {
 			userlist.clear();		
-			$chatbox.disabled = true;
-			$chatbox.value = ''; // clear
+			el("#chatbox").disabled = true;
+			el("#chatbox").value = ''; // clear
 		} break;
 		
 		case STATE_READY_FOR_LOGIN: {
 			userlist.clear();
-			$chatbox.spellcheck = false;
-			$chatbox.disabled = false;
-			$chatbox.value = ''; // clear
+			el("#chatbox").spellcheck = false;
+			el("#chatbox").disabled = false;
+			el("#chatbox").value = ''; // clear
 		} break;
 		
 		case STATE_CONNECTING: {
-			$chatbox.disabled = true;
+			el("#chatbox").disabled = true;
 		} break;
 		
 		case STATE_ACTIVE: {			
 			write("tab-main").system("Now talking on "+hub_hubname);
-			$chatbox.disabled = false;
-			$chatbox.spellcheck = true;
+			el("#chatbox").disabled = false;
+			el("#chatbox").spellcheck = true;
 		} break;
 	}
 };
@@ -1036,15 +950,14 @@ var tab_is_visible = function(tabref) {
 }

 var tab_mark_unread = function(tabref) {
-	if (document_getElementById("tabitem-"+tabref).className.indexOf('unread') === -1) {
-		document_getElementById("tabitem-"+tabref).className += " unread";
+	if (el("#tabitem-"+tabref).className.indexOf('unread') === -1) {
+		el("#tabitem-"+tabref).className += " unread";
 		updateTitle();
 	}
 }

 //

-declare var contented: any;
 var contented_url = "";
 var contented_loaded_sdk = false;
 var contented_load = function() {
@@ -1054,21 +967,21 @@ var contented_load = function() {
 	
 	var onceSDKLoaded = function() {
 		contented.init("#inner-tab-main", function(items) {
-			var val = (<HTMLInputElement> document_getElementById("chatbox")).value;
+			var val = el("#chatbox").value;
 			for (var i = 0; i < items.length; ++i) {
 				if (val.length > 0) {
 					val += " ";
 				}
 				val += contented.getPreviewURL(items[i]);
 			}
-			(<HTMLInputElement> document_getElementById("chatbox")).value = val;
+			el("#chatbox").value = val;
 		});
 	};
 	
 	if (contented_loaded_sdk) {
 		onceSDKLoaded();
 	} else {
-		var scriptElement = document_createElement('script');
+		var scriptElement = document.createElement('script');
 		scriptElement.onload = function() {
 			contented_loaded_sdk = true;
 			onceSDKLoaded();
@@ -1089,13 +1002,13 @@ window.onload = function() {
 	
 	// HTML event handlers
 	
-	document_getElementById("form-none").onsubmit = function(ev) {
+	el("#form-none").onsubmit = function(ev) {
 		submit();
 		
 		return noprop(ev); // don't submit form
 	};
 	
-	document_getElementById("chatbox").onkeydown = function(ev) {
+	el("#chatbox").onkeydown = function(ev) {
 		if (ev.keyCode === 9 /* Tab */) {
 			tabcompletion_start( ev.shiftKey ? -1 : 1 );
 			return noprop(ev);
@@ -1123,7 +1036,7 @@ window.onload = function() {
 		usermenu.hide();
 	};
 	
-	document_getElementById("menubutton").onclick = function(ev) {
+	el("#menubutton").onclick = function(ev) {
 		menu.toggle();
 		return noprop(ev);
 	};
@@ -1181,7 +1094,7 @@ window.onload = function() {
 		if (pre_login.indexOf(":") !== -1) {
 			pre_login = pre_login.substr(0, pre_login.indexOf(":")) + ":" + SENTINEL_PASSWORD;
 		}
-		(<HTMLInputElement>document_getElementById("chatbox")).value = pre_login;
+		el("#chatbox").value = pre_login;
 		
 		if (have_cleared_once) {
 			// re-log-in automatically			
--- a/client/index.htm
+++ b/client/index.htm
@@ -54,7 +54,5 @@
 				</div>
 			</form>
 		</div>
-		
-		<script type="text/javascript" src="/bundle.js"></script>
 	</body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,11 +4,6 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
-    "@types/socket.io-client": {
-      "version": "1.4.31",
-      "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.31.tgz",
-      "integrity": "sha512-CNxZH+ZPL0bkg9qr7HMNHI2TzZOHGbha3LrrH8TIMutd2TUAreb1YJ9u8pfptzZbbBiwnSpZkY+mmrqkZp5I7A=="
-    },
    "acorn": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.2.1.tgz",
@@ -376,11 +371,21 @@
      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz",
      "integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE="
    },
+    "bluebird": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
+      "integrity": "sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA=="
+    },
    "bn.js": {
      "version": "4.11.8",
      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
      "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA=="
    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
    "boom": {
      "version": "2.10.1",
      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
@@ -928,6 +933,17 @@
        "source-list-map": "2.0.0"
      }
    },
+    "css-select": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "requires": {
+        "boolbase": "1.0.0",
+        "css-what": "2.1.0",
+        "domutils": "1.5.1",
+        "nth-check": "1.0.1"
+      }
+    },
    "css-selector-tokenizer": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz",
@@ -938,6 +954,11 @@
        "regexpu-core": "1.0.0"
      }
    },
+    "css-what": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
+      "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0="
+    },
    "cssesc": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -1076,11 +1097,64 @@
        "randombytes": "2.0.5"
      }
    },
+    "dom-converter": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
+      "integrity": "sha1-pF71cnuJDJv/5tfIduexnLDhfzs=",
+      "requires": {
+        "utila": "0.3.3"
+      },
+      "dependencies": {
+        "utila": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/utila/-/utila-0.3.3.tgz",
+          "integrity": "sha1-1+jn1+MJEHCSsF+NloiCTWM6QiY="
+        }
+      }
+    },
+    "dom-serializer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
+      "integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=",
+      "requires": {
+        "domelementtype": "1.1.3",
+        "entities": "1.1.1"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
+          "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs="
+        }
+      }
+    },
    "domain-browser": {
      "version": "1.1.7",
      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
      "integrity": "sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw="
    },
+    "domelementtype": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
+      "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI="
+    },
+    "domhandler": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.1.0.tgz",
+      "integrity": "sha1-0mRvXlf2w7qxHPbLBdPArPdBJZQ=",
+      "requires": {
+        "domelementtype": "1.3.0"
+      }
+    },
+    "domutils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "requires": {
+        "dom-serializer": "0.1.0",
+        "domelementtype": "1.3.0"
+      }
+    },
    "ecc-jsbn": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
@@ -1155,6 +1229,11 @@
        "tapable": "0.2.8"
      }
    },
+    "entities": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
+      "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA="
+    },
    "errno": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz",
@@ -1737,6 +1816,74 @@
        "uglify-js": "3.1.9"
      }
    },
+    "html-webpack-plugin": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz",
+      "integrity": "sha1-f5xCG36pHsRg9WUn1430hO51N9U=",
+      "requires": {
+        "bluebird": "3.5.1",
+        "html-minifier": "3.5.6",
+        "loader-utils": "0.2.17",
+        "lodash": "4.17.4",
+        "pretty-error": "2.1.1",
+        "toposort": "1.0.6"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "requires": {
+            "big.js": "3.2.0",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1",
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
+    "htmlparser2": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
+      "integrity": "sha1-zHDQWln2VC5D8OaFyYLhTJJKnv4=",
+      "requires": {
+        "domelementtype": "1.3.0",
+        "domhandler": "2.1.0",
+        "domutils": "1.1.6",
+        "readable-stream": "1.0.34"
+      },
+      "dependencies": {
+        "domutils": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.1.6.tgz",
+          "integrity": "sha1-vdw94Jm5ou+sxRxiPyj0FuzFdIU=",
+          "requires": {
+            "domelementtype": "1.3.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
    "http-signature": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
@@ -2595,6 +2742,14 @@
        "path-key": "2.0.1"
      }
    },
+    "nth-check": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz",
+      "integrity": "sha1-mSms32KPwsQQmN6rgqxYDPFJquQ=",
+      "requires": {
+        "boolbase": "1.0.0"
+      }
+    },
    "num2fraction": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -3359,6 +3514,15 @@
      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
    },
+    "pretty-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz",
+      "integrity": "sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=",
+      "requires": {
+        "renderkid": "2.0.1",
+        "utila": "0.4.0"
+      }
+    },
    "process": {
      "version": "0.11.10",
      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -3587,6 +3751,25 @@
      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
    },
+    "renderkid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.1.tgz",
+      "integrity": "sha1-iYyr/Ivt5Le5ETWj/9Mj5YwNsxk=",
+      "requires": {
+        "css-select": "1.2.0",
+        "dom-converter": "0.1.4",
+        "htmlparser2": "3.3.0",
+        "strip-ansi": "3.0.1",
+        "utila": "0.3.3"
+      },
+      "dependencies": {
+        "utila": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/utila/-/utila-0.3.3.tgz",
+          "integrity": "sha1-1+jn1+MJEHCSsF+NloiCTWM6QiY="
+        }
+      }
+    },
    "repeat-element": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
@@ -3690,6 +3873,24 @@
        }
      }
    },
+    "script-ext-html-webpack-plugin": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/script-ext-html-webpack-plugin/-/script-ext-html-webpack-plugin-1.8.8.tgz",
+      "integrity": "sha512-9mxSrvfX8on97tu4pUfLXQ9StKGxfHKSy3NXsYBi+4EpyhI4oUUhE3KEWUViDiTQHmY7u2ztLT5OfOjQRzmJaQ==",
+      "requires": {
+        "debug": "3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
    "semver": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
@@ -4090,6 +4291,26 @@
      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
    },
+    "style-ext-html-webpack-plugin": {
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/style-ext-html-webpack-plugin/-/style-ext-html-webpack-plugin-3.4.5.tgz",
+      "integrity": "sha512-w5h3OiFffi92bJ47UDxFPwsDSArDYl+gihRfyd39v8I8qqS6ohbPjiD0nAZCqDa5WFUWTZWwFAcQV5mwaJcIqg==",
+      "requires": {
+        "clean-css": "4.1.9",
+        "debug": "3.1.0",
+        "webpack-sources": "1.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
    "style-loader": {
      "version": "0.19.0",
      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.19.0.tgz",
@@ -4203,6 +4424,11 @@
        "repeat-string": "1.6.1"
      }
    },
+    "toposort": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.6.tgz",
+      "integrity": "sha1-wxdI5V0hDv/AD9zcfW5o19e7nOw="
+    },
    "tough-cookie": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",
@@ -4212,50 +4438,6 @@
        "punycode": "1.4.1"
      }
    },
-    "ts-loader": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-3.1.1.tgz",
-      "integrity": "sha512-AQmLFSIgTiR8AlS5BxqvoHpZ3OUTwHHuDZTAZ2KcKsYRz/yANGeQn4Se/DCQ4cn1/eVvN37f/caVW4+kUPNNHw==",
-      "requires": {
-        "chalk": "2.3.0",
-        "enhanced-resolve": "3.3.0",
-        "loader-utils": "1.1.0",
-        "semver": "5.4.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
-          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
-          "requires": {
-            "color-convert": "1.9.1"
-          }
-        },
-        "chalk": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
-          "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
-          "requires": {
-            "ansi-styles": "3.2.0",
-            "escape-string-regexp": "1.0.5",
-            "supports-color": "4.5.0"
-          }
-        },
-        "has-flag": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
-        },
-        "supports-color": {
-          "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
-          "requires": {
-            "has-flag": "2.0.0"
-          }
-        }
-      }
-    },
    "tty-browserify": {
      "version": "0.0.0",
      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -4500,6 +4682,11 @@
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
    },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
+    },
    "uuid": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -14,16 +14,17 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "@types/socket.io-client": "^1.4.31",
    "awesome-typescript-loader": "^3.3.0",
    "css-loader": "^0.28.7",
    "html-minifier": "^3.5.6",
+    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "less-plugin-clean-css": "^1.5.1",
+    "script-ext-html-webpack-plugin": "^1.8.8",
    "socket.io-client": "^2.0.4",
+    "style-ext-html-webpack-plugin": "^3.4.5",
    "style-loader": "^0.19.0",
-    "ts-loader": "^3.1.1",
    "typescript": "^2.6.1",
    "uglify-js": "^3.1.8",
    "webpack": "^3.8.1"
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,9 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "es3",
-        "removeComments": true
-	},
-	"include": [
-		"client/*"
-	]
-}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,25 +1,19 @@
 /*! webpack.config.js */

 const webpack = require("webpack");
-const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanCSSPlugin = require("less-plugin-clean-css");
+const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");

 module.exports = {
-    entry: "./client/dcwebui.ts",
+    entry: "./client/dcwebui.js",
    output: {
-        path: path.resolve(__dirname, 'clientpack'),
-        filename: "bundle.min.js"
-    },
-	resolve: {
-        // Add '.ts' and '.tsx' as a resolvable extension.
-        extensions: [ '.tsx', '.ts', '.js' ]
+        path: __dirname,
+        filename: "clientpack/bundle.min.js"
    },
    module: {
        loaders: [
        
-			// all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
-			{ test: /\.tsx?$/, loader: "ts-loader" },
-        
 			// Plain CSS files (no longer present)
            { test: /\.css$/, loader: "style-loader!css-loader" },
 			
@@ -46,8 +40,17 @@ module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
-                warnings: false
+                warnings: true
            }
-        })
+        }),
+		new HtmlWebpackPlugin({
+			template: './client/index.htm',
+			filename: 'output.html',
+			//filename: './clientpack/index.htm',
+			minify: {},
+		}),
+		new ScriptExtHtmlWebpackPlugin({
+			inline: [ /\.*/ ]
+		})
    ]
 };