Refactor webpack; Add ErrorBoundary

This commit is contained in:
Vendicated
2022-08-31 20:47:07 +02:00
parent 98cb301df5
commit a7ccbcfca4
10 changed files with 233 additions and 150 deletions

View File

@ -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>
);
}
}

View File

@ -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 >
);
}
});