apply prettier config update

src/core/align.ts

@@ -19,7 +19,7 @@ export interface IAlignment {
 export function alignContextElement(
     element: HTMLElement,
     relativeTo: HTMLElement | { x: number; y: number },
-    alignment: IAlignment
+    alignment: IAlignment,
 ): void {
     function getOffset(alignment: string, name: string) {
         const added = name + ' +';
@@ -76,10 +76,7 @@ export function alignContextElement(
             const offset = getOffset(alignment.centerY, 'bottom');
             element.style.top = rt + (rh - eh / 2) + offset + 'px';
         } else {
-            throw new Error(
+            throw new Error('illegal centerY alignment: ' + JSON.stringify(alignment.centerY));
-                'illegal centerY alignment: ' +
-                    JSON.stringify(alignment.centerY)
-            );
         }
     } else if (alignment.top) {
         if (alignment.top.startsWith('centerY')) {
@@ -95,9 +92,7 @@ export function alignContextElement(
             const offset = getOffset(alignment.top, 'bottom');
             element.style.top = rt + rh + offset + 'px';
         } else {
-            throw new Error(
+            throw new Error('illegal top alignment: ' + JSON.stringify(alignment.top));
-                'illegal top alignment: ' + JSON.stringify(alignment.top)
-            );
         }
     } else if (alignment.bottom) {
         if (alignment.bottom.startsWith('centerY')) {
@@ -113,9 +108,7 @@ export function alignContextElement(
             const offset = getOffset(alignment.bottom, 'bottom');
             element.style.top = rb - eh + offset + 'px';
         } else {
-            throw new Error(
+            throw new Error('illegal bottom alignment: ' + JSON.stringify(alignment.bottom));
-                'illegal bottom alignment: ' + JSON.stringify(alignment.bottom)
-            );
         }
     } else {
         throw new Error('y-alignment not specified');
@@ -135,10 +128,7 @@ export function alignContextElement(
             const offset = getOffset(alignment.centerX, 'right');
             element.style.left = rl + (rw - ew / 2) + offset + 'px';
         } else {
-            throw new Error(
+            throw new Error('illegal centerX alignment: ' + JSON.stringify(alignment.centerX));
-                'illegal centerX alignment: ' +
-                    JSON.stringify(alignment.centerX)
-            );
         }
     } else if (alignment.left) {
         if (alignment.left.startsWith('centerX')) {
@@ -151,9 +141,7 @@ export function alignContextElement(
             const offset = getOffset(alignment.left, 'right');
             element.style.left = rl + rw + offset + 'px';
         } else {
-            throw new Error(
+            throw new Error('illegal left alignment: ' + JSON.stringify(alignment.left));
-                'illegal left alignment: ' + JSON.stringify(alignment.left)
-            );
         }
     } else if (alignment.right) {
         if (alignment.right.startsWith('centerX')) {
@@ -166,9 +154,7 @@ export function alignContextElement(
             const offset = getOffset(alignment.right, 'right');
             element.style.left = rr - ew + offset + 'px';
         } else {
-            throw new Error(
+            throw new Error('illegal right alignment: ' + JSON.stringify(alignment.right));
-                'illegal right alignment: ' + JSON.stringify(alignment.right)
-            );
         }
     } else {
         throw new Error('x-alignment not defined');

src/core/hooks.ts

@@ -14,7 +14,7 @@ import { IAlignment, alignContextElement } from './align';
 class ShouldNeverHappenError extends Error {}
 
 function sleep(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+    return new Promise(resolve => setTimeout(resolve, ms));
 }
 
 /** returns a ref that is true if the component is mounted and false otherwise. Very useful for async stuff */
@@ -51,16 +51,14 @@ function useShake(ms: number): [shaking: boolean, doShake: () => void] {
 export function useOneTimeAsyncAction<T, V>(
     actionFunc: () => Promise<T>,
     deps: DependencyList,
-    initialValue: V
+    initialValue: V,
 ): [value: T | V, error: unknown | null] {
-    const isMounted = useRef(false);
+    const isMounted = useIsMountedRef();
 
     const [value, setValue] = useState<T | V>(initialValue);
     const [error, setError] = useState<unknown | null>(null);
 
     useEffect(() => {
-        isMounted.current = true;
-
         (async () => {
             try {
                 const value = await actionFunc();
@@ -73,10 +71,6 @@ export function useOneTimeAsyncAction<T, V>(
                 setError(e);
             }
         })();
-
-        return () => {
-            isMounted.current = false;
-        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [actionFunc, ...deps]);
 
@@ -86,9 +80,9 @@ export function useOneTimeAsyncAction<T, V>(
 /** creates a callable async function that will not double-trigger and gives a result, error message, and shaking boolean */
 export function useAsyncCallback<ResultType>(
     actionFunc: (
-        isMounted: MutableRefObject<boolean>
+        isMounted: MutableRefObject<boolean>,
     ) => Promise<{ errorMessage: string | null; result: ResultType | null }>,
-    deps: DependencyList
+    deps: DependencyList,
 ): [callable: () => void, result: ResultType | null, errorMessage: string | null, shaking: boolean, pending: boolean] {
     const isMounted = useIsMountedRef();
 
@@ -126,7 +120,7 @@ export function useAsyncCallback<ResultType>(
 /** creates a callable async function that does not need to return a value (or shake) */
 export function useAsyncVoidCallback(
     actionFunc: (isMounted: MutableRefObject<boolean>) => Promise<void>,
-    deps: DependencyList
+    deps: DependencyList,
 ): [callable: () => void] {
     const [callable] = useAsyncCallback(async (isMounted: MutableRefObject<boolean>) => {
         await actionFunc(isMounted);
@@ -139,7 +133,7 @@ export function useAsyncVoidCallback(
 /** creates useful state variables for a button intended call a submit action */
 export function useAsyncSubmitButton<ResultType>(
     actionFunc: (
-        isMounted: MutableRefObject<boolean>
+        isMounted: MutableRefObject<boolean>,
     ) => Promise<{ errorMessage: string | null; result: ResultType | null }>,
     deps: DependencyList,
     stateTextMapping?: {
@@ -147,7 +141,7 @@ export function useAsyncSubmitButton<ResultType>(
         pending?: string;
         error?: string;
         done?: string;
-    }
+    },
 ): [callable: () => void, text: string, shaking: boolean, result: ResultType | null, errorMessage: string | null] {
     const textMapping = {
         ...{
@@ -169,7 +163,7 @@ export function useAsyncSubmitButton<ResultType>(
             return actionReturnValue;
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [...deps, actionFunc]
+        [...deps, actionFunc],
     );
 
     const text = useMemo(() => {
@@ -186,7 +180,7 @@ export function useAsyncSubmitButton<ResultType>(
 /** calls the close action when you hit escape or click outside of the ref element */
 export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
     refs: RefObject<HTMLElement>[],
-    actionFunc: () => void
+    actionFunc: () => void,
 ) {
     // have to use a ref here and not states since we can't re-assign state between mouseup and click
     const data = useRef<
@@ -228,7 +222,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
 
             actionFunc();
         },
-        [hadMouseDown, actionFunc]
+        [hadMouseDown, actionFunc],
     );
 
     const handleMouseDown = useCallback((event: MouseEvent) => {
@@ -263,7 +257,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
             // context menu is fired on mouse-down so no need to do special checks.
             actionFunc();
         },
-        [actionFunc]
+        [actionFunc],
     );
 
     const handleKeyDown = useCallback(
@@ -275,7 +269,7 @@ export function useActionWhenEscapeOrClickedOrContextOutsideEffect(
 
             actionFunc();
         },
-        [actionFunc]
+        [actionFunc],
     );
 
     useEffect(() => {
@@ -321,7 +315,7 @@ export function useAlignment(
     relativeToPos: { x: number; y: number } | null,
     alignment: IAlignment,
     realignDeps: DependencyList,
-    baseClassName: string
+    baseClassName: string,
 ): [className: string] {
     const [aligned, setAligned] = useState<boolean>(false);
 
@@ -342,7 +336,7 @@ export function useAlignment(
 /** creates useful context menu state */
 export function useContextMenu(
     createContextMenu: (close: () => void) => ReactNode,
-    createContextMenuDeps: DependencyList
+    createContextMenuDeps: DependencyList,
 ): [contextMenu: ReactNode, toggle: () => void, close: () => void, open: () => void, isOpen: boolean] {
     const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -354,7 +348,7 @@ export function useContextMenu(
     const contextMenu = useMemo(() => createContextMenu(close), [close, createContextMenu, ...createContextMenuDeps]);
 
     const toggle = useCallback(() => {
-        setIsOpen((oldIsOpen) => !!contextMenu && !oldIsOpen);
+        setIsOpen(oldIsOpen => !!contextMenu && !oldIsOpen);
     }, [contextMenu]);
     const open = useCallback(() => {
         setIsOpen(true);
@@ -366,7 +360,7 @@ export function useContextMenu(
 /** creates context menu state for right-clicks */
 export function useContextClickContextMenu(
     createContextMenu: (alignment: IAlignment, relativeToPos: { x: number; y: number }, close: () => void) => ReactNode,
-    createContextMenuDeps: DependencyList
+    createContextMenuDeps: DependencyList,
 ): [contextMenu: ReactNode, onContextMenu: (event: React.MouseEvent<HTMLElement>) => void] {
     const [relativeToPos, setRelativeToPos] = useState<{
         x: number;
@@ -377,12 +371,12 @@ export function useContextClickContextMenu(
 
     const createContextMenuWithRelativeToPos = useCallback(
         (close: () => void) => createContextMenu(alignment, relativeToPos, close),
-        [alignment, createContextMenu, relativeToPos]
+        [alignment, createContextMenu, relativeToPos],
     );
 
     const [contextMenu, _toggle, _close, open] = useContextMenu(
         createContextMenuWithRelativeToPos,
-        createContextMenuDeps
+        createContextMenuDeps,
     );
 
     const onContextMenu = useCallback(
@@ -390,7 +384,7 @@ export function useContextClickContextMenu(
             setRelativeToPos({ x: event.clientX, y: event.clientY });
             open();
         },
-        [open]
+        [open],
     );
 
     return [contextMenu, onContextMenu];
@@ -399,14 +393,14 @@ export function useContextClickContextMenu(
 /** creates context state for hovering over an element */
 export function useContextHover(
     createContextHover: () => ReactNode,
-    createContextHoverDeps: DependencyList
+    createContextHoverDeps: DependencyList,
 ): [contextHover: ReactNode, mouseEnterCallable: () => void, mouseLeaveCallable: () => void] {
     const [isOpen, setIsOpen] = useState<boolean>(false);
 
     const contextHover = useMemo(
         () => createContextHover(),
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [createContextHover, ...createContextHoverDeps]
+        [createContextHover, ...createContextHoverDeps],
     );
 
     const mouseEnterCallable = useCallback(() => {

src/index.html

@@ -1,7 +1,8 @@
 <html>
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="data:,"><!-- disable favicon -->
+        <!-- disable favicon -->
+        <link rel="icon" href="data:," />
         <title>Webpack Starter</title>
     </head>
     <body>