@bundle-stats/ui 4.16.0 → 4.17.0-beta.1

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

@@ -1,26 +1,21 @@
-import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
+/**
+ * @type {import('@bundle-stats/utils').ReportMetricRow} ReportMetricRow
+ * @type {import('../../types').ReportMetricAssetRow} ReportMetricAssetRow
+ * @type {import('../../types').ReportMetricAssetRowMetaStatus} ReportMetricAssetRowFlagStatus
+ */
 
-export const addRowAssetFlags = (row) => {
-  const { runs } = row;
+import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 
-  const isEntry = runs.map((run) => run?.isEntry).includes(true);
-  const isInitial = runs.map((run) => run?.isInitial).includes(true);
-  const isChunk = runs.map((run) => run?.isChunk).includes(true);
-  const isAsset = !(isEntry || isInitial || isChunk);
-  const fileType = getFileType(row.key);
+/**
+ * Check if the asset cache is not predictive
+ *
+ * @param {ReportMetricRow} row
+ * @returns {boolean}
+ */
+export const getIsNotPredictive = (row) => {
+  const { key, runs } = row;
 
-  return {
-    ...row,
-    isEntry,
-    isInitial,
-    isChunk,
-    isAsset,
-    fileType,
-  };
-};
-
-export const getIsNotPredictive = (key, runs) =>
-  runs.reduce((agg, current, index) => {
+  return runs.reduce((agg, current, index) => {
     if (agg) {
       return agg;
     }
@@ -32,20 +27,94 @@ export const getIsNotPredictive = (key, runs) =>
     if (
       current &&
       runs[index + 1] &&
-      current.delta !== 0 &&
       key !== current.name &&
-      current.name === runs[index + 1].name
+      current.name === runs[index + 1].name &&
+      current.value !== runs[index + 1].value
     ) {
       return true;
     }
 
     return agg;
   }, false);
+};
+
+/**
+ * @param {Array<boolean>}
+ * @returns {ReportMetricAssetRowFlagStatus | boolean}
+ */
+export const getAssetMetaStatus = (values) => {
+  if (!values.includes(true)) {
+    return false;
+  }
+
+  // filter empty runs
+  const metaValues = values.filter((value) => typeof value !== 'undefined');
+
+  const current = metaValues[0];
+  const metaValuesLength = metaValues.length;
+
+  if (metaValuesLength === 1) {
+    return Boolean(current);
+  }
+
+  const baseline = metaValues[metaValuesLength - 1];
 
-export const addRowIsNotPredictive = (row) => ({
-  ...row,
-  isNotPredictive: getIsNotPredictive(row.key, row.runs),
-});
+  if (current && !baseline) {
+    return 'added';
+  }
+
+  if (!current && baseline) {
+    return 'removed';
+  }
+
+  return true;
+};
+
+/**
+ * Add asset row flags
+ *
+ * @param {ReportMetricRow} row
+ * @returns {ReportMetricAssetRow}
+ */
+export const addMetricReportAssetRowData = (row) => {
+  const { changed, runs } = row;
+
+  // Collect meta for each run
+  const runsEntry = [];
+  const runsInitial = [];
+  const runsChunk = [];
+
+  runs.forEach((run) => {
+    runsEntry.push(run?.isEntry);
+    runsInitial.push(run?.isInitial);
+    runsChunk.push(run?.isChunk);
+  });
+
+  const isEntry = getAssetMetaStatus(runsEntry);
+  const isInitial = getAssetMetaStatus(runsInitial);
+  const isChunk = getAssetMetaStatus(runsChunk);
+  const isAsset = !(isEntry || isInitial || isChunk);
+  const isNotPredictive = getIsNotPredictive(row);
+  const fileType = getFileType(row.key);
+
+  // Flag asset as changed if name and value are identical, if one of the meta tags is changed
+  const assetChanged =
+    changed ||
+    typeof isEntry !== 'boolean' ||
+    typeof isInitial !== 'boolean' ||
+    typeof isChunk !== 'boolean';
+
+  return {
+    ...row,
+    changed: assetChanged,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+    isNotPredictive,
+    fileType,
+  };
+};
 
 export const getRowFilter = (filters) => (item) => {
   if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {

package/src/components/bundle-assets/index.jsx

@@ -13,12 +13,7 @@ import { useSearchParams } from '../../hooks/search-params';
 import { useEntryInfo } from '../../hooks/entry-info';
 import { getJobsChunksData } from '../../utils/jobs';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-import {
-  addRowAssetFlags,
-  addRowIsNotPredictive,
-  getRowFilter,
-  getCustomSort,
-} from './bundle-assets.utils';
+import { addMetricReportAssetRowData, getRowFilter, getCustomSort } from './bundle-assets.utils';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -50,7 +45,7 @@ export const BundleAssets = (props) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.assets(jobs, [addRowAssetFlags, addRowIsNotPredictive]);
+    const result = webpack.compareBySection.assets(jobs, [addMetricReportAssetRowData]);
     return { rows: result, totalRowCount: result.length };
   }, [jobs]);
 

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

@@ -2,7 +2,7 @@ import type { ElementType, ReactNode } from 'react';
 import React from 'react';
 import cx from 'classnames';
 import { Portal } from 'ariakit/portal';
-import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
+import type { MetricRunInfo, ReportMetricRow, ReportMetricRun } from '@bundle-stats/utils';
 import { METRIC_TYPE_CONFIGS, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Box } from '../../layout/box';
@@ -72,6 +72,12 @@ function defaultRenderRunInfo(item: ReportMetricRow) {
   );
 }
 
+export type RenderRunNameProps<T extends ReportMetricRun = ReportMetricRun> = {
+  className?: string;
+  run: T;
+  runSelector: string;
+};
+
 interface EntryInfoProps {
   itemTitle?: React.ReactNode;
   item: ReportMetricRow;
@@ -82,6 +88,7 @@ interface EntryInfoProps {
   tags?: React.ReactNode;
   onClose: () => void;
   renderRunInfo?: (item: ReportMetricRow) => React.ReactNode;
+  RunName?: React.ElementType;
 }
 
 export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) => {
@@ -93,10 +100,11 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
     runNameSelector = 'name',
     runNameLabel = I18N.PATH,
     runSizeLabel = I18N.SIZE,
-    children,
     tags = null,
     onClose,
     renderRunInfo = defaultRenderRunInfo,
+    RunName = React.Fragment,
+    children,
   } = props;
 
   return (
@@ -145,17 +153,14 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
                     </Table.Th>
                     <Table.Td className={cx(css.runsCell, css.runsColName)}>
                       {rowRun?.[runNameSelector] ? (
-                        <FlexStack
-                          space="xxxsmall"
-                          alignItems="center"
-                          as="h3"
-                          className={css.label}
-                        >
-                          <FileName
-                            as="code"
-                            name={rowRun[runNameSelector]}
-                            className={css.fileName}
-                          />
+                        <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
+                          <RunName run={rowRun} nameSelector={runNameSelector}>
+                            <FileName
+                              as="code"
+                              name={rowRun[runNameSelector]}
+                              className={className}
+                            />
+                          </RunName>
                           <CopyToClipboard text={item.label} size="small" />
                         </FlexStack>
                       ) : (

package/src/components/metrics-treemap/metrics-treemap.utils.ts

@@ -141,7 +141,6 @@ export function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tre
     };
 
     const childrenTotal = setTreeNode(treeNodes, baseSlugs, 0, treeNode);
-    console.log(childrenTotal);
 
     total.current += childrenTotal.current;
     total.baseline =

package/src/components/preview-source/preview-source.tsx

@@ -50,7 +50,17 @@ export const PreviewSource = (props: PreviewSourceProps) => {
           )}
         </ControlGroup>
       )}
