@bundle-stats/ui 4.18.0-beta.0 → 4.18.0-beta.2

package/src/components/asset-info/asset-info.tsx

@@ -17,6 +17,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { AssetMetaTag } from '../asset-meta-tag';
 import { ComponentLink } from '../component-link';
 import { EntryInfo, EntryInfoMetaLink } from '../entry-info';
+import * as I18N from './asset-info.i18n';
 import css from './asset-info.module.css';
 
 interface ChunkModulesLinkProps {
@@ -57,9 +58,9 @@ const AssetRunName = (props: AssetRunNameProps) => {
   return (
     <>
       <span className={css.runNameTags}>
-        {run.isEntry && <AssetMetaTag tag="entry" title="Entry" size="small" />}
-        {run.isInitial && <AssetMetaTag tag="initial" title="Initial" size="small" />}
-        {run.isChunk && <AssetMetaTag tag="chunk" title="Chunk" size="small" />}
+        {run.isEntry && <AssetMetaTag tag="entry" title={I18N.ENTRY} size="small" />}
+        {run.isInitial && <AssetMetaTag tag="initial" title={I18N.INITIAL} size="small" />}
+        {run.isChunk && <AssetMetaTag tag="chunk" title={I18N.CHUNK} size="small" />}
       </span>
       {children}
     </>
@@ -104,7 +105,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
             status={item.isEntry}
             className={css.assetNameTag}
           >
-            Entrypoint
+            {I18N.ENTRYPOINT}
           </AssetMetaTag>
         )}
         {item.isInitial && (
@@ -117,7 +118,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
             status={item.isInitial}
             className={cx(css.assetNameTag, css.assetNameTagInitial)}
           >
-            Initial
+            {I18N.INITIAL}
           </AssetMetaTag>
         )}
         {item.isChunk && (
@@ -130,7 +131,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
             status={item.isChunk}
             className={cx(css.assetNameTag, css.assetNameTagChunk)}
           >
-            Chunk
+            {I18N.CHUNK}
           </AssetMetaTag>
         )}
       </FlexStack>
@@ -153,10 +154,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
       className={cx(css.root, className)}
     >
       {item.fileType && (
-        <EntryInfo.Meta
-          label="File type"
-          tooltip="Asset file type: JS, CSS, image, media, fonts, HTML, or other"
-        >
+        <EntryInfo.Meta label={I18N.FILE_TYPE} tooltip={I18N.FILE_TYPE_TOOLTIP}>
           <EntryInfoMetaLink
             as={CustomComponentLink}
             {...getBundleAssetsFileTypeComponentLink(item.fileType, fileTypeLabel)}
@@ -168,10 +166,7 @@ export const AssetInfo = (props: AssetInfoProps & ComponentProps<'div'>) => {
       )}
 
       {currentChunk && (
-        <EntryInfo.Meta
-          label="Chunk"
-          tooltip="The bundler's chunk from witch the assets was originated"
-        >
+        <EntryInfo.Meta label={I18N.CHUNK} tooltip={I18N.CHUNK_TOOLTIP}>
           <EntryInfoMetaLink
             as={CustomComponentLink}
             {...getBundleAssetsByChunk(chunkIds, currentRun.chunkId)}

package/src/components/bundle-assets/bundle-assets.i18n.ts

@@ -1 +1,10 @@
 export const SEARCH_PLACEHOLDER = 'Search by asset path';
+export const CHANGED = 'Changed';
+export const ASSET_TYPE = 'Asset type';
+export const FILE_TYPE = 'File type';
+export const CHUNKS = 'Chunks';
+export const NO_CHUNK = 'No chunk';
+export const ENTRY = 'Entry';
+export const INITIAL = 'Initial';
+export const CHUNK = 'Chunk';
+export const OTHER = 'Other';

package/src/components/bundle-assets/bundle-assets.tsx

@@ -29,7 +29,7 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
-import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
+import * as BUNDLE_ASSETS_I18N from './bundle-assets.i18n';
 import { getFilters } from './bundle-assets.utils';
 import css from './bundle-assets.module.css';
 
@@ -259,7 +259,7 @@ export const BundleAssets = (props: BundleAssetsProps) => {
           <FlexStack space="xxsmall">
             <InputSearch
               className={css.toolbarSearch}
-              placeholder={SEARCH_PLACEHOLDER}
+              placeholder={BUNDLE_ASSETS_I18N.SEARCH_PLACEHOLDER}
               defaultValue={search}
               onChange={updateSearch}
             />

package/src/components/bundle-assets/bundle-assets.utils.ts

@@ -12,12 +12,16 @@ import {
   FILE_TYPE_LABELS,
   getFileType,
 } from '@bundle-stats/utils';
+
 import type {
   FilterFieldsData,
   ReportMetricAssetRow,
   ReportMetricAssetRowMetaStatus,
   FilterGroupFieldData,
 } from '../../types';
+import * as I18N from './bundle-assets.i18n';
+
+const NO_CHUNK_FILTER = 'NO_CHUNK';
 
 /**
  * Check if the asset cache is not predictive
@@ -139,8 +143,8 @@ export const getCustomSort = (item: ReportMetricAssetRow): Array<boolean | strin
   item.key,
 ];
 
-const getFileTypeFilters = (filters: Record<string, unknown>): FilterGroupFieldData['children'] =>
-  Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+/* eslint-disable prettier/prettier */
+const getFileTypeFilters = (filters: Record<string, unknown>): FilterGroupFieldData['children'] => Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
   key,
   label,
   defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true) as boolean,
@@ -159,14 +163,24 @@ export const getFilters = ({
 }: GetFiltersOptions): FilterFieldsData => {
   const result: FilterFieldsData = {
     [ASSET_FILTERS.CHANGED]: {
-      label: 'Changed',
+      label: I18N.CHANGED,
       defaultValue: filters[ASSET_FILTERS.CHANGED],
       disabled: !compareMode,
     },
   };
 
   if (!isEmpty(chunks)) {
-    const chunksFilter: FilterGroupFieldData = { label: 'Chunks', children: [] };
+    const chunksFilter: FilterGroupFieldData = {
+      label: I18N.CHUNKS,
+      children: [
+        {
+          key: NO_CHUNK_FILTER,
+          label: I18N.NO_CHUNK,
+          defaultValue: filters[`${ASSET_CHUNK}.${NO_CHUNK_FILTER}`] ?? true,
+        },
+      ],
+    };
+
     const chunksOrderedByName = orderBy(chunks, 'name');
 
     chunksOrderedByName.forEach((chunk) => {
@@ -181,33 +195,33 @@ export const getFilters = ({
   }
 
   result[ASSET_ENTRY_TYPE] = {
-    label: 'Type',
+    label: I18N.ASSET_TYPE,
     children: [
       {
         key: ASSET_FILTERS.ENTRY,
-        label: 'Entry',
+        label: I18N.ENTRY,
         defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
       },
       {
         key: ASSET_FILTERS.INITIAL,
-        label: 'Initial',
+        label: I18N.INITIAL,
         defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
       },
       {
         key: ASSET_FILTERS.CHUNK,
-        label: 'Chunk',
+        label: I18N.CHUNK,
         defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
       },
       {
         key: ASSET_FILTERS.OTHER,
-        label: 'Other',
+        label: I18N.OTHER,
         defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
       },
     ],
   };
 
   result[ASSET_FILE_TYPE] = {
-    label: 'File type',
+    label: I18N.FILE_TYPE,
     children: getFileTypeFilters(filters),
   };
 
@@ -219,15 +233,17 @@ export const generateGetRowFilter =
   ({ chunkIds }: GenerateGetRowFilterOptions) => (filters: Record<string, unknown>) => {
     // List of chunkIds with filter value set to `true`
     const checkedChunkIds: Array<string> = [];
+    // List of chunks ids, including the NO_CHUNK
+    const filtersChunkIds = [NO_CHUNK_FILTER, ...chunkIds];
 
-    chunkIds.forEach((chunkId) => {
+    filtersChunkIds.forEach((chunkId) => {
       if (filters[`${ASSET_CHUNK}.${chunkId}`]) {
         checkedChunkIds.push(chunkId);
       }
     });
 
     const hasChunkFilters =
-      checkedChunkIds.length > 0 && checkedChunkIds.length !== chunkIds.length;
+      checkedChunkIds.length > 0 && checkedChunkIds.length !== filtersChunkIds.length;
 
     return (item: ReportMetricAssetRow) => {
       if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
@@ -251,7 +267,7 @@ export const generateGetRowFilter =
 
       // Filter if any of the chunkIds are checked
       if (hasChunkFilters) {
-        const rowRunsChunkIds = item?.runs?.map((run) => run?.chunkId) || [];
+        const rowRunsChunkIds = item?.runs?.map((run) => run?.chunkId || NO_CHUNK_FILTER) || [];
         return intersection(rowRunsChunkIds, checkedChunkIds).length > 0;
       }
 

package/types/components/asset-info/asset-info.i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const ENTRY = "Entry";
+export declare const INITIAL = "Initial";
+export declare const CHUNK = "Chunk";
+export declare const CHUNK_TOOLTIP = "The bundler's chunk from which the assets originated";
+export declare const ENTRYPOINT = "Entrypoint";
+export declare const FILE_TYPE = "File type";
+export declare const FILE_TYPE_TOOLTIP = "Asset file type: JS, CSS, image, media, fonts, HTML, or other";

package/types/components/bundle-assets/bundle-assets.i18n.d.ts

@@ -1 +1,10 @@
 export declare const SEARCH_PLACEHOLDER = "Search by asset path";
+export declare const CHANGED = "Changed";
+export declare const ASSET_TYPE = "Asset type";
+export declare const FILE_TYPE = "File type";
+export declare const CHUNKS = "Chunks";
+export declare const NO_CHUNK = "No chunk";
+export declare const ENTRY = "Entry";
+export declare const INITIAL = "Initial";
+export declare const CHUNK = "Chunk";
+export declare const OTHER = "Other";