perf cleanup: toolbar (#181)

* Fix format * Remove unnecessary useMemo * Update index.tsx * Update index.tsx * Update helpers.ts * Update resize-handle.tsx * Update resize-handle.tsx * Update utils.ts * Update index.tsx * Fix `getDisplayName`
aidenybai · Jan 8, 2025 · 73a6aee · 73a6aee
1 parent 97840ec
commit 73a6aee
Show file tree

Hide file tree

Showing 17 changed files with 778 additions and 678 deletions.
diff --git a/packages/scan/src/core/monitor/performance.ts b/packages/scan/src/core/monitor/performance.ts
@@ -151,7 +151,7 @@ const getFirstNamedAncestorCompositeFiber = (element: Element) => {
     if (!fiber) {
       continue;
     }
-    if (getDisplayName(fiber?.type)) {
+    if (fiber.type && getDisplayName(fiber.type)) {
       parentCompositeFiber = fiber;
     }
   }

diff --git a/packages/scan/src/web/components/copy-to-clipboard/index.tsx b/packages/scan/src/web/components/copy-to-clipboard/index.tsx
@@ -1,82 +1,88 @@
-import { useRef, useState, useEffect, useCallback, useMemo } from "preact/hooks";
-import { memo } from "preact/compat";
-import { cn } from "~web/utils/helpers";
-import { Icon } from "../icon";
+import { memo } from 'preact/compat';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { cn } from '~web/utils/helpers';
+import { Icon } from '../icon';
 
 interface CopyToClipboardProps {
   text: string;
-  children?: (props: { ClipboardIcon: JSX.Element; onClick: (e: MouseEvent) => void }) => JSX.Element;
+  children?: (props: {
+    ClipboardIcon: JSX.Element;
+    onClick: (e: MouseEvent) => void;
+  }) => JSX.Element;
   onCopy?: (success: boolean, text: string) => void;
   className?: string;
   iconSize?: number;
 }
 
-export const CopyToClipboard = memo((props: CopyToClipboardProps): JSX.Element => {
-  const {
+export const CopyToClipboard = memo(
+  ({
     text,
     children,
     onCopy,
     className,
     iconSize = 14,
-  } = props;
+  }: CopyToClipboardProps): JSX.Element => {
+    const refTimeout = useRef<TTimer>();
+    const [isCopied, setIsCopied] = useState(false);
 
-  const refTimeout = useRef<TTimer>();
-  const [isCopied, setIsCopied] = useState(false);
+    useEffect(() => {
+      if (isCopied) {
+        refTimeout.current = setTimeout(() => setIsCopied(false), 600);
+        return () => {
+          clearTimeout(refTimeout.current);
+        };
+      }
+    }, [isCopied]);
 
-  useEffect(() => {
-    if (isCopied) {
-      refTimeout.current = setTimeout(() => setIsCopied(false), 600);
-      return () => {
-        clearTimeout(refTimeout?.current);
-      };
-    }
-  }, [isCopied]);
-
-  const copyToClipboard = useCallback((e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
+    const copyToClipboard = useCallback(
+      (e: MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
 
-    navigator.clipboard.writeText(text).then(
-      () => {
-        setIsCopied(true);
-        onCopy?.(true, text);
-      },
-      () => {
-        onCopy?.(false, text);
+        navigator.clipboard.writeText(text).then(
+          () => {
+            setIsCopied(true);
+            onCopy?.(true, text);
+          },
+          () => {
+            onCopy?.(false, text);
+          },
+        );
       },
+      [text, onCopy],
     );
-  }, [text, onCopy]);
 
-  const ClipboardIcon = useMemo((): JSX.Element => (
-    <button
-      onClick={copyToClipboard}
-      type="button"
-      className={cn(
-        'z-10',
-        'flex items-center justify-center',
-        'hover:text-dev-pink-400',
-        'transition-colors duration-200 ease-in-out',
-        'cursor-pointer',
-        `size-[${iconSize}px]`,
-        className,
-      )}
-    >
-      <Icon
-        name={`icon-${isCopied ? 'check' : 'copy'}`}
-        size={[iconSize]}
-        className={cn({
-          'text-green-500': isCopied,
-        })}
-      />
-    </button>
-  ), [className, copyToClipboard, iconSize, isCopied]);
+    const ClipboardIcon = (
+      <button
+        onClick={copyToClipboard}
+        type="button"
+        className={cn(
+          'z-10',
+          'flex items-center justify-center',
+          'hover:text-dev-pink-400',
+          'transition-colors duration-200 ease-in-out',
+          'cursor-pointer',
+          `size-[${iconSize}px]`,
+          className,
+        )}
+      >
+        <Icon
+          name={`icon-${isCopied ? 'check' : 'copy'}`}
+          size={[iconSize]}
+          className={cn({
+            'text-green-500': isCopied,
+          })}
+        />
+      </button>
+    );
 
-  if (!children) {
-    return ClipboardIcon;
-  }
+    if (!children) {
+      return ClipboardIcon;
+    }
 
-  return children({
-    ClipboardIcon,
-    onClick: copyToClipboard,
-  });
-});
+    return children({
+      ClipboardIcon,
+      onClick: copyToClipboard,
+    });
+  },
+);
diff --git a/packages/scan/src/web/components/icon/index.tsx b/packages/scan/src/web/components/icon/index.tsx
@@ -1,8 +1,5 @@
 import type { JSX } from 'preact';
-import {
-  type ForwardedRef,
-  forwardRef,
-} from 'preact/compat';
+import { forwardRef, type ForwardedRef } from 'preact/compat';
 
 export interface SVGIconProps {
   size?: number | Array<number>;
@@ -14,43 +11,42 @@ export interface SVGIconProps {
   style?: JSX.CSSProperties;
 }
 
-export const Icon = forwardRef((props: SVGIconProps, ref: ForwardedRef<SVGSVGElement>) => {
-  const {
-    size = 15,
-    name,
-    fill = 'currentColor',
-    stroke = 'currentColor',
-    className,
-    externalURL = '',
-    style,
-  } = props;
+export const Icon = forwardRef(
+  (
+    {
+      size = 15,
+      name,
+      fill = 'currentColor',
+      stroke = 'currentColor',
+      className,
+      externalURL = '',
+      style,
+    }: SVGIconProps,
+    ref: ForwardedRef<SVGSVGElement>,
+  ) => {
+    const width = Array.isArray(size) ? size[0] : size;
+    const height = Array.isArray(size) ? size[1] || size[0] : size;
 
-  const width = Array.isArray(size) ? size[0] : size;
-  const height = Array.isArray(size) ? size[1] || size[0] : size;
+    const path = `${externalURL}#${name}`;
 
-  const attributes = {
-    width: `${width}px`,
-    height: `${height}px`,
-    fill,
-    stroke,
-    className,
-    style,
-  };
-
-  const path = `${externalURL}#${name}`;
-
-  return (
-    <svg
-      ref={ref}
-      {...attributes}
-      style={{
-        minWidth: `${width}px`,
-        maxWidth: `${width}px`,
-        minHeight: `${height}px`,
-        maxHeight: `${height}px`,
-      }}
-    >
-      <use href={path} />
-    </svg>
-  );
-});
+    return (
+      <svg
+        ref={ref}
+        width={`${width}px`}
+        height={`${height}px`}
+        fill={fill}
+        stroke={stroke}
+        className={className}
+        style={{
+          ...style,
+          minWidth: `${width}px`,
+          maxWidth: `${width}px`,
+          minHeight: `${height}px`,
+          maxHeight: `${height}px`,
+        }}
+      >
+        <use href={path} />
+      </svg>
+    );
+  },
+);