-      <Textarea readOnly rows={rows} value={source} className={css.content} />
+      <Textarea
+        rows={rows}
+        value={source}
+        readOnly
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        translate="no"
+        className={css.content}
+      />
     </div>
   );
 };

package/src/stories/wrapper.jsx

@@ -1,19 +1,25 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-export const getWrapperDecorator = (customWrapperStyles = {}) => (storyFn) => {
-  const wrapperStyles = {
-    width: '100%',
-    height: '100%',
-    padding: '24px',
-    ...customWrapperStyles,
-  };
+import { QueryStateProvider } from '../query-state';
+
+export const getWrapperDecorator =
+  (customWrapperStyles = {}) =>
+  (Story) => {
+    const wrapperStyles = {
+      width: '100%',
+      height: '100%',
+      padding: '24px',
+      ...customWrapperStyles,
+    };
 
-  return (
-    <MemoryRouter initialEntries={[{ pathname: '/', key: 'home' }]}>
-      <div style={wrapperStyles}>
-        {storyFn()}
-      </div>
-    </MemoryRouter>
-  );
-};
+    return (
+      <MemoryRouter initialEntries={[{ pathname: '/', key: 'home' }]}>
+        <QueryStateProvider>
+          <div style={wrapperStyles}>
+            <Story />
+          </div>
+        </QueryStateProvider>
+      </MemoryRouter>
+    );
+  };

