From ceb7e48c99eb52beb98cdd5a68a2eadefdd2ef58 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Tue, 28 Nov 2023 00:12:23 +0100
Subject: [PATCH] Fix global declaration of staticRoot and webRoot

These variables were intended to be globals declare in the global
namespace. That this ends up on the window object is an implementation
detail of JavaScript. Remove the window. prefix put in front of
staticRoot and webRoot and include the global declaration in the
TypeScript module.
---
 .eslintrc.js                                       | 7 ++++++-
 packages/controller/web/index.html                 | 4 ++--
 packages/web_ui/global.d.ts                        | 8 +++-----
 packages/web_ui/src/bootstrap.tsx                  | 6 +++---
 packages/web_ui/src/components/App.tsx             | 2 +-
 packages/web_ui/src/components/HostsPage.tsx       | 2 +-
 packages/web_ui/src/components/ModPackViewPage.tsx | 2 +-
 packages/web_ui/src/components/ModsPage.tsx        | 4 ++--
 packages/web_ui/src/components/PluginViewPage.tsx  | 2 +-
 packages/web_ui/src/components/PluginsPage.tsx     | 2 +-
 packages/web_ui/src/components/SavesList.tsx       | 4 ++--
 packages/web_ui/src/index.ts                       | 1 +
 packages/web_ui/src/model/item_metadata.ts         | 4 ++--
 packages/web_ui/src/model/locale.ts                | 2 +-
 14 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 084deb91..2cee77d9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,6 +22,7 @@ module.exports = {
 				"@typescript-eslint/no-explicit-any": "off",
 				"@typescript-eslint/no-useless-constructor": "error",
 				"@typescript-eslint/no-unused-vars": "off",
+				"@typescript-eslint/triple-slash-reference": "off",
 				"prefer-const": "off",
 			},
 		},
@@ -315,7 +316,11 @@ module.exports = {
 		"space-in-parens": ["error", "never"],
 		"space-infix-ops": "off",
 		"space-unary-ops": "error",
-		"spaced-comment": ["error", "always"],
+		"spaced-comment": ["error", "always", {
+			"line": {
+				"markers": ["/"],
+			},
+		}],
 		"strict": "error",
 		"switch-colon-spacing": "error",
 		"symbol-description": "error",
diff --git a/packages/controller/web/index.html b/packages/controller/web/index.html
index fde58715..d8f6f318 100644
--- a/packages/controller/web/index.html
+++ b/packages/controller/web/index.html
@@ -20,8 +20,8 @@
 			}
 		</style>
 		<script>
