Make JS X Again

* Configure the project to allow the use of JSX in .jsx files.
* Add linting for JSX.
* Rewrite most existing code that uses `createElement` to use JSX syntax.
* Stop importing `createElement as e`. That's what the minifier is for. And we don't have to write it manually so much now because of JSX syntax.

src/sites/base.js

@@ -16,7 +16,7 @@ export default class BaseSite extends Module {
 	}
 
 	populateModules() {
-		const ctx = require.context('site/modules', true, /(?:^(?:\.\/)?[^/]+|index)\.js$/);
+		const ctx = require.context('site/modules', true, /(?:^(?:\.\/)?[^/]+|index)\.jsx?$/);
 		const modules = this.populate(ctx, this.log);
 		this.log.info(`Loaded descriptions of ${Object.keys(modules).length} modules.`);
 	}

src/sites/twitch-twilight/index.js

@@ -11,7 +11,7 @@ import Fine from 'utilities/compat/fine';
 import FineRouter from 'utilities/compat/fine-router';
 import Apollo from 'utilities/compat/apollo';
 
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 
 import MAIN_URL from 'site/styles/main.scss';
 
@@ -56,7 +56,7 @@ export default class Twilight extends BaseSite {
 		const current = this.router.current;
 		this.fine.route(current && current.name);
 
-		document.head.appendChild(e('link', {
+		document.head.appendChild(createElement('link', {
 			href: MAIN_URL,
 			rel: 'stylesheet',
 			type: 'text/css'

src/sites/twitch-twilight/modules/chat/index.js

@@ -376,12 +376,12 @@ export default class ChatHook extends Module {
 			cls.prototype.render = function() {
 				if ( this.state.ffz_errors > 0 ) {
 					const React = t.web_munch.getModule('react'),
-						e = React && React.createElement;
+						createElement = React && React.createElement;
 
-					if ( ! e )
+					if ( ! createElement )
 						return null;
 
-					return e('div', {
+					return createElement('div', {
 						className: 'tw-border-l tw-c-background-alt-2 tw-c-text tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
 					}, 'There was an error displaying chat.');
 

src/sites/twitch-twilight/modules/chat/scroller.js

@@ -4,7 +4,7 @@
 // Chat Scroller
 // ============================================================================
 
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 import Twilight from 'site';
 import Module from 'utilities/module';
 
@@ -95,7 +95,7 @@ export default class Scroller extends Module {
 					let timer;
 					const auto = this.state.ffz_total_errors < 10,
 						React = t.web_munch.getModule('react'),
-						e = React && React.createElement,
+						createElement = React && React.createElement,
 						handler = () => {
 							clearTimeout(timer);
 							this.ffzZeroErrors();
@@ -104,17 +104,17 @@ export default class Scroller extends Module {
 					if ( auto )
 						timer = setTimeout(handler, 250);
 
-					if ( ! e )
+					if ( ! createElement )
 						return null;
 
-					return e('div', {
+					return createElement('div', {
 						className: 'tw-border-l tw-c-background-alt-2 tw-c-text tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
 					}, [
-						e('div', {className: 'tw-mg-b-1'}, 'There was an error displaying chat.'),
-						! auto && e('button', {
+						createElement('div', {className: 'tw-mg-b-1'}, 'There was an error displaying chat.'),
+						! auto && createElement('button', {
 							className: 'tw-button',
 							onClick: handler
-						}, e('span', {className: 'tw-button__text'}, 'Try Again'))
+						}, createElement('span', {className: 'tw-button__text'}, 'Try Again'))
 					]);
 
 				} else
@@ -176,9 +176,9 @@ export default class Scroller extends Module {
 
 					node.classList.add('tw-full-height');
 
-					el = this._ffz_freeze_indicator = e('div', {
+					el = this._ffz_freeze_indicator = createElement('div', {
 						className: 'ffz--freeze-indicator chat-list__more-messages-placeholder tw-relative tw-mg-x-2'
-					}, e('div', {
+					}, createElement('div', {
 						className: 'chat-list__more-messages tw-bottom-0 tw-full-width tw-align-items-center tw-flex tw-justify-content-center tw-absolute tw-pd-05'
 					}));
 

src/sites/twitch-twilight/modules/chat/settings_menu.jsx

@@ -32,27 +32,36 @@ export default class SettingsMenu extends Module {
 		if ( ! React )
 			return;
 
-		const e = React.createElement;
+		const createElement = React.createElement;
 
-		this.SettingsMenu.ready(cls => {
+		this.SettingsMenu.ready((cls, instances) => {
 			const old_universal = cls.prototype.renderUniversalOptions;
 
 			cls.prototype.renderUniversalOptions = function() {
 				const val = old_universal.call(this);
-				val.props.children.push(e('div', {
-						className: 'tw-mg-t-1'
-					}, e('button', {
-						onClick: () => t.click(this)
-					}, t.i18n.t('site.menu_button', 'FrankerFaceZ Control Center'))
-				));
 
-				window.menu = this;
+				val.props.children.push(<div class="tw-mg-t-1">
+					<button onClick={this.ffzSettingsClick}>
+						{t.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
+					</button>
+				</div>);
 
 				return val;
 			}
 
+			for(const inst of instances)
+				inst.ffzSettingsClick = e => t.click(inst, e);
+
 			this.SettingsMenu.forceUpdate();
 		});
+
+		this.SettingsMenu.on('mount', inst => {
+			inst.ffzSettingsClick = e => t.click(inst, e)
+		});
+
+		this.SettingsMenu.on('unmount', inst => {
+			inst.ffzSettingsClick = null;
+		});
 	}
 
 	click(inst) {
@@ -68,6 +77,7 @@ export default class SettingsMenu extends Module {
 		} else {
 			this.emit('site.menu_button:clicked');
 		}
+
 		const parent = this.fine.searchParent(inst, n => n.toggleBalloonId);
 		parent && parent.handleButtonClick();
 	}

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

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import {SiteModule} from 'utilities/module';
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 import {get} from 'utilities/object';
 
 import Popper from 'popper.js';
@@ -236,83 +236,61 @@ export default class Following extends SiteModule {
 		const simplebarContentChildren = [];
 
 		// Hosted Channel Header
-		simplebarContentChildren.push(
-			e('p', {
-				className: 'tw-pd-t-05 tw-pd-x-1 tw-c-text-alt-2',
-				textContent: this.i18n.t('directory.hosted', 'Hosted Channel')
-			})
-		);
+		simplebarContentChildren.push(<p class="tw-pd-t-05 tw-pd-x-1 tw-c-text-alt-2">
+			{this.i18n.t('directory.hosted', 'Hosted Channel')}
+		</p>);
 
 		// Hosted Channel Content
-		simplebarContentChildren.push(
-			e('a', {
-				className: 'tw-interactable',
-				href: `/${hostData.channel}`,
-				onclick: event =>
-					this.parent.hijackUserClick(
-						event,
-						hostData.channel,
-						this.destroyHostMenu.bind(this)
-					)
-			}, e('div', 'tw-align-items-center tw-flex tw-flex-row tw-flex-nowrap tw-mg-x-1 tw-mg-y-05',
-				[
-					e('div', {
-						className: 'ffz-channel-avatar',
-					}, e('img', {
-						src: inst.props.viewerCount.profileImageURL,
-						alt: inst.props.channelName
-					})),
-					e('p', {
-						className: 'tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5',
-						textContent: inst.props.channelName
-					})
-				]
-			))
-		);
+		simplebarContentChildren.push(<a
+			class="tw-interactable"
+			href={`/${hostData.channel}`}
+			onClick={e => this.parent.hijackUserClick(e, hostData.channel, this.destroyHostMenu.bind(this))} // eslint-disable-line react/jsx-no-bind
+		>
+			<div class="tw-align-items-center tw-flex tw-flex-row tw-flex-nowrap tw-mg-x-1 tw-mg-y-05">
+				<div class="ffz-channel-avatar">
+					<img src={inst.props.viewerCount.profileImageURL} alt={inst.props.channelName} />
+				</div>
+				<p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5">
+					{inst.props.channelName}
+				</p>
+			</div>
+		</a>);
 
 		// Hosting Channels Header
-		simplebarContentChildren.push(
-			e('p', {
-				className: 'tw-pd-t-05 tw-pd-x-1 tw-c-text-alt-2',
-				textContent: this.i18n.t('directory.hosting', 'Hosting Channels')
-			})
-		);
+		simplebarContentChildren.push(<p class="tw-pd-t-05 tw-pd-x-1 tw-c-text-alt-2">
+			{this.i18n.t('directory.hosting', 'Hosting Channels')}
+		</p>);
 
 		// Hosting Channels Content
 		for (let i = 0; i < hostData.nodes.length; i++) {
 			const node = hostData.nodes[i];
-			simplebarContentChildren.push(
-				e('a', {
-					className: 'tw-interactable',
-					href: `/${node.login}`,
-					onclick: event => this.parent.hijackUserClick(event, node.login, this.destroyHostMenu.bind(this))
-				}, e('div', 'tw-align-items-center tw-flex tw-flex-row tw-flex-nowrap tw-mg-x-1 tw-mg-y-05',
-					[
-						e('div', {
-							className: 'ffz-channel-avatar',
-						}, e('img', {
-							src: node.profileImageURL,
-							alt: node.displayName
-						})),
-						e('p', {
-							className: 'tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5',
-							textContent: node.displayName
-						})
-					]
-				))
-			);
+			simplebarContentChildren.push(<a
+				class="tw-interactable"
+				href={`/${node.login}`}
+				onClick={e => this.parent.hijackUserClick(e, node.login, this.destroyHostMenu.bind(this))} // eslint-disable-line react/jsx-no-bind
+			>
+				<div class="tw-align-items-center tw-flex tw-flex-row tw-flex-nowrap tw-mg-x-1 tw-mg-y-05">
+					<div class="ffz-channel-avatar">
+						<img src={node.profileImageURL} alt={node.displayName} />
+					</div>
+					<p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5">
+						{node.displayName}
+					</p>
+				</div>
+			</a>);
 		}
 
-		this.hostMenu = e('div', 'ffz-host-menu tw-balloon tw-block',
-			e('div', 'tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
-				e('div', {
-					className: 'scrollable-area',
-					'data-simplebar': true,
-				}, e('div', 'simplebar-scroll-content',
-					e('div', 'simplebar-content', simplebarContentChildren)
-				))
-			)
-		);
+		this.hostMenu = (<div class="ffz-host-menu tw-balloon tw-block">
+			<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background">
+				<div class="scrollable-area" data-simplebar>
+					<div class="simplebar-scroll-content">
+						<div class="simplebar-content">
+							{simplebarContentChildren}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>);
 
 		const root = (document.body.querySelector('.twilight-root') || document.body);
 		root.appendChild(this.hostMenu);

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

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import {SiteModule} from 'utilities/module';
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 
 import GAME_QUERY from './game.gql';
 
@@ -66,10 +66,12 @@ export default class Game extends SiteModule {
 			}
 
 
-		block_btn = e('button', {
-			className: 'tw-mg-l-1 tw-button ffz-directory-toggle-block',
-			onClick: this.generateClickHandler('directory.game.blocked-games', game, update_block)
-		}, block_label = e('span', 'tw-button__text'));
+		block_btn = (<button
+			class="tw-mg-l-1 tw-button ffz-directory-toggle-block"
+			onClick={this.generateClickHandler('directory.game.blocked-games', game, update_block)}
+		>
+			{block_label = <span class="tw-button__text" />}
+		</button>);
 
 		update_block();
 
@@ -86,17 +88,19 @@ export default class Game extends SiteModule {
 			this.parent.ChannelCard.forceUpdate();
 		}
 
-		hidden_btn = e('button', {
-			className: 'tw-mg-l-1 tw-button ffz-directory-toggle-thumbnail',
-			onClick: this.generateClickHandler('directory.game.hidden-thumbnails', game, update_hidden)
-		}, hidden_label = e('span', 'tw-button__text'));
+		hidden_btn = (<button
+			class="tw-mg-l-1 tw-button ffz-directory-toggle-thumbnail"
+			onClick={this.generateClickHandler('directory.game.hidden-thumbnails', game, update_hidden)}
+		>
+			{hidden_label = <span class="tw-button__text" />}
+		</button>)
 
 		update_hidden();
 
-		buttons.appendChild(e('div', 'ffz-buttons', [
-			block_btn,
-			hidden_btn
-		]));
+		buttons.appendChild(<div class="ffz-buttons">
+			{block_btn}
+			{hidden_btn}
+		</div>);
 	}
 
 	generateClickHandler(setting, game, update_func) {

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

@@ -6,7 +6,7 @@
 
 import {SiteModule} from 'utilities/module';
 import {duration_to_string} from 'utilities/time';
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 import {get} from 'utilities/object';
 
 import Following from './following';
@@ -244,15 +244,17 @@ export default class Directory extends SiteModule {
 		const up_text = duration_to_string(uptime, false, false, false, setting === 1);
 
 		if ( ! inst.ffz_uptime_el || card.querySelector('.ffz-uptime-element') === undefined ) {
-			card.appendChild(inst.ffz_uptime_el = e('div',
-				'video-preview-card__preview-overlay-stat tw-c-background-overlay tw-c-text-overlay tw-font-size-6 tw-top-0 tw-right-0 tw-z-default tw-inline-flex tw-absolute tw-mg-05 ffz-uptime-element',
-				e('div', 'tw-tooltip-wrapper tw-inline-flex', [
-					e('div', 'tw-stat', [
-						e('span', 'tw-c-text-live tw-stat__icon', e('figure', 'ffz-i-clock')),
-						inst.ffz_uptime_span = e('span', 'tw-stat__value')
-					]),
-					inst.ffz_uptime_tt = e('div', 'tw-tooltip tw-tooltip--down tw-tooltip--align-center')
-				])));
+			card.appendChild(inst.ffz_uptime_el = (<div class="video-preview-card__preview-overlay-stat tw-c-background-overlay tw-c-text-overlay tw-font-size-6 tw-top-0 tw-right-0 tw-z-default tw-inline-flex tw-absolute tw-mg-05 ffz-uptime-element">
+				<div class="tw-tooltip-wrapper tw-inline-flex">
+					<div class="tw-stat">
+						<span class="tw-c-text-live tw-stat__icon">
+							<figure class="ffz-i-clock" />
+						</span>
+						{inst.ffz_uptime_span = <span class="tw-stat__value" />}
+					</div>
+					{inst.ffz_uptime_tt = <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center" />}
+				</div>
+			</div>));
 		}
 
 		if ( ! inst.ffz_update_timer )
@@ -306,29 +308,29 @@ export default class Directory extends SiteModule {
 
 			if ( setting === 1 ) {
 				const body = card.querySelector('.tw-card-body .tw-flex'),
-					avatar = e('a', {
-						className: 'ffz-channel-avatar tw-mg-r-05 tw-mg-t-05',
-						href: `/${data.login}`,
-						title: data.displayName,
-						onclick: event => this.hijackUserClick(event, data.login)
-					}, e('img', {
-						src: data.profileImageURL
-					}));
+					avatar = (<a
+						class="ffz-channel-avatar tw-mg-r-05 tw-mg-t-05"
+						href={`/${data.login}`}
+						title={data.displayName}
+						onClick={e => this.hijackUserClick(e, data.login)} // eslint-disable-line react/jsx-no-bind
+					>
+						<img src={data.profileImageURL} />
+					</a>);
 
 				body.insertBefore(avatar, body.firstElementChild);
 
 			} else if ( setting === 2 || setting === 3 ) {
-				const avatar_el = e('a', {
-					className: 'ffz-channel-avatar',
-					href: `/${data.login}`,
-					onclick: event => this.hijackUserClick(event, data.login)
-				}, e('div', 'live-channel-card__boxart tw-bottom-0 tw-absolute',
-					e('figure', 'tw-aspect tw-aspect--align-top',
-						e('img', {
-							title: data.displayName,
-							src: data.profileImageURL
-						})))
-				);
+				const avatar_el = (<a
+					class="ffz-channel-avatar"
+					href={`/${data.login}`}
+					onClick={e => this.hijackUserClick(e, data.login)} // eslint-disable-line react/jsx-no-bind
+				>
+					<div class="live-channel-card__boxart tw-bottom-0 tw-absolute">
+						<figure class="tw-aspect tw-aspect--align-top">
+							<img src={data.profileImageURL} title={data.displayName} />
+						</figure>
+					</div>
+				</a>);
 
 				const cont = card.querySelector('figure.tw-aspect > div');
 				if ( cont )

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

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 
 const HOST_ERRORS = {
 	COMMAND_EXECUTION: {
@@ -212,7 +212,7 @@ export default class HostButton extends Module {
 		this.activeTab = this.activeTab || 'auto-host';
 
 		this.vueEl = new vue.Vue({
-			el: e('div'),
+			el: createElement('div'),
 			render: h => h('host-options', {
 				hosts,
 				autoHostSettings,

src/sites/twitch-twilight/modules/menu_button.jsx

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import {SiteModule} from 'utilities/module';
-import {createElement as e} from 'utilities/dom';
+import {createElement, setChildren} from 'utilities/dom';
 
 export default class MenuButton extends SiteModule {
 	constructor(...args) {
@@ -29,7 +29,7 @@ export default class MenuButton extends SiteModule {
 	set pill(val) {
 		this._pill_content = val;
 		if ( this._pill )
-			this._pill.innerHTML = this.formatPill();
+			setChildren(this._pill, this.formatPill(), true);
 	}
 
 	formatPill() {
@@ -46,28 +46,26 @@ export default class MenuButton extends SiteModule {
 			user_menu = container.querySelector('.top-nav__nav-items-container:last-child');
 
 
-		this._el = e('div',
-			'ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05',
-			this._btn = e('button',
-				{
-					className: 'tw-button-icon tw-button-icon--overlay tw-button-icon--large',
-					onClick: e => this.emit(':clicked', e)
-				},
-				e('div', 'tw-tooltip-wrapper', [
-					e('span', 'tw-button-icon__icon',
-						e('figure', 'ffz-i-zreknarf')
-					),
+		this._el = (<div class="ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05">
+			{this._btn = (<button
+				class="tw-button-icon tw-button-icon--overlay tw-button-icon--large"
+				onClick={e => this.emit(':clicked', e)} //eslint-disable-line react/jsx-no-bind
+			>
+				<div class="tw-tooltip-wrapper">
+					<span class="tw-button-icon__icon">
+						<figure class="ffz-i-zreknarf" />
+					</span>
+					<div class="ffz-menu__pill absolute">
+						<div class="tw-animation tw-animation--animate tw-animation--duration-medium tw-animation--timing-ease-in tw-animation--bounce-in">
+							{this._pill = (<div class="tw-pill tw-pill--notification" />)}
+						</div>
+					</div>
+					{this._tip = (<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center" />)}
+				</div>
+			</button>)}
+		</div>);
 
-					e('div', 'ffz-menu__pill absolute',
-						e('div', 'tw-animation tw-animation--animate tw-animation--duration-medium tw-animation--timing-ease-in tw-animation--bounce-in',
-							this._pill = e('span', 'tw-pill tw-pill--notification', this.formatPill(), true)
-						)
-					),
-
-					this._tip = e('div', 'tw-tooltip tw-tooltip--down tw-tooltip--align-center')
-				])
-			)
-		);
+		setChildren(this._pill, this.formatPill(), true);
 
 		this.onTranslate();
 

src/sites/twitch-twilight/modules/player.jsx

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 
 
 export default class Player extends Module {
@@ -348,14 +348,13 @@ export default class Player extends Module {
 		let tip = container.querySelector('.ffz--player-reset .player-tip');
 
 		if ( ! tip )
-			container.insertBefore(
-				e('button', {
-					className: 'player-button player-button--reset ffz--player-reset ffz-i-cancel',
-					type: 'button',
-					onDblClick: t.resetPlayer.bind(t, inst)
-				}, tip = e('span', 'player-tip js-control-tip')),
-				el.nextSibling
-			);
+			container.insertBefore(<button
+				class="player-button player-button--reset ffz--player-reset ffz-i-cancel"
+				type="button"
+				onDblClick={t.resetPlayer.bind(t, inst)} // eslint-disable-line react/jsx-no-bind
+			>
+				{tip = <span class="player-tip js-control-tip" />}
+			</button>, el.nextSibling);
 
 		tip.dataset.tip = this.i18n.t('player.reset_button', 'Double-Click to Reset Player');
 	}

src/sites/twitch-twilight/modules/sub_button.jsx

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 
 export default class SubButton extends Module {
 	constructor(...args) {
@@ -59,16 +59,13 @@ export default class SubButton extends Module {
 			icon = btn.querySelector('.ffz--can-prime');
 
 		if ( should_show && ! icon ) {
-			btn.insertBefore(
-				e('span', 'tw-button__icon tw-button__icon--left ffz--can-prime',
-					e('figure', {
-						className: 'ffz-i-crown ffz-tooltip',
-						'data-tooltip-type': 'html',
-						'data-title': this.i18n.t('sub-button.prime', 'Your free channel sub with Prime is available.')
-					})
-				),
-				btn.firstElementChild
-			);
+			btn.insertBefore(<span class="tw-button__icon tw-button__icon--left ffz--can-prime">
+				<figure
+					class="ffz-i-crown ffz-tooltip"
+					data-tooltip-type="html"
+					data-title={this.i18n.t('sub-button.prime', 'Your free channel sub with Prime is available.')}
+				/>
+			</span>, btn.firstElementChild);
 
 		} else if ( ! should_show && icon )
 			icon.remove();

src/sites/twitch-twilight/modules/theme/index.js

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import Module from 'utilities/module';
-import {createElement as e} from 'utilities/dom';
+import {createElement} from 'utilities/dom';
 
 import THEME_CSS_URL from 'site/styles/theme.scss';
 
@@ -58,7 +58,7 @@ export default class ThemeEngine extends Module {
 			if ( ! enable )
 				return;
 
-			this._style = e('link', {
+			this._style = createElement('link', {
 				rel: 'stylesheet',
 				type: 'text/css',
 				href: THEME_CSS_URL