Refactor webpack; Add ErrorBoundary

2 files changed, 89 insertions, 34 deletions

diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..ae52838
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,71 @@
+import Logger from "../utils/logger";
+import { Card, React } from "../webpack/common";
+
+interface Props {
+    fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; }>>;
+    onError?(error: Error, errorInfo: React.ErrorInfo): void;
+}
+
+const color = "#e78284";
+
+const logger = new Logger("React ErrorBoundary", color);
+
+const NO_ERROR = {};
+
+export default class ErrorBoundary extends React.Component<React.PropsWithChildren<Props>> {
+    static wrap<T = any>(Component: React.ComponentType<T>): (props: T) => React.ReactElement {
+        return (props) => (
+            <ErrorBoundary>
+                <Component {...props} />
+            </ErrorBoundary>
+        );
+    }
+
+    state = {
+        error: NO_ERROR as any,
+        message: ""
+    };
+
+    static getDerivedStateFromError(error: any) {
+
+        return {
+            error: error?.stack?.replace(/https:\/\/\S+\/assets\//g, "") || error?.message || String(error)
+        };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        this.props.onError?.(error, errorInfo);
+        logger.error("A component threw an Error\n", error);
+        logger.error("Component Stack", errorInfo.componentStack);
+    }
+
+    render() {
+        if (this.state.error === NO_ERROR) return this.props.children;
+
+        if (this.props.fallback)
+            return <this.props.fallback
+                children={this.props.children}
+                error={this.state.error}
+            />;
+
+        return (
+            <Card style={{
+                overflow: "hidden",
+                padding: "2em",
+                backgroundColor: color + "30",
+                borderColor: color,
+                color: "var(--text-normal)"
+            }}>
+                <h1>Oh no!</h1>
+                <p>
+                    An error occurred while rendering this Component. More info can be found below
+                    and in your console.
+                </p>
+                <code>
+                    <pre>{this.state.error}
+                    </pre>
+                </code>
+            </Card>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 4499c9f..19f6dd2 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -1,66 +1,50 @@
-import { lazy, LazyComponent, useAwaiter } from "../utils/misc";
-import { findByDisplayName, Forms } from '../webpack';
+import { useAwaiter } from "../utils/misc";
 import Plugins from 'plugins';
 import { useSettings } from "../api/settings";
-import { findByProps } from '../webpack/index';
 import IpcEvents from "../utils/IpcEvents";
 
-// Lazy spam because this is ran before React is a thing. Todo: Fix that and clean this up lmao
+import { Button, ButtonProps, Flex, Switch, Forms } from "../webpack/common";
+import ErrorBoundary from "./ErrorBoundary";
 
-const SwitchItem = LazyComponent<React.PropsWithChildren<{
-    value: boolean;
-    onChange: (v: boolean) => void;
-    note?: string;
-    tooltipNote?: string;
-    disabled?: boolean;
-}>>(() => findByDisplayName("SwitchItem").default);
-
-const getButton = lazy(() => findByProps("ButtonLooks", "default"));
-const Button = LazyComponent(() => getButton().default);
-const getFlex = lazy(() => findByDisplayName("Flex"));
-const Flex = LazyComponent(() => getFlex().default);
-const FlexChild = LazyComponent(() => getFlex().default.Child);
-const getMargins = lazy(() => findByProps("marginTop8", "marginBottom8"));
-
-export default function Settings(props) {
-    const settingsDir = useAwaiter(() => VencordNative.ipc.invoke(IpcEvents.GET_SETTINGS_DIR), "Loading...");
+export default ErrorBoundary.wrap(function Settings(props) {
+    const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
     const settings = useSettings();
 
     return (
         <Forms.FormSection tag="h1" title="Vencord">
             <Forms.FormText>SettingsDir: {settingsDir}</Forms.FormText>
-            <Flex className={getMargins().marginTop8 + " " + getMargins().marginBottom8}>
-                <FlexChild>
+            <Flex style={{ marginTop: "8px", marginBottom: "8px" }}>
+                <Flex.Child>
                     <Button
                         onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir)}
-                        size={getButton().ButtonSizes.SMALL}
-                        disabled={settingsDir === "Loading..."}
+                        size={ButtonProps.ButtonSizes.SMALL}
+                        disabled={settingsDirPending}
                     >
                         Launch Directory
                     </Button>
-                </FlexChild>
-                <FlexChild>
+                </Flex.Child>
+                <Flex.Child>
                     <Button
                         onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_PATH, settingsDir + "/quickCss.css")}
-                        size={getButton().ButtonSizes.SMALL}
+                        size={ButtonProps.ButtonSizes.SMALL}
                         disabled={settingsDir === "Loading..."}
                     >
                         Open QuickCSS File
                     </Button>
-                </FlexChild>
+                </Flex.Child>
             </Flex>
             <Forms.FormTitle tag="h5">Settings</Forms.FormTitle>
-            <SwitchItem
+            <Switch
                 value={settings.unsafeRequire}
                 onChange={v => settings.unsafeRequire = v}
                 note="Enables VencordNative.require. Useful for testing, very bad for security. Leave this off unless you need it."
             >
                 Enable Ensafe Require
-            </SwitchItem>
+            </Switch>
             <Forms.FormDivider />
             <Forms.FormTitle tag="h5">Plugins</Forms.FormTitle>
             {Plugins.map(p => (
-                <SwitchItem
+                <Switch
                     disabled={p.required === true}
                     key={p.name}
                     value={settings.plugins[p.name].enabled}
@@ -76,9 +60,9 @@ export default function Settings(props) {
                     tooltipNote={p.required ? "This plugin is required. Thus you cannot disable it." : undefined}
                 >
                     {p.name}
-                </SwitchItem>
+                </Switch>
             ))
             }
         </Forms.FormSection >
     );
-}
\ No newline at end of file
+});
\ No newline at end of file