commit 888273836a1f001dc00284d26a5b9dc032597a55 · notnite.com/moonlight

+4 -5

packages/core-extensions/src/common/index.ts

···

       2
       2
        
       

     

       3
       3
        
       export const webpackModules: ExtensionWebExports["webpackModules"] = {

     

       4
       4
        
         stores: {

     

       5
       5
       -
           dependencies: [

     

       6
       6
       -
             {

     

       7
       7
       -
               id: "discord/packages/flux"

     

       8
       8
       -
             }

     

       9
       9
       -
           ]

     

       5
       5
       +
           dependencies: [{ id: "discord/packages/flux" }]

     

       6
       6
       +
         },

     

       7
       7
       +
         ErrorBoundary: {

     

       8
       8
       +
           dependencies: [{ id: "react" }]

     

       10
       9
        
         }

     

       11
       10
        
       };

+27

packages/core-extensions/src/common/style.css

···

       1
       1
       +
       .moonlight-error-boundary {

     

       2
       2
       +
         margin: 0 0 15px;

     

       3
       3
       +
         padding: 10px;

     

       4
       4
       +
         border-radius: 5px;

     

       5
       5
       +
         font-size: 1rem;

     

       6
       6
       +
         font-weight: 300;

     

       7
       7
       +
         line-height: 22px;

     

       8
       8
       +
         color: var(--text-normal, white);

     

       9
       9
       +
         background: hsl(var(--red-400-hsl) / 0.1);

     

       10
       10
       +
         border: 2px solid hsl(var(--red-400-hsl) / 0.5);

     

       11
       11
       +
       

     

       12
       12
       +
         .theme-light & {

     

       13
       13
       +
           color: var(--text-normal, black) !important;

     

       14
       14
       +
         }

     

       15
       15
       +
       

     

       16
       16
       +
         & > h3 {

     

       17
       17
       +
           margin-bottom: 0.25rem;

     

       18
       18
       +
         }

     

       19
       19
       +
       

     

       20
       20
       +
         & > .hljs {

     

       21
       21
       +
           background: var(--background-secondary);

     

       22
       22
       +
           border: 1px solid var(--background-tertiary);

     

       23
       23
       +
           white-space: pre-wrap;

     

       24
       24
       +
           font-family: var(--font-code);

     

       25
       25
       +
           user-select: text;

     

       26
       26
       +
         }

     

       27
       27
       +
       }

+48

packages/core-extensions/src/common/webpackModules/ErrorBoundary.tsx

···

       1
       1
       +
       import React from "@moonlight-mod/wp/react";

     

       2
       2
       +
       import { ErrorBoundaryProps, ErrorBoundaryState } from "@moonlight-mod/types/coreExtensions/common";

     

       3
       3
       +
       

     

       4
       4
       +
       const logger = moonlight.getLogger("ErrorBoundary");

     

       5
       5
       +
       

     

       6
       6
       +
       class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {

     

       7
       7
       +
         constructor(props: ErrorBoundaryProps) {

     

       8
       8
       +
           super(props);

     

       9
       9
       +
           this.state = {

     

       10
       10
       +
             errored: false,

     

       11
       11
       +
             error: undefined,

     

       12
       12
       +
             componentStack: undefined

     

       13
       13
       +
           };

     

       14
       14
       +
         }

     

       15
       15
       +
       

     

       16
       16
       +
         static getDerivedStateFromError(error: Error) {

     

       17
       17
       +
           return {

     

       18
       18
       +
             errored: true,

     

       19
       19
       +
             error

     

       20
       20
       +
           };

     

       21
       21
       +
         }

     

       22
       22
       +
       

     

       23
       23
       +
         componentDidCatch(error: Error, { componentStack }: { componentStack: string }) {

     

       24
       24
       +
           logger.error(`${error}\n\nComponent stack:\n${componentStack}`);

     

       25
       25
       +
           this.setState({ error, componentStack });

     

       26
       26
       +
         }

     

       27
       27
       +
       

     

       28
       28
       +
         render() {

     

       29
       29
       +
           const { noop, fallback: FallbackComponent, children, message } = this.props;

     

       30
       30
       +
           const { errored, error, componentStack } = this.state;

     

       31
       31
       +
       

     

       32
       32
       +
           if (noop) return null;

     

       33
       33
       +
           if (FallbackComponent) return <FallbackComponent children={children} {...this.state} />;

     

       34
       34
       +
       

     

       35
       35
       +
           if (errored) {

     

       36
       36
       +
             return (

     

       37
       37
       +
               <div className={`moonlight-error-boundary`}>

     

       38
       38
       +
                 <h3>{message ?? "An error occurred rendering this component:"}</h3>

     

       39
       39
       +
                 <code className="hljs">{`${error}\n\nComponent stack:\n${componentStack}`}</code>

     

       40
       40
       +
               </div>

     

       41
       41
       +
             );

     

       42
       42
       +
           }

     

       43
       43
       +
       

     

       44
       44
       +
           return children;

     

       45
       45
       +
         }

     

       46
       46
       +
       }

     

       47
       47
       +
       

     

       48
       48
       +
       export default ErrorBoundary;

+1

packages/types/src/coreExtensions.ts

···

       7
       7
        
       export * as AppPanels from "./coreExtensions/appPanels";

     

       8
       8
        
       export * as Commands from "./coreExtensions/commands";

     

       9
       9
        
       export * as ComponentEditor from "./coreExtensions/componentEditor";

     

       10
       10
       +
       export * as Common from "./coreExtensions/common";

+11

packages/types/src/coreExtensions/common.ts

···

       1
       1
       +
       export type ErrorBoundaryProps = React.PropsWithChildren<{

     

       2
       2
       +
         noop?: boolean;

     

       3
       3
       +
         fallback?: React.FC<any>;

     

       4
       4
       +
         message?: string;

     

       5
       5
       +
       }>;

     

       6
       6
       +
       

     

       7
       7
       +
       export type ErrorBoundaryState = {

     

       8
       8
       +
         errored: boolean;

     

       9
       9
       +
         error?: Error;

     

       10
       10
       +
         componentStack?: string;

     

       11
       11
       +
       };

+1

packages/types/src/import.d.ts

···

       10
       10
        
         export default commands;

     

       11
       11
        
       }

     

       12
       12
        
       

     

       13
       13
       +
       declare module "@moonlight-mod/wp/common_ErrorBoundary";

     

       13
       14
        
       declare module "@moonlight-mod/wp/common_stores";

     

       14
       15
        
       

     

       15
       16
        
       declare module "@moonlight-mod/wp/componentEditor_dmList" {