Merge pull request #10876 from DestinyItemManager/chunks

Break up some more stuff

src/app/App.tsx

@@ -22,13 +22,21 @@ import Header from './shell/Header';
 import ScrollToTop from './shell/ScrollToTop';
 import SneakyUpdates from './shell/SneakyUpdates';
 
-const WhatsNew = lazy(() => import(/* webpackChunkName: "whatsNew" */ './whats-new/WhatsNew'));
+const WhatsNew = lazy(
+  () => import(/* webpackChunkName: "about-whatsnew-privacy-debug" */ './whats-new/WhatsNew'),
+);
 const SettingsPage = lazy(
   () => import(/* webpackChunkName: "settings" */ './settings/SettingsPage'),
 );
-const Debug = lazy(() => import(/* webpackChunkName: "debug" */ './debug/Debug'));
-const Privacy = lazy(() => import(/* webpackChunkName: "privacy" */ './shell/Privacy'));
-const About = lazy(() => import(/* webpackChunkName: "about" */ './shell/About'));
+const Debug = lazy(
+  () => import(/* webpackChunkName: "about-whatsnew-privacy-debug" */ './debug/Debug'),
+);
+const Privacy = lazy(
+  () => import(/* webpackChunkName: "about-whatsnew-privacy-debug" */ './shell/Privacy'),
+);
+const About = lazy(
+  () => import(/* webpackChunkName: "about-whatsnew-privacy-debug" */ './shell/About'),
+);
 
 export default function App() {
   const language = useSelector(settingSelector('language'));

src/app/armory/Armory.tsx

@@ -14,9 +14,9 @@ import {
   useSocketOverrides,
 } from 'app/inventory/store/override-sockets';
 import { getEvent, getSeason } from 'app/inventory/store/season';
+import { AmmoIcon } from 'app/item-popup/AmmoIcon';
 import BreakerType from 'app/item-popup/BreakerType';
 import EmblemPreview from 'app/item-popup/EmblemPreview';
-import { AmmoIcon, ItemTypeName } from 'app/item-popup/ItemPopupHeader';
 import ItemSockets from 'app/item-popup/ItemSockets';
 import ItemStats from 'app/item-popup/ItemStats';
 import MetricCategories from 'app/item-popup/MetricCategories';
@@ -27,7 +27,7 @@ import { Reward } from 'app/progress/Reward';
 import { AppIcon, compareIcon } from 'app/shell/icons';
 import { useIsPhonePortrait } from 'app/shell/selectors';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
-import { getItemYear } from 'app/utils/item-utils';
+import { getItemYear, itemTypeName } from 'app/utils/item-utils';
 import clsx from 'clsx';
 import { D2EventInfo } from 'data/d2/d2-event-info-v2';
 import { ItemCategoryHashes } from 'data/d2/generated-enums';
@@ -118,7 +118,7 @@ export default function Armory({
             <ElementIcon element={item.element} className={styles.element} />
             <BreakerType item={item} />
             {item.destinyVersion === 2 && item.ammoType > 0 && <AmmoIcon type={item.ammoType} />}
-            <ItemTypeName item={item} />
+            <div>{itemTypeName(item)}</div>
             {item.pursuit?.questLine && (
               <div>
                 {t('MovePopup.Subtitle.QuestProgress', {

src/app/armory/LazyArmory.ts

@@ -1,3 +1,3 @@
 import { lazy } from 'react';
 
-export default lazy(() => import('./Armory' /* webpackChunkName: "armory" */));
+export default lazy(() => import('./Armory' /* webpackChunkName: "item-popup-armory" */));

src/app/dim-ui/WeaponGroupingIcon.tsx

@@ -1,5 +1,5 @@
 import TagIcon from 'app/inventory/TagIcon';
-import { AmmoIcon } from 'app/item-popup/ItemPopupHeader';
+import { AmmoIcon } from 'app/item-popup/AmmoIcon';
 import { VaultGroupIcon } from 'app/shell/item-comparators';
 import ElementIcon from './ElementIcon';
 import { getWeaponTypeSvgIconFromCategoryHashes } from './svgs/itemCategory';

src/app/item-feed/Highlights.tsx

@@ -2,8 +2,8 @@ import BungieImage from 'app/dim-ui/BungieImage';
 import { PressTip } from 'app/dim-ui/PressTip';
 import { DefItemIcon } from 'app/inventory/ItemIcon';
 import { DimItem, DimStat } from 'app/inventory/item-types';
-import { ItemTypeName } from 'app/item-popup/ItemPopupHeader';
 import { DimPlugTooltip } from 'app/item-popup/PlugTooltip';
+import { itemTypeName } from 'app/utils/item-utils';
 import {
   getExtraIntrinsicPerkSockets,
   getWeaponArchetype,
@@ -32,7 +32,7 @@ export default function Highlights({ item }: { item: DimItem }) {
     return (
       <>
         <span className={styles.type}>
-          {archetype} <ItemTypeName item={item} />
+          {archetype} <div>{itemTypeName(item)}</div>
         </span>
         <div className={styles.perks}>
           {perkSockets.map((s) => (

src/app/item-popup/AmmoIcon.m.scss

@@ -0,0 +1,11 @@
+@use '../variables.scss' as *;
+
+.ammoIcon {
+  margin: 0 2px 0 6px;
+  height: 14px;
+  width: 19px;
+}
+
+.primary {
+  opacity: 0.9;
+}

src/app/item-popup/AmmoIcon.tsx

@@ -0,0 +1,28 @@
+import { LookupTable } from 'app/utils/util-types';
+import { DestinyAmmunitionType } from 'bungie-api-ts/destiny2';
+import clsx from 'clsx';
+import heavy from 'destiny-icons/general/ammo-heavy.svg';
+import primary from 'destiny-icons/general/ammo-primary.svg';
+import special from 'destiny-icons/general/ammo-special.svg';
+import styles from './AmmoIcon.m.scss';
+
+const ammoIcons: LookupTable<DestinyAmmunitionType, string> = {
+  [DestinyAmmunitionType.Primary]: primary,
+  [DestinyAmmunitionType.Special]: special,
+  [DestinyAmmunitionType.Heavy]: heavy,
+};
+
+export function AmmoIcon({ type, className }: { type: DestinyAmmunitionType; className?: string }) {
+  return (
+    <img
+      className={clsx(
+        styles.ammoIcon,
+        {
+          [styles.primary]: type === DestinyAmmunitionType.Primary,
+        },
+        className,
+      )}
+      src={ammoIcons[type]}
+    />
+  );
+}

src/app/item-popup/ItemPopupContainer.tsx

@@ -9,7 +9,7 @@ import { useSubscription } from 'use-subscription';
 import { DimItem } from '../inventory/item-types';
 import { hideItemPopup, showItemPopup$ } from './item-popup';
 
-const ItemPopup = lazy(() => import(/* webpackChunkName: "item-popup" */ './ItemPopup'));
+const ItemPopup = lazy(() => import(/* webpackChunkName: "item-popup-armory" */ './ItemPopup'));
 
 interface Props {
   boundarySelector?: string;

src/app/item-popup/ItemPopupHeader.m.scss

@@ -69,12 +69,6 @@
   }
 }
 
-.ammoIcon {
-  margin: 0 2px 0 6px;
-  height: 14px;
-  width: 19px;
-}
-
 .itemType {
   opacity: 0.7;
 }
@@ -83,10 +77,6 @@
   margin: 0 4px 0 2px;
 }
 
-.primary {
-  opacity: 0.9;
-}
-
 .masterwork {
   background-image: url('../../images/masterworkHeader.png');
   background-repeat: repeat-x;

src/app/item-popup/ItemPopupHeader.tsx

@@ -3,17 +3,14 @@ import ElementIcon from 'app/dim-ui/ElementIcon';
 import RichDestinyText from 'app/dim-ui/destiny-symbols/RichDestinyText';
 import { useHotkey } from 'app/hotkeys/useHotkey';
 import { t } from 'app/i18next-t';
-import { D1BucketHashes } from 'app/search/d1-known-values';
 import type { ItemTierName } from 'app/search/d2-known-values';
+import { itemTypeName } from 'app/utils/item-utils';
 import { LookupTable } from 'app/utils/util-types';
-import { DestinyAmmunitionType, DestinyClass } from 'bungie-api-ts/destiny2';
 import clsx from 'clsx';
-import { BucketHashes, ItemCategoryHashes } from 'data/d2/generated-enums';
-import heavy from 'destiny-icons/general/ammo-heavy.svg';
-import primary from 'destiny-icons/general/ammo-primary.svg';
-import special from 'destiny-icons/general/ammo-special.svg';
+import { ItemCategoryHashes } from 'data/d2/generated-enums';
 import { useState } from 'react';
 import { DimItem } from '../inventory/item-types';
+import { AmmoIcon } from './AmmoIcon';
 import BreakerType from './BreakerType';
 import styles from './ItemPopupHeader.m.scss';
 
@@ -62,7 +59,7 @@ export default function ItemPopupHeader({
       )}
       <div className={styles.subtitle}>
         <div className={styles.type}>
-          <ItemTypeName item={item} className={styles.itemType} />
+          <div className={styles.itemType}>{itemTypeName(item)}</div>
           {item.destinyVersion === 2 && item.ammoType > 0 && <AmmoIcon type={item.ammoType} />}
           <BreakerType item={item} />
         </div>
@@ -92,50 +89,3 @@ export default function ItemPopupHeader({
     </button>
   );
 }
-
-const ammoIcons: LookupTable<DestinyAmmunitionType, string> = {
-  [DestinyAmmunitionType.Primary]: primary,
-  [DestinyAmmunitionType.Special]: special,
-  [DestinyAmmunitionType.Heavy]: heavy,
-};
-
-export function AmmoIcon({ type, className }: { type: DestinyAmmunitionType; className?: string }) {
-  return (
-    <img
-      className={clsx(
-        styles.ammoIcon,
-        {
-          [styles.primary]: type === DestinyAmmunitionType.Primary,
-        },
-        className,
-      )}
-      src={ammoIcons[type]}
-    />
-  );
-}
-
-export function ItemTypeName({ item, className }: { item: DimItem; className?: string }) {
-  const classType =
-    (item.classType !== DestinyClass.Unknown &&
-      // These already include the class name
-      item.bucket.hash !== BucketHashes.ClassArmor &&
-      item.bucket.hash !== D1BucketHashes.Artifact &&
-      item.bucket.hash !== BucketHashes.Subclass &&
-      !item.classified &&
-      item.classTypeNameLocalized[0].toUpperCase() + item.classTypeNameLocalized.slice(1)) ||
-    '';
-
-  const title =
-    item.typeName && classType
-      ? t('MovePopup.Subtitle.Type', {
-          classType,
-          typeName: item.typeName,
-        })
-      : item.typeName || classType;
-
-  if (!title) {
-    return null;
-  }
-
-  return <div className={className}>{title}</div>;
-}

src/app/shell/Destiny.tsx

@@ -54,13 +54,11 @@ const D1LoadoutBuilder = lazy(
       /* webpackChunkName: "d1LoadoutBuilder" */ 'app/destiny1/loadout-builder/D1LoadoutBuilder'
     ),
 );
-const Vendors = lazy(async () => ({
-  default: (await import(/* webpackChunkName: "vendors" */ 'app/vendors/components')).Vendors,
-}));
-const SingleVendorPage = lazy(async () => ({
-  default: (await import(/* webpackChunkName: "vendors" */ 'app/vendors/components'))
-    .SingleVendorPage,
-}));
+const Vendors = lazy(async () => import(/* webpackChunkName: "vendors" */ 'app/vendors/Vendors'));
+const SingleVendorPage = lazy(
+  async () =>
+    import(/* webpackChunkName: "vendors" */ 'app/vendors/single-vendor/SingleVendorPage'),
+);
 const D1Vendors = lazy(
   () => import(/* webpackChunkName: "d1vendors" */ 'app/destiny1/vendors/D1Vendors'),
 );

src/app/utils/item-utils.ts

@@ -1,5 +1,6 @@
 import { factionItemAligns } from 'app/destiny1/d1-factions';
 import { D2ManifestDefinitions } from 'app/destiny2/d2-definitions';
+import { t } from 'app/i18next-t';
 import {
   D1Item,
   DimItem,
@@ -10,6 +11,7 @@ import {
 } from 'app/inventory/item-types';
 import { DimStore } from 'app/inventory/store-types';
 import { getSeason } from 'app/inventory/store/season';
+import { D1BucketHashes } from 'app/search/d1-known-values';
 import {
   ARTIFICE_PERK_HASH,
   armor2PlugCategoryHashes,
@@ -364,3 +366,30 @@ export function getSeasonalBreakerTypeHash(item: DimItem): number | undefined {
     }
   }
 }
+
+/** The full item type name shown as a subtitle in the item popup. e.g. "Hunter Gauntlets" */
+export function itemTypeName(item: DimItem) {
+  const classType =
+    (item.classType !== DestinyClass.Unknown &&
+      // These already include the class name
+      item.bucket.hash !== BucketHashes.ClassArmor &&
+      item.bucket.hash !== D1BucketHashes.Artifact &&
+      item.bucket.hash !== BucketHashes.Subclass &&
+      !item.classified &&
+      item.classTypeNameLocalized[0].toUpperCase() + item.classTypeNameLocalized.slice(1)) ||
+    '';
+
+  const title =
+    item.typeName && classType
+      ? t('MovePopup.Subtitle.Type', {
+          classType,
+          typeName: item.typeName,
+        })
+      : item.typeName || classType;
+
+  if (!title) {
+    return null;
+  }
+
+  return title;
+}

src/app/vendors/single-vendor/SingleVendorSheetContainer.tsx

@@ -4,10 +4,10 @@ import React, { Suspense, createContext, lazy, useCallback, useState } from 'rea
 import { useSelector } from 'react-redux';
 import { SingleVendorState, hideVendorSheet$ } from './single-vendor-sheet';
 
-const SingleVendorSheet = lazy(async () => ({
-  default: (await import(/* webpackChunkName: "vendors" */ 'app/vendors/components'))
-    .SingleVendorSheet,
-}));
+const SingleVendorSheet = lazy(
+  async () =>
+    import(/* webpackChunkName: "vendors" */ 'app/vendors/single-vendor/SingleVendorSheet'),
+);
 
 export const SingleVendorSheetContext = createContext<React.Dispatch<
   React.SetStateAction<SingleVendorState>