tsconfig.json: commit

.gitignore

@@ -0,0 +1,2 @@
+clientpack/**
+node_modules/**

.hgignore

@@ -3,6 +3,7 @@ mode:regex
 \.exe$
 ^nmdc-webfrontend\.conf$
 ^clientpack/
+^node_modules/
 
 ^_dist/
 ^vendor/

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "0.1.0",
+    "command": "npm",
+    "isShellCommand": true,
+    "showOutput": "always",
+    "suppressTaskName": true,
+    "tasks": [
+        {
+            "taskName": "install",
+            "args": ["install"]
+        },
+        {
+            "taskName": "update",
+            "args": ["update"]
+        },
+        {
+            "taskName": "test",
+            "args": ["run", "test"]
+        }
+    ]
+}

Makefile

@@ -9,17 +9,17 @@ GOFLAGS=-a \
 	-gcflags "-trimpath ${GOPATH}" \
 	-asmflags "-trimpath ${GOPATH}"
 
-SOURCES=client/ Gopkg.lock Gopkg.toml Makefile Config.go main.go nmdc-webfrontend.conf.SAMPLE
+.PHONY: all dist deps clean clean-deps
 
-.PHONY: all deps clean
+all: $(BINNAME) $(BINNAME).exe
 
-all: $(BINNAME)-$(VERSION)-win32.7z $(BINNAME)-$(VERSION)-linux64.tar.xz $(BINNAME)-$(VERSION)-src.tar.xz
+dist: $(BINNAME)-$(VERSION)-win32.7z $(BINNAME)-$(VERSION)-linux64.tar.xz $(BINNAME)-$(VERSION)-src.zip
 
 deps:
-	npm install -g less uglify-js less-plugin-clean-css html-minifier
+	npm i
 	go get -u github.com/jteeuwen/go-bindata/...
 	go get -u github.com/golang/dep/cmd/dep
-	dep ensure
+	$(GOPATH)/bin/dep ensure
 	
 clean:
 	rm -f ./$(BINNAME)
@@ -27,22 +27,21 @@ clean:
 	rm -fr ./clientpack
 	rm -f ./bindata.go
 	
+clean-deps:
+	rm -fr ./vendor
+	rm -fr ./node_modules
+
 bindata.go: client client/*
-	rm -fr ./clientpack
-	cp -r ./client ./clientpack
-	( echo ';(function() {' ; cat clientpack/dcwebui.js ; echo '})();' ) | uglifyjs -o clientpack/dcwebui.min.js -c -m --ie8
-	lessc --clean-css clientpack/dcwebui.css clientpack/dcwebui.min.css
-	cat clientpack/index.htm \
-		| sed -e '/dcwebui.css/{i <style>' -e 'r clientpack/dcwebui.min.css' -e 'a </style>' -e 'd}' \
-		| sed -e '/dcwebui.js/{i <script>' -e 'r clientpack/dcwebui.min.js' -e 'a </script>' -e 'd}' \
-		| sed -e '/socket.io-1.7.2.js/{i <script>' -e 'r clientpack/socket.io-1.7.2.js' -e 'a </script>' -e 'd}' \
-		> clientpack/index.packed.htm
-	mv clientpack/index.packed.htm clientpack/index.htm
+	mkdir -p clientpack
+	cp client/favicon.ico client/apple-touch-icon.png clientpack/
+	npm run webpack
+	cat client/index.htm \
+		| sed -e '/bundle.js/{i <script>' -e 'r clientpack/bundle.min.js' -e 'a </script>' -e 'd}' \
+		> clientpack/index.htm
 	html-minifier --collapse-whitespace -o clientpack/index.min.htm clientpack/index.htm
 	mv clientpack/index.min.htm clientpack/index.htm
-	rm ./clientpack/*.js
-	rm ./clientpack/*.css
-	go-bindata -nomemcopy -nometadata -prefix clientpack clientpack
+	rm clientpack/bundle.min.js
+	$(GOPATH)/bin/go-bindata -nomemcopy -nometadata -prefix clientpack clientpack
 	
 $(BINNAME).exe: bindata.go *.go
 	GOARCH=386 GOOS=windows go build $(GOFLAGS) -o $(BINNAME).exe
@@ -56,5 +55,5 @@ $(BINNAME)-$(VERSION)-win32.7z: $(BINNAME).exe nmdc-webfrontend.conf.SAMPLE
 $(BINNAME)-$(VERSION)-linux64.tar.xz: $(BINNAME) nmdc-webfrontend.conf.SAMPLE
 	XZ_OPT='-9' tar caf "$(BINNAME)-$(VERSION)-linux64.tar.xz" $(BINNAME) nmdc-webfrontend.conf.SAMPLE --owner=0 --group=0
 
-$(BINNAME)-$(VERSION)-src.tar.xz: $(SOURCES)
-	XZ_OPT='-9' tar caf "$(BINNAME)-$(VERSION)-src.tar.xz" $(SOURCES) --owner=0 --group=0
+$(BINNAME)-$(VERSION)-src.zip:
+	hg archive "$(BINNAME)-$(VERSION)-src.zip" || git archive -o "$(BINNAME)-$(VERSION)-src.zip" HEAD

client/dcwebui.less

@@ -51,15 +51,17 @@ html,body {
 }
 
 /* WiiU placements */
