diff --git a/packages/ui/src/components/asset-info/asset-info.tsx b/packages/ui/src/components/asset-info/asset-info.tsx index 450a3ff0d6..5144946aee 100644 --- a/packages/ui/src/components/asset-info/asset-info.tsx +++ b/packages/ui/src/components/asset-info/asset-info.tsx @@ -9,6 +9,7 @@ import { getBundleAssetsByEntryType, getBundleAssetsFileTypeComponentLink, getModuleFileType, + getBundleAssetsByChunk, } from '@bundle-stats/utils'; import type { ReportMetricAssetRow } from '../../types'; @@ -20,31 +21,24 @@ import css from './asset-info.module.css'; interface ChunkModulesLinkProps { as: ElementType; - chunks: Array; - chunkId: string; + chunk: WebpackChunk; + chunkIds: Array; name: string; } const ChunkModulesLink = ({ as: Component, - chunks, - chunkId, + chunk, + chunkIds, name, onClick, }: ChunkModulesLinkProps & ComponentProps<'a'>) => { - const chunk = chunks?.find(({ id }) => id === chunkId); - - if (!chunk) { - return null; - } - - const chunkIds = chunks.map(({ id }) => id); const fileType = getModuleFileType(name); return ( View chunk modules @@ -144,6 +138,10 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => { }, [item]); const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS]; + const currentChunk = chunks?.find( + (chunk) => currentRun?.chunkId && currentRun.chunkId === chunk.id, + ); + const chunkIds: Array = chunks?.filter(Boolean).map((chunk) => chunk.id) || []; return ( ) => { )} - {currentRun?.chunkId && chunks && ( + {currentChunk && ( + + + {currentChunk.name} + + + )} + + {currentChunk && (
diff --git a/packages/utils/src/i18n.js b/packages/utils/src/i18n.js index ca5d1257ff..730aad9fba 100644 --- a/packages/utils/src/i18n.js +++ b/packages/utils/src/i18n.js @@ -6,6 +6,7 @@ export default { COMPONENT_LINK_BUNDLE_ASSETS_CACHE_INVALIDATION: 'View changed assets', COMPONENT_LINK_BUNDLE_ASSETS_COUNT: 'View assets', COMPONENT_LINK_BUNDLE_ASSETS_CHUNK_COUNT: 'View chunks', + COMPONENT_LINK_BUNDLE_ASSETS_CHUNKS: 'View chunk assets', COMPONENT_LINK_MODULES: 'View modules', COMPONENT_LINK_MODULES_DUPLICATE: 'View duplicate modules', COMPONENT_LINK_MODULES_BY_FILE_TYPE: (fileType) => `View ${fileType} modules`, diff --git a/packages/utils/src/utils/component-links.ts b/packages/utils/src/utils/component-links.ts index 211d54f2eb..ffc30a4778 100644 --- a/packages/utils/src/utils/component-links.ts +++ b/packages/utils/src/utils/component-links.ts @@ -16,6 +16,7 @@ import { MODULE_SOURCE_FILE_TYPES, } from '../config/file-types'; import { + ASSET_CHUNK, ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, @@ -216,6 +217,23 @@ export const getBundleAssetsFileTypeComponentLink = ( }, }); +export const getBundleAssetsByChunk = ( + chunkIds: Array, + chunkId: string, +): ComponentLink => ({ + section: SECTIONS.ASSETS, + title: I18N.COMPONENT_LINK_BUNDLE_ASSETS_CHUNKS, + params: { + [COMPONENT.BUNDLE_ASSETS]: { + filters: { + [ASSET_FILTERS.CHUNK]: false, + ...getModuleChunkFilters(chunkIds, false), + [`${ASSET_CHUNK}.${chunkId}`]: true, + }, + }, + }, +}); + export const BUNDLE_MODULES: ComponentLink = { section: SECTIONS.MODULES, title: I18N.COMPONENT_LINK_MODULES,