Clean up a bunch of linting stuff. Clean up event listeners in tooltips to stop potential memory leaks.

README.md

@@ -43,11 +43,12 @@ configure linting support for your editor as well.
 If you're using Visual Studio Code, make sure to install the ESLint extension
 and add the following to your workspace settings:
 
-```
+```json
 {
 	"eslint.validate": [
 		"javascript",
 		"javascriptreact",
 		"vue"
 	]
-}```
+}
+```

src/modules/chat/badges.jsx

@@ -54,9 +54,8 @@ const NO_REPEAT = 'background-repeat:no-repeat;background-position:center;',
 
 
 export function generateOverrideCSS(data, style) {
-	const urls = data.urls || {1: data.image};
+	const urls = data.urls || {1: data.image},
-
+		image = `url("${urls[1]}")`,
-	let image = `url("${urls[1]}")`,
 		image_set = `${WEBKIT}image-set(${image} 1x${urls[2] ? `, url("${urls[2]}") 2x` : ''}${urls[4] ? `, url("${urls[4]}") 4x` : ''})`;
 
 	if ( style === 3 || style === 4 )
@@ -172,6 +171,7 @@ export default class Badges extends Module {
 
 									if ( version && version.image1x )
 										vs.push({
+											version: key,
 											name: version.title,
 											image: version.image1x,
 											styleImage: `url("${version.image1x}")`
@@ -431,7 +431,8 @@ export default class Badges extends Module {
 				}
 
 				if ( has_image && urls ) {
-					let image_set, image = `url("${urls[1]}")`;
+					const image = `url("${urls[1]}")`;
+					let image_set;
 					if ( urls[2] || urls[4] )
 						image_set = `${WEBKIT}image-set(${image} 1x${urls[2] ? `, url("${urls[2]}") 2x` : ''}${urls[4] ? `, url("${urls[4]}") 4x` : ''})`;
 

src/modules/chat/index.js

@@ -373,16 +373,15 @@ export default class Chat extends Module {
 	}
 
 
-	formatTime(time) {
+	formatTime(time) { // eslint-disable-line class-methods-use-this
 		if (!( time instanceof Date ))
 			time = new Date(time);
 
 		let hours = time.getHours();
 
-		const minutes = time.getMinutes(),
+		const minutes = time.getMinutes(); //,
-			seconds = time.getSeconds(),
+		//	seconds = time.getSeconds(),
-
+		//	fmt = this.settings.get('chat.timestamp-format');
-			fmt = this.settings.get('chat.timestamp-format');
 
 		if ( hours > 12 )
 			hours -= 12;

src/modules/chat/tokenizers.jsx

@@ -8,8 +8,8 @@ import {sanitize, createElement} from 'utilities/dom';
 import {has, split_chars} from 'utilities/object';
 
 const EMOTE_CLASS = 'chat-line__message--emote',
-	LINK_REGEX = /([^\w@#%\-+=:~])?((?:(https?:\/\/)?(?:[\w@#%\-+=:~]+\.)+[a-z]{2,6}(?:\/[\w.\/@#%&()\-+=:?~]*)?))([^\w.\/@#%&()\-+=:?~]|\s|$)/g,
+	LINK_REGEX = /([^\w@#%\-+=:~])?((?:(https?:\/\/)?(?:[\w@#%\-+=:~]+\.)+[a-z]{2,6}(?:\/[\w./@#%&()\-+=:?~]*)?))([^\w./@#%&()\-+=:?~]|\s|$)/g,
-	MENTION_REGEX = /([^\w@#%\-+=:~])?(@([^\u0000-\u007F]+|\w+)+)([^\w.\/@#%&()\-+=:?~]|\s|$)/g,
+	MENTION_REGEX = /([^\w@#%\-+=:~])?(@([^\u0000-\u007F]+|\w+)+)([^\w./@#%&()\-+=:?~]|\s|$)/g,
 
 	TWITCH_BASE = '//static-cdn.jtvnw.net/emoticons/v1/',
 	REPLACEMENT_BASE = '//cdn.frankerfacez.com/script/replacements/',
@@ -109,7 +109,7 @@ export const Links = {
 		);
 	},
 
-	process(tokens, msg) {
+	process(tokens) {
 		if ( ! tokens || ! tokens.length )
 			return tokens;
 
@@ -149,7 +149,7 @@ export const Links = {
 	}
 }
 
-Links.tooltip.interactive = function(target, tip) {
+Links.tooltip.interactive = function(target) {
 	if ( ! this.context.get('tooltip.rich-links') || ! this.context.get('tooltip.link-interaction') || target.dataset.isMail === 'true' )
 		return false;
 
@@ -157,7 +157,7 @@ Links.tooltip.interactive = function(target, tip) {
 	return info && info.interactive;
 };
 
-Links.tooltip.delayHide = function(target, tip) {
+Links.tooltip.delayHide = function(target) {
 	if ( ! this.context.get('tooltip.rich-links') || ! this.context.get('tooltip.link-interaction') || target.dataset.isMail === 'true' )
 		return 0;
 
@@ -472,7 +472,7 @@ export const AddonEmotes = {
 			data-set={token.set}
 		>
 			{emote}
-			{mods.map(t => <span>{this.tokenizers.emote.render(t, createElement)}</span>)}
+			{mods.map(t => <span key={t.text}>{this.tokenizers.emote.render(t, createElement)}</span>)}
 		</span>);
 	},
 

src/modules/main_menu/components/badge-visibility.vue

@@ -57,7 +57,7 @@
 							>
 								<span
 									v-for="v in i.versions"
-									:key="v.name"
+									:key="`badge-${i.id}-${v.version}`"
 									:title="v.name"
 									:style="{backgroundColor: i.color, backgroundImage: v.styleImage}"
 									data-tooltip-type="html"

src/modules/main_menu/components/filter-editor.vue

@@ -1,7 +1,7 @@
 <template lang="html">
 	<div class="ffz--widget ffz--filter-editor">
 		<div ref="list" class="ffz--rule-list">
-			<section v-for="(rule, idx) in rules">
+			<section v-for="(rule, idx) in rules" :key="`rule-${idx}`">
 				<div
 					class="ffz--rule tw-elevation-1 tw-c-background tw-border tw-mg-b-05 tw-pd-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap tw-align-items-start"
 					tabindex="0"

src/modules/main_menu/components/main-menu.vue

@@ -134,7 +134,7 @@ export default {
 
 			this.currentItem = item;
 			let current = item;
-			while(current = current.parent)
+			while(current = current.parent) // eslint-disable-line no-cond-assign
 				current.expanded = true;
 		},
 

src/modules/main_menu/components/profile-editor.vue

@@ -142,7 +142,7 @@ export default {
 
 		del() {
 			if ( this.item.profile || this.unsaved ) {
-				if ( ! confirm(this.t(
+				if ( ! confirm(this.t( // eslint-disable-line no-alert
 					'settings.profiles.warn-delete',
 					'Are you sure you wish to delete this profile? It cannot be undone.'
 				)) )
@@ -189,7 +189,7 @@ export default {
 
 		onBeforeChange() {
 			if ( this.unsaved )
-				return confirm(
+				return confirm( // eslint-disable-line no-alert
 					this.t(
 						'settings.warn-unsaved',
 						'You have unsaved changes. Are you sure you want to leave the editor?'

src/modules/main_menu/index.js

@@ -277,10 +277,9 @@ export default class MainMenu extends Module {
 
 						if ( has(def, 'default') && ! has(tok, 'default') ) {
 							const def_type = typeof def.default;
-							if ( def_type === 'object' ) {
+							if ( def_type === 'object' )
-								// TODO: Better way to deep copy this object.
+								tok.default = deep_copy(def.default);
-								tok.default = JSON.parse(JSON.stringify(def.default));
+							else
-							} else
 								tok.default = def.default;
 						}
 
@@ -338,7 +337,7 @@ export default class MainMenu extends Module {
 
 				let p = parent;
 				while(p && p.search_terms) {
-					p.search_terms += '\n' + terms;
+					p.search_terms += `\n${terms}`;
 					p = p.parent;
 				}
 			}

src/modules/metadata.jsx

@@ -115,8 +115,8 @@ export default class Metadata extends Module {
 				if ( ! stats )
 					return {stats};
 
-				let delay = stats.hls_latency_broadcaster / 1000,
+				const delay = stats.hls_latency_broadcaster / 1000;
-					drift = 0;
+				let drift = 0;
 
 				if ( socket && socket.connected )
 					drift = socket._time_drift;

src/modules/tooltips.js

@@ -31,9 +31,7 @@ export default class TooltipProvider extends Module {
 			]
 		}
 
-		this.types.html = target => {
+		this.types.html = target => target.dataset.title;
-			return target.dataset.title;
-		}
 	}
 
 	onEnable() {

src/modules/translation_ui/nondex.js

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {createElement} from 'utilities/dom';
+//import {createElement} from 'utilities/dom';
 
 export default class TranslationUI extends Module {
 	constructor(...args) {
@@ -27,7 +27,7 @@ export default class TranslationUI extends Module {
 		);
 	}
 
-	async onEnable(event) {
+	async onEnable() {
 		await this.site.awaitElement('.twilight-root');
 		this.ps = this.site.web_munch.getModule('ps');
 	}

src/settings/index.js

@@ -76,7 +76,7 @@ export default class SettingsManager extends Module {
 		this.loadProfiles(true);
 
 		// Handle migrations.
-		await this.migrations.process('core');
+		//await this.migrations.process('core');
 
 		// Now we can tell our context(s) about the profiles we have.
 		for(const context of this.__contexts)

src/settings/migration.js

@@ -10,7 +10,7 @@ export default class MigrationManager {
 		this.provider = manager.provider;
 	}
 
-	process(key) {
+	process() { // eslint-disable-line class-methods-use-this
-		return false;
+		throw new Error('Not Implemented');
 	}
 }

src/sites/twitch-twilight/modules/compat_emote_menu.js

@@ -1,5 +1,7 @@
 'use strict';
 
+/* global emoteMenu: false */
+
 // ============================================================================
 // Compatibility Layer
 // Emote Menu for Twitch (BTTV Emote Menu)

src/sites/twitch-twilight/modules/directory/index.jsx

@@ -289,7 +289,7 @@ export default class Directory extends SiteModule {
 			return;
 
 		// Get the old element.
-		let channel_avatar = card.querySelector('.ffz-channel-avatar');
+		const channel_avatar = card.querySelector('.ffz-channel-avatar');
 
 		if ( ! data || ! data.profileImageURL || setting === 0 ) {
 			if ( channel_avatar !== null )

src/sites/twitch-twilight/modules/host_button.js

@@ -56,9 +56,7 @@ export default class HostButton extends Module {
 			order: 150,
 			button: true,
 
-			disabled: () => {
+			disabled: () => this._host_updating || this._host_error,
-				return this._host_updating || this._host_error;
-			},
 
 			click: data => {
 				if (data.channel) this.sendHostUnhostCommand(data.channel.login);

src/socket.js

@@ -107,12 +107,13 @@ export default class SocketClient extends Module {
 
 	selectHost() {
 		const cluster_id = this.settings.get('socket.cluster'),
-			cluster = WS_CLUSTERS[cluster_id];
+			cluster = WS_CLUSTERS[cluster_id],
+			l = cluster && cluster.length;
 
-		if ( ! cluster || ! cluster.length )
+		if ( ! l )
 			return null;
 
-		let total = 0, i = cluster.length, l = i;
+		let total = 0, i = l;
 		while(i-- > 0)
 			total += cluster[i][1];
 

src/utilities/compat/apollo.js

@@ -19,7 +19,7 @@ export default class Apollo extends Module {
 		this.inject('..fine');
 	}
 
-	async onEnable() {
+	onEnable() {
 		// TODO: Come up with a better way to await something existing.
 		let client = this.client;
 
@@ -48,7 +48,7 @@ export default class Apollo extends Module {
 			const old_qm_init = this.client.queryManager.queryStore.initQuery;
 			this.hooked_query_init = true;
 			this.client.queryManager.queryStore.initQuery = function(e) {
-				let t = this.store[e.queryId];
+				const t = this.store[e.queryId];
 				if ( t && t.queryString !== e.queryString )
 					t.queryString = e.queryString;
 
@@ -59,7 +59,8 @@ export default class Apollo extends Module {
 		const ApolloLink = this.ApolloLink = this.client.link.constructor;
 
 		this.link = new ApolloLink((operation, forward) => {
-			//this.log.info('Link Start', operation.operationName, operation);
+			if ( ! this.enabled )
+				return forward(operation);
 
 			try {
 				// ONLY do this if we've hooked query init, thus letting us ignore certain issues
@@ -120,23 +121,8 @@ export default class Apollo extends Module {
 
 
 	onDisable() {
-		// TODO: Remove Apollo middleware.
+		// Remove our references to things.
-
+		this.client = this.printer = this.gql_print = this.old_link = this.old_qm_dedup = this.old_qm_link = null;
-		// Tear down the parsed queries.
-		for(const key in this.modifiers)
-			if ( has(this.modifiers, key) ) {
-				const modifiers = this.modifiers[key];
-				if ( modifiers )
-					for(const mod of modifiers) {
-						if ( typeof mod === 'function' )
-							continue;
-
-						mod[1] = null;
-					}
-			}
-
-		// And finally, remove our references.
-		this.client = this.graphql = null;
 	}
 
 

src/utilities/dom.js

@@ -135,7 +135,7 @@ export class ManagedStyle {
 	}
 
 	set(key, value) {
-		let block = this._blocks[key];
+		const block = this._blocks[key];
 		if ( block )
 			block.textContent = value;
 		else

src/utilities/module.js

@@ -521,9 +521,9 @@ export class Module extends EventEmitter {
 		for(const raw_path of ctx.keys()) {
 			const raw_module = ctx(raw_path),
 				module = raw_module.module || raw_module.default,
-				name = raw_path.slice(2, raw_path.length - (raw_path.endsWith('/index.jsx') ? 10 : raw_path.endsWith('/index.js') ? 9 : raw_path.endsWith('.jsx') ? 4 : 3));
+				lix = raw_path.lastIndexOf('.'),
-
+				trimmed = lix > 2 ? raw_path.slice(2, lix) : raw_path,
-			// TODO: rewrite the name code to not have like 4 endsWith in it.
+				name = trimmed.endsWith('/index') ? trimmed.slice(0, -6) : trimmed;
 
 			try {
 				added[name] = this.register(name, module);

src/utilities/tooltip.js

@@ -229,7 +229,7 @@ export class Tooltip {
 		el.classList.toggle('interactive', interactive || false);
 
 		if ( ! opts.manual ) {
-			el.addEventListener('mouseover', () => {
+			el.addEventListener('mouseover', el._ffz_over_handler = () => {
 				if ( ! document.contains(target) )
 					this.hide(tip);
 
@@ -239,7 +239,7 @@ export class Tooltip {
 					this._exit(target);
 			});
 
-			el.addEventListener('mouseout', () => this._exit(target));
+			el.addEventListener('mouseout', el._ffz_out_handler = () => this._exit(target));
 		}
 
 		// Assign our content. If there's a Promise, we'll need
@@ -311,13 +311,19 @@ export class Tooltip {
 		}
 
 		if ( tip.outer ) {
-			tip.outer.remove();
+			const el = tip.outer;
-			tip.outer = null;
+			if ( el._ffz_over_handler )
+				el.removeEventListener('mouseover', el._ffz_over_handler);
+
+			if ( el._ffz_out_handler )
+				el.removeEventListener('mouseout', el._ffz_out_handler);
+
+			el.remove();
+			tip.outer = el._ffz_out_handler = el._ffz_over_handler = null;
 		}
 
-		tip.update = null;
 		tip._update = noop;
-		tip.element = null;
+		tip.update = tip.element = null;
 		tip.visible = false;
 	}
 }