typescript: initial package conversion

client/dcwebui.ts

@@ -1,8 +1,7 @@
 /* dcwebui.js */
 
-require("./dcwebui.less");
+import "./dcwebui.less"; // for webpack
-
+import * as io from 'socket.io-client'
-import io from 'socket.io-client'
 
 "use strict";
 
@@ -10,23 +9,6 @@ var SENTINEL_PASSWORD = "************";
 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 + "/";
 
-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
-	}
-};
-
 var nmdc_escape = function(str) {
 	return (
 		(''+str).length
@@ -94,7 +76,7 @@ var negmod = function(l, r) {
 // @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('0x' + p1);
+        return String.fromCharCode(parseInt('0x' + p1));
     })).replace(/=/g, '');
 }
 
@@ -154,7 +136,7 @@ var notify = function(title, body, tab) {
 		return; // not supported by browser
 	}
 	
-	switch (window.Notification.permission) {
+	switch ( (window as any).Notification.permission) {
 		case "granted": {
 			var n = new Notification(title, {
 				body: body,
@@ -173,7 +155,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;
 	}
@@ -182,7 +164,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 = '';
@@ -258,7 +240,7 @@ 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];
 			
@@ -287,7 +269,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];
@@ -304,7 +286,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];
@@ -317,7 +299,7 @@ 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]) );
@@ -325,14 +307,14 @@ var userlist = {
 		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);
@@ -349,7 +331,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";
@@ -361,7 +343,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) {
@@ -387,7 +369,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 {
@@ -404,7 +386,7 @@ var submit = function() {
 		write("tab-main").system("Invalid internal state.");
 	}
 	
-	el("#chatbox").value = '';
+	(<HTMLInputElement>document.getElementById("chatbox")).value = '';
 };
 
 /* page visibility */
@@ -417,10 +399,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";
 	}
@@ -451,13 +433,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
@@ -470,7 +452,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;
@@ -485,13 +467,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)+
@@ -499,7 +481,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>'
@@ -512,10 +494,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
@@ -550,22 +532,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);
@@ -575,8 +561,8 @@ var tab_addHandlers = function() {
 
 /* */
 
-var maybeWriterFor = function(username) {
+var maybeWriterFor = function(username: string) {
-	if (! username in pm_tabs || ! pm_tabs[username]) {
+	if (! (username in pm_tabs) || ! pm_tabs[username]) {
 		return null;
 	}
 	
@@ -601,7 +587,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
@@ -637,10 +623,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;
+	$chatbox.value = chatprefix + targetName;
-	el("#chatbox").focus();
+	$chatbox.focus();
 };
 
 var tabcompletion_inactive = function() {
@@ -689,7 +676,7 @@ MenuList.prototype.toggle = function() {
 
 /* */ 
 
-var menu = new MenuList(el("#menubutton"));
+var menu = new MenuList(document.getElementById("menubutton"));
 
 menu.reset = function() {
 	this.clear();
@@ -792,7 +779,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) {
@@ -806,14 +793,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";
 
@@ -897,7 +885,7 @@ var scrollback_move = function(delta) {
 		}
 	}
 	
-	el("#chatbox").value = chat_scrollback[chat_scrollback_index];
+	(<HTMLInputElement>document.getElementById("chatbox")).value = chat_scrollback[chat_scrollback_index];
 };
 
 /* */
@@ -918,29 +906,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;
+			$chatbox.disabled = true;
-			el("#chatbox").value = ''; // clear
+			$chatbox.value = ''; // clear
 		} break;
 		
 		case STATE_READY_FOR_LOGIN: {
 			userlist.clear();
-			el("#chatbox").spellcheck = false;
+			$chatbox.spellcheck = false;
-			el("#chatbox").disabled = false;
+			$chatbox.disabled = false;
-			el("#chatbox").value = ''; // clear
+			$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;
+			$chatbox.disabled = false;
-			el("#chatbox").spellcheck = true;
+			$chatbox.spellcheck = true;
 		} break;
 	}
 };
@@ -950,14 +939,15 @@ var tab_is_visible = function(tabref) {
 }
 
 var tab_mark_unread = function(tabref) {
-	if (el("#tabitem-"+tabref).className.indexOf('unread') === -1) {
+	if (document.getElementById("tabitem-"+tabref).className.indexOf('unread') === -1) {
-		el("#tabitem-"+tabref).className += " unread";
+		document.getElementById("tabitem-"+tabref).className += " unread";
 		updateTitle();
 	}
 }
 
 //
 
+declare var contented: any;
 var contented_url = "";
 var contented_loaded_sdk = false;
 var contented_load = function() {
@@ -967,14 +957,14 @@ 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;
 		});
 	};
 	
@@ -1002,13 +992,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);
@@ -1036,7 +1026,7 @@ window.onload = function() {
 		usermenu.hide();
 	};
 	
-	el("#menubutton").onclick = function(ev) {
+	document.getElementById("menubutton").onclick = function(ev) {
 		menu.toggle();
 		return noprop(ev);
 	};
@@ -1094,7 +1084,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			

package-lock.json

@@ -4,6 +4,11 @@
   "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",
@@ -4207,6 +4212,50 @@
         "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",

package.json

@@ -14,6 +14,7 @@
   "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",
@@ -22,6 +23,7 @@
     "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"

webpack.config.js

@@ -1,17 +1,25 @@
 /*! webpack.config.js */
 
 const webpack = require("webpack");
+const path = require('path');
 const CleanCSSPlugin = require("less-plugin-clean-css");
 
 module.exports = {
-    entry: "./client/dcwebui.js",
+    entry: "./client/dcwebui.ts",
     output: {
-        path: __dirname,
+        path: path.resolve(__dirname, 'clientpack'),
-        filename: "clientpack/bundle.min.js"
+        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" },