Started migration to TypeScript

package.json

@@ -21,6 +21,9 @@
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^13.5.0",
+		"@types/node": "^20.12.8",
+		"@types/react": "^18.3.1",
+		"@types/react-dom": "^18.3.0",
 		"anser": "^2.1.1",
 		"core-js": "^3.31.1",
 		"escape-carriage": "^1.3.1",
@@ -34,14 +37,20 @@
 		"react-svg": "^16.1.18",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-tabs": "^6.0.2",
+		"typescript": "^5.4.5",
 		"web-vitals": "^2.1.4"
 	},
 	"devDependencies": {
 		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+		"@types/webpack-env": "^1.18.4",
+		"@typescript-eslint/eslint-plugin": "^7.8.0",
+		"@typescript-eslint/parser": "^7.8.0",
 		"eslint-plugin-jsdoc": "^46.4.6",
+		"eslint-plugin-react": "^7.34.1",
 		"gh-pages": "^5.0.0"
 	},
 	"eslintConfig": {
+		"parser": "@typescript-eslint/parser",
 		"extends": [
 			"react-app",
 			"react-app/jest"
@@ -79,7 +88,6 @@
 				}
 			],
 			"jsdoc/no-undefined-types": "warn",
-			"jsdoc/require-param": "warn",
 			"jsdoc/check-tag-names": "warn",
 			"jsdoc/check-types": [
 				"warn",

src/App.tsx

@@ -1,21 +1,21 @@
 import styles from "./App.module.css";
 import { Taskbar } from "./components/taskbar/Taskbar.jsx";
-import { WindowsManagerProvider } from "./hooks/windows/windowsManagerContext.js";
+import { WindowsManagerProvider } from "./hooks/windows/windowsManagerContext";
 import { WindowsView } from "./components/windows/WindowsView.jsx";
-import { VirtualRootProvider } from "./hooks/virtual-drive/virtualRootContext.js";
+import { VirtualRootProvider } from "./hooks/virtual-drive/virtualRootContext";
 import { Desktop } from "./components/desktop/Desktop.jsx";
-import { SettingsManagerProvider } from "./hooks/settings/settingsManagerContext.js";
+import { SettingsManagerProvider } from "./hooks/settings/settingsManagerContext";
 import { ModalsView } from "./components/modals/ModalsView.jsx";
-import { useEffect } from "react";
+import React, { FC, useEffect } from "react";
-import { ZIndexManagerProvider } from "./hooks/z-index/zIndexManagerContext.js";
+import { ZIndexManagerProvider } from "./hooks/z-index/zIndexManagerContext";
 import { TrackingManager } from "./features/tracking/trackingManager.js";
-import { ModalsManagerProvider } from "./hooks/modals/modalsManagerContext.js";
+import { ModalsManagerProvider } from "./hooks/modals/modalsManagerContext";
 
 TrackingManager.initialize();
 
-function App() {
+const App: FC = () => {
 	useEffect(() => {
-		const onContextMenu = (event) => {
+		const onContextMenu = (event: Event) => {
 			event.preventDefault();
 		};
 
@@ -44,6 +44,6 @@ function App() {
 			</ZIndexManagerProvider>
 		</VirtualRootProvider>
 	);
-}
+};
 
-export default App;
+export default App;

src/components/apps/file-explorer/FileExplorer.jsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
-import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js";
+import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext";
 import styles from "./FileExplorer.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowUp, faCaretLeft, faCaretRight, faCircleInfo, faCog, faDesktop, faFileLines, faHouse, faImage, faPlus, faSearch, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
 import { useContextMenu } from "../../../hooks/modals/contextMenu.js";
 import { QuickAccessButton } from "./QuickAccessButton.jsx";
 import { useWindowedModal } from "../../../hooks/modals/windowedModal.js";

src/components/apps/media-viewer/MediaViewer.jsx

@@ -1,6 +1,6 @@
 
 import { useEffect } from "react";
-import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
 import styles from "./MediaViewer.module.css";
 import { APPS } from "../../../config/apps.config.js";
 import { IMAGE_FORMATS } from "../../../config/apps/mediaViewer.config.js";

src/components/apps/settings/tabs/AboutSettings.jsx

@@ -2,8 +2,8 @@ import { Button } from "../../../_utils/button/Button.jsx";
 import styles from "../Settings.module.css";
 import utilStyles from "../../../../styles/utils.module.css";
 import Vector2 from "../../../../features/math/vector2.js";
-import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext";
-import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext.js";
+import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext";
 import { NAME } from "../../../../config/branding.config.js";
 
 export function AboutSettings() {

src/components/apps/settings/tabs/AppOption.jsx

@@ -3,12 +3,12 @@ import AppsManager from "../../../../features/apps/appsManager.js";
 import { ImagePreview } from "../../file-explorer/directory-list/ImagePreview.jsx";
 import styles from "../Settings.module.css";
 import { faEllipsisVertical, faThumbTack } from "@fortawesome/free-solid-svg-icons";
-import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext";
 import { useContextMenu } from "../../../../hooks/modals/contextMenu.js";
 import { Actions } from "../../../actions/Actions.jsx";
 import { ClickAction } from "../../../actions/actions/ClickAction.jsx";
 import { removeFromArray } from "../../../../features/_utils/array.utils.js";
-import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext.js";
+import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext";
 import { SettingsManager } from "../../../../features/settings/settingsManager.js";
 
 export function AppOption({ app, pins, setPins }) {

src/components/apps/settings/tabs/AppearanceSettings.jsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
 import { SettingsManager } from "../../../../features/settings/settingsManager.js";
 import styles from "../Settings.module.css";
 import utilStyles from "../../../../styles/utils.module.css";
-import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext.js";
+import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext";
-import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext.js";
+import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext";
 import { WALLPAPERS_PATH } from "../../../../config/apps/settings.config.js";
 import { useWindowedModal } from "../../../../hooks/modals/windowedModal.js";
 import ModalsManager from "../../../../features/modals/modalsManager.js";

src/components/apps/settings/tabs/AppsSettings.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import styles from "../Settings.module.css";
 import AppsManager from "../../../../features/apps/appsManager.js";
-import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext.js";
+import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext";
 import { SettingsManager } from "../../../../features/settings/settingsManager.js";
 import ModalsManager from "../../../../features/modals/modalsManager.js";
 import { AppOption } from "./AppOption.jsx";

src/components/apps/settings/tabs/StorageSettings.jsx

@@ -3,7 +3,7 @@ import utilStyles from "../../../../styles/utils.module.css";
 import { round } from "../../../../features/math/round.js";
 import { ProgressBar } from "../../../_utils/progress-bar/ProgressBar.jsx";
 import { Button } from "../../../_utils/button/Button.jsx";
-import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext.js";
+import { useVirtualRoot } from "../../../../hooks/virtual-drive/virtualRootContext";
 import { StorageManager } from "../../../../features/storage/storageManager.js";
 
 export function StorageTab() {

src/components/apps/terminal/Terminal.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import styles from "./Terminal.module.css";
-import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js";
+import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext";
 import { clamp } from "../../../features/math/clamp.js";
 import { OutputLine } from "./OutputLine.jsx";
 import { InputLine } from "./InputLine.jsx";

src/components/apps/text-editor/TextEditor.jsx

@@ -7,7 +7,7 @@ import AppsManager from "../../../features/apps/appsManager.js";
 import { TITLE_SEPARATOR } from "../../../config/windows.config.js";
 import { MarkdownLink } from "./overrides/MarkdownLink.jsx";
 import { MarkdownImage } from "./overrides/MarkdownImage.jsx";
-import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { useWindowedModal } from "../../../hooks/modals/windowedModal.js";
 import { DEFAULT_FILE_SELECTOR_SIZE } from "../../../config/modals.config.js";

src/components/desktop/Desktop.jsx

@@ -1,13 +1,13 @@
 import { memo, useState } from "react";
 import { SettingsManager } from "../../features/settings/settingsManager.js";
-import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js";
+import { useSettingsManager } from "../../hooks/settings/settingsManagerContext";
 import styles from "./Desktop.module.css";
 import { useEffect } from "react";
-import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
 import { useContextMenu } from "../../hooks/modals/contextMenu.js";
 import { FALLBACK_ICON_SIZE, FALLBACK_WALLPAPER } from "../../config/desktop.config.js";
 import { reloadViewport } from "../../features/_utils/browser.utils.js";
-import { useVirtualRoot } from "../../hooks/virtual-drive/virtualRootContext.js";
+import { useVirtualRoot } from "../../hooks/virtual-drive/virtualRootContext";
 import { DirectoryList } from "../apps/file-explorer/directory-list/DirectoryList.jsx";
 import { APPS, APP_ICONS, APP_NAMES } from "../../config/apps.config.js";
 import Vector2 from "../../features/math/vector2.js";
@@ -21,8 +21,8 @@ import { Divider } from "../actions/actions/Divider.jsx";
 import { isValidInteger } from "../../features/_utils/number.utils.js";
 import { useWindowedModal } from "../../hooks/modals/windowedModal.js";
 import { Share } from "../modals/share/Share.jsx";
-import ModalsManager from "../../features/modals/modalsManager.js";
+import ModalsManager from "../../features/modals/modalsManager";
-import { useModalsManager } from "../../hooks/modals/modalsManagerContext.js";
+import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
 
 export const Desktop = memo(() => {
 	const settingsManager = useSettingsManager();

src/components/modals/ModalsView.jsx

@@ -1,8 +1,8 @@
 import { memo, useEffect, useRef, useState } from "react";
 import { ModalView } from "./ModalView.jsx";
 import styles from "./ModalsView.module.css";
-import { useModals } from "../../hooks/modals/modalsContext.js";
+import { useModals } from "../../hooks/modals/modalsContext";
-import { useModalsManager } from "../../hooks/modals/modalsManagerContext.js";
+import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
 
 export const ModalsView = memo(() => {
 	const ref = useRef(null);

src/components/modals/file-selector/FileSelector.jsx

@@ -7,7 +7,7 @@ import { WindowedModal } from "../_utils/WindowedModal.jsx";
 import styles from "./FileSelector.module.css";
 import { VirtualFile } from "../../../features/virtual-drive/file/virtualFile.js";
 import Modal from "../../../features/modals/modal.js";
-import { useModalsManager } from "../../../hooks/modals/modalsManagerContext.js";
+import { useModalsManager } from "../../../hooks/modals/modalsManagerContext";
 
 /**
  * @callback onFinish

src/components/taskbar/Taskbar.jsx

@@ -17,14 +17,14 @@ import { useContextMenu } from "../../hooks/modals/contextMenu.js";
 import { Actions } from "../actions/Actions.jsx";
 import { ClickAction } from "../actions/actions/ClickAction.jsx";
 import { APPS, APP_NAMES } from "../../config/apps.config.js";
-import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
 import { TASKBAR_HEIGHT } from "../../config/taskbar.config.js";
-import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js";
+import { useSettingsManager } from "../../hooks/settings/settingsManagerContext";
 import { SettingsManager } from "../../features/settings/settingsManager.js";
-import { useWindows } from "../../hooks/windows/windowsContext.js";
+import { useWindows } from "../../hooks/windows/windowsContext";
 import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
 import { useZIndex } from "../../hooks/z-index/zIndex.js";
-import { useModalsManager } from "../../hooks/modals/modalsManagerContext.js";
+import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
 
 export const Taskbar = memo(() => {
 	const ref = useRef(null);

src/components/taskbar/app-icon/AppIcon.jsx

@@ -2,7 +2,7 @@ import { memo } from "react";
 import App from "../../../features/apps/app.js";
 import styles from "./AppIcon.module.css";
 import { ReactSVG } from "react-svg";
-import { useSettingsManager } from "../../../hooks/settings/settingsManagerContext.js";
+import { useSettingsManager } from "../../../hooks/settings/settingsManagerContext";
 import { useContextMenu } from "../../../hooks/modals/contextMenu.js";
 import ModalsManager from "../../../features/modals/modalsManager.js";
 import { Actions } from "../../actions/Actions.jsx";

src/components/taskbar/menus/HomeMenu.jsx

@@ -2,12 +2,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./HomeMenu.module.css";
 import appStyles from "./AppList.module.css";
 import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons";
-import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
 import AppsManager from "../../../features/apps/appsManager.js";
 import { ReactSVG } from "react-svg";
 import { closeViewport } from "../../../features/_utils/browser.utils.js";
 import { useKeyboardListener } from "../../../hooks/_utils/keyboard.js";
-import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext.js";
+import { useVirtualRoot } from "../../../hooks/virtual-drive/virtualRootContext";
 import { useEffect, useState } from "react";
 import Vector2 from "../../../features/math/vector2.js";
 import utilStyles from "../../../styles/utils.module.css";

src/components/taskbar/menus/SearchMenu.jsx

@@ -1,7 +1,7 @@
 import styles from "./SearchMenu.module.css";
 import appStyles from "./AppList.module.css";
 import AppsManager from "../../../features/apps/appsManager.js";
-import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../../hooks/windows/windowsManagerContext";
 import { ReactSVG } from "react-svg";
 import { useEffect, useState } from "react";
 import { useKeyboardListener } from "../../../hooks/_utils/keyboard.js";

src/components/windows/WindowFallbackView.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useModalsManager } from "../../hooks/modals/modalsManagerContext.js";
+import { useModalsManager } from "../../hooks/modals/modalsManagerContext";
 import { useAlert } from "../../hooks/modals/alert.js";
 import AppsManager from "../../features/apps/appsManager.js";
 import Vector2 from "../../features/math/vector2.js";

src/components/windows/WindowView.jsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./WindowView.module.css";
 import { faExpand, faMinus, faWindowMaximize as fasWindowMaximize, faTimes, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { ReactSVG } from "react-svg";
-import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
 import Draggable from "react-draggable";
 import { memo, useEffect, useRef, useState } from "react";
 import App from "../../features/apps/app.js";
@@ -17,7 +17,7 @@ import { useScreenDimensions } from "../../hooks/_utils/screen.js";
 import { NAME } from "../../config/branding.config.js";
 import { setViewportIcon, setViewportTitle } from "../../features/_utils/browser.utils.js";
 import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
-import { useZIndex } from "../../hooks/z-index/zIndex.js";
+import { useZIndex } from "../../hooks/z-index/zIndex";
 import { useWindowedModal } from "../../hooks/modals/windowedModal.js";
 import { Divider } from "../actions/actions/Divider.jsx";
 import ModalsManager from "../../features/modals/modalsManager.js";

src/components/windows/WindowsView.jsx

@@ -1,9 +1,9 @@
-import { useWindows } from "../../hooks/windows/windowsContext.js";
+import { useWindows } from "../../hooks/windows/windowsContext";
-import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
+import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
 import { memo, useEffect, useState } from "react";
 import { WindowView } from "./WindowView.jsx";
-import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js";
+import { useSettingsManager } from "../../hooks/settings/settingsManagerContext";
-import { SettingsManager } from "../../features/settings/settingsManager.js";
+import { SettingsManager } from "../../features/settings/settingsManager";
 import { NAME, TAG_LINE } from "../../config/branding.config.js";
 import { getViewportParams, setViewportIcon, setViewportTitle } from "../../features/_utils/browser.utils.js";
 import { removeDuplicatesFromArray } from "../../features/_utils/array.utils.js";
@@ -17,6 +17,7 @@ export const WindowsView = memo(() => {
 	// Sort windows
 	useEffect(() => {
 		setSortedWindows([...windows].sort((windowA, windowB) =>
+			// @ts-ignore
 			windowA.lastInteraction - windowB.lastInteraction
 		));
 	}, [windows]);

src/features/apps/terminal/command.js

@@ -1,115 +0,0 @@
-import { VirtualFolder } from "../../virtual-drive/folder/virtualFolder.js";
-import { VirtualRoot } from "../../virtual-drive/root/virtualRoot.js";
-
-/**
- * @callback executeType
- * @param {string[]} args 
- * @param {object} options
- * @param {Function} options.promptOutput
- * @param {Function} options.pushHistory 
- * @param {VirtualRoot} options.virtualRoot 
- * @param {VirtualFolder} options.currentDirectory 
- * @param {Function} options.setCurrentDirectory 
- * @param {string} options.username 
- * @param {string} options.hostname 
- * @param {string} options.rawInputValue 
- * @param {string[]} options.options 
- * @param {Function} options.exit
- * @param {[]} options.inputs
- * @returns {string|{ blank: boolean }}
- */
-
-/**
- * @typedef {object} optionType
- * @property {string} long
- * @property {string} short
- * @property {boolean} isInput
- */
-
-export default class Command {
-	/** @type {string} */
-	name;
-
-	/** @type {optionType[]} */
-	options = [];
-
-	/** @type {executeType} */
-	execute = () => {};
-
-	/**
-	 * @param {string} name 
-	 * @returns {Command}
-	 */
-	setName(name) {
-		this.name = name;
-
-		if (!this.manual?.usage) {
-			if (!this.manual)
-				this.manual = {};
-
-			this.manual.usage = name;
-		}
-
-		return this;
-	}
-
-	/**
-	 * @param {executeType} execute 
-	 * @returns {Command}
-	 */
-	setExecute(execute) {
-		this.execute = execute;
-		return this;
-	}
-
-	/**
-	 * @param {boolean} value 
-	 * @returns {Command}
-	 */
-	setRequireArgs(value) {
-		this.requireArgs = value;
-		return this;
-	}
-
-	/**
-	 * @param {boolean} value 
-	 * @returns {Command}
-	 */
-	setRequireOptions(value) {
-		this.requireOptions = value;
-		return this;
-	}
-
-	/**
-	 * @param {{ purpose: string, usage: string, description: string, options: object }} manual 
-	 * @returns {Command}
-	 */
-	setManual({ purpose, usage, description, options }) {
-		this.manual = { purpose, usage, description, options };
-		return this;
-	}
-
-	/**
-	 * @param {optionType} option 
-	 * @returns {Command}
-	 */
-	addOption({ short, long, isInput }) {
-		this.options.push({ short, long, isInput });
-		return this;
-	}
-
-	/**
-	 * @param {string} key 
-	 * @returns {optionType}
-	 */
-	getOption(key) {
-		let matchingOption = null;
-
-		this.options.forEach((option) => {
-			if (option.short === key || option.long === key)
-				matchingOption = option;
-		});
-
-		return matchingOption;
-	}
-}

src/features/apps/terminal/command.ts

@@ -0,0 +1,88 @@
+import { VirtualFolder } from "../../virtual-drive/folder/virtualFolder.js";
+import { VirtualRoot } from "../../virtual-drive/root/virtualRoot.js";
+
+type Option = {
+	long: string,
+	short: string,
+	isInput: boolean
+};
+
+type Execute = (args: string[], options: {
+	promptOutput: void,
+	pushHistory: void,
+	virtualRoot: VirtualRoot,
+	currentDirectory: VirtualFolder,
+	setCurrentDirectory: void,
+	username: string,
+	hostname: string,
+	rawInputValue: string,
+	options: string[],
+	exit: void,
+	inputs: string[]
+}) => string | { blank: boolean } | void;
+
+type Manual = {
+	purpose?: string,
+	usage?: string,
+	description?: string,
+	options?: object
+};
+
+export default class Command {
+	name: string | undefined;
+	options: Option[] = [];
+	manual: Manual;
+	requireArgs: boolean;
+	requireOptions: boolean;
+
+	execute: Execute = () => {};
+
+	setName(name: string): Command {
+		this.name = name;
+
+		if (!this.manual?.usage) {
+			if (!this.manual)
+				this.manual = {};
+
+			this.manual.usage = name;
+		}
+
+		return this;
+	}
+
+	setExecute(execute: Execute): Command {
+		this.execute = execute;
+		return this;
+	}
+
+	setRequireArgs(value: boolean): Command {
+		this.requireArgs = value;
+		return this;
+	}
+
+	setRequireOptions(value: boolean): Command {
+		this.requireOptions = value;
+		return this;
+	}
+
+	setManual({ purpose, usage, description, options }: Manual): Command {
+		this.manual = { purpose, usage, description, options };
+		return this;
+	}
+
+	addOption({ short, long, isInput }: Option): Command {
+		this.options.push({ short, long, isInput });
+		return this;
+	}
+
+	getOption(key: string): Option {
+		let matchingOption = null;
+
+		this.options.forEach((option) => {
+			if (option.short === key || option.long === key)
+				matchingOption = option;
+		});
+
+		return matchingOption;
+	}
+}

src/features/apps/terminal/commands.js

@@ -1,4 +1,4 @@
-import Command from "./command.js";
+import Command from "./command";
 
 let commands = [];
 

src/features/apps/terminal/commands/cat.js

@@ -1,6 +1,6 @@
 import { VirtualFile } from "../../../virtual-drive/file/virtualFile.js";
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const cat = new Command()
 	.setRequireArgs(true)

src/features/apps/terminal/commands/cd.js

@@ -1,5 +1,5 @@
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const cd = new Command()
 	.setManual({

src/features/apps/terminal/commands/clear.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const clear = new Command()
 	.setManual({

src/features/apps/terminal/commands/compgen.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 import CommandsManager from "../commands.js";
 
 export const compgen = new Command()

src/features/apps/terminal/commands/cowsay.js

@@ -1,5 +1,5 @@
 import { MAX_WIDTH } from "../../../../config/apps/terminal.config.js";
-import Command from "../command.js";
+import Command from "../command";
 
 const COW = `
         \\   ^__^

src/features/apps/terminal/commands/dir.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const dir = new Command()
 	.setManual({

src/features/apps/terminal/commands/echo.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const echo = new Command()
 	.setManual({

src/features/apps/terminal/commands/exit.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const exit = new Command()
 	.setManual({

src/features/apps/terminal/commands/fortune.js

@@ -1,5 +1,5 @@
 import { randomFromArray } from "../../../_utils/array.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 /**
  * Source: https://github.com/shlomif/fortune-mod/blob/master/fortune-mod/datfiles/fortunes

src/features/apps/terminal/commands/help.js

@@ -1,6 +1,6 @@
 import { ANSI } from "../../../../config/apps/terminal.config.js";
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 import CommandsManager from "../commands.js";
 
 export const help = new Command()

src/features/apps/terminal/commands/hostname.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const hostname = new Command()
 	.setManual({

src/features/apps/terminal/commands/lolcat.js

@@ -1,6 +1,6 @@
 import { ANSI } from "../../../../config/apps/terminal.config.js";
 import { removeAnsi } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 const COLUMN_WIDTH = 5;
 const ROW_OFFSET = 2;

src/features/apps/terminal/commands/ls.js

@@ -1,6 +1,6 @@
 import { ANSI } from "../../../../config/apps/terminal.config.js";
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const ls = new Command()
 	.setManual({

src/features/apps/terminal/commands/make.js

@@ -1,5 +1,5 @@
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const make = new Command()
 	.setRequireArgs(true)

src/features/apps/terminal/commands/man.js

@@ -1,6 +1,6 @@
 import { ANSI } from "../../../../config/apps/terminal.config.js";
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 import CommandsManager from "../commands.js";
 
 const MARGIN = 5;

src/features/apps/terminal/commands/mkdir.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const mkdir = new Command()
 	.setManual({

src/features/apps/terminal/commands/neofetch.js

@@ -1,10 +1,10 @@
 import { APPS } from "../../../../config/apps.config.js";
 import { ANSI } from "../../../../config/apps/terminal.config.js";
 import { ANSI_ASCII_LOGO, ANSI_LOGO_COLOR, NAME } from "../../../../config/branding.config.js";
-import { START_DATE } from "../../../../index.js";
+import { START_DATE } from "../../../../index";
 import { formatRelativeTime } from "../../../_utils/date.utils.js";
 import AppsManager from "../../appsManager.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const neofetch = new Command()
 	.setManual({

src/features/apps/terminal/commands/pwd.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const pwd = new Command()
 	.setManual({

src/features/apps/terminal/commands/reboot.js

@@ -1,5 +1,5 @@
 import { reloadViewport } from "../../../_utils/browser.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const reboot = new Command()
 	.setManual({

src/features/apps/terminal/commands/reload.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 import CommandsManager from "../commands.js";
 
 export const reload = new Command()

src/features/apps/terminal/commands/rev.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const rev = new Command()
 	.setManual({

src/features/apps/terminal/commands/rm.js

@@ -1,6 +1,6 @@
 import { VirtualFile } from "../../../virtual-drive/file/virtualFile.js";
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const rm = new Command()
 	.setRequireArgs(true)

src/features/apps/terminal/commands/rmdir.js

@@ -1,5 +1,5 @@
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const rmdir = new Command()
 	.setRequireArgs(true)

src/features/apps/terminal/commands/sl.js

@@ -1,5 +1,5 @@
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 import Stream from "../stream.js";
 
 const ANIMATION_SPEED = 1.25;

src/features/apps/terminal/commands/touch.js

@@ -1,11 +1,11 @@
 import { VirtualFile } from "../../../virtual-drive/file/virtualFile.js";
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 export const touch = new Command()
 	.setRequireArgs(true)
 	.setManual({
-		purpose: "Changes file timestamps",
+		purpose: "Change file timestamps",
 		usage: "touch [options] files",
 		description: "Update the access and modification times of each FILE to the current time.\n\n"
 			+ "A file argument that does not exist is created empty."

src/features/apps/terminal/commands/uptime.js

@@ -1,6 +1,6 @@
-import { START_DATE } from "../../../../index.js";
+import { START_DATE } from "../../../../index";
 import { formatRelativeTime } from "../../../_utils/date.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 
 
 export const uptime = new Command()

src/features/apps/terminal/commands/whatis.js

@@ -1,6 +1,6 @@
 import { ANSI } from "../../../../config/apps/terminal.config.js";
 import { formatError } from "../_utils/terminal.utils.js";
-import Command from "../command.js";
+import Command from "../command";
 import CommandsManager from "../commands.js";
 
 export const whatis = new Command()

src/features/apps/terminal/commands/whoami.js

@@ -1,4 +1,4 @@
-import Command from "../command.js";
+import Command from "../command";
 
 export const whoami = new Command()
 	.setManual({

src/globals.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+	const classes: { [key: string]: string };
+	export default classes;
+}

src/hooks/modals/contextMenu.js

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import Vector2 from "../../features/math/vector2.js";
 import Modal from "../../features/modals/modal.js";
 import { STYLES } from "../../components/actions/Actions.jsx";
-import { useModalsManager } from "./modalsManagerContext.js";
+import { useModalsManager } from "./modalsManagerContext";
 
 /**
  * @callback onContextMenuType

src/hooks/modals/modalsContext.js

@@ -1,33 +0,0 @@
-import { createContext, useCallback, useContext, useState } from "react";
-import Modal from "../../features/modals/modal.js";
-
-const ModalsContext = createContext();
-
-/**
- * @param props
- * @param props.children
- * @param props.modalsManager
- * @returns {import("react").Provider<any>}
- */
-export function ModalsProvider({ children, modalsManager }) {
-	const [modals, setModals] = useState([]);
-
-	const updateModals = useCallback((updatedModals) => {
-		setModals(Object.values(updatedModals));
-	}, []);
-
-	modalsManager.setUpdateModals(updateModals);
-
-	return (
-		<ModalsContext.Provider value={modals}>
-			{children}
-		</ModalsContext.Provider>
-	);
-}
-
-/**
- * @returns {Modal[]}
- */
-export function useModals() {
-	return useContext(ModalsContext);
-}

src/hooks/modals/modalsContext.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, FC, ReactNode, useCallback, useContext, useState } from "react";
+import Modal from "../../features/modals/modal.js";
+import ModalsManager from "../../features/modals/modalsManager.js";
+
+type ModalsState = Modal[] | undefined;
+
+const ModalsContext = createContext<ModalsState>(undefined);
+
+export const ModalsProvider: FC<{ children: ReactNode, modalsManager: ModalsManager }> = ({ children, modalsManager }) => {
+	const [modals, setModals] = useState<ModalsState>([]);
+
+	const updateModals = useCallback((updatedModals: Record<string, Modal>) => {
+		setModals(Object.values(updatedModals));
+	}, []);
+
+	modalsManager.setUpdateModals(updateModals);
+
+	return (
+		<ModalsContext.Provider value={modals}>
+			{children}
+		</ModalsContext.Provider>
+	);
+};
+
+export function useModals(): ModalsState {
+	return useContext(ModalsContext);
+}

src/hooks/modals/modalsManagerContext.js

@@ -1,29 +0,0 @@
-import { createContext, useContext } from "react";
-import ModalsManager from "../../features/modals/modalsManager.js";
-import { ModalsProvider } from "./modalsContext.js";
-
-const modalsManagerContext = createContext();
-
-/**
- * @param {object} props
- * @param {import("react").ElementType} props.children
- * @returns {import("react").Provider<any>}
- */
-export function ModalsManagerProvider({ children }) {
-	const modalsManager = new ModalsManager();
-
-	return (
-		<modalsManagerContext.Provider value={modalsManager}>
-			<ModalsProvider modalsManager={modalsManager}>
-				{children}
-			</ModalsProvider>
-		</modalsManagerContext.Provider>
-	);
-}
-
-/**
- * @returns {ModalsManager}
- */
-export function useModalsManager() {
-	return useContext(modalsManagerContext);
-}

src/hooks/modals/modalsManagerContext.tsx

@@ -0,0 +1,23 @@
+import React, { createContext, FC, ReactNode, useContext } from "react";
+import ModalsManager from "../../features/modals/modalsManager.js";
+import { ModalsProvider } from "./modalsContext";
+
+type ModalsManagerState = ModalsManager | undefined;
+
+const modalsManagerContext = createContext<ModalsManagerState>(undefined);
+
+export const ModalsManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
+	const modalsManager = new ModalsManager();
+
+	return (
+		<modalsManagerContext.Provider value={modalsManager}>
+			<ModalsProvider modalsManager={modalsManager}>
+				{children}
+			</ModalsProvider>
+		</modalsManagerContext.Provider>
+	);
+};
+
+export function useModalsManager(): ModalsManagerState {
+	return useContext(modalsManagerContext);
+}

src/hooks/modals/windowedModal.js

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import Modal from "../../features/modals/modal.js";
 import Vector2 from "../../features/math/vector2.js";
 import { DEFAULT_DIALOG_SIZE } from "../../config/modals.config.js";
-import { useModalsManager } from "./modalsManagerContext.js";
+import { useModalsManager } from "./modalsManagerContext";
 
 /**
  * @callback windowedModalType

src/hooks/settings/settingsManagerContext.js

@@ -1,29 +0,0 @@
-import { createContext, useContext } from "react";
-import { SettingsManager } from "../../features/settings/settingsManager.js";
-import { useVirtualRoot } from "../virtual-drive/virtualRootContext.js";
-
-const SettingsContext = createContext();
-
-/**
- * Note: needs to be inside a virtual root provider
- * @param props
- * @param props.children
- * @returns {import("react").Provider<SettingsManager>}
- */
-export function SettingsManagerProvider({ children }) {
-	const virtualRoot = useVirtualRoot();
-	const settingsManager = new SettingsManager(virtualRoot);
-
-	return (
-		<SettingsContext.Provider value={settingsManager}>
-			{children}
-		</SettingsContext.Provider>
-	);
-}
-
-/**
- * @returns {SettingsManager}
- */
-export function useSettingsManager() {
-	return useContext(SettingsContext);
-}

src/hooks/settings/settingsManagerContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, FC, ReactNode, useContext } from "react";
+import { SettingsManager } from "../../features/settings/settingsManager.js";
+import { useVirtualRoot } from "../virtual-drive/virtualRootContext";
+import { VirtualRoot } from "../../features/virtual-drive/root/virtualRoot.js";
+
+type SettingsManagerState = SettingsManager | undefined;
+
+const SettingsManagerContext = createContext<SettingsManagerState>(undefined);
+
+/**
+ * Note: needs to be inside a virtual root provider
+ */
+export const SettingsManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
+	const virtualRoot = useVirtualRoot();
+	const settingsManager = new SettingsManager(virtualRoot as VirtualRoot);
+
+	return (
+		<SettingsManagerContext.Provider value={settingsManager}>
+			{children}
+		</SettingsManagerContext.Provider>
+	);
+};
+
+export function useSettingsManager(): SettingsManagerState {
+	return useContext(SettingsManagerContext);
+}

src/hooks/virtual-drive/VirtualRootContext.js

@@ -1,26 +0,0 @@
-import { createContext, useContext } from "react";
-import { VirtualRoot } from "../../features/virtual-drive/root/virtualRoot.js";
-
-const VirtualRootContext = createContext();
-
-/**
- * @param props
- * @param props.children
- * @returns {import("react").Provider<VirtualRoot>}
- */
-export function VirtualRootProvider({ children }) {
-	const virtualRoot = new VirtualRoot().init();
-
-	return (
-		<VirtualRootContext.Provider value={virtualRoot}>
-			{children}
-		</VirtualRootContext.Provider>
-	);
-}
-
-/**
- * @returns {VirtualRoot}
- */
-export function useVirtualRoot() {
-	return useContext(VirtualRootContext);
-}

src/hooks/virtual-drive/virtualRootContext.tsx

@@ -0,0 +1,19 @@
+import React, { createContext, useContext, FC, ReactNode } from "react";
+import { VirtualRoot } from "../../features/virtual-drive/root/virtualRoot.js";
+
+const VirtualRootContext = createContext<VirtualRoot | undefined>(undefined);
+
+export const VirtualRootProvider: FC<{ children: ReactNode }> = ({ children }) =>  {
+	const virtualRoot = new VirtualRoot().init();
+
+	return <VirtualRootContext.Provider value={virtualRoot}>
+		{children}
+	</VirtualRootContext.Provider>;
+};
+
+/**
+ * @returns {VirtualRoot}
+ */
+export function useVirtualRoot() {
+	return useContext(VirtualRootContext);
+}

src/hooks/windows/windowsContext.js

@@ -1,32 +0,0 @@
-import { createContext, useCallback, useContext, useState } from "react";
-
-const WindowsContext = createContext();
-
-/**
- * @param props
- * @param props.children
- * @param props.windowsManager
- * @returns {import("react").Provider<any>}
- */
-export function WindowsProvider({ children, windowsManager }) {
-	const [windows, setWindows] = useState([]);
-
-	const updateWindows = useCallback((updatedWindows) => {
-		setWindows(Object.values(updatedWindows));
-	}, []);
-
-	windowsManager.setUpdateWindows(updateWindows);
-
-	return (
-		<WindowsContext.Provider value={windows}>
-			{children}
-		</WindowsContext.Provider>
-	);
-}
-
-/**
- * @returns {object[]}
- */
-export function useWindows() {
-	return useContext(WindowsContext);
-}

src/hooks/windows/windowsContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, FC, ReactNode, useCallback, useContext, useState } from "react";
+import WindowsManager from "../../features/windows/windowsManager";
+
+type WindowsState = object[] | undefined;
+
+const WindowsContext = createContext<WindowsState>(undefined);
+
+export const WindowsProvider: FC<{ children: ReactNode, windowsManager: WindowsManager }> = ({ children, windowsManager }) => {
+	const [windows, setWindows] = useState<WindowsState>([]);
+
+	const updateWindows = useCallback((updatedWindows: Record<string, Window>) => {
+		setWindows(Object.values(updatedWindows));
+	}, []);
+
+	windowsManager.setUpdateWindows(updateWindows);
+
+	return (
+		<WindowsContext.Provider value={windows}>
+			{children}
+		</WindowsContext.Provider>
+	);
+};
+
+export function useWindows(): WindowsState {
+	return useContext(WindowsContext);
+}

src/hooks/windows/windowsManagerContext.js

@@ -1,29 +0,0 @@
-import { createContext, useContext } from "react";
-import WindowsManager from "../../features/windows/windowsManager.js";
-import { WindowsProvider } from "./windowsContext.js";
-
-const WindowsManagerContext = createContext();
-
-/**
- * @param {object} props
- * @param {import("react").ElementType} props.children
- * @returns {import("react").Provider<any>}
- */
-export function WindowsManagerProvider({ children }) {
-	const windowsManager = new WindowsManager();
-
-	return (
-		<WindowsManagerContext.Provider value={windowsManager}>
-			<WindowsProvider windowsManager={windowsManager}>
-				{children}
-			</WindowsProvider>
-		</WindowsManagerContext.Provider>
-	);
-}
-
-/**
- * @returns {WindowsManager}
- */
-export function useWindowsManager() {
-	return useContext(WindowsManagerContext);
-}

src/hooks/windows/windowsManagerContext.tsx

@@ -0,0 +1,23 @@
+import React, { createContext, FC, ReactNode, useContext } from "react";
+import WindowsManager from "../../features/windows/windowsManager.js";
+import { WindowsProvider } from "./windowsContext";
+
+type WindowsManagerState = WindowsManager | undefined;
+
+const WindowsManagerContext = createContext<WindowsManagerState>(undefined);
+
+export const WindowsManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
+	const windowsManager = new WindowsManager();
+
+	return (
+		<WindowsManagerContext.Provider value={windowsManager}>
+			<WindowsProvider windowsManager={windowsManager}>
+				{children}
+			</WindowsProvider>
+		</WindowsManagerContext.Provider>
+	);
+};
+
+export function useWindowsManager(): WindowsManagerState {
+	return useContext(WindowsManagerContext);
+}

src/hooks/z-index/zIndex.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useZIndexManager } from "./zIndexManagerContext.js";
+import { useZIndexManager } from "./zIndexManagerContext";
 import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
 
 export function useZIndex({ groupIndex, index }) {

src/hooks/z-index/zIndexManagerContext.js

@@ -1,24 +0,0 @@
-import { createContext, useContext } from "react";
-import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
-
-const ZIndexManagerContext = createContext();
-
-/**
- * @param {object} props
- * @param {import("react").ElementType} props.children
- * @returns {import("react").Provider<any>}
- */
-export function ZIndexManagerProvider({ children }) {
-	const zIndexManager = new ZIndexManager();
-
-	return <ZIndexManagerContext.Provider value={zIndexManager}>
-		{children}
-	</ZIndexManagerContext.Provider>;
-}
-
-/**
- * @returns {ZIndexManager}
- */
-export function useZIndexManager() {
-	return useContext(ZIndexManagerContext);
-}

src/hooks/z-index/zIndexManagerContext.tsx

@@ -0,0 +1,18 @@
+import React, { createContext, FC, ReactNode, useContext } from "react";
+import { ZIndexManager } from "../../features/z-index/zIndexManager.js";
+
+type ZIndexManagerState = ZIndexManager | undefined;
+
+const ZIndexManagerContext = createContext<ZIndexManagerState>(undefined);
+
+export const ZIndexManagerProvider: FC<{ children: ReactNode }> = ({ children }) => {
+	const zIndexManager = new ZIndexManager();
+
+	return <ZIndexManagerContext.Provider value={zIndexManager}>
+		{children}
+	</ZIndexManagerContext.Provider>;
+};
+
+export function useZIndexManager(): ZIndexManagerState  {
+	return useContext(ZIndexManagerContext);
+}

src/index.tsx

@@ -8,12 +8,10 @@ import { ASCII_LOGO, NAME } from "./config/branding.config.js";
 export const START_DATE = new Date();
 
 // Render app
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
-root.render(
+root.render(<React.StrictMode>
-	<React.StrictMode>
+	<App/>
-		<App/>
+</React.StrictMode>);
-	</React.StrictMode>
-);
 
 // Log welcome message
 const asciiLogoWidth = ASCII_LOGO.split("\n")[1].length;

tsconfig.json

@@ -0,0 +1,118 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig to read more about this file */
+		
+		/* Projects */
+		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+		
+		/* Language and Environment */
+		"target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+		// "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		"jsx": "react", /* Specify what JSX code is generated. */
+		// "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+		// "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+		// "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+		
+		/* Modules */
+		"module": "commonjs", /* Specify what module code is generated. */
+		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
+		"moduleResolution": "Node", /* Specify how TypeScript looks up a file from a given module specifier. */
+		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+		"types": ["webpack-env"],                                      /* Specify type package names to be included without being referenced in a source file. */
+		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+		// "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+		// "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+		// "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+		// "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+		// "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+		"resolveJsonModule": true,                        /* Enable importing .json files. */
+		// "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+		// "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+		
+		/* JavaScript Support */
+		"allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+		"checkJs": false, /* Enable error reporting in type-checked JavaScript files. */
+		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+		
+		/* Emit */
+		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+		// "removeComments": true,                           /* Disable emitting comments. */
+		"noEmit": true,                                   /* Disable emitting files from a compilation. */
+		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+		// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
+		// "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+		// "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+		// "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+		
+		/* Interop Constraints */
+		// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+		// "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+		"allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+		"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+		"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
+		
+		/* Type Checking */
+		"strict": false, /* Enable all strict type-checking options. */
+		// "noImplicitAny": false,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": false,                         /* When type checking, take into account 'null' and 'undefined'. */
+		// "strictFunctionTypes": false,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+		// "strictPropertyInitialization": false,             /* Check for class properties that are declared but not set in the constructor. */
+		// "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+		// "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+		// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+		// "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+		// "exactOptionalPropertyTypes": false,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+		
+		/* Completeness */
+		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+		// "skipLibCheck": true /* Skip type checking all .d.ts files. */
+	},
+	"include": [
+		"src/**/*"
+	],
+	"exclude": [
+		"./node_modules",
+		"./build",
+		"./dist",
+		"./.vscode"
+	]
+}