Bugfixes

.changeset/cold-dolls-look.md

@@ -0,0 +1,5 @@
+---
+"headertweaker": patch
+---
+
+Bugfixes

package.json

@@ -20,6 +20,7 @@
     "@heroicons/react": "2.2.0",
     "clsx": "2.1.1",
     "react": "18.2.0",
+    "react-compiler-runtime": "^1.0.0",
     "react-dom": "18.2.0",
     "uuid": "11.1.0"
   },
@@ -32,6 +33,7 @@
     "@types/react": "19.1.12",
     "@types/react-dom": "19.1.9",
     "@vitejs/plugin-react": "5.0.2",
+    "babel-plugin-react-compiler": "^1.0.0",
     "husky": "9.1.7",
     "rimraf": "6.0.1",
     "sass": "1.70.0",

src/background.ts

@@ -1,7 +1,14 @@
-import { getStatus } from '@helpers/headertweaker.helper';
-
 const isFirefox = typeof browser !== 'undefined';
 const webRequest = isFirefox ? browser.webRequest : chrome.webRequest;
+const storage = isFirefox ? browser.storage : chrome.storage;
+
+// Keep in sync with STATUS_KEY in headertweaker.helper.ts
+const STATUS_KEY = 'isDisabled';
+
+const getStatus = async (): Promise<'enabled' | 'disabled'> => {
+  const result = await storage.local.get(STATUS_KEY);
+  return result[STATUS_KEY] ? 'disabled' : 'enabled';
+};
 
 type Header = { name: string; value: string; enabled: boolean };
 
@@ -12,7 +19,6 @@ type OnBeforeSendHeadersDetails<T> = T extends typeof browser.webRequest
     : never;
 
 const getHeaders = async (): Promise<Header[]> => {
-  const storage = typeof browser !== 'undefined' ? browser.storage : chrome.storage;
   const result = await storage.local.get('headers');
   return result.headers || [];
 };

src/components/app/app-footer.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { type ChangeEvent, useEffect, useState } from 'react';
 import { Button } from '@components/button/button';
 import { Input } from '@components/input/input';
 import { useHeaderTweakerContext } from '@contexts/headertweaker.context';
@@ -13,7 +13,7 @@ export const AppFooter = () => {
   const [disabledButton, setDisabledButton] = useState(true);
   const { isDisabled, updateHeader } = useHeaderTweakerContext();
 
-  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { target } = e;
 
     setHeader((prev) => {
@@ -23,9 +23,9 @@ export const AppFooter = () => {
         target.getAttribute('data-type') === 'value' ? target.value : prev?.value || '';
       return { id: '', name: headerKey, value: headerValue, enabled: false };
     });
-  }, []);
+  };
 
