From 19a665d61d3e40113a61ac12cebd0de25cd8a7f2 Mon Sep 17 00:00:00 2001 From: mappu Date: Sun, 12 Nov 2017 12:21:52 +1300 Subject: [PATCH] typescript: initial package conversion --- client/{dcwebui.js => dcwebui.ts} | 148 ++++++++++++++---------------- package-lock.json | 49 ++++++++++ package.json | 2 + webpack.config.js | 14 ++- 4 files changed, 131 insertions(+), 82 deletions(-) rename client/{dcwebui.js => dcwebui.ts} (84%) diff --git a/client/dcwebui.js b/client/dcwebui.ts similarity index 84% rename from client/dcwebui.js rename to client/dcwebui.ts index 7de4f5d..538dc80 100644 --- a/client/dcwebui.js +++ b/client/dcwebui.ts @@ -1,8 +1,7 @@ /* dcwebui.js */ -require("./dcwebui.less"); - -import io from 'socket.io-client' +import "./dcwebui.less"; // for webpack +import * as 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"); + ( $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 = (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 = ''; + (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'); + ( 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"), '
'+ ''+ hesc(name)+ @@ -499,7 +481,7 @@ var tab_new = function(id, name) { '×'+ '
' ); - appendInnerHTML(el("#extratabs"), + appendInnerHTML(document.getElementById("extratabs"), ' ' @@ -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) { + ( 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) { + ( 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) { - if (! username in pm_tabs || ! pm_tabs[username]) { +var maybeWriterFor = function(username: string) { + 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 = (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 = (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() { @@ -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]; + (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 = (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; } }; @@ -950,14 +939,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() { @@ -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 = ( 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; + ( 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; + (document.getElementById("chatbox")).value = pre_login; if (have_cleared_once) { // re-log-in automatically diff --git a/package-lock.json b/package-lock.json index 0100dd0..c6323d2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 10db689..1811213 100644 --- a/package.json +++ b/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" diff --git a/webpack.config.js b/webpack.config.js index e7f1aa3..056137a 100644 --- a/webpack.config.js +++ b/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, - filename: "clientpack/bundle.min.js" + 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" },