@bundle-stats/ui 4.10.0 → 4.12.0-beta.0

package/lib-esm/ui/dropdown/dropdown.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
-import { FlexStack } from '../../layout/flex-stack';
-import { Icon } from '../icon';
+import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
 const Item = ({ className = '', isActive = false, ...restProps }) => (React.createElement(MenuItem, { className: cx(css.item, className, isActive && css.itemActive), ...restProps }));
 Item.propTypes = {
@@ -19,10 +18,7 @@ export const Dropdown = (props) => {
     const rootClassName = cx(css.root, className);
     const menuState = useMenuState();
     return (React.createElement("div", { className: rootClassName },
-        React.createElement(MenuButton, { state: menuState, className: cx(css.button, buttonClassName), disabled: disabled, tabIndex: null },
-            React.createElement(FlexStack, { space: "xxxsmall", alignItems: "center", className: css.label },
-                glyph && React.createElement(Icon, { className: css.labelIcon, glyph: glyph }),
-                label && React.createElement("span", { className: css.labelText }, label))),
+        React.createElement(MenuButton, { as: Button, outline: true, size: BUTTON_SIZE.SMALL, glyph: glyph, disabled: disabled, state: menuState, tabIndex: null, className: cx(css.button, buttonClassName) }, label),
         React.createElement(Menu, { state: menuState, "aria-label": ariaLabel || label, className: css.dropdown }, typeof children === 'function'
             ? children({
                 MenuItem: Item,

package/lib-esm/ui/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/ui/dropdown/dropdown.jsx"],"names":[],"mappings":"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"}

package/lib-esm/ui/dropdown/dropdown.module.css

@@ -1,31 +1,5 @@
-.root {
-  display: inline-block;
-}
-
 .button {
-  background: none;
-  border: none;
-  padding: 0;
-
-  border: 1px solid var(--color-outline);
-  border-radius: var(--radius-small);
-  padding: calc(var(--space-xxsmall) - 1px);
-
-  appearance: none;
-  background: none;
-  font-size: var(--size-small);
-  line-height: var(--space-small);
   white-space: nowrap;
-  color: var(--color-text-light);
-}
-
-.button[aria-expanded=true],
-.button:hover,
-.button:focus,
-.button:active {
-  outline: none;
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
 }
 
 .button[disabled] {
@@ -62,6 +36,7 @@
   font-size: var(--size-small);
   line-height: inherit;
   text-decoration: none;
+  cursor: default;
 }
 
 .item[data-active-item],

package/lib-esm/ui/filters/filters.module.css

@@ -33,6 +33,7 @@
   transform: translateY(-50%);
   padding: var(--space-xxxsmall);
   font-size: var(--size-xsmall);
+  line-height: 1.1;
 }
 
 /** cover item text */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.10.0",
+  "version": "4.12.0-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -39,10 +39,10 @@
     "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-essentials": "7.6.15",
-    "@storybook/react": "7.6.15",
-    "@storybook/react-webpack5": "7.6.15",
-    "@types/react": "18.2.55",
+    "@storybook/addon-essentials": "7.6.16",
+    "@storybook/react": "7.6.16",
+    "@storybook/react-webpack5": "7.6.16",
+    "@types/react": "18.2.57",
     "@types/react-router-dom": "5.3.3",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -59,7 +59,7 @@
     "react-dom": "18.2.0",
     "react-router-dom": "5.3.4",
     "rimraf": "5.0.5",
-    "storybook": "7.6.15",
+    "storybook": "7.6.16",
     "typescript": "5.1.6",
     "typescript-plugin-css-modules": "5.1.0"
   },
@@ -72,10 +72,10 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.10.0",
+    "@bundle-stats/utils": "^4.12.0-beta.0",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "1ed77f899eb226ad095b77bfdc1561aab67640b6"
+  "gitHead": "65a2a7d1efda921feb43cbdd1d25068b7738180f"
 }

package/src/components/bundle-modules/bundle-modules.constants.ts

@@ -0,0 +1,4 @@
+export enum ModuleMetric {
+  SIZE = 'value',
+  TOTAL_SIZE = 'totalSize',
+}

package/src/components/bundle-modules/bundle-modules.module.css

@@ -12,6 +12,10 @@
   margin-right: -1px; /** collapse border */
 }
 
+.metricSelector {
+  border-bottom: 1px solid var(--color-outline);
+}
+
 .nameTagDuplicated {
   margin-right: var(--space-xxxsmall);
   vertical-align: baseline;

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

@@ -18,9 +18,13 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
+import { ModuleMetric } from './bundle-modules.constants';
 import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
 import * as I18N_MODULES from './bundle-modules.i18n';
 import css from './bundle-modules.module.css';
+import { Box } from '../../layout';
+import { Button } from '../../ui';
+import { Tooltip } from '../../ui/tooltip';
 
 interface RowHeaderProps {
   row: ReportMetricModuleRow;
@@ -68,6 +72,9 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
   entryId?: string;
   hideEntryInfo: () => void;
 
+  moduleMetric: ModuleMetric;
+  setModuleMetric: (newValue: ModuleMetric) => void;
+
   customComponentLink: React.ElementType;
 }
 
@@ -89,6 +96,8 @@ export const BundleModules = (props: BundleModulesProps) => {
     updateSearch,
     entryId,
     hideEntryInfo,
+    moduleMetric,
+    setModuleMetric,
     customComponentLink: CustomComponentLink = ComponentLink,
   } = props;
 
@@ -172,6 +181,28 @@ export const BundleModules = (props: BundleModulesProps) => {
             />
           </FlexStack>
         </Toolbar>
+        <Box padding={['xsmall', 'small']} className={css.metricSelector}>
+          <FlexStack space="xxsmall" as="nav">
+            <Button
+              outline
+              kind={moduleMetric === ModuleMetric.SIZE ? 'primary' : 'default'}
+              size="small"
+              type="button"
+              onClick={() => setModuleMetric(ModuleMetric.SIZE)}
+            >
+              <Tooltip title="Size (excluding duplicate modules)">Module size</Tooltip>
+            </Button>
+            <Button
+              outline
+              kind={moduleMetric === ModuleMetric.TOTAL_SIZE ? 'primary' : 'default'}
+              size="small"
+              type="button"
+              onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
+            >
+              <Tooltip title="Size (including duplicate modules)">Module total size</Tooltip>
+            </Button>
+          </FlexStack>
+        </Box>
         <MetricsTable
           className={css.table}
           items={items}

package/src/components/bundle-modules/bundle-modules.types.d.ts

@@ -13,7 +13,7 @@ export type ReportMetricModuleRow = {
 } & ReportMetricRun &
   Module;
 
-interface Job {
+export interface Job {
   label: string;
   internalBuildNumber: number;
   meta?: {

package/src/components/bundle-modules/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 // @ts-ignore
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
@@ -14,6 +14,7 @@ import {
   generateFilters,
   getCustomSort,
 } from './bundle-modules.utils';
+import { ModuleMetric } from './bundle-modules.constants';
 import * as types from './bundle-modules.types';
 
 interface BundleModulesProps
@@ -46,6 +47,8 @@ interface BundleModulesProps
 export const BundleModules = (props: BundleModulesProps) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
+  const [moduleMetric, setModuleMetric] = useState<ModuleMetric>(ModuleMetric.SIZE);
+
   const { chunks, chunkIds } = useMemo(() => extractChunkData(jobs), [jobs]);
 
   const { defaultFilters, allEntriesFilters } = useMemo(
@@ -62,12 +65,17 @@ export const BundleModules = (props: BundleModulesProps) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    let result;
+    if (moduleMetric === ModuleMetric.TOTAL_SIZE) {
+      result = webpack.compareModuleDuplicateSize(jobs, [addRowFlags]);
+    } else if (moduleMetric === ModuleMetric.SIZE) {
+      result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    }
     return {
       rows: result as Array<types.ReportMetricModuleRow>,
       totalRowCount: result.length,
     };
-  }, [jobs]);
+  }, [jobs, moduleMetric]);
 
   const filteredRows = useRowsFilter({
     rows,
@@ -97,6 +105,8 @@ export const BundleModules = (props: BundleModulesProps) => {
       allItems={rows}
       totalRowCount={totalRowCount}
       hideEntryInfo={hideEntryInfo}
+      moduleMetric={moduleMetric}
+      setModuleMetric={setModuleMetric}
     />
   );
 };

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

@@ -48,7 +48,6 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
   } = props;
 
   const rootClassName = cx(css.root, className);
-  const currentRun = item.runs?.[0];
 
   const tags = useMemo(() => {
     if (!item.duplicated) {
@@ -73,26 +72,30 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
   return (
     <EntryInfo item={item} labels={labels} tags={tags} onClose={onClose} className={rootClassName}>
       <Stack space="xxxsmall">
-        {!isEmpty(currentRun?.chunkIds) && (
-          <EntryInfo.Meta label="Chunks" className={css.chunks}>
-            {currentRun.chunkIds.map((chunkId) => {
-              const chunk = chunks?.find(({ id }) => id === chunkId);
+        {item.runs?.map(
+          (currentRun, index) =>
+            !isEmpty(currentRun?.chunkIds) && (
+              <EntryInfo.Meta label="Chunks" className={css.chunks}>
+                Job #{index + 1}:
+                {currentRun.chunkIds.map((chunkId) => {
+                  const chunk = chunks?.find(({ id }) => id === chunkId);
 
-              if (!chunk) {
-                return null;
-              }
+                  if (!chunk) {
+                    return null;
+                  }
 
-              return (
-                <EntryInfoMetaLink
-                  as={CustomComponentLink}
-                  {...getBundleModulesByChunk(chunkIds, chunkId)}
-                  className={css.chunksItem}
-                >
-                  {chunk.name}
-                </EntryInfoMetaLink>
-              );
-            })}
-          </EntryInfo.Meta>
+                  return (
+                    <EntryInfoMetaLink
+                      as={CustomComponentLink}
+                      {...getBundleModulesByChunk(chunkIds, chunkId)}
+                      className={css.chunksItem}
+                    >
+                      {chunk.name}
+                    </EntryInfoMetaLink>
+                  );
+                })}
+              </EntryInfo.Meta>
+          ),
         )}
 
         {item?.fileType && (

package/src/ui/button/button.module.css

@@ -250,14 +250,12 @@ a.root {
 .small {
   font-size: var(--size-small);
   gap: var(--space-xxxsmall);
-  line-height: var(--space-xsmall);
+  line-height: var(--space-small);
 }
 
 .small .glyph {
   width: calc(var(--space-xsmall) + 2px);
   height: calc(var(--space-xsmall) + 2px);
-  margin-top: -1px;
-  margin-bottom: -1px;
 }
 
 .medium {

package/src/ui/button/button.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
-import { Button } from '.';
+import { Button, BUTTON_SIZE, BUTTON_KIND } from '.';
 
 export default {
   title: 'UI/Button',
@@ -26,7 +26,7 @@ export const All = () => (
     <Stack space="medium">
       <h2>Size</h2>
       <Items>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Button size={size} key={size}>
             Action {size}
           </Button>
@@ -37,7 +37,7 @@ export const All = () => (
       <h2>Kind</h2>
       <Stack space="medium">
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button kind={kind} key={kind}>
               Action {kind}
             </Button>
@@ -45,7 +45,7 @@ export const All = () => (
         </Items>
         <h3>Active</h3>
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button kind={kind} key={kind} active>
               Action {kind}
             </Button>
@@ -53,7 +53,7 @@ export const All = () => (
         </Items>
         <h3>As link</h3>
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button kind={kind} key={kind} as="a" href="#">
               Action {kind}
             </Button>
@@ -61,7 +61,7 @@ export const All = () => (
         </Items>
         <h3>With icon</h3>
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} kind={kind} key={kind}>
               Action {kind}
             </Button>
@@ -69,7 +69,7 @@ export const All = () => (
         </Items>
         <h3>Disabled</h3>
         <Items>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button kind={kind} key={kind} disabled>
               Action {kind}
             </Button>
@@ -80,12 +80,12 @@ export const All = () => (
     <Stack space="medium">
       <h2>Outline & Kind</h2>
       <Stack space="medium">
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button outline size={size}>
               Action default
             </Button>
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button outline kind={kind} key={kind} size={size}>
                 Action {kind}
               </Button>
@@ -97,19 +97,19 @@ export const All = () => (
           <Button outline active>
             Action default
           </Button>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button outline kind={kind} key={kind} active>
               Action {kind}
             </Button>
           ))}
         </Items>
         <h3>With icon</h3>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size}>
               Action default
             </Button>
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button
                 glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
                 outline
@@ -123,10 +123,10 @@ export const All = () => (
           </Items>
         ))}
         <h3>Only icon</h3>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} outline size={size} />
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button
                 glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
                 outline
@@ -142,7 +142,7 @@ export const All = () => (
           <Button outline disabled>
             Action default
           </Button>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button outline kind={kind} key={kind} disabled>
               Action {kind}
             </Button>
@@ -153,12 +153,12 @@ export const All = () => (
     <Stack space="medium">
       <h2>Solid & Kind</h2>
       <Stack space="medium">
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button solid size={size}>
               Action default
             </Button>
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button solid kind={kind} key={kind} size={size}>
                 Action {kind}
               </Button>
@@ -170,19 +170,19 @@ export const All = () => (
           <Button solid active>
             Action default
           </Button>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button solid kind={kind} key={kind} active>
               Action {kind}
             </Button>
           ))}
         </Items>
         <h3>With icon</h3>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size}>
               Action default
             </Button>
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button
                 glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
                 solid
@@ -196,10 +196,10 @@ export const All = () => (
           </Items>
         ))}
         <h3>Only icon</h3>
-        {Object.values(Button.SIZE).map((size) => (
+        {Object.values(BUTTON_SIZE).map((size) => (
           <Items key={size}>
             <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE} solid size={size} />
-            {Object.values(Button.KIND).map((kind) => (
+            {Object.values(BUTTON_KIND).map((kind) => (
               <Button
                 glyph={Icon.ICONS.ARROW_RIGHT_CIRLCE}
                 solid
@@ -215,7 +215,7 @@ export const All = () => (
           <Button solid disabled>
             Action default
           </Button>
-          {Object.values(Button.KIND).map((kind) => (
+          {Object.values(BUTTON_KIND).map((kind) => (
             <Button solid kind={kind} key={kind} disabled>
               Action {kind}
             </Button>

package/src/ui/button/button.tsx

@@ -5,13 +5,13 @@ import { Button as ButtonBaseComponent } from 'ariakit/button';
 import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 
-const SIZE = {
+export const BUTTON_SIZE = {
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large',
 } as const;
 
-const KIND = {
+export const BUTTON_KIND = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   DANGE: 'danger',
@@ -20,8 +20,8 @@ const KIND = {
   SUCCES: 'success',
 } as const;
 
-type Size = (typeof SIZE)[keyof typeof SIZE];
-type Kind = (typeof KIND)[keyof typeof KIND];
+type Size = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
+type Kind = (typeof BUTTON_KIND)[keyof typeof BUTTON_KIND];
 
 interface ButtonProps<T extends React.ElementType> {
   outline?: boolean;
@@ -37,7 +37,7 @@ interface ButtonProps<T extends React.ElementType> {
   rightGlyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
 }
 
-export const Button = <T extends React.ElementType = 'button'>(
+const ButtonComponent = <T extends React.ElementType = 'button'>(
   props: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
 ) => {
   const {
@@ -92,5 +92,4 @@ export const Button = <T extends React.ElementType = 'button'>(
   );
 };
 
-Button.SIZE = SIZE;
-Button.KIND = KIND;
+export const Button = React.forwardRef(ButtonComponent);

package/src/ui/dropdown/dropdown.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 
-import { FlexStack } from '../../layout/flex-stack';
-import { Icon } from '../icon';
+import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
 
 const Item = ({ className = '', isActive = false, ...restProps }) => (
@@ -29,15 +28,16 @@ export const Dropdown = (props) => {
   return (
     <div className={rootClassName}>
       <MenuButton
-        state={menuState}
-        className={cx(css.button, buttonClassName)}
+        as={Button}
+        outline
+        size={BUTTON_SIZE.SMALL}
+        glyph={glyph}
         disabled={disabled}
+        state={menuState}
         tabIndex={null}
+        className={cx(css.button, buttonClassName)}
       >
-        <FlexStack space="xxxsmall" alignItems="center" className={css.label}>
-          {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
-          {label && <span className={css.labelText}>{label}</span>}
-        </FlexStack>
+        {label}
       </MenuButton>
       <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'

package/src/ui/dropdown/dropdown.module.css

@@ -1,31 +1,5 @@
-.root {
-  display: inline-block;
-}
-
 .button {
-  background: none;
-  border: none;
-  padding: 0;
-
-  border: 1px solid var(--color-outline);
-  border-radius: var(--radius-small);
-  padding: calc(var(--space-xxsmall) - 1px);
-
-  appearance: none;
-  background: none;
-  font-size: var(--size-small);
-  line-height: var(--space-small);
   white-space: nowrap;
-  color: var(--color-text-light);
-}
-
-.button[aria-expanded=true],
-.button:hover,
-.button:focus,
-.button:active {
-  outline: none;
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
 }
 
 .button[disabled] {
@@ -62,6 +36,7 @@
   font-size: var(--size-small);
   line-height: inherit;
   text-decoration: none;
+  cursor: default;
 }
 
 .item[data-active-item],

package/src/ui/filters/filters.module.css

@@ -33,6 +33,7 @@
   transform: translateY(-50%);
   padding: var(--space-xxxsmall);
   font-size: var(--size-xsmall);
+  line-height: 1.1;
 }
 
 /** cover item text */

package/types/components/bundle-modules/bundle-modules.constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ModuleMetric {
+    SIZE = "value",
+    TOTAL_SIZE = "totalSize"
+}