From 86c5fee033652d7962c780e46d57b53b90c77572 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Fri, 18 May 2018 17:48:10 -0400
Subject: [PATCH] More webpack 4 code. Make sure to asynchronously await the
 availability of our webpack hook everywhere that we use it that it's
 reasonable to wait.

This adds a new module called switchboard that abuses the root React Router instance to forcibly load a chunk, letting us grab `require()` quickly rather than waiting potentially forever for another chunk to be loaded due to user action, etc.
---
 changelog.html                                |  5 +
 src/main.js                                   |  2 +-
 src/sites/twitch-twilight/index.js            |  5 +-
 .../modules/chat/emote_menu.jsx               |  4 +-
 .../twitch-twilight/modules/chat/index.js     |  4 +-
 .../twitch-twilight/modules/chat/line.js      |  5 +-
 .../modules/chat/rich_content.jsx             |  4 +-
 .../modules/chat/settings_menu.jsx            |  4 +-
 .../modules/chat/tab_completion.jsx           |  4 +-
 src/sites/twitch-twilight/switchboard.js      | 93 +++++++++++++++++++
 src/utilities/compat/apollo.js                | 10 +-
 src/utilities/compat/webmunch.js              |  6 +-
 src/utilities/module.js                       |  6 +-
 13 files changed, 128 insertions(+), 24 deletions(-)
 create mode 100644 src/sites/twitch-twilight/switchboard.js

diff --git a/changelog.html b/changelog.html
index 9fccc8b4..2b57181c 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,8 @@
+<div class="list-header">4.0.0-rc1.8<span>@498c1b079484a762958a</span> <time datetime="2018-05-18">(2018-05-18)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Finish writing support for webpack 4 support.</li>
+</ul>
+
 <div class="list-header">4.0.0-rc1.7<span>@498c1b079484a762958a</span> <time datetime="2018-05-18">(2018-05-18)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Changed: Rewrite the webpack hooking code to add support for webpack 4.</li>
diff --git a/src/main.js b/src/main.js
index f9a42c30..9bfd6030 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc1.7',
+	major: 4, minor: 0, revision: 0, extra: '-rc1.8',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
diff --git a/src/sites/twitch-twilight/index.js b/src/sites/twitch-twilight/index.js
index 1e6de33a..35051cd5 100644
--- a/src/sites/twitch-twilight/index.js
+++ b/src/sites/twitch-twilight/index.js
@@ -11,6 +11,8 @@ import Fine from 'utilities/compat/fine';
 import FineRouter from 'utilities/compat/fine-router';
 import Apollo from 'utilities/compat/apollo';
 
+import Switchboard from './switchboard';
+
 import {createElement} from 'utilities/dom';
 import {has} from 'utilities/object';
 
