From f7fd1d94ebe0aecbcea003ecc2130dc46ee6a7b7 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 2 Nov 2022 18:01:38 -0700
Subject: [PATCH] Move browser incompatibility check outside the JS bundle

---
 frontend/public/index.html | 36 ++++++++++++++++++++++++++++++++++++
 frontend/src/main.ts       | 34 ++++++----------------------------
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 937a49f0..c261fee3 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -21,6 +21,42 @@
 	<noscript>JavaScript is required</noscript>
 	<!-- tabindex is used to allow the app to have focus while inside of it -->
 	<div data-app id="app" tabindex="0"></div>
+	<script>
+	// Confirm the browser is compatible before initializing the application
+
+	// Display an error if the browser is incompatible with a required API
+	// This is run outside the JS code bundle in case unsupported features cause a syntax error when parsing the bundle, preventing the any bundle code from running
+	let error;
+	if (!("BigUint64Array" in window)) {
+		error = `
+<style>
+h2, p, a { text-align: center; color: white; }
+#app { display: none; }
+</style>
+<h2>This browser is too old to run Graphite</h2>
+<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
+<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
+JavaScript API must be supported by the browser for Graphite to function.)</p>
+		`.trim();
+	}
+	if (error) {
+		document.body.innerHTML = error + document.body.innerHTML;
+		delete window.graphiteAppInit;
+	} else {
+		const retry = () => {
+			if (window.graphiteAppInit) {
+				const init = window.graphiteAppInit;
+				delete window.graphiteAppInit;
+				init();
+			}
+			else {
+				setTimeout(retry, 0);
+			}
+		};
+		retry();
+	}
+
+	</script>
 </body>
 
 </html>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5a0e6ab0..3add6d04 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,43 +1,21 @@
+// This file is the browser's entry point for the JS bundle
+
 // reflect-metadata allows for runtime reflection of types in JavaScript.
 // It is needed for class-transformer to work and is imported as a side effect.
 // The library replaces the Reflect API on the window to support more features.
 import "reflect-metadata";
 import { createApp } from "vue";
 
-import { stripIndents } from "@/utility-functions/strip-indents";
 import { initWasm } from "@/wasm-communication/editor";
 
 import App from "@/App.vue";
 
-// Browser app entry point
-(async (): Promise<void> => {
-	// Confirm the browser is compatible before initializing the application
-	if (!checkBrowserCompatibility()) return;
-
+// This exported function is called in `index.html` after confirming that the browser supports all required JS standards
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).graphiteAppInit = async (): Promise<void> => {
 	// Initialize the WASM module for the editor backend
 	await initWasm();
 
 	// Initialize the Vue application
 	createApp(App).mount("#app");
-})();
-
-function checkBrowserCompatibility(): boolean {
-	if (!("BigUint64Array" in window)) {
-		const body = document.body;
-		const message = stripIndents`
-			<style>
-			h2, p, a { text-align: center; color: white; }
-			#app { display: none; }
-			</style>
-			<h2>This browser is too old</h2>
-			<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
-			<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
-			JavaScript API must be supported by the browser for Graphite to function.)</p>
-			`;
-		body.innerHTML = message + body.innerHTML;
-
-		return false;
-	}
-
-	return true;
-}
+};