package/src/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReportMetricRow } from '@bundle-stats/utils';
-import type { Module } from '@bundle-stats/utils/types/webpack/types';
+import type { Asset, Module } from '@bundle-stats/utils/types/webpack/types';
 
 export interface SortAction {
   field: string;
@@ -19,6 +19,35 @@ type FilterGroupFieldData = {
 
 type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;
 
+export type ReportMetricAssetRowMetaStatus = 'added' | 'removed';
+
+export type ReportMetricAssetRow = {
+  /**
+   * Asset isEntry - at least one run has isEntry truthy
+   */
+  isEntry: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isInitial - at least one run has isInitial truthy
+   */
+  isInitial: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isChunk - at least one run has isChunk truthy
+   */
+  isChunk: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isAsset - at least one run has isAsset truthy
+   */
+  isAsset: boolean;
+  /**
+   * Asset name is not predictive
+   */
+  isNotPredictive: boolean;
+  /**
+   * Report asset row isEntry - at least one run has isEntry
+   */
+  fileType: string;
+} & Omit<ReportMetricRow, 'runs'> & { runs: Array<(Asset & ReportMetricRun) | null> };
+
 export type ReportMetricModuleRow = {
   thirdParty: boolean;
   duplicated: boolean;

package/src/ui/tag/tag.tsx

@@ -1,16 +1,17 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import cx from 'classnames';
 
 import { KIND, SIZE } from '../../tokens';
 import css from './tag.module.css';
 
-interface TagProps {
+export type TagProps = {
   as?: React.ElementType;
   kind?: (typeof KIND)[keyof typeof KIND];
   size?: (typeof SIZE)[keyof typeof SIZE];
-}
+} & ComponentProps<'span'>;
 
-export const Tag = (props: TagProps & React.ComponentProps<'span'>) => {
+export const Tag = (props: TagProps) => {
   const {
     className = '',
     as: Component = 'span',

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

@@ -1,6 +1,7 @@
+import type { ComponentProps, ElementType } from 'react';
 import React from 'react';
 import { MetricRunInfo } from '@bundle-stats/utils';
-import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
+import type { AssetMetricRun, MetaChunk } from '@bundle-stats/utils/types/webpack';
 interface AssetInfoProps {
     item: {
         label: string;
@@ -10,12 +11,12 @@ interface AssetInfoProps {
         isInitial?: boolean;
         isNotPredictive?: boolean;
         fileType?: string;
-        runs: Array<Asset & MetricRunInfo>;
+        runs: Array<AssetMetricRun & MetricRunInfo>;
     };
     chunks?: Array<MetaChunk>;
     labels: Array<string>;
-    customComponentLink?: React.ElementType;
+    customComponentLink?: ElementType;
     onClose: () => void;
 }
-export declare const AssetInfo: (props: AssetInfoProps & React.ComponentProps<"div">) => React.JSX.Element;
+export declare const AssetInfo: (props: AssetInfoProps & ComponentProps<"div">) => React.JSX.Element;
 export {};

package/types/components/asset-meta-tag/asset-meta-tag.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TagProps } from '../../ui/tag';
+import type { ReportMetricAssetRowMetaStatus } from '../../types';
+export type AssetMetaTagProps = {
+    tag: 'entry' | 'initial' | 'chunk';
+    status?: ReportMetricAssetRowMetaStatus | boolean;
+} & TagProps;
+export declare const AssetMetaTag: (props: AssetMetaTagProps) => React.JSX.Element;

package/types/components/asset-meta-tag/index.d.ts

@@ -0,0 +1 @@
+export * from './asset-meta-tag';

package/types/components/asset-name/asset-name.d.ts

@@ -0,0 +1,8 @@
+import React, { ElementType } from 'react';
+import type { ReportMetricAssetRow } from '../../types';
+export type AssetNameProps = {
+    className?: string;
+    row: ReportMetricAssetRow;
+    customComponentLink: ElementType;
+};
+export declare const AssetName: (props: AssetNameProps) => React.JSX.Element;

package/types/components/asset-name/index.d.ts

@@ -0,0 +1 @@
+export * from './asset-name';

package/types/components/asset-not-predictive/asset-not-predictive.d.ts

@@ -1,8 +1,8 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
-import type { Asset } from '@bundle-stats/utils/types/webpack';
-interface AssetNotPredictiveProps {
-    runs?: Array<Asset>;
+import type { AssetMetricRun } from '@bundle-stats/utils/types/webpack';
+export type AssetNotPredictiveProps = {
+    runs?: Array<AssetMetricRun>;
     labels?: Array<string>;
-}
-export declare const AssetNotPredictive: (props: AssetNotPredictiveProps & React.ComponentProps<"div">) => React.JSX.Element;
-export {};
+} & ComponentProps<'div'>;
+export declare const AssetNotPredictive: (props: AssetNotPredictiveProps) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
-export function addRowAssetFlags(row: any): any;
-export function getIsNotPredictive(key: any, runs: any): any;
-export function addRowIsNotPredictive(row: any): any;
+export function getIsNotPredictive(row: ReportMetricRow): boolean;
+export function getAssetMetaStatus(values: any): ReportMetricAssetRowFlagStatus | boolean;
+export function addMetricReportAssetRowData(row: ReportMetricRow): ReportMetricAssetRow;
 export function getRowFilter(filters: any): (item: any) => boolean;
 export function getCustomSort(item: any): any[];

package/types/components/entry-info/entry-info.d.ts

@@ -1,6 +1,6 @@
 import type { ElementType, ReactNode } from 'react';
 import React from 'react';
-import type { ReportMetricRow } from '@bundle-stats/utils';
+import type { ReportMetricRow, ReportMetricRun } from '@bundle-stats/utils';
 interface EntryInfoMetaLinkProps {
     as?: ElementType;
 }
@@ -9,6 +9,11 @@ interface EntryInfoMetaProps {
     label: string;
     tooltip?: ReactNode;
 }
+export type RenderRunNameProps<T extends ReportMetricRun = ReportMetricRun> = {
+    className?: string;
+    run: T;
+    runSelector: string;
+};
 interface EntryInfoProps {
     itemTitle?: React.ReactNode;
     item: ReportMetricRow;
@@ -19,6 +24,7 @@ interface EntryInfoProps {
     tags?: React.ReactNode;
     onClose: () => void;
     renderRunInfo?: (item: ReportMetricRow) => React.ReactNode;
+    RunName?: React.ElementType;
 }
 export declare const EntryInfo: {
     (props: EntryInfoProps & React.ComponentProps<"div">): React.JSX.Element;

package/types/stories/wrapper.d.ts

@@ -1,2 +1,2 @@
-export function getWrapperDecorator(customWrapperStyles?: {}): (storyFn: any) => React.JSX.Element;
+export function getWrapperDecorator(customWrapperStyles?: {}): (Story: any) => React.JSX.Element;
 import React from 'react';

package/types/ui/tag/tag.d.ts

@@ -1,12 +1,13 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { KIND, SIZE } from '../../tokens';
-interface TagProps {
+export type TagProps = {
     as?: React.ElementType;
     kind?: (typeof KIND)[keyof typeof KIND];
     size?: (typeof SIZE)[keyof typeof SIZE];
-}
+} & ComponentProps<'span'>;
 export declare const Tag: {
-    (props: TagProps & React.ComponentProps<"span">): React.JSX.Element;
+    (props: TagProps): React.JSX.Element;
     KINDS: {
         readonly DEFAULT: "default";
         readonly SUCCESS: "success";
@@ -20,4 +21,3 @@ export declare const Tag: {
         readonly LARGE: "large";
     };
 };
-export {};