Correct type imports for web-extensions package

Author: Juice10

packages/web-extension/src/background/index.ts

@@ -2,11 +2,11 @@ import Browser from 'webextension-polyfill';
 import type { eventWithTime } from '@rrweb/types';
 import Channel from '~/utils/channel';
 import {
-  LocalData,
+  type LocalData,
   LocalDataKey,
   RecorderStatus,
-  Settings,
-  SyncData,
+  type Settings,
+  type SyncData,
   SyncDataKey,
 } from '~/types';
 import { pauseRecording, resumeRecording } from '~/utils/recording';

packages/web-extension/src/components/CircleButton.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps } from '@chakra-ui/react';
+import { Button, type ButtonProps } from '@chakra-ui/react';
 
 interface CircleButtonProps extends ButtonProps {
   diameter: number;

packages/web-extension/src/components/SidebarWithHeader.tsx

@@ -12,8 +12,8 @@ import {
   Drawer,
   DrawerContent,
   useDisclosure,
-  BoxProps,
-  FlexProps,
+  type BoxProps,
+  type FlexProps,
   Heading,
   Stack,
   Text,

packages/web-extension/src/content/index.ts

@@ -1,16 +1,16 @@
-import Browser, { Storage } from 'webextension-polyfill';
+import Browser, { type Storage } from 'webextension-polyfill';
 import { nanoid } from 'nanoid';
 import type { eventWithTime } from '@rrweb/types';
 import {
-  LocalData,
+  type LocalData,
   LocalDataKey,
   RecorderStatus,
   ServiceName,
-  Session,
-  RecordStartedMessage,
-  RecordStoppedMessage,
+  type Session,
+  type RecordStartedMessage,
+  type RecordStoppedMessage,
   MessageName,
-  EmitEventMessage,
+  type EmitEventMessage,
 } from '~/types';
 import Channel from '~/utils/channel';
 import { isInCrossOriginIFrame } from '~/utils';

packages/web-extension/src/content/inject.ts

@@ -1,7 +1,7 @@
 import { record } from 'rrweb';
 import type { recordOptions } from 'rrweb';
 import type { eventWithTime } from '@rrweb/types';
-import { MessageName, RecordStartedMessage } from '~/types';
+import { MessageName, type RecordStartedMessage } from '~/types';
 import { isInCrossOriginIFrame } from '~/utils';
 
 /**

packages/web-extension/src/pages/SessionList.tsx

@@ -23,13 +23,13 @@ import {
   useReactTable,
   flexRender,
   getCoreRowModel,
-  SortingState,
+  type SortingState,
   getSortedRowModel,
-  PaginationState,
+  type PaginationState,
 } from '@tanstack/react-table';
 import { VscTriangleDown, VscTriangleUp } from 'react-icons/vsc';
 import { useNavigate } from 'react-router-dom';
-import { Session, EventName } from '~/types';
+import { type Session, EventName } from '~/types';
 import Channel from '~/utils/channel';
 import { deleteSessions, getAllSessions } from '~/utils/storage';
 import {

packages/web-extension/src/popup/App.tsx

@@ -10,16 +10,13 @@ import {
 } from '@chakra-ui/react';
 import { FiSettings, FiList, FiPause, FiPlay } from 'react-icons/fi';
 import Channel from '~/utils/channel';
-import {
+import type {
   LocalData,
-  LocalDataKey,
-  RecorderStatus,
-  ServiceName,
   RecordStartedMessage,
   RecordStoppedMessage,
   Session,
-  EventName,
 } from '~/types';
+import { LocalDataKey, RecorderStatus, ServiceName, EventName } from '~/types';
 import Browser from 'webextension-polyfill';
 import { CircleButton } from '~/components/CircleButton';
 import { Timer } from './Timer';
@@ -39,9 +36,8 @@ export function App() {
     void Browser.storage.local.get(LocalDataKey.recorderStatus).then((data) => {
       const localData = data as LocalData;
       if (!localData || !localData[LocalDataKey.recorderStatus]) return;
-      const { status, startTimestamp, pausedTimestamp } = localData[
-        LocalDataKey.recorderStatus
-      ];
+      const { status, startTimestamp, pausedTimestamp } =
+        localData[LocalDataKey.recorderStatus];
       setStatus(status);
       if (startTimestamp && pausedTimestamp)
         setStartTime(Date.now() - pausedTimestamp + startTimestamp || 0);

packages/web-extension/src/utils/channel.ts

@@ -1,5 +1,5 @@
 import mitt from 'mitt';
-import Browser, { Runtime } from 'webextension-polyfill';
+import Browser, { type Runtime } from 'webextension-polyfill';
 
 export type Message = EventType | ServiceType;
 export type EventType = {

packages/web-extension/src/utils/recording.ts

@@ -2,11 +2,11 @@ import Browser from 'webextension-polyfill';
 import type { eventWithTime } from '@rrweb/types';
 
 import {
-  LocalData,
+  type LocalData,
   LocalDataKey,
   RecorderStatus,
-  RecordStartedMessage,
-  RecordStoppedMessage,
+  type RecordStartedMessage,
+  type RecordStoppedMessage,
   ServiceName,
 } from '~/types';
 import type Channel from './channel';