From 1bc822b69ab6bb9e158daf16d8a596be9a5bff9a Mon Sep 17 00:00:00 2001 From: Ben Hollis Date: Wed, 14 Jun 2023 12:58:55 -0700 Subject: [PATCH] Minor imports fixes --- src/Index.tsx | 4 +-- src/app/App.tsx | 10 +++--- src/app/character-tile/StoreHeading.tsx | 4 +-- .../loadout-builder/D1LoadoutBuilder.tsx | 4 +-- src/app/dim-ui/BungieImage.tsx | 4 +-- src/app/dim-ui/ClickOutside.tsx | 13 +++++-- src/app/dim-ui/ConfirmButton.tsx | 6 ++-- src/app/dim-ui/CustomStatTotal.tsx | 4 +-- src/app/dim-ui/CustomStatWeights.tsx | 7 ++-- src/app/dim-ui/ErrorBoundary.tsx | 4 +-- src/app/dim-ui/PressTip.tsx | 7 ++-- .../dim-ui/destiny-symbols/SymbolsPicker.tsx | 16 ++++++--- src/app/dim-ui/useConfirm.tsx | 2 +- src/app/inventory-page/HeaderShadowDiv.tsx | 4 +-- src/app/inventory/store/d2-item-factory.ts | 3 +- src/app/item-actions/ItemActionsDropdown.tsx | 4 +-- src/app/item-feed/ItemFeedPage.tsx | 4 +-- src/app/item-feed/ItemFeedSidebar.tsx | 4 +-- src/app/loadout-builder/filter/TierSelect.tsx | 4 +-- .../loadout-drawer/LoadoutDrawerContainer.tsx | 6 ++-- src/app/organizer/EnabledColumnsSelector.tsx | 4 +-- src/app/organizer/ItemTable.tsx | 9 ++--- src/app/search/SearchBar.tsx | 15 ++++---- src/app/search/SearchFilter.tsx | 4 +-- src/app/settings/SortOrderEditor.tsx | 4 +-- src/app/shell/Destiny.tsx | 34 ++++++++----------- src/app/shell/ErrorPanel.tsx | 4 +-- src/app/shell/PostmasterWarningBanner.tsx | 4 +-- src/app/shell/icons/AppIcon.tsx | 4 +-- src/app/store-stats/AccountCurrencies.tsx | 4 +-- src/app/store-stats/VaultCapacity.tsx | 4 +-- src/app/stream-deck/stream-deck.ts | 4 ++- src/app/utils/socket-utils.ts | 3 +- src/app/utils/temp-container.ts | 4 +-- 34 files changed, 110 insertions(+), 105 deletions(-) diff --git a/src/Index.tsx b/src/Index.tsx index be4394de9f..f8d501768e 100644 --- a/src/Index.tsx +++ b/src/Index.tsx @@ -12,7 +12,7 @@ import { lazyLoadStreamDeck, startStreamDeckConnection } from 'app/stream-deck/s import { streamDeckEnabled } from 'app/stream-deck/util/local-storage'; import { infoLog } from 'app/utils/log'; import { scheduleMemoryMeasurement } from 'app/utils/measure-memory'; -import ReactDOM from 'react-dom/client'; +import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import idbReady from 'safari-14-idb-fix'; import { StorageBroken, storageTest } from './StorageTest'; @@ -42,7 +42,7 @@ scheduleMemoryMeasurement(); const i18nPromise = initi18n(); (async () => { - const root = ReactDOM.createRoot(document.getElementById('app')!); + const root = createRoot(document.getElementById('app')!); // idbReady works around a bug in Safari 14 where IndexedDB doesn't initialize sometimes await idbReady(); diff --git a/src/app/App.tsx b/src/app/App.tsx index ca8e2d3886..6fd7f62d9c 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -1,7 +1,7 @@ import { settingSelector } from 'app/dim-api/selectors'; import { RootState } from 'app/store/types'; import clsx from 'clsx'; -import React, { Suspense } from 'react'; +import { Suspense, lazy } from 'react'; import { useSelector } from 'react-redux'; import { Navigate, Route, Routes, useLocation } from 'react-router'; import styles from './App.m.scss'; @@ -24,13 +24,11 @@ import Privacy from './shell/Privacy'; import ScrollToTop from './shell/ScrollToTop'; import SneakyUpdates from './shell/SneakyUpdates'; -const WhatsNew = React.lazy( - () => import(/* webpackChunkName: "whatsNew" */ './whats-new/WhatsNew') -); -const SettingsPage = React.lazy( +const WhatsNew = lazy(() => import(/* webpackChunkName: "whatsNew" */ './whats-new/WhatsNew')); +const SettingsPage = lazy( () => import(/* webpackChunkName: "settings" */ './settings/SettingsPage') ); -const SearchHistory = React.lazy( +const SearchHistory = lazy( () => import(/* webpackChunkName: "searchHistory" */ './search/SearchHistory') ); diff --git a/src/app/character-tile/StoreHeading.tsx b/src/app/character-tile/StoreHeading.tsx index 62c7655d38..007f66135f 100644 --- a/src/app/character-tile/StoreHeading.tsx +++ b/src/app/character-tile/StoreHeading.tsx @@ -3,7 +3,7 @@ import { isD1Store } from 'app/inventory/stores-helpers'; import LoadoutPopup from 'app/loadout/loadout-menu/LoadoutPopup'; import clsx from 'clsx'; import React, { useCallback, useRef, useState } from 'react'; -import ReactDOM from 'react-dom'; +import { createPortal } from 'react-dom'; import ClickOutside from '../dim-ui/ClickOutside'; import { DimStore } from '../inventory/store-types'; import { AppIcon, kebabIcon } from '../shell/icons'; @@ -86,7 +86,7 @@ export default function StoreHeading({ store, selectedStore, loadoutMenuRef, onT ); loadoutMenu = loadoutMenuRef - ? ReactDOM.createPortal(menuContents, loadoutMenuRef.current!) + ? createPortal(menuContents, loadoutMenuRef.current!) : menuContents; } diff --git a/src/app/destiny1/loadout-builder/D1LoadoutBuilder.tsx b/src/app/destiny1/loadout-builder/D1LoadoutBuilder.tsx index 86fdbaaad9..58b0f6691e 100644 --- a/src/app/destiny1/loadout-builder/D1LoadoutBuilder.tsx +++ b/src/app/destiny1/loadout-builder/D1LoadoutBuilder.tsx @@ -14,7 +14,7 @@ import { DestinyClass } from 'bungie-api-ts/destiny2'; import { ItemCategoryHashes } from 'data/d2/generated-enums'; import { produce } from 'immer'; import _ from 'lodash'; -import React from 'react'; +import React, { Component } from 'react'; import { connect } from 'react-redux'; import CharacterSelect from '../../dim-ui/CharacterSelect'; import CollapsibleTitle from '../../dim-ui/CollapsibleTitle'; @@ -121,7 +121,7 @@ const initialState: State = { }, }; -class D1LoadoutBuilder extends React.Component { +class D1LoadoutBuilder extends Component { state: State = initialState; private cancelToken: { cancelled: boolean } = { diff --git a/src/app/dim-ui/BungieImage.tsx b/src/app/dim-ui/BungieImage.tsx index e23e759a97..b92f3d5e52 100644 --- a/src/app/dim-ui/BungieImage.tsx +++ b/src/app/dim-ui/BungieImage.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React from 'react'; +import React, { memo } from 'react'; /** * A relative path to a Bungie.net image asset. @@ -13,7 +13,7 @@ export type BungieImageProps = Omit, ' /** * An image tag that links its src to bungie.net. Other props pass through to the underlying image. */ -export default React.memo(function BungieImage(props: BungieImageProps) { +export default memo(function BungieImage(props: BungieImageProps) { const { src, ...otherProps } = props; return ( ()); +export const ClickOutsideContext = createContext(new EventBus()); type Props = React.HTMLAttributes & { children: React.ReactNode; @@ -18,7 +25,7 @@ type Props = React.HTMLAttributes & { * React DOM hierarchy rather than the real one. This is important for things like sheets * spawned through portals from the item popup. */ -export default React.forwardRef(function ClickOutside( +export default forwardRef(function ClickOutside( { onClickOutside, children, extraRef, onClick, ...other }, ref ) { diff --git a/src/app/dim-ui/ConfirmButton.tsx b/src/app/dim-ui/ConfirmButton.tsx index 36fe4b3734..2c5b7ad577 100644 --- a/src/app/dim-ui/ConfirmButton.tsx +++ b/src/app/dim-ui/ConfirmButton.tsx @@ -1,6 +1,6 @@ import { t } from 'app/i18next-t'; import clsx from 'clsx'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import styles from './ConfirmButton.m.scss'; /** @@ -30,8 +30,8 @@ export function ConfirmButton({ const [contentHeight, setContentHeight] = useState(0); const [containerHeight, setContainerHeight] = useState(0); - const containerRef = React.useRef(null); - const childrenRef = React.useRef(null); + const containerRef = useRef(null); + const childrenRef = useRef(null); useEffect(() => { setContentHeight(childrenRef.current?.offsetHeight || 0); diff --git a/src/app/dim-ui/CustomStatTotal.tsx b/src/app/dim-ui/CustomStatTotal.tsx index 1090d09e46..560910a592 100644 --- a/src/app/dim-ui/CustomStatTotal.tsx +++ b/src/app/dim-ui/CustomStatTotal.tsx @@ -4,7 +4,7 @@ import { armorStats } from 'app/search/d2-known-values'; import { useSetting } from 'app/settings/hooks'; import { DestinyClass, DestinyStatDefinition } from 'bungie-api-ts/destiny2'; import clsx from 'clsx'; -import React, { ReactElement, ReactNode } from 'react'; +import React, { ReactElement, ReactNode, cloneElement } from 'react'; import styles from './CustomStatTotal.m.scss'; export type StatHashListsKeyedByDestinyClass = Record; @@ -111,6 +111,6 @@ function toggleArrayElement(element: T, arr: T[]) { /** places a divider between each element of arr */ function addDividers(arr: T[], divider: ReactElement): ReactNode[] { return arr - .flatMap((e, index) => [e, React.cloneElement(divider, { key: `divider-${index}` })]) + .flatMap((e, index) => [e, cloneElement(divider, { key: `divider-${index}` })]) .slice(0, -1); } diff --git a/src/app/dim-ui/CustomStatWeights.tsx b/src/app/dim-ui/CustomStatWeights.tsx index 06916a1789..cbe80ff4bc 100644 --- a/src/app/dim-ui/CustomStatWeights.tsx +++ b/src/app/dim-ui/CustomStatWeights.tsx @@ -4,7 +4,7 @@ import BungieImage from 'app/dim-ui/BungieImage'; import { useD2Definitions } from 'app/manifest/selectors'; import { armorStats } from 'app/search/d2-known-values'; import clsx from 'clsx'; -import React, { ReactElement, ReactNode } from 'react'; +import React, { ReactElement, ReactNode, cloneElement } from 'react'; import { useSelector } from 'react-redux'; import styles from './CustomStatWeights.m.scss'; @@ -70,8 +70,5 @@ export function CustomStatWeightsDisplay({ /** places a divider between each element of arr */ function addDividers(arr: T[], divider: ReactElement): ReactNode[] { - return arr.flatMap((e, i) => [ - i ? React.cloneElement(divider, { key: `divider-${i}` }) : null, - e, - ]); + return arr.flatMap((e, i) => [i ? cloneElement(divider, { key: `divider-${i}` }) : null, e]); } diff --git a/src/app/dim-ui/ErrorBoundary.tsx b/src/app/dim-ui/ErrorBoundary.tsx index 76f8bbd2a5..48bfcf5974 100644 --- a/src/app/dim-ui/ErrorBoundary.tsx +++ b/src/app/dim-ui/ErrorBoundary.tsx @@ -1,6 +1,6 @@ import ErrorPanel from 'app/shell/ErrorPanel'; import { errorLog } from 'app/utils/log'; -import React from 'react'; +import React, { Component } from 'react'; import { reportException } from '../utils/exceptions'; interface Props { @@ -12,7 +12,7 @@ interface State { error?: Error; } -export default class ErrorBoundary extends React.Component { +export default class ErrorBoundary extends Component { constructor(props: Props) { super(props); this.state = {}; diff --git a/src/app/dim-ui/PressTip.tsx b/src/app/dim-ui/PressTip.tsx index 2118f3da76..d70368ce98 100644 --- a/src/app/dim-ui/PressTip.tsx +++ b/src/app/dim-ui/PressTip.tsx @@ -2,9 +2,8 @@ import { Placement } from '@popperjs/core'; import { tempContainer } from 'app/utils/temp-container'; import clsx from 'clsx'; import _ from 'lodash'; -import { +import React, { MutableRefObject, - default as React, createContext, useCallback, useContext, @@ -12,7 +11,7 @@ import { useRef, useState, } from 'react'; -import ReactDOM from 'react-dom'; +import { createPortal } from 'react-dom'; import styles from './PressTip.m.scss'; import { usePopper } from './usePopper'; @@ -116,7 +115,7 @@ function Control({ {children} {open && - ReactDOM.createPortal( + createPortal(
void; @@ -153,7 +161,7 @@ function SymbolsPickerButton({ {symbolsIcon} {open && - ReactDOM.createPortal( + createPortal(
setOpen(false)}> diff --git a/src/app/dim-ui/useConfirm.tsx b/src/app/dim-ui/useConfirm.tsx index 0457af951a..c319ad660a 100644 --- a/src/app/dim-ui/useConfirm.tsx +++ b/src/app/dim-ui/useConfirm.tsx @@ -1,7 +1,7 @@ import { isWindows } from 'app/utils/browsers'; import { t } from 'i18next'; import { useCallback } from 'react'; -import { Buttons, Title, default as useDialog } from './useDialog'; +import useDialog, { Buttons, Title } from './useDialog'; export interface ConfirmOpts { okLabel?: React.ReactNode; diff --git a/src/app/inventory-page/HeaderShadowDiv.tsx b/src/app/inventory-page/HeaderShadowDiv.tsx index c4610aeb8f..e24844be08 100644 --- a/src/app/inventory-page/HeaderShadowDiv.tsx +++ b/src/app/inventory-page/HeaderShadowDiv.tsx @@ -1,9 +1,9 @@ import { useSetCSSVarToHeight } from 'app/utils/hooks'; -import React, { useRef } from 'react'; +import React, { memo, useRef } from 'react'; import styles from './HeaderShadowDiv.m.scss'; // Also sets `--store-header-height` to the height of `children` -export default React.memo(({ children, ...divProps }: React.HTMLAttributes) => { +export default memo(({ children, ...divProps }: React.HTMLAttributes) => { const ref = useRef(null); useSetCSSVarToHeight(ref, '--store-header-height'); return ( diff --git a/src/app/inventory/store/d2-item-factory.ts b/src/app/inventory/store/d2-item-factory.ts index 10691b23ae..29533e767d 100644 --- a/src/app/inventory/store/d2-item-factory.ts +++ b/src/app/inventory/store/d2-item-factory.ts @@ -1,7 +1,6 @@ import { CustomStatDef } from '@destinyitemmanager/dim-api-types'; import { D2Categories } from 'app/destiny2/d2-bucket-categories'; import { t } from 'app/i18next-t'; -import { isTrialsPassage, isWinsObjective } from 'app/inventory/store/objectives'; import { D2ItemTiers, THE_FORBIDDEN_BUCKET, @@ -53,7 +52,7 @@ import { buildCraftedInfo } from './crafted'; import { buildDeepsightInfo } from './deepsight'; import { createItemIndex } from './item-index'; import { buildMasterwork } from './masterwork'; -import { buildObjectives } from './objectives'; +import { buildObjectives, isTrialsPassage, isWinsObjective } from './objectives'; import { buildPatternInfo } from './patterns'; import { buildSockets } from './sockets'; import { buildStats } from './stats'; diff --git a/src/app/item-actions/ItemActionsDropdown.tsx b/src/app/item-actions/ItemActionsDropdown.tsx index eae0ce75a1..b1d8d16bd1 100644 --- a/src/app/item-actions/ItemActionsDropdown.tsx +++ b/src/app/item-actions/ItemActionsDropdown.tsx @@ -17,7 +17,7 @@ import { useIsPhonePortrait } from 'app/shell/selectors'; import { useThunkDispatch } from 'app/store/thunk-dispatch'; import { stripSockets } from 'app/strip-sockets/strip-sockets-actions'; import _ from 'lodash'; -import React from 'react'; +import { memo } from 'react'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router'; import { TagCommand, itemTagSelectorList } from '../inventory/dim-item-info'; @@ -40,7 +40,7 @@ import styles from './ItemActionsDropdown.m.scss'; /** * Various actions that can be performed on an item */ -export default React.memo(function ItemActionsDropdown({ +export default memo(function ItemActionsDropdown({ searchActive, filteredItems, searchQuery, diff --git a/src/app/item-feed/ItemFeedPage.tsx b/src/app/item-feed/ItemFeedPage.tsx index 779af36699..59fb0ef9c2 100644 --- a/src/app/item-feed/ItemFeedPage.tsx +++ b/src/app/item-feed/ItemFeedPage.tsx @@ -3,10 +3,10 @@ import ShowPageLoading from 'app/dim-ui/ShowPageLoading'; import { t } from 'app/i18next-t'; import { useLoadStores } from 'app/inventory/store/hooks'; import { usePageTitle } from 'app/utils/hooks'; -import React, { Suspense } from 'react'; +import { Suspense, lazy } from 'react'; import styles from './ItemFeedPage.m.scss'; -const ItemFeed = React.lazy(() => import(/* webpackChunkName: "item-feed" */ './ItemFeed')); +const ItemFeed = lazy(() => import(/* webpackChunkName: "item-feed" */ './ItemFeed')); /** * The Item Feed in a full page for mobile. diff --git a/src/app/item-feed/ItemFeedSidebar.tsx b/src/app/item-feed/ItemFeedSidebar.tsx index dbf72207bb..fd42263fb5 100644 --- a/src/app/item-feed/ItemFeedSidebar.tsx +++ b/src/app/item-feed/ItemFeedSidebar.tsx @@ -3,10 +3,10 @@ import { t } from 'app/i18next-t'; import { useSetting } from 'app/settings/hooks'; import { AppIcon, collapseIcon, faCaretUp } from 'app/shell/icons'; import clsx from 'clsx'; -import React, { Suspense, useEffect } from 'react'; +import { Suspense, lazy, useEffect } from 'react'; import styles from './ItemFeedSidebar.m.scss'; -const ItemFeed = React.lazy(() => import(/* webpackChunkName: "item-feed" */ './ItemFeed')); +const ItemFeed = lazy(() => import(/* webpackChunkName: "item-feed" */ './ItemFeed')); /** * The Item Feed in an expandable sidebar to be placed on the inventory screen. diff --git a/src/app/loadout-builder/filter/TierSelect.tsx b/src/app/loadout-builder/filter/TierSelect.tsx index 5df4792d40..4ad9873f6b 100644 --- a/src/app/loadout-builder/filter/TierSelect.tsx +++ b/src/app/loadout-builder/filter/TierSelect.tsx @@ -6,7 +6,7 @@ import { AppIcon, dragHandleIcon } from 'app/shell/icons'; import { DestinyStatDefinition } from 'bungie-api-ts/destiny2'; import clsx from 'clsx'; import _ from 'lodash'; -import React from 'react'; +import React, { memo } from 'react'; import { ArmorStatHashes, MinMaxIgnored, StatFilters, StatRanges } from '../types'; import { statTierWithHalf } from '../utils'; import styles from './TierSelect.m.scss'; @@ -14,7 +14,7 @@ import styles from './TierSelect.m.scss'; const IGNORE = 'ignore'; const INCLUDE = 'include'; -const MinMaxSelect = React.memo(MinMaxSelectInner); +const MinMaxSelect = memo(MinMaxSelectInner); /** * A selector that allows for choosing minimum and maximum stat ranges, plus reordering the stat priority. diff --git a/src/app/loadout-drawer/LoadoutDrawerContainer.tsx b/src/app/loadout-drawer/LoadoutDrawerContainer.tsx index d84564cf0c..1ac3d281f5 100644 --- a/src/app/loadout-drawer/LoadoutDrawerContainer.tsx +++ b/src/app/loadout-drawer/LoadoutDrawerContainer.tsx @@ -9,17 +9,17 @@ import { useD2Definitions } from 'app/manifest/selectors'; import { showNotification } from 'app/notifications/notifications'; import { useEventBusListener } from 'app/utils/hooks'; import { DestinyClass } from 'bungie-api-ts/destiny2'; -import React, { Suspense, useCallback, useEffect, useState } from 'react'; +import { Suspense, lazy, useCallback, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { useLocation, useNavigate } from 'react-router'; import { addItem$, editLoadout$ } from './loadout-events'; import { Loadout } from './loadout-types'; import { convertToLoadoutItem, newLoadout, pickBackingStore } from './loadout-utils'; -const LoadoutDrawer = React.lazy( +const LoadoutDrawer = lazy( () => import(/* webpackChunkName: "loadout-drawer" */ './LoadoutDrawer') ); -const D1LoadoutDrawer = React.lazy( +const D1LoadoutDrawer = lazy( () => import( /* webpackChunkName: "d1-loadout-drawer" */ 'app/destiny1/loadout-drawer/D1LoadoutDrawer' diff --git a/src/app/organizer/EnabledColumnsSelector.tsx b/src/app/organizer/EnabledColumnsSelector.tsx index 1306263511..7309eecc53 100644 --- a/src/app/organizer/EnabledColumnsSelector.tsx +++ b/src/app/organizer/EnabledColumnsSelector.tsx @@ -1,6 +1,6 @@ import { t } from 'app/i18next-t'; import { DestinyClass } from 'bungie-api-ts/destiny2'; -import React from 'react'; +import { memo } from 'react'; import { getColumnSelectionId } from './Columns'; import DropDown, { DropDownItem } from './DropDown'; import { ColumnDefinition } from './table-types'; @@ -15,7 +15,7 @@ import { ColumnDefinition } from './table-types'; * TODO: Convert to including drag and drop functionality so that columns can be reordered. */ // TODO: Save to settings -export default React.memo(function EnabledColumnsSelector({ +export default memo(function EnabledColumnsSelector({ columns, enabledColumns, forClass, diff --git a/src/app/organizer/ItemTable.tsx b/src/app/organizer/ItemTable.tsx index 0e17d52bd1..0af5853bb8 100644 --- a/src/app/organizer/ItemTable.tsx +++ b/src/app/organizer/ItemTable.tsx @@ -41,8 +41,7 @@ import { DestinyClass } from 'bungie-api-ts/destiny2'; import clsx from 'clsx'; import { ItemCategoryHashes } from 'data/d2/generated-enums'; import _ from 'lodash'; -import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import ReactDOM from 'react-dom'; +import React, { ReactNode, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import Dropzone, { DropzoneOptions } from 'react-dropzone'; import { useSelector } from 'react-redux'; import { getColumnSelectionId, getColumns } from './Columns'; @@ -51,6 +50,8 @@ import ItemActions, { TagCommandInfo } from './ItemActions'; import { itemIncludesCategories } from './filtering-utils'; import { compareSelectedItems } from 'app/compare/actions'; + +import { createPortal } from 'react-dom'; // eslint-disable-next-line css-modules/no-unused-class import styles from './ItemTable.m.scss'; import { ItemCategoryTreeNode, armorTopLevelCatHashes } from './ItemTypeSelector'; @@ -74,7 +75,7 @@ const downloadButtonSettings = [ { categoryId: ['ghosts'], csvType: 'Ghost' as const, label: tl('Bucket.Ghost') }, ]; -const MemoRow = React.memo(TableRow); +const MemoRow = memo(TableRow); export default function ItemTable({ categories }: { categories: ItemCategoryTreeNode[] }) { const [columnSorts, setColumnSorts] = useState([ @@ -501,7 +502,7 @@ export default function ItemTable({ categories }: { categories: ItemCategoryTree forClass={classIfAny} />
- {ReactDOM.createPortal(, document.head)} + {createPortal(, document.head)}
diff --git a/src/app/search/SearchBar.tsx b/src/app/search/SearchBar.tsx index 2d1b6f3355..814e29c2f0 100644 --- a/src/app/search/SearchBar.tsx +++ b/src/app/search/SearchBar.tsx @@ -20,6 +20,9 @@ import { AnimatePresence, LayoutGroup, motion } from 'framer-motion'; import _ from 'lodash'; import React, { Suspense, + forwardRef, + lazy, + memo, useCallback, useDeferredValue, useEffect, @@ -125,11 +128,9 @@ function mapStateToProps() { }; } -const LazyFilterHelp = React.lazy( - () => import(/* webpackChunkName: "filter-help" */ './FilterHelp') -); +const LazyFilterHelp = lazy(() => import(/* webpackChunkName: "filter-help" */ './FilterHelp')); -const RowContents = React.memo(({ item }: { item: SearchItem }) => { +const RowContents = memo(({ item }: { item: SearchItem }) => { function highlight(text: string, section: string) { return item.highlightRange?.section === section ? ( { } }); -const Row = React.memo( +const Row = memo( ({ highlighted, item, @@ -622,6 +623,4 @@ function SearchBar( ); } -export default connect(mapStateToProps, null, null, { forwardRef: true })( - React.forwardRef(SearchBar) -); +export default connect(mapStateToProps, null, null, { forwardRef: true })(forwardRef(SearchBar)); diff --git a/src/app/search/SearchFilter.tsx b/src/app/search/SearchFilter.tsx index 50510e2a9a..8f019804a2 100644 --- a/src/app/search/SearchFilter.tsx +++ b/src/app/search/SearchFilter.tsx @@ -1,7 +1,7 @@ import { t } from 'app/i18next-t'; import { querySelector, searchQueryVersionSelector, useIsPhonePortrait } from 'app/shell/selectors'; import { useThunkDispatch } from 'app/store/thunk-dispatch'; -import React, { useCallback, useMemo } from 'react'; +import React, { forwardRef, useCallback, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router'; import { setSearchQuery } from '../shell/actions'; @@ -13,7 +13,7 @@ import { SearchInput } from './SearchInput'; /** * The main search filter that's in the header. */ -export default React.forwardRef(function SearchFilter( +export default forwardRef(function SearchFilter( { onClear, }: { diff --git a/src/app/settings/SortOrderEditor.tsx b/src/app/settings/SortOrderEditor.tsx index 45468c9ed9..a8215c3fda 100644 --- a/src/app/settings/SortOrderEditor.tsx +++ b/src/app/settings/SortOrderEditor.tsx @@ -2,7 +2,7 @@ import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea import { t } from 'app/i18next-t'; import clsx from 'clsx'; import _ from 'lodash'; -import React from 'react'; +import React, { memo } from 'react'; import { AppIcon, dragHandleIcon, @@ -22,7 +22,7 @@ export interface SortProperty { readonly reversed: boolean; } -const SortEditorItemList = React.memo(({ order }: { order: SortProperty[] }) => ( +const SortEditorItemList = memo(({ order }: { order: SortProperty[] }) => ( <> {order.map((item, index) => ( diff --git a/src/app/shell/Destiny.tsx b/src/app/shell/Destiny.tsx index 2f50daf779..2128208d3b 100644 --- a/src/app/shell/Destiny.tsx +++ b/src/app/shell/Destiny.tsx @@ -26,7 +26,7 @@ import StripSockets from 'app/strip-sockets/StripSockets'; import { setAppBadge } from 'app/utils/app-badge'; import { fetchWishList } from 'app/wishlists/wishlist-fetch'; import _ from 'lodash'; -import React, { useEffect, useMemo } from 'react'; +import { lazy, useEffect, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { Navigate, Route, Routes, useLocation, useParams } from 'react-router'; import { Hotkey } from '../hotkeys/hotkeys'; @@ -37,44 +37,38 @@ import styles from './Destiny.m.scss'; import ErrorPanel from './ErrorPanel'; // TODO: Could be slightly better to group these a bit, but for now we break them each into a separate chunk. -const Inventory = React.lazy( +const Inventory = lazy( () => import(/* webpackChunkName: "inventory" */ 'app/inventory-page/Inventory') ); -const Progress = React.lazy( - () => import(/* webpackChunkName: "progress" */ 'app/progress/Progress') -); -const LoadoutBuilderContainer = React.lazy( +const Progress = lazy(() => import(/* webpackChunkName: "progress" */ 'app/progress/Progress')); +const LoadoutBuilderContainer = lazy( () => import(/* webpackChunkName: "loadoutBuilder" */ 'app/loadout-builder/LoadoutBuilderContainer') ); -const D1LoadoutBuilder = React.lazy( +const D1LoadoutBuilder = lazy( () => import( /* webpackChunkName: "d1LoadoutBuilder" */ 'app/destiny1/loadout-builder/D1LoadoutBuilder' ) ); -const Vendors = React.lazy(async () => ({ +const Vendors = lazy(async () => ({ default: (await import(/* webpackChunkName: "vendors" */ 'app/vendors/components')).Vendors, })); -const SingleVendor = React.lazy(async () => ({ +const SingleVendor = lazy(async () => ({ default: (await import(/* webpackChunkName: "vendors" */ 'app/vendors/components')).SingleVendor, })); -const D1Vendors = React.lazy( +const D1Vendors = lazy( () => import(/* webpackChunkName: "d1vendors" */ 'app/destiny1/vendors/D1Vendors') ); -const RecordBooks = React.lazy( +const RecordBooks = lazy( () => import(/* webpackChunkName: "recordbooks" */ 'app/destiny1/record-books/RecordBooks') ); -const Organizer = React.lazy( - () => import(/* webpackChunkName: "organizer" */ 'app/organizer/Organizer') -); -const Activities = React.lazy( +const Organizer = lazy(() => import(/* webpackChunkName: "organizer" */ 'app/organizer/Organizer')); +const Activities = lazy( () => import(/* webpackChunkName: "activities" */ 'app/destiny1/activities/Activities') ); -const Records = React.lazy(() => import(/* webpackChunkName: "records" */ 'app/records/Records')); -const Loadouts = React.lazy( - () => import(/* webpackChunkName: "loadouts" */ 'app/loadout/Loadouts') -); +const Records = lazy(() => import(/* webpackChunkName: "records" */ 'app/records/Records')); +const Loadouts = lazy(() => import(/* webpackChunkName: "loadouts" */ 'app/loadout/Loadouts')); /** * Base view for pages that show Destiny content. @@ -249,7 +243,7 @@ export default function Destiny() { - {autoLockTagged && } + {Boolean(autoLockTagged) && } ); diff --git a/src/app/shell/ErrorPanel.tsx b/src/app/shell/ErrorPanel.tsx index 93aa81f3dd..2576dc7484 100644 --- a/src/app/shell/ErrorPanel.tsx +++ b/src/app/shell/ErrorPanel.tsx @@ -4,14 +4,14 @@ import { t } from 'app/i18next-t'; import { DimError } from 'app/utils/dim-error'; import BungieAlerts from 'app/whats-new/BungieAlerts'; import { PlatformErrorCodes } from 'bungie-api-ts/destiny2'; -import React, { useState } from 'react'; +import React, { lazy, useState } from 'react'; import { AppIcon, helpIcon, mastodonIcon, refreshIcon, twitterIcon } from '../shell/icons'; import styles from './ErrorPanel.m.scss'; const bungieHelpLink = 'http://twitter.com/BungieHelp'; const dimHelpMastodonLink = 'http://mstdn.games/@ThisIsDIM'; const troubleshootingLink = 'https://github.com/DestinyItemManager/DIM/wiki/Troubleshooting'; -const Timeline = React.lazy(async () => { +const Timeline = lazy(async () => { const m = await import(/* webpackChunkName: "twitter" */ 'react-twitter-widgets'); return { default: m.Timeline }; }); diff --git a/src/app/shell/PostmasterWarningBanner.tsx b/src/app/shell/PostmasterWarningBanner.tsx index 96e192027e..476a2813c9 100644 --- a/src/app/shell/PostmasterWarningBanner.tsx +++ b/src/app/shell/PostmasterWarningBanner.tsx @@ -6,14 +6,14 @@ import { postmasterAlmostFull, postmasterSpaceUsed, } from 'app/loadout-drawer/postmaster'; -import React from 'react'; +import { memo } from 'react'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router'; import styles from './PostmasterWarningBanner.m.scss'; import { useIsPhonePortrait } from './selectors'; /** Shows a warning anywhere in the app if your active character's postmaster is low. */ -export default React.memo(function PostmasterWarningBanner() { +export default memo(function PostmasterWarningBanner() { // if postmaster low on most recent character // and we're not on the inventory screen || isPhonePortrait // show collect button diff --git a/src/app/shell/icons/AppIcon.tsx b/src/app/shell/icons/AppIcon.tsx index 1e8d55f133..aa10611db3 100644 --- a/src/app/shell/icons/AppIcon.tsx +++ b/src/app/shell/icons/AppIcon.tsx @@ -1,7 +1,7 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import clsx from 'clsx'; -import React from 'react'; +import { memo } from 'react'; import './AppIcon.scss'; function AppIcon({ @@ -34,4 +34,4 @@ function AppIcon({ } } -export default React.memo(AppIcon); +export default memo(AppIcon); diff --git a/src/app/store-stats/AccountCurrencies.tsx b/src/app/store-stats/AccountCurrencies.tsx index 7f2a97d963..3f3873204a 100644 --- a/src/app/store-stats/AccountCurrencies.tsx +++ b/src/app/store-stats/AccountCurrencies.tsx @@ -1,12 +1,12 @@ import BungieImage from 'app/dim-ui/BungieImage'; import { currenciesSelector } from 'app/inventory/selectors'; import _ from 'lodash'; -import React from 'react'; +import React, { memo } from 'react'; import { useSelector } from 'react-redux'; import styles from './AccountCurrencies.m.scss'; /** The account currencies (glimmer, shards, etc.) */ -export default React.memo(function AccountCurrency() { +export default memo(function AccountCurrency() { const currencies = useSelector(currenciesSelector); return currencies.length > 0 ? ( c.itemHash).join()}> diff --git a/src/app/store-stats/VaultCapacity.tsx b/src/app/store-stats/VaultCapacity.tsx index 4e7c7bc554..460105e411 100644 --- a/src/app/store-stats/VaultCapacity.tsx +++ b/src/app/store-stats/VaultCapacity.tsx @@ -16,7 +16,7 @@ import vaultIcon from 'destiny-icons/armor_types/helmet.svg'; import consumablesIcon from 'destiny-icons/general/consumables.svg'; import modificationsIcon from 'destiny-icons/general/modifications.svg'; import _ from 'lodash'; -import React from 'react'; +import React, { memo } from 'react'; import { useSelector } from 'react-redux'; import { createSelector } from 'reselect'; import styles from './VaultCapacity.m.scss'; @@ -97,7 +97,7 @@ const vaultCountsSelector = createSelector( ); /** Current amounts and maximum capacities of the vault */ -export default React.memo(function VaultCapacity() { +export default memo(function VaultCapacity() { const vaultCounts = useSelector(vaultCountsSelector); const mats = ; const isPhonePortrait = useIsPhonePortrait(); diff --git a/src/app/stream-deck/stream-deck.ts b/src/app/stream-deck/stream-deck.ts index 539c1bbabc..e53ab3d585 100644 --- a/src/app/stream-deck/stream-deck.ts +++ b/src/app/stream-deck/stream-deck.ts @@ -30,7 +30,9 @@ export const resetStreamDeckAuthorization = async () => { // run both lazy core and reducer modules export const lazyLoadStreamDeck = async () => { if (!lazyStreamDeck.core) { - const { reducer, ...core } = (await import('./async-module')).default; + const { reducer, ...core } = ( + await import(/* webpackChunkName: "streamdeck" */ './async-module') + ).default; lazyStreamDeck.core = core; lazyStreamDeck.reducer = reducer; } diff --git a/src/app/utils/socket-utils.ts b/src/app/utils/socket-utils.ts index 45f24fb620..ca28ab4ee1 100644 --- a/src/app/utils/socket-utils.ts +++ b/src/app/utils/socket-utils.ts @@ -1,7 +1,9 @@ import { D2ManifestDefinitions } from 'app/destiny2/d2-definitions'; import { DimItem, + DimSocket, DimSocketCategory, + DimSockets, PluggableInventoryItemDefinition, } from 'app/inventory/item-types'; import { @@ -11,7 +13,6 @@ import { } from 'bungie-api-ts/destiny2'; import { PlugCategoryHashes, SocketCategoryHashes } from 'data/d2/generated-enums'; import _ from 'lodash'; -import { DimSocket, DimSockets } from '../inventory/item-types'; import { isArmor2Mod, isKillTrackerSocket } from './item-utils'; type WithRequiredProperty = T & { diff --git a/src/app/utils/temp-container.ts b/src/app/utils/temp-container.ts index e728ee6e62..cf6801c7c6 100644 --- a/src/app/utils/temp-container.ts +++ b/src/app/utils/temp-container.ts @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import { createPortal } from 'react-dom'; /** * A guaranteed-present element for attaching temporary elements to instead of @@ -12,5 +12,5 @@ export const tempContainer = document.getElementById('temp-container')!; * Render the given children near the root of the page instead of in their existing component hierarchy. */ export function Portal({ children }: { children: React.ReactNode }) { - return ReactDOM.createPortal(children, tempContainer); + return createPortal(children, tempContainer); }