-			window.webRoot = new URL("__WEB_ROOT__", document.location).pathname;
-			window.staticRoot = new URL("__STATIC_ROOT__", document.location).pathname;
+			webRoot = new URL("__WEB_ROOT__", document.location).pathname;
+			staticRoot = new URL("__STATIC_ROOT__", document.location).pathname;
 			function scriptError() {
 				let bootstrapMsg = document.getElementById("bootstrap-msg");
 				bootstrapMsg.textContent = "Error loading main bundle, see web console for details.";
diff --git a/packages/web_ui/global.d.ts b/packages/web_ui/global.d.ts
index 2bb8472e..9ab63040 100644
--- a/packages/web_ui/global.d.ts
+++ b/packages/web_ui/global.d.ts
@@ -1,12 +1,10 @@
 declare module "*.png" {
-	const value: import("react-native").ImageSourcePropType;
+	const value: string;
 	export default value;
 }
 
-declare interface Window {
-	webRoot: string;
-	staticRoot: string;
-}
+declare const webRoot: string;
+declare const staticRoot: string;
 
 declare const __webpack_init_sharing__: (shareScope: string) => Promise<void>;
 declare const __webpack_share_scopes__: { default: any };
diff --git a/packages/web_ui/src/bootstrap.tsx b/packages/web_ui/src/bootstrap.tsx
index 582be9f0..349d0e33 100644
--- a/packages/web_ui/src/bootstrap.tsx
+++ b/packages/web_ui/src/bootstrap.tsx
@@ -27,7 +27,7 @@ async function loadScript(url: string) {
 }
 
 async function loadPluginInfos(): Promise<lib.PluginWebpackEnvInfo[]> {
-	let response = await fetch(`${window.webRoot}api/plugins`);
+	let response = await fetch(`${webRoot}api/plugins`);
 	let pluginList: lib.PluginWebApi[];
 	if (response.ok) {
 		pluginList = await response.json();
@@ -45,7 +45,7 @@ async function loadPluginInfos(): Promise<lib.PluginWebpackEnvInfo[]> {
 			continue;
 		}
 		try {
-			await loadScript(`${window.webRoot}${meta.web.main}`);
+			await loadScript(`${webRoot}${meta.web.main}`);
 			let container: any = (window as { [key: string]: any })[`plugin_${meta.name}`];
 			if (!container) {
 				throw new Error(`Plugin did not expose its container via plugin_${meta.name}`);
@@ -108,7 +108,7 @@ export default async function bootstrap() {
 	lib.finalizeConfigs();
 	let plugins = await loadPlugins(pluginInfos);
 
-	let wsUrl = new URL(window.webRoot, document.location.href);
+	let wsUrl = new URL(webRoot, document.location.href);
 	let controlConnector = new ControlConnector(wsUrl.href, 120, undefined);
 	let control = new Control(controlConnector, plugins);
 
diff --git a/packages/web_ui/src/components/App.tsx b/packages/web_ui/src/components/App.tsx
index 85af41bf..02e9c726 100644
--- a/packages/web_ui/src/components/App.tsx
+++ b/packages/web_ui/src/components/App.tsx
@@ -109,7 +109,7 @@ export default function App(props: AppProps) {
 				theme={{ algorithm: theme.darkAlgorithm }}
 			>
 				<ControlContext.Provider value={props.control}>
-					<BrowserRouter basename={window.webRoot}>
+					<BrowserRouter basename={webRoot}>
 						{page}
 					</BrowserRouter>
 				</ControlContext.Provider>
diff --git a/packages/web_ui/src/components/HostsPage.tsx b/packages/web_ui/src/components/HostsPage.tsx
index c59b3c67..23082644 100644
--- a/packages/web_ui/src/components/HostsPage.tsx
+++ b/packages/web_ui/src/components/HostsPage.tsx
@@ -25,7 +25,7 @@ function GenerateHostTokenButton() {
 	let [pluginList, setPluginList] = useState<lib.PluginWebApi[]>([]);
 	useEffect(() => {
 		(async () => {
-			let response = await fetch(`${window.webRoot}api/plugins`);
+			let response = await fetch(`${webRoot}api/plugins`);
 			if (response.ok) {
 				const plugins = await response.json();
 				setPluginList(plugins);
diff --git a/packages/web_ui/src/components/ModPackViewPage.tsx b/packages/web_ui/src/components/ModPackViewPage.tsx
index 39ad5c06..e75b705c 100644
--- a/packages/web_ui/src/components/ModPackViewPage.tsx
+++ b/packages/web_ui/src/components/ModPackViewPage.tsx
@@ -623,7 +623,7 @@ function useExportedAsset(modPack: lib.ModPack, asset: "settings"|"locale"): Map
 				return;
 			}
 
-			let response = await fetch(`${window.staticRoot}static/${assetFilename}`);
+			let response = await fetch(`${staticRoot}static/${assetFilename}`);
 			if (response.ok) {
 				let data = await response.json();
 				setAssetData(asset === "locale" ? new Map(data) : data);
diff --git a/packages/web_ui/src/components/ModsPage.tsx b/packages/web_ui/src/components/ModsPage.tsx
index a7272366..fb3133c4 100644
--- a/packages/web_ui/src/components/ModsPage.tsx
+++ b/packages/web_ui/src/components/ModsPage.tsx
@@ -140,7 +140,7 @@ export default function ModsPage() {
 						control.send(
 							new lib.ModDownloadRequest(mod.name, mod.version)
 						).then((streamId: string) => {
-							let url = new URL(window.webRoot, document.location.origin);
+							let url = new URL(webRoot, document.location.origin);
 							url.pathname += `api/stream/${streamId}`;
 							document.location = url.href;
 						}).catch(
@@ -175,7 +175,7 @@ export default function ModsPage() {
 			headers={{
 				"X-Access-Token": control.connector.token||"",
 			}}
-			action={`${window.webRoot}api/upload-mod`}
+			action={`${webRoot}api/upload-mod`}
 		>
 			<Button icon={<UploadOutlined/>}>Upload</Button>
 		</Upload>;
diff --git a/packages/web_ui/src/components/PluginViewPage.tsx b/packages/web_ui/src/components/PluginViewPage.tsx
index a52e396e..ef33ef45 100644
--- a/packages/web_ui/src/components/PluginViewPage.tsx
+++ b/packages/web_ui/src/components/PluginViewPage.tsx
@@ -16,7 +16,7 @@ export default function PluginViewPage() {
 
 	useEffect(() => {
 		(async () => {
-			let response = await fetch(`${window.webRoot}api/plugins`);
+			let response = await fetch(`${webRoot}api/plugins`);
 			if (response.ok) {
 				setPluginList(await response.json());
 			} else {
diff --git a/packages/web_ui/src/components/PluginsPage.tsx b/packages/web_ui/src/components/PluginsPage.tsx
index 0902ff84..e3339f38 100644
--- a/packages/web_ui/src/components/PluginsPage.tsx
+++ b/packages/web_ui/src/components/PluginsPage.tsx
@@ -18,7 +18,7 @@ export default function PluginsPage() {
 
 	useEffect(() => {
 		(async () => {
-			let response = await fetch(`${window.webRoot}api/plugins`);
+			let response = await fetch(`${webRoot}api/plugins`);
 			if (response.ok) {
 				setPluginList(await response.json());
 			} else {
diff --git a/packages/web_ui/src/components/SavesList.tsx b/packages/web_ui/src/components/SavesList.tsx
index bc707dd3..fe8d60e4 100644
--- a/packages/web_ui/src/components/SavesList.tsx
+++ b/packages/web_ui/src/components/SavesList.tsx
@@ -268,7 +268,7 @@ export default function SavesList(props: { instance: InstanceState }) {
 						control.send(
 							new lib.InstanceDownloadSaveRequest(props.instance.id!, save.name)
 						).then(streamId => {
-							let url = new URL(window.webRoot, document.location.href);
+							let url = new URL(webRoot, document.location.href);
 							url.pathname += `api/stream/${streamId}`;
 							document.location.assign(url);
 						}).catch(
@@ -339,7 +339,7 @@ export default function SavesList(props: { instance: InstanceState }) {
 			instance_id: props.instance.id,
 		},
 		showUploadList: false,
-		action: `${window.webRoot}api/upload-save`,
+		action: `${webRoot}api/upload-save`,
 		onChange,
 	};
 
diff --git a/packages/web_ui/src/index.ts b/packages/web_ui/src/index.ts
index ff2e4fe8..54abb479 100644
--- a/packages/web_ui/src/index.ts
+++ b/packages/web_ui/src/index.ts
@@ -1,3 +1,4 @@
+/// <reference path="../global.d.ts" />
 export { default as bootstrap } from "./bootstrap";
 export { default as notify, notifyErrorHandler } from "./util/notify";
 export { default as BaseWebPlugin } from "./BaseWebPlugin";
diff --git a/packages/web_ui/src/model/item_metadata.ts b/packages/web_ui/src/model/item_metadata.ts
index 2651f60a..e5065717 100644
--- a/packages/web_ui/src/model/item_metadata.ts
+++ b/packages/web_ui/src/model/item_metadata.ts
@@ -22,7 +22,7 @@ export function useItemMetadata() {
 			) {
 				return;
 			}
-			let response = await fetch(`${window.staticRoot}static/${exportManifest.assets["item-metadata"]}`);
+			let response = await fetch(`${staticRoot}static/${exportManifest.assets["item-metadata"]}`);
 			if (response.ok) {
 				let data = await response.json();
 				itemMetadataCache = new Map(data);
@@ -31,7 +31,7 @@ export function useItemMetadata() {
 				for (let [name, meta] of itemMetadataCache) {
 					style.sheet!.insertRule(`\
 .item-${CSS.escape(name)} {
-	background-image: url("${window.staticRoot}static/${exportManifest.assets["item-spritesheet"]}");
+	background-image: url("${staticRoot}static/${exportManifest.assets["item-spritesheet"]}");
 	background-repeat: no-repeat;
 	background-position: -${meta.x}px -${meta.y}px;
 	height: ${meta.size}px;
diff --git a/packages/web_ui/src/model/locale.ts b/packages/web_ui/src/model/locale.ts
index 86f229cd..cce48be2 100644
--- a/packages/web_ui/src/model/locale.ts
+++ b/packages/web_ui/src/model/locale.ts
@@ -12,7 +12,7 @@ export function useLocale(): Map<string, string> {
 			if (!exportManifest?.assets?.["locale"]) {
 				return;
 			}
-			let response = await fetch(`${window.staticRoot}static/${exportManifest.assets["locale"]}`);
+			let response = await fetch(`${staticRoot}static/${exportManifest.assets["locale"]}`);
 			if (response.ok) {
 				let data = await response.json();
 				localeCache = new Map(data);