-  const validateHeaderKey = useCallback(() => {
+  const validateHeaderKey = () => {
     const headerKey = cleanupHeaderKey(header?.name || '');
 
     setHeader((prev) => ({
@@ -35,7 +35,7 @@ export const AppFooter = () => {
       value: prev?.value ?? '',
       enabled: false,
     }));
-  }, [header?.name]);
+  };
 
   useEffect(
     () => setDisabledButton(!(header?.name && header?.value)),

src/components/button/button.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, memo, type ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import classnames from 'clsx';
 
 import css from './button.module.scss';
@@ -8,24 +8,22 @@ export interface ButtonProps extends ComponentProps<'button'> {
   variant?: 'default' | 'ghost';
 }
 
-export const Button = memo(
-  ({
-    children,
-    className,
-    'aria-label': ariaLabel,
-    variant = 'default',
-    ...props
-  }: ButtonProps) => {
-    return (
-      <button
-        className={classnames(css.root, className, {
-          [css.ghost]: variant === 'ghost',
-        })}
-        aria-label={ariaLabel}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
+export const Button = ({
+  children,
+  className,
+  'aria-label': ariaLabel,
+  variant = 'default',
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={classnames(css.root, className, {
+        [css.ghost]: variant === 'ghost',
+      })}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

src/components/button/icon-button.tsx

@@ -1,4 +1,4 @@
-import { cloneElement, type ElementType, isValidElement, memo, type ReactElement } from 'react';
+import { cloneElement, type ElementType, isValidElement, type ReactElement } from 'react';
 import classnames from 'clsx';
 import { Button, type ButtonProps } from './button';
 
@@ -47,4 +47,4 @@ const IconButtonComponent = <
   );
 };
 
-export const IconButton = memo(IconButtonComponent);
+export const IconButton = IconButtonComponent;

src/components/drawer/drawer.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { ModalTitle } from '@components/modal/ModalTitle';
 import { Modal, type ModalProps } from '@components/modal/modal';
 import { ModalClose } from '@components/modal/modal-close';
@@ -8,12 +7,12 @@ interface DrawerProps extends Omit<ModalProps, 'type'> {
   title: string;
 }
 
-export const Drawer = memo(({ title, children, ...props }: DrawerProps) => {
+export const Drawer = ({ title, children, ...props }: DrawerProps) => {
   return (
     <Modal type="drawer" {...props}>
       <ModalTitle>{title}</ModalTitle>
       <ModalClose onClose={props.onClose} />
       <ModalContent>{children}</ModalContent>
     </Modal>
   );
-});
+};

src/components/edit-header/edit-header.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, useCallback, useState } from 'react';
+import { type ChangeEvent, useState } from 'react';
 import { Button } from '@components/button/button';
 import { Input } from '@components/input/input';
 import { Switch } from '@components/switch/switch';
@@ -18,7 +18,7 @@ export const EditHeader = ({ closePanel }: EditHeaderProps) => {
   const { updateHeader, selectedHeader } = useHeaderTweakerContext();
   const [header, setHeader] = useState<Header | null>(selectedHeader);
 
-  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { target } = e;
 
     setHeader((prev) => {
@@ -33,9 +33,9 @@ export const EditHeader = ({ closePanel }: EditHeaderProps) => {
         enabled: prev?.enabled ?? false,
       };
     });
-  }, []);
+  };
 
-  const validateHeaderKey = useCallback(() => {
+  const validateHeaderKey = () => {
     const headerKey = cleanupHeaderKey(header?.name || '');
 
     setHeader((prev) => ({
@@ -45,7 +45,7 @@ export const EditHeader = ({ closePanel }: EditHeaderProps) => {
       value: prev?.value ?? '',
       enabled: prev?.enabled ?? false,
     }));
-  }, [header?.name]);
+  };
 
   if (!header) return null;
 

src/components/feedback/confirm.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { Button } from '@components/button/button';
 import { ButtonGroup } from '@components/button/button-group';
 import { ModalTitle } from '@components/modal/ModalTitle';
@@ -7,27 +6,25 @@ import { ModalContent } from '@components/modal/modal-content';
 import { ModalFooter } from '@components/modal/modal-footer';
 import type { ConfirmProps } from './interfaces';
 
-export const Confirm = memo(
-  ({
-    message,
-    onConfirm,
-    onCancel,
-    title,
-    confirmText = 'OK',
-    cancelText = 'Cancel',
-    ...modalProps
-  }: ConfirmProps) => (
-    <Modal type="confirm" {...modalProps}>
-      <ModalTitle>{title}</ModalTitle>
-      <ModalContent>{message}</ModalContent>
-      <ModalFooter>
-        <ButtonGroup>
-          <Button onClick={onConfirm}>{confirmText}</Button>
-          <Button variant="ghost" onClick={onCancel}>
-            {cancelText}
-          </Button>
-        </ButtonGroup>
-      </ModalFooter>
-    </Modal>
-  )
+export const Confirm = ({
+  message,
+  onConfirm,
+  onCancel,
+  title,
+  confirmText = 'OK',
+  cancelText = 'Cancel',
+  ...modalProps
+}: ConfirmProps) => (
+  <Modal type="confirm" {...modalProps}>
+    <ModalTitle>{title}</ModalTitle>
+    <ModalContent>{message}</ModalContent>
+    <ModalFooter>
+      <ButtonGroup>
+        <Button onClick={onConfirm}>{confirmText}</Button>
+        <Button variant="ghost" onClick={onCancel}>
+          {cancelText}
+        </Button>
+      </ButtonGroup>
+    </ModalFooter>
+  </Modal>
 );

src/components/feedback/success.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { Button } from '@components/button/button';
 import { ButtonGroup } from '@components/button/button-group';
 import { ModalTitle } from '@components/modal/ModalTitle';
@@ -9,19 +8,22 @@ import { ModalFooter } from '@components/modal/modal-footer';
 import { CheckCircleIcon } from '@heroicons/react/24/solid';
 import type { SuccessProps } from './interfaces';
 
-export const Success = memo(
-  ({ message, onConfirm, confirmText = 'OK', ...modalProps }: SuccessProps) => (
-    <Modal type="success" {...modalProps}>
-      <ModalIcon>
-        <CheckCircleIcon />
-      </ModalIcon>
-      <ModalTitle>Success</ModalTitle>
-      <ModalContent>{message}</ModalContent>
-      <ModalFooter>
-        <ButtonGroup>
-          <Button onClick={onConfirm}>{confirmText}</Button>
-        </ButtonGroup>
-      </ModalFooter>
-    </Modal>
-  )
+export const Success = ({
+  message,
+  onConfirm,
+  confirmText = 'OK',
+  ...modalProps
+}: SuccessProps) => (
+  <Modal type="success" {...modalProps}>
+    <ModalIcon>
+      <CheckCircleIcon />
+    </ModalIcon>
+    <ModalTitle>Success</ModalTitle>
+    <ModalContent>{message}</ModalContent>
+    <ModalFooter>
+      <ButtonGroup>
+        <Button onClick={onConfirm}>{confirmText}</Button>
+      </ButtonGroup>
+    </ModalFooter>
+  </Modal>
 );

src/components/header-content/header-content.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from 'react';
 import { Text } from '@components/text/text';
 import { Tooltip } from '@components/tooltip/tooltip';
 import { TooltipContent } from '@components/tooltip/tooltip-content';
@@ -11,10 +10,10 @@ interface HeaderContentProps {
 }
 
 export const HeaderContent = ({ content }: HeaderContentProps) => {
-  const onClick = useCallback(async () => {
+  const onClick = async () => {
     const clipboardItem = new ClipboardItem({ 'text/plain': content });
     await navigator.clipboard.write([clipboardItem]);
-  }, [content]);
+  };
 
   return (
     <Tooltip>
@@ -26,7 +25,7 @@ export const HeaderContent = ({ content }: HeaderContentProps) => {
 
       <TooltipContent>
         <Text>{content}</Text>
-        <Text variant="small">(Click to copy to clipboard)</Text>
+        <Text variant="body-small">(Click to copy to clipboard)</Text>
       </TooltipContent>
     </Tooltip>
   );