@@ -28,7 +30,8 @@ export default class Twilight extends BaseSite {
 		this.inject(WebMunch);
 		this.inject(Fine);
 		this.inject('router', FineRouter);
-		this.inject(Apollo);
+		this.inject(Apollo, false);
+		this.inject(Switchboard);
 	}
 
 	onLoad() {
diff --git a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
index c9a3253e..78ca5f59 100644
--- a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
@@ -197,7 +197,7 @@ export default class EmoteMenu extends Module {
 		//this.MenuEmote = this.fine.wrap('ffz-menu-emote');
 	}
 
-	onEnable() {
+	async onEnable() {
 		this.on('i18n:update', () => this.EmoteMenu.forceUpdate());
 		this.on('chat.emotes:update-default-sets', this.maybeUpdate, this);
 		this.on('chat.emotes:update-user-sets', this.maybeUpdate, this);
@@ -228,7 +228,7 @@ export default class EmoteMenu extends Module {
 		this.css_tweaks.toggle('emote-menu', this.chat.context.get('chat.emote-menu.icon'));
 
 		const t = this,
-			React = this.web_munch.getModule('react'),
+			React = await this.web_munch.findModule('react'),
 			createElement = React && React.createElement;
 
 		if ( ! createElement )
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index 2485aa56..bb2a9c34 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/src/sites/twitch-twilight/modules/chat/index.js
@@ -329,8 +329,8 @@ export default class ChatHook extends Module {
 	}
 
 
-	grabTypes() {
-		const ct = this.web_munch.getModule('chat-types');
+	async grabTypes() {
+		const ct = await this.web_munch.findModule('chat-types');
 
 		this.automod_types = ct && ct.a || AUTOMOD_TYPES;
 		this.chat_types = ct && ct.b || CHAT_TYPES;
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index a2060b50..d8bb30e1 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -25,7 +25,6 @@ export default class ChatLine extends Module {
 		this.inject('site');
 		this.inject('site.fine');
 		this.inject('site.web_munch');
-		this.inject('site.apollo');
 		this.inject(RichContent);
 
 		this.inject('viewer_cards');
@@ -45,7 +44,7 @@ export default class ChatLine extends Module {
 		);
 	}
 
-	onEnable() {
+	async onEnable() {
 		this.chat.context.on('changed:chat.emoji.style', this.updateLines, this);
 		this.chat.context.on('changed:chat.bits.stack', this.updateLines, this);
 		this.chat.context.on('changed:chat.badges.style', this.updateLines, this);
@@ -57,7 +56,7 @@ export default class ChatLine extends Module {
 		this.chat.context.on('changed:chat.actions.inline', this.updateLines, this);
 
 		const t = this,
-			React = this.web_munch.getModule('react');
+			React = await this.web_munch.findModule('react');
 		if ( ! React )
 			return;
 
diff --git a/src/sites/twitch-twilight/modules/chat/rich_content.jsx b/src/sites/twitch-twilight/modules/chat/rich_content.jsx
index f6f32e2c..365ebd6d 100644
--- a/src/sites/twitch-twilight/modules/chat/rich_content.jsx
+++ b/src/sites/twitch-twilight/modules/chat/rich_content.jsx
@@ -19,9 +19,9 @@ export default class RichContent extends Module {
 		this.RichContent = null;
 	}
 
-	onEnable() {
+	async onEnable() {
 		const t = this,
-			React = this.web_munch.getModule('react');
+			React = await this.web_munch.findModule('react');
 		if ( ! React )
 			return;
 
diff --git a/src/sites/twitch-twilight/modules/chat/settings_menu.jsx b/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
index 83ee5f86..4ea0e71b 100644
--- a/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/settings_menu.jsx
@@ -24,11 +24,11 @@ export default class SettingsMenu extends Module {
 		);
 	}
 
-	onEnable() {
+	async onEnable() {
 		this.on('i18n:update', () => this.SettingsMenu.forceUpdate());
 
 		const t = this,
-			React = this.web_munch.getModule('react');
+			React = await this.web_munch.findModule('react');
 		if ( ! React )
 			return;
 
diff --git a/src/sites/twitch-twilight/modules/chat/tab_completion.jsx b/src/sites/twitch-twilight/modules/chat/tab_completion.jsx
index ad8dc37b..c62e9b56 100644
--- a/src/sites/twitch-twilight/modules/chat/tab_completion.jsx
+++ b/src/sites/twitch-twilight/modules/chat/tab_completion.jsx
@@ -58,8 +58,8 @@ export default class TabCompletion extends Module {
 		);
 	}
 
-	onEnable() {
-		const React = this.web_munch.getModule('react'),
+	async onEnable() {
+		const React = await this.web_munch.findModule('react'),
 			createElement = React && React.createElement;
 
 		if ( ! createElement )
diff --git a/src/sites/twitch-twilight/switchboard.js b/src/sites/twitch-twilight/switchboard.js
new file mode 100644
index 00000000..f79e68a2
--- /dev/null
+++ b/src/sites/twitch-twilight/switchboard.js
@@ -0,0 +1,93 @@
+'use strict';
+
+// ============================================================================
+// Switchboard
+// A hack for React Router to make it load a module.
+// ============================================================================
+
+import Module from 'utilities/module';
+
+
+export default class Switchboard extends Module {
+	constructor(...args) {
+		super(...args);
+
+		this.inject('site.web_munch');
+		this.inject('site.fine');
+
+		this.RootRouter = this.fine.define(
+			'root-router',
+			n => n && n.logger && n.logger.category === 'default-root-router'
+		);
+	}
+
+
+	awaitRouter() {
+		const router = this.RootRouter.first;
+		if ( router )
+			return Promise.resolve(router);
+
+		return new Promise(resolve => {
+			this.RootRouter.ready(() => resolve(this.RootRouter.first))
+		});
+	}
+
+
+	async onEnable() {
+		const router = await this.awaitRouter(),
+			child = router && this.fine.getFirstChild(router),
+			da_switch = child && child.stateNode;
+
+		if ( this.web_munch.v4 === false )
+			return;
+
+		if ( ! da_switch )
+			return new Promise(r => setTimeout(r, 50)).then(() => this.onEnable());
+
+		const real_context = da_switch.context,
+			on_settings = real_context.router.route.location.pathname.includes('settings');
+
+		let output;
+
+		try {
+			da_switch.context = {
+				router: {
+					route: {
+						location: {
+							pathname: on_settings ? '/inventory' : '/settings'
+						}
+					}
+				}
+			};
+
+			output = da_switch.render();
+
+		} catch(err) {
+			this.log.error('Error forcing router to render another page.', err);
+			da_switch.context = real_context;
+			return;
+		}
+
+		da_switch.context = real_context;
+
+		if ( ! output || ! output.props || ! output.props.component )
+			return this.log.warn('Unexpected output from router render.');
+
+		let component;
+
+		try {
+			component = new output.props.component;
+		} catch(err) {
+			this.log.error('Error instantiating component for forced loading of another chunk.', err);
+			return;
+		}
+
+		try {
+			component.props.children.props.loader().then(() => {
+				this.log.info('Successfully forced a chunk to load.');
+			});
+		} catch(err) {
+			this.log.warn('Unexpected result trying to use component loader to force loading of another chunk.', err);
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/utilities/compat/apollo.js b/src/utilities/compat/apollo.js
index a4710f82..481d0882 100644
--- a/src/utilities/compat/apollo.js
+++ b/src/utilities/compat/apollo.js
@@ -52,7 +52,7 @@ export default class Apollo extends Module {
 		this.inject('..fine');
 	}
 
-	onEnable() {
+	async onEnable() {
 		// TODO: Come up with a better way to await something existing.
 		let client = this.client;
 
@@ -63,11 +63,11 @@ export default class Apollo extends Module {
 			client = this.client = inst && inst.props && inst.props.client;
 		}
 
-		this.printer = this.web_munch.getModule('gql-printer');
-		this.gql_print = this.printer && this.printer.print;
-
 		if ( ! client )
-			return new Promise(s => setTimeout(s,50)).then(() => this.onEnable());
+			return new Promise(() => this.onEnable(), 50);
+
+		this.printer = await this.web_munch.findModule('gql-printer');
+		this.gql_print = this.printer && this.printer.print;
 
 		// Register middleware so that we can intercept requests.
 		if ( ! this.client.link || ! this.client.queryManager || ! this.client.queryManager.link ) {
diff --git a/src/utilities/compat/webmunch.js b/src/utilities/compat/webmunch.js
index 8e963913..ae4b0801 100644
--- a/src/utilities/compat/webmunch.js
+++ b/src/utilities/compat/webmunch.js
@@ -23,7 +23,7 @@ export default class WebMunch extends Module {
 		this._module_names = {};
 		this._mod_cache = {};
 
-		this.v4 = false;
+		this.v4 = null;
 
 		this.hookLoader();
 		this.hookRequire();
@@ -47,7 +47,9 @@ export default class WebMunch extends Module {
 
 		if ( typeof window.webpackJsonp === 'function' ) {
 			// v3
+			this.v4 = false;
 			this._original_loader = window.webpackJsonp;
+
 			try {
 				window.webpackJsonp = this.webpackJsonpv3.bind(this);
 			} catch(err) {
@@ -249,7 +251,7 @@ export default class WebMunch extends Module {
 		const loader = require.e && require.e.toString();
 		let modules;
 		if ( loader && loader.indexOf('Loading chunk') !== -1 ) {
-			const data = /({0:.*?})/.exec(loader);
+			const data = this.v4 ? /assets\/"\+\(({1:.*?})/.exec(loader) : /({0:.*?})/.exec(loader);
 			if ( data )
 				try {
 					modules = JSON.parse(data[1].replace(/(\d+):/g, '"$1":'))
diff --git a/src/utilities/module.js b/src/utilities/module.js
index 65b440c3..2ea6a8b9 100644
--- a/src/utilities/module.js
+++ b/src/utilities/module.js
@@ -402,8 +402,9 @@ export class Module extends EventEmitter {
 	}
 
 
-	inject(name, module) {
+	inject(name, module, require = true) {
 		if ( name instanceof Module || name.prototype instanceof Module ) {
+			require = module != null ? module : true;
 			module = name;
 			name = null;
 		}
@@ -447,7 +448,8 @@ export class Module extends EventEmitter {
 		if ( ! module )
 			throw new Error(`cannot find module ${name} or no module provided`);
 
-		requires.push(module.abs_path('.'));
+		if ( require )
+			requires.push(module.abs_path('.'));
 
 		if ( this.enabled && ! module.enabled )
 			module.enable();