-.navigator-wiiu .placement-mid {
+.navigator-wiiu {
+	.placement-mid {
 		bottom:120px;
 	}
-.navigator-wiiu .placement-bottom {
+	.placement-bottom {
 		height:120px;
 	}
-.navigator-wiiu .placement-panel {
+	.placement-panel {
 		bottom:120px;
 	}
+}
 
 /* Menu button */
 .menubutton {
@@ -75,14 +77,17 @@ html,body {
 	height:18px;
 	width:18px;
 	text-align:center;
-}
-.menubutton svg {
+	
+	svg {
 		width: 18px;
 		height: 18px;
 	}
-.menubutton:hover {
+	
+	&:hover {
 		background:white;
 	}
+}
+
 /* Menu list */
 .menu {
 	background:#DDD;
@@ -97,20 +102,24 @@ html,body {
 	z-index:10; /* above placement-panel */
 	
 	overflow-y:auto;
-}
-.menu ul {
+	
+	ul {
 		margin:0;
 		padding:0;
 	}
-.menu li {
+	
+	li {
 		list-style-type:none;
 		padding:6px;
 		cursor:pointer;
-}
-.menu li:hover {
+		
+		&:hover {
 			background:#333;
 			color:white;
 		}
+	}
+}
+
 /* Tabs */
 .tabbar {
 	position:relative;
@@ -132,16 +141,20 @@ html,body {
 	border-right:1px solid lightgrey;
 	margin-top:2px;
 	padding:0 8px;
-}
-.tabitem:hover {
+	
+	&:hover {
 		border-top:2px solid #EEE;
 	}
-.tabitem.selected {
+	
+	&.selected {
 		border-top:2px solid darkgreen;
 	}
-.tabitem.unread {
+	
+	&.unread {
 		background:lightyellow;
 	}
+}
+
 .tab-label {
 	cursor:pointer;
 }
@@ -170,12 +183,14 @@ html,body {
 	-webkit-transition:0.1s linear all;
 	   -moz-transition:0.1s linear all;
 	        transition:0.1s linear all;
-}
-.tab-closer:hover {
+	        
+	&:hover {
 		background:#FFDDDD;
 		border:1px solid red;
 		color:black;
 	}
+}
+
 /* */
 .content {
 	display:block;
@@ -241,7 +256,10 @@ html,body {
 }
 #submit-container {
 	position:absolute;
-	top:0;bottom:0;right:0;width:32px;
+	top:0;
+	bottom:0;
+	right:0;
+	width:32px;
 }
 #btsubmit {
 	width:100%;
@@ -265,8 +283,8 @@ html,body {
 	-webkit-border-radius: 12px;
 	   -moz-border-radius: 12px;
 	        border-radius: 12px;
-}
-.ul-large li {
+	        
+	li {
 		color: #333;
 		font: bold 15px Geneva, Arial, Helvetica, sans-serif; 
 		vertical-align: middle;
@@ -279,8 +297,9 @@ html,body {
 		list-style-type: none; 
 		display: block;
 		padding: 15px 5px 5px 10px;		
-}
-.ul-large li:first-child { 
+		cursor:pointer;
+		
+		&:first-child {
 			border-top: 0;
 			-webkit-border-top-left-radius: 12px;
 			-webkit-border-top-right-radius: 12px;
@@ -289,7 +308,8 @@ html,body {
 					border-top-left-radius: 12px;
 					border-top-right-radius: 12px;
 		}
-.ul-large li:last-child { 
+		
+		&:last-child {
 			border-bottom: 0;
 			-webkit-border-bottom-left-radius: 12px;
 			-webkit-border-bottom-right-radius: 12px;
@@ -298,9 +318,7 @@ html,body {
 					border-bottom-left-radius: 12px;
 					border-bottom-right-radius: 12px;
 		}
-
-.ul-large li {
-	cursor:pointer;
+	}
 }
 
 /* Text */
@@ -368,8 +386,8 @@ html,body {
 .ul-mini {
 	padding-left: 4px;
 	margin-top:4px;
-}
-.ul-mini li {
+	
+	li {
 		list-style-type:none;
 		min-height:13px;
 		line-height:13px;
@@ -378,10 +396,12 @@ html,body {
 		cursor:pointer;
 		
 		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0;
-}
-.ul-mini li:hover {
+		
+		&:hover {
 			background-color:#EEE;
 		}
+	}
+}
 
 /* Display userlist alongside main chat for wide screens */
 

client/dcwebui.ts

@@ -1,29 +1,37 @@
 /* dcwebui.js */
 
+import "./dcwebui.less"; // for webpack
+import * as io from 'socket.io-client'
+
 "use strict";
 
+/**
+ * Display value when loading a saved password
+ */
 var SENTINEL_PASSWORD = "************";
-var CHAT_SCROLLBACK_LIMIT = 200; // Once over 2x $limit, the first $limit will be trimmed off the list
+
+/**
+ * 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 EXTERN_ROOT = window.location.protocol + "//" + window.location.host + "/";
 
-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 [];
-	}
+// 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); }
 
-	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
-	}
-};
-
-var nmdc_escape = function(str) {
+/**
+ * Encode a string for NMDC
+ * 
+ * @param str 
+ */
+var nmdc_escape = function(str: string): string {
 	return (
 		(''+str).length
 			? (''+str).replace(/&/g,'&').replace(/\|/g,'|').replace(/\$/g,'$')
@@ -31,14 +39,24 @@ var nmdc_escape = function(str) {
 	);
 };
 
-var hesc = function(s) {
+/**
+ * Encode a string for HTML
+ * 
+ * @param s 
+ */
+var hesc = function(s: string): string {
 	var filter = {
 		'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&#34;', '\'': '&#39;'
 	};
 	return s.toString().replace(/[&<>'"]/g, function(s) { return filter[s]; });
 };
 
-var fmtBytes = function(b) {
+/**
+ * Format a number of bytes as a human-readable string
+ * 
+ * @param b 
+ */
+var fmtBytes = function(b: number): string {
 	if (b == 0) {
 		return '(nothing)';
 	}
@@ -49,12 +67,21 @@ var fmtBytes = function(b) {
 	return parseFloat((b / Math.pow(k, i)).toFixed(3)) + sizes[i];
 };
 
-
-var urldesc = function(s) {
+/**
+ * Decode a string that was previously encoded in raw-url format.
+ * 
+ * @param s 
+ */
+var urldesc = function(s: string):string {
 	return decodeURIComponent(s.replace(/\+/g, " "));
 }
 
-var linkify = function(str) {
+/**
+ * Enhance an HTML string by automatically making links clickable, etc.
+ * 
+ * @param str An HTML-safe string 
+ */
+var linkify = function(str : string):string {
 	// n.b. str is already hesced
 	return (str
 		.replace(
@@ -68,17 +95,39 @@ var linkify = function(str) {
 	);
 };
 
-var sanitise = function(s) {
+/**
+ * Convert a plain-text string into an enhanced, HTML-safe string.
+ * 
+ * @param s 
+ */
+var sanitise = function(s:string): string {
 	return linkify(hesc(s));
 };
 
-var textContent = function($el) {
-	if ($el.textContent) return $el.textContent;
-	if ($el.innerText) return $el.innerText;
+/**
+ * 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;
+	}
+
 	return "";
 };
 
-var negmod = function(l, r) {
+/**
+ * Calculate the positive modulo of (l % r).
+ * 
+ * @param l 
+ * @param r 
+ */
+var negmod = function(l:number, r:number):number {
 	var ret = l % r;
 	if (l < 0) {
 		return ret + r;
@@ -87,16 +136,27 @@ var negmod = function(l, r) {
 	}
 };
 
-// @ref https://developer.mozilla.org/en/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
-var b64 = function(str) {
+/**
+ * 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 {
     return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
-        return String.fromCharCode('0x' + p1);
+        return String.fromCharCode(parseInt('0x' + p1));
     })).replace(/=/g, '');
 }
 
-// @ref https://gist.github.com/eligrey/1276030
-var appendInnerHTML = function($el, html) {
-	var child = document.createElement("span");
+/**
+ * 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");
 	child.innerHTML = html;
 	
 	var node;
@@ -105,30 +165,48 @@ var appendInnerHTML = function($el, html) {
 	}
 };
 
-// @ref http://stackoverflow.com/a/5598797
-function getOffsetLeft( elem ) {
+/**
+ * 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 {
     var offsetLeft = 0;
 	do {
 		if (!isNaN(elem.offsetLeft)) {
 			offsetLeft += elem.offsetLeft;
 		}
-	} while (elem = elem.offsetParent);
+	} while (elem = <HTMLElement>elem.offsetParent);
 	return offsetLeft;
 }
 
-function getOffsetTop( elem ) {
+/**
+ * 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 {
     var offsetTop = 0;
 	do {
 		if (!isNaN(elem.offsetTop)) {
 			offsetTop += elem.offsetTop;
 		}
-	} while (elem = elem.offsetParent);
+	} while (elem = <HTMLElement>elem.offsetParent);
 	return offsetTop;
 }
 
 /* */
 
-var date_format = function(d, format) {
+/**
+ * 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 pad = function(s) {
 		return (s < 10) ? '0'+s : ''+s ;
 	};
@@ -137,20 +215,25 @@ var date_format = function(d, format) {
 	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;
 };
 
-/* */
-
-var notify = function(title, body, tab) {
+/**
+ * Emit an HTML5 notification.
+ * 
+ * @param title 
+ * @param body 
+ * @param tab 
+ */
+var notify = function(title:string, body:string, tab:string) {
 	if (!("Notification" in window)) {
 		return; // not supported by browser
 	}
 	
-	switch (window.Notification.permission) {
+	switch ( (window as any).Notification.permission) {
 		case "granted": {
 			var n = new Notification(title, {
 				body: body,
@@ -169,7 +252,7 @@ var notify = function(title, body, tab) {
 		default: {
 			// Clarify permission and retry
 			Notification.requestPermission(function(permission) {
-				notify(title, body);
+				notify(title, body, "tab-main");
 			});
 		} break;
 	}
@@ -178,7 +261,7 @@ var notify = function(title, body, tab) {
 /* Tab writers */ 
 
 var write = function(tab) {
-	var $tab = el('#inner-'+tab);
+	var $tab = document_getElementById("inner-"+tab);
 	return {
 		'cls': function() {
 			$tab.innerHTML = '';
@@ -254,11 +337,11 @@ var userlist = {
 	'add': function(u) {
 		if (this.has(u)) return;
 		
-		var userlists = el(".userlist");
+		var userlists = document_getElementsByClassName("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);
 			
@@ -283,7 +366,7 @@ var userlist = {
 		return this;
 	},
 	'del': function(u) {
-		var userlists = el(".userlist");
+		var userlists = document_getElementsByClassName("userlist");
 		for (var l = 0, e = userlists.length; l !== e; ++l) {
 			if (! userlists[l].children) continue;
 			var userlist = userlists[l];
@@ -300,7 +383,7 @@ var userlist = {
 		return this;
 	},
 	'clear': function() {
-		var userlists = el(".userlist");
+		var userlists = document_getElementsByClassName("userlist");
 		for (var i in userlists) {
 			if (! userlists[i].children) continue;
 			var userlist = userlists[i];
@@ -313,22 +396,22 @@ var userlist = {
 		return this;
 	},
 	'names': function() {
-		var userlist = el(".userlist")[0].children;
+		var userlist = document_getElementsByClassName("userlist")[0].children;
 		var ret = [];
 		for (var i = 0, e = userlist.length; i < e; ++i) {
-			ret.push( textContent(userlist[i]) );
+			ret.push( textContent((<HTMLElement>userlist[i])) );
 		}
 		return ret;
 	},
 	'has': function(u) {
-		return el(".user-" + b64(u)).length !== 0; /* there are two - large and non-large */
+		return document_getElementsByClassName("user-" + b64(u)).length !== 0; /* there are two - large and non-large */
 	},
 	'count': function() {
-		return el(".userlist")[0].children.length;
+		return document_getElementsByClassName("userlist")[0].children.length;
 	},
 	'setInfo': function(nick, props) {
 		var baseClass = "user-" + b64(nick);
-		var $el = el("." + baseClass);
+		var $el = document_getElementsByClassName("" + baseClass);
 		var prop_str = [];
 		if (props.Description.length > 0) {
 			prop_str.push(props.Description);
@@ -345,7 +428,7 @@ var userlist = {
 		prop_str.push("Sharing " + fmtBytes(props.ShareSize));
 		
 		for (var i = 0; i < $el.length; ++i) {
-			$el[i].title = prop_str.join("\n");
+			(<HTMLElement> $el[i]).title = prop_str.join("\n");
 			
 			if (props.IsOperator) {
 				$el[i].className = baseClass + " user-is-operator";
@@ -357,7 +440,7 @@ var userlist = {
 };
 
 var submit = function() {
-	var str = el("#chatbox").value;
+	var str = (<HTMLInputElement>document_getElementById("chatbox")).value;
 	if (! str.length) return;
 
 	if (hub_state === STATE_READY_FOR_LOGIN) {
@@ -383,7 +466,7 @@ var submit = function() {
 		write("tab-main").system("Connecting...");
 		
 	} else if (hub_state === STATE_ACTIVE) {
-		if (pm_target !== false) {
+		if (pm_target !== PM_TARGET_NONE) {
 			sock.emit('priv', {'user': pm_target, 'message': str});
 			writerFor(pm_target).pub(hub_last_nick, str );
 		} else {
@@ -400,7 +483,7 @@ var submit = function() {
 		write("tab-main").system("Invalid internal state.");
 	}
 	
-	el("#chatbox").value = '';
+	(<HTMLInputElement>document_getElementById("chatbox")).value = '';
 };
 
 /* page visibility */
@@ -413,10 +496,10 @@ var pagevis_setup = function(fnActive, fnInactive) {
 	if (typeof document.hidden !== "undefined") {
 		h = "hidden";
 		vc = "visibilitychange";
-	} else if (typeof document.msHidden !== "undefined") {
+	} else if (typeof (document as any).msHidden !== "undefined") {
 		h = "msHidden";
 		vc = "msvisibilitychange";
-	} else if (typeof document.webkitHidden !== "undefined") {
+	} else if (typeof (document as any).webkitHidden !== "undefined") {
 		h = "webkitHidden";
 		vc = "webkitvisibilitychange";
 	}
@@ -447,13 +530,13 @@ var pagevis_setup = function(fnActive, fnInactive) {
  */
 var tab_set = function(tab) {
 	
-	var tabs = el(".tabpane");
+	var tabs = document_getElementsByClassName("tabpane");
 	for (var i in tabs) {
 		try {
-			tabs[i].style.display = (tabs[i].id === tab ? 'block' : 'none');
+			(<HTMLElement> tabs[i]).style.display = (tabs[i].id === tab ? 'block' : 'none');
 		} catch (e) {};
 	}
-	var tabitems = el(".tabitem");
+	var tabitems = document_getElementsByClassName("tabitem");
 	for (var i in tabitems) {
 		try {
 			// Update UNREAD/SELECTED flags for the target
@@ -466,7 +549,7 @@ var tab_set = function(tab) {
 		} catch (e) {};
 	}
 	
-	pm_target = false;
+	pm_target = PM_TARGET_NONE;
 	for (var i in pm_tabs) {
 		if (pm_tabs[i] === tab) {
 			pm_target = i;
@@ -481,13 +564,13 @@ var tab_set = function(tab) {
 	updateTitle();
 	
 	write(tab).scroll();
-	el("#chatbox").focus();
+	document_getElementById("chatbox").focus();
 	last_tab = tab;
 	
 };
 
 var tab_new = function(id, name) {
-	appendInnerHTML(el("#bar"),
+	appendInnerHTML(document_getElementById("bar"),
 		' <div class="tabitem" data-tab="tab-ext-'+id+'" id="tabitem-tab-ext-'+id+'">'+
 			'<span class="tab-label">'+
 				hesc(name)+
@@ -495,7 +578,7 @@ var tab_new = function(id, name) {
 			'<a class="tab-closer" data-tab="tab-ext-'+id+'">&times;</a>'+
 		'</div> '
 	);
-	appendInnerHTML(el("#extratabs"),
+	appendInnerHTML(document_getElementById("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>'
@@ -508,10 +591,10 @@ var tab_free = function(id) {
 	if (id === "tab-main") return;
 
 	// remove tab item and body
-	var $el = el("#tabitem-"+id);
+	var $el = document_getElementById("tabitem-"+id);
 	$el.parentNode.removeChild($el);
 	
-	$el = el("#"+id);
+	$el = document_getElementById(""+id);
 	$el.parentNode.removeChild($el);
 	
 	// clear from PM tabs
@@ -546,22 +629,26 @@ var noprop = function(ev) {
 }
 
 var tab_addHandlers = function() {
-	var tabitems = el(".tabitem");
+	var tabitems = document_getElementsByClassName("tabitem");
 	for (var i = 0; i < tabitems.length; i++) {
-		if (! tabitems[i]) continue;
+		if (! tabitems[i]) {
+			continue;
+		}
 		
-		tabitems[i].onclick = function(ev) {
+		(<HTMLElement> tabitems[i]).onclick = function(ev) {
 			tab_set( this.getAttribute('data-tab') );
 			
 			return noprop(ev);
 		};
 	}
 	
-	var tabclosers = el(".tab-closer");
+	var tabclosers = document_getElementsByClassName("tab-closer");
 	for (var i = 0; i < tabclosers.length; i++) {
-		if (! tabclosers[i]) continue;
+		if (! tabclosers[i]) {
+			continue;
+		}
 		
-		tabclosers[i].onclick = function(ev) {
+		(<HTMLElement> tabclosers[i]).onclick = function(ev) {
 			tab_free( this.getAttribute('data-tab') );
 			
 			return noprop(ev);
@@ -571,8 +658,8 @@ var tab_addHandlers = function() {
 
 /* */
 
-var maybeWriterFor = function(username) {
-	if (! username in pm_tabs || ! pm_tabs[username]) {
+var maybeWriterFor = function(username: string) {
+	if (! (username in pm_tabs) || ! pm_tabs[username]) {
 		return null;
 	}
 	
@@ -597,7 +684,7 @@ var tabcomplete_state = '';
 
 var tabcompletion_start = function(direction) {
 	
-	var cursor = el("#chatbox").value.replace(/^.*\s([^\s]+)$/, '$1');
+	var cursor = (<HTMLInputElement>document_getElementById("chatbox")).value.replace(/^.*\s([^\s]+)$/, '$1');
 	
 	if (tabcomplete_state === '') {
 		// new tab completion
@@ -633,10 +720,11 @@ var tabcompletion_start = function(direction) {
 	
 	// Replace in textbox
 	
-	var chatprefix = el("#chatbox").value.substr(0, el("#chatbox").value.length - cursor.length);
+	var $chatbox = (<HTMLInputElement>document_getElementById("chatbox"));
+	var chatprefix = $chatbox.value.substr(0, $chatbox.value.length - cursor.length);
 	
-	el("#chatbox").value = chatprefix + targetName;
-	el("#chatbox").focus();
+	$chatbox.value = chatprefix + targetName;
+	$chatbox.focus();
 };
 
 var tabcompletion_inactive = function() {
@@ -648,11 +736,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);
@@ -664,7 +752,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);
@@ -685,7 +773,7 @@ MenuList.prototype.toggle = function() {
 
 /* */ 
 
-var menu = new MenuList(el("#menubutton"));
+var menu = new MenuList(document_getElementById("menubutton"));
 
 menu.reset = function() {
 	this.clear();
@@ -788,7 +876,7 @@ var toggle_joinparts = function(ev) {
 
 var updateTitle = function() {
 	var prefix = "";
-	var unrTabs = el(".unread");
+	var unrTabs = document_getElementsByClassName("unread");
 	if (unrTabs.length === 1 && unrTabs[0].getAttribute('data-tab') == "tab-main") {
 		prefix = "[" + mainchat_unread_count + " NEW] "
 	} else if (unrTabs.length > 0) {
@@ -802,14 +890,15 @@ var updateTitle = function() {
 	document.title = prefix + hub_hubname + suffix;
 };
 
-var sock = {};
+var sock:SocketIOClient.Socket = null;
 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;
-var pm_target = false;
+const PM_TARGET_NONE = "";
+var pm_target = PM_TARGET_NONE;
 
 var last_tab = "tab-main";
 
@@ -893,7 +982,7 @@ var scrollback_move = function(delta) {
 		}
 	}
 	
-	el("#chatbox").value = chat_scrollback[chat_scrollback_index];
+	(<HTMLInputElement>document_getElementById("chatbox")).value = chat_scrollback[chat_scrollback_index];
 };
 
 /* */
@@ -914,29 +1003,30 @@ 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();		
-			el("#chatbox").disabled = true;
-			el("#chatbox").value = ''; // clear
+			$chatbox.disabled = true;
+			$chatbox.value = ''; // clear
 		} break;
 		
 		case STATE_READY_FOR_LOGIN: {
 			userlist.clear();
-			el("#chatbox").spellcheck = false;
-			el("#chatbox").disabled = false;
-			el("#chatbox").value = ''; // clear
+			$chatbox.spellcheck = false;
+			$chatbox.disabled = false;
+			$chatbox.value = ''; // clear
 		} break;
 		
 		case STATE_CONNECTING: {
-			el("#chatbox").disabled = true;
+			$chatbox.disabled = true;
 		} break;
 		
 		case STATE_ACTIVE: {			
 			write("tab-main").system("Now talking on "+hub_hubname);
-			el("#chatbox").disabled = false;
-			el("#chatbox").spellcheck = true;
+			$chatbox.disabled = false;
+			$chatbox.spellcheck = true;
 		} break;
 	}
 };
@@ -946,14 +1036,15 @@ var tab_is_visible = function(tabref) {
 }
 
 var tab_mark_unread = function(tabref) {
-	if (el("#tabitem-"+tabref).className.indexOf('unread') === -1) {
-		el("#tabitem-"+tabref).className += " unread";
+	if (document_getElementById("tabitem-"+tabref).className.indexOf('unread') === -1) {
+		document_getElementById("tabitem-"+tabref).className += " unread";
 		updateTitle();
 	}
 }
 
 //
 
+declare var contented: any;
 var contented_url = "";
 var contented_loaded_sdk = false;
 var contented_load = function() {
@@ -963,21 +1054,21 @@ var contented_load = function() {
 	
 	var onceSDKLoaded = function() {
 		contented.init("#inner-tab-main", function(items) {
-			var val = el("#chatbox").value;
+			var val = (<HTMLInputElement> document_getElementById("chatbox")).value;
 			for (var i = 0; i < items.length; ++i) {
 				if (val.length > 0) {
 					val += " ";
 				}
 				val += contented.getPreviewURL(items[i]);
 			}
-			el("#chatbox").value = val;
+			(<HTMLInputElement> document_getElementById("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();
@@ -998,13 +1089,13 @@ window.onload = function() {
 	
 	// HTML event handlers
 	
-	el("#form-none").onsubmit = function(ev) {
+	document_getElementById("form-none").onsubmit = function(ev) {
 		submit();
 		
 		return noprop(ev); // don't submit form
 	};
 	
-	el("#chatbox").onkeydown = function(ev) {
+	document_getElementById("chatbox").onkeydown = function(ev) {
 		if (ev.keyCode === 9 /* Tab */) {
 			tabcompletion_start( ev.shiftKey ? -1 : 1 );
 			return noprop(ev);
@@ -1032,7 +1123,7 @@ window.onload = function() {
 		usermenu.hide();
 	};
 	
-	el("#menubutton").onclick = function(ev) {
+	document_getElementById("menubutton").onclick = function(ev) {
 		menu.toggle();
 		return noprop(ev);
 	};
@@ -1090,7 +1181,7 @@ window.onload = function() {
 		if (pre_login.indexOf(":") !== -1) {
 			pre_login = pre_login.substr(0, pre_login.indexOf(":")) + ":" + SENTINEL_PASSWORD;
 		}
-		el("#chatbox").value = pre_login;
+		(<HTMLInputElement>document_getElementById("chatbox")).value = pre_login;
 		
 		if (have_cleared_once) {
 			// re-log-in automatically			

client/index.htm

@@ -5,8 +5,7 @@
 		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
 		<meta name="apple-mobile-web-app-capable" content="yes">
-		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
-		<link rel="stylesheet" href="/dcwebui.css">
+		<link rel="apple-touch-icon" href="./apple-touch-icon.png">
 		<title>Loading...</title>
 	</head>
 	<body>
@@ -56,7 +55,6 @@
 			</form>
 		</div>
 		
-		<script type="text/javascript" src="/socket.io-1.7.2.js"></script>
-		<script type="text/javascript" src="/dcwebui.js"></script>
+		<script type="text/javascript" src="/bundle.js"></script>
 	</body>
 </html>

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "nmdc-webfrontend",
+  "version": "1.0.0",
+  "description": "A web interface to an NMDC hub",
+  "homepage": "https://code.ivysaur.me/nmdc-webfrontend/",
+  "main": "s",
+  "scripts": {
+    "webpack": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.ivysaur.me/code.ivysaur.me/nmdc-webfrontend"
+  },
+  "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",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "less-plugin-clean-css": "^1.5.1",
+    "socket.io-client": "^2.0.4",
+    "style-loader": "^0.19.0",
+    "ts-loader": "^3.1.1",
+    "typescript": "^2.6.1",
+    "uglify-js": "^3.1.8",
+    "webpack": "^3.8.1"
+  },
+  "devDependencies": {}
+}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"target": "es3",
+        "removeComments": true
+	},
+	"include": [
+		"client/*"
+	]
+}

webpack.config.js

@@ -0,0 +1,53 @@
+/*! webpack.config.js */
+
+const webpack = require("webpack");
+const path = require('path');
+const CleanCSSPlugin = require("less-plugin-clean-css");
+
+module.exports = {
+    entry: "./client/dcwebui.ts",
+    output: {
+        path: path.resolve(__dirname, 'clientpack'),
+        filename: "bundle.min.js"
+    },
+	resolve: {
+        // Add '.ts' and '.tsx' as a resolvable extension.
+        extensions: [ '.tsx', '.ts', '.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" },
+			
+			// LESS CSS files
+			{
+				test: /\.less$/,
+				use: [
+					{ loader: "style-loader" },
+					{ loader: "css-loader" },
+					{
+						loader: "less-loader",
+						options: {
+							noIeCompat: false,
+							plugins: [
+								new CleanCSSPlugin({ advanced: true })
+							]
+						}
+					}
+				]
+			}
+			
+        ]
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        })
+    ]
+};