@bundle-stats/ui 4.3.0 → 4.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/app/app.module.css +2 -2
- package/lib/assets/icons.svg +3 -0
- package/lib/assets/icons.svg.js +2 -0
- package/lib/assets/icons.svg.js.map +1 -1
- package/lib/components/asset-info/asset-info.js +8 -1
- package/lib/components/asset-info/asset-info.js.map +1 -1
- package/lib/components/asset-info/asset-info.module.css +10 -0
- package/lib/components/bundle-assets/bundle-assets.utils.js +3 -1
- package/lib/components/bundle-assets/bundle-assets.utils.js.map +1 -1
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +4 -2
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js.map +1 -1
- package/lib/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +1 -1
- package/lib/components/bundle-modules/bundle-modules.js +11 -11
- package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib/components/bundle-modules/bundle-modules.utils.js +5 -5
- package/lib/components/bundle-modules/bundle-modules.utils.js.map +1 -1
- package/lib/components/bundle-modules/index.js +1 -1
- package/lib/components/bundle-modules/index.js.map +1 -1
- package/lib/components/index.js +1 -3
- package/lib/components/index.js.map +1 -1
- package/lib/components/job-header/job-header.js +12 -11
- package/lib/components/job-header/job-header.js.map +1 -1
- package/lib/components/jobs-header/index.js.map +1 -1
- package/lib/components/jobs-header/jobs-header.js +23 -14
- package/lib/components/jobs-header/jobs-header.js.map +1 -1
- package/lib/components/jobs-header/jobs-header.module.css +21 -3
- package/lib/components/module-info/module-info.js +20 -9
- package/lib/components/module-info/module-info.js.map +1 -1
- package/lib/components/module-info/module-info.module.css +7 -2
- package/lib/components/package-info/package-info.js +15 -8
- package/lib/components/package-info/package-info.js.map +1 -1
- package/lib/components/package-info/package-info.module.css +10 -0
- package/lib/ui/icon/icon.js +1 -0
- package/lib/ui/icon/icon.js.map +1 -1
- package/lib/ui/tooltip/tooltip.module.css +0 -1
- package/lib-esm/app/app.module.css +2 -2
- package/lib-esm/assets/icons.svg +3 -0
- package/lib-esm/assets/icons.svg.js +2 -0
- package/lib-esm/assets/icons.svg.js.map +1 -1
- package/lib-esm/components/asset-info/asset-info.js +9 -2
- package/lib-esm/components/asset-info/asset-info.js.map +1 -1
- package/lib-esm/components/asset-info/asset-info.module.css +10 -0
- package/lib-esm/components/bundle-assets/bundle-assets.utils.js +3 -1
- package/lib-esm/components/bundle-assets/bundle-assets.utils.js.map +1 -1
- package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +4 -2
- package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js.map +1 -1
- package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.js +11 -11
- package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.utils.js +3 -3
- package/lib-esm/components/bundle-modules/bundle-modules.utils.js.map +1 -1
- package/lib-esm/components/bundle-modules/index.js +2 -2
- package/lib-esm/components/bundle-modules/index.js.map +1 -1
- package/lib-esm/components/index.js +0 -1
- package/lib-esm/components/index.js.map +1 -1
- package/lib-esm/components/job-header/job-header.js +12 -11
- package/lib-esm/components/job-header/job-header.js.map +1 -1
- package/lib-esm/components/jobs-header/index.js.map +1 -1
- package/lib-esm/components/jobs-header/jobs-header.js +22 -13
- package/lib-esm/components/jobs-header/jobs-header.js.map +1 -1
- package/lib-esm/components/jobs-header/jobs-header.module.css +21 -3
- package/lib-esm/components/module-info/module-info.js +21 -10
- package/lib-esm/components/module-info/module-info.js.map +1 -1
- package/lib-esm/components/module-info/module-info.module.css +7 -2
- package/lib-esm/components/package-info/package-info.js +15 -8
- package/lib-esm/components/package-info/package-info.js.map +1 -1
- package/lib-esm/components/package-info/package-info.module.css +10 -0
- package/lib-esm/ui/icon/icon.js +1 -0
- package/lib-esm/ui/icon/icon.js.map +1 -1
- package/lib-esm/ui/tooltip/tooltip.module.css +0 -1
- package/package.json +4 -4
- package/src/app/app.module.css +2 -2
- package/src/assets/icons/external-link.svg +1 -0
- package/src/assets/icons.svg +3 -0
- package/src/assets/icons.svg.jsx +13 -0
- package/src/components/asset-info/asset-info.module.css +10 -0
- package/src/components/asset-info/asset-info.tsx +30 -9
- package/src/components/bundle-assets/bundle-assets.utils.js +3 -2
- package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx +3 -2
- package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css +1 -1
- package/src/components/bundle-modules/bundle-modules.jsx +12 -11
- package/src/components/bundle-modules/bundle-modules.utils.js +5 -3
- package/src/components/bundle-modules/index.jsx +2 -2
- package/src/components/index.js +0 -1
- package/src/components/job-header/job-header.jsx +16 -13
- package/src/components/jobs-header/jobs-header.module.css +21 -3
- package/src/components/jobs-header/jobs-header.stories.tsx +51 -0
- package/src/components/jobs-header/jobs-header.tsx +91 -0
- package/src/components/module-info/module-info.module.css +7 -2
- package/src/components/module-info/module-info.tsx +45 -3
- package/src/components/package-info/package-info.module.css +10 -0
- package/src/components/package-info/package-info.tsx +46 -17
- package/src/ui/icon/icon.jsx +1 -0
- package/src/ui/tooltip/tooltip.module.css +0 -1
- package/types/components/asset-info/asset-info.d.ts +1 -0
- package/types/components/bundle-modules/bundle-modules.utils.d.ts +1 -1
- package/types/components/index.d.ts +0 -1
- package/types/components/jobs-header/index.d.ts +1 -1
- package/types/components/jobs-header/jobs-header.d.ts +18 -15
- package/types/components/module-info/module-info.d.ts +2 -0
- package/types/ui/icon/icon.d.ts +1 -0
- package/lib/components/job-meta/index.js +0 -18
- package/lib/components/job-meta/index.js.map +0 -1
- package/lib/components/job-meta/job-meta.js +0 -34
- package/lib/components/job-meta/job-meta.js.map +0 -1
- package/lib/components/job-meta/job-meta.module.css +0 -19
- package/lib-esm/components/job-meta/index.js +0 -2
- package/lib-esm/components/job-meta/index.js.map +0 -1
- package/lib-esm/components/job-meta/job-meta.js +0 -27
- package/lib-esm/components/job-meta/job-meta.js.map +0 -1
- package/lib-esm/components/job-meta/job-meta.module.css +0 -19
- package/src/components/job-meta/index.js +0 -1
- package/src/components/job-meta/job-meta.jsx +0 -47
- package/src/components/job-meta/job-meta.module.css +0 -19
- package/src/components/jobs-header/jobs-header.jsx +0 -43
- package/types/components/job-meta/index.d.ts +0 -1
- package/types/components/job-meta/job-meta.d.ts +0 -18
- /package/src/components/jobs-header/{index.js → index.ts} +0 -0
|
@@ -18,29 +18,32 @@ export const JobHeader = (props) => {
|
|
|
18
18
|
|
|
19
19
|
return (
|
|
20
20
|
<Stack className={rootClassName} space="xxsmall">
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
<FlexStack space="xsmall" alignItems="center">
|
|
22
|
+
<FlexStack space="xxxsmall" as="h1" className={css.title}>
|
|
23
|
+
<span>{`#${job.internalBuildNumber}`}</span>
|
|
24
|
+
{tag && <Tag className={css.tag}>{tag}</Tag>}
|
|
25
|
+
</FlexStack>
|
|
26
|
+
|
|
26
27
|
{builtAt && (
|
|
27
|
-
<FlexStack space="xxxsmall" alignItems="center" inline as="span" title={builtAt}>
|
|
28
|
-
<Icon glyph="clock" />
|
|
29
|
-
<span>
|
|
28
|
+
<FlexStack space="xxxsmall" alignItems="center" inline as="span" title={builtAt} className={css.meta}>
|
|
29
|
+
<Icon glyph="clock" className={css.metaIcon} />
|
|
30
|
+
<span className={css.metaText}>
|
|
30
31
|
{formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
|
|
31
32
|
</span>
|
|
32
33
|
</FlexStack>
|
|
33
34
|
)}
|
|
34
35
|
|
|
35
36
|
{hash && (
|
|
36
|
-
<FlexStack space="xxxsmall" alignItems="center" inline title="Webpack bundle hash">
|
|
37
|
-
<Icon glyph="commit" />
|
|
38
|
-
<span>{hash}</span>
|
|
37
|
+
<FlexStack space="xxxsmall" alignItems="center" inline title="Webpack bundle hash" className={css.meta}>
|
|
38
|
+
<Icon glyph="commit" className={css.metaIcon} />
|
|
39
|
+
<span className={css.metaText}>{hash.slice(0, 7)}</span>
|
|
39
40
|
</FlexStack>
|
|
40
41
|
)}
|
|
41
|
-
|
|
42
|
-
<div className={css.content}>{children}</div>
|
|
43
42
|
</FlexStack>
|
|
43
|
+
{children && (<FlexStack space="xxsmall" className={css.meta}>
|
|
44
|
+
<div className={css.content}>{children}</div>
|
|
45
|
+
</FlexStack>
|
|
46
|
+
)}
|
|
44
47
|
</Stack>
|
|
45
48
|
);
|
|
46
49
|
};
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
.root {
|
|
2
|
-
align-items: stretch;
|
|
3
|
-
flex-wrap: wrap;
|
|
4
2
|
padding: var(--space-small) 0;
|
|
5
3
|
}
|
|
6
4
|
|
|
7
5
|
.item {
|
|
8
6
|
flex: 0 0 auto;
|
|
9
|
-
padding: 0 var(--space-
|
|
7
|
+
padding: 0 var(--space-small);
|
|
10
8
|
border-left: 1px solid var(--color-outline);
|
|
11
9
|
}
|
|
12
10
|
|
|
@@ -14,3 +12,23 @@
|
|
|
14
12
|
border-left: 0;
|
|
15
13
|
padding-left: 0;
|
|
16
14
|
}
|
|
15
|
+
|
|
16
|
+
.itemTitle {
|
|
17
|
+
font-size: var(--size-xlarge);
|
|
18
|
+
line-height: 1;
|
|
19
|
+
font-weight: bold;
|
|
20
|
+
vertical-align: top;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.itemTag {
|
|
24
|
+
margin-left: var(--space-xxsmall);
|
|
25
|
+
vertical-align: top;
|
|
26
|
+
outline: 1px solid var(--color-outline);
|
|
27
|
+
background: var(--color-highlight);
|
|
28
|
+
color: var(--color-text-light);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.itemMeta {
|
|
32
|
+
font-size: var(--size-small);
|
|
33
|
+
color: var(--color-text-light);
|
|
34
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import { getWrapperDecorator } from '../../stories';
|
|
4
|
+
import { JobsHeader } from '.';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Components/JobsHeader',
|
|
8
|
+
component: JobsHeader,
|
|
9
|
+
decorators: [getWrapperDecorator()],
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const Default = () => (
|
|
13
|
+
<JobsHeader
|
|
14
|
+
jobs={[
|
|
15
|
+
{
|
|
16
|
+
internalBuildNumber: 1,
|
|
17
|
+
meta: {
|
|
18
|
+
webpack: {
|
|
19
|
+
builtAt: '2019-01-01T00:00:00.000Z',
|
|
20
|
+
hash: 'abcd1234',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
]}
|
|
25
|
+
/>
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
export const MultipleJobs = () => (
|
|
29
|
+
<JobsHeader
|
|
30
|
+
jobs={[
|
|
31
|
+
{
|
|
32
|
+
internalBuildNumber: 1,
|
|
33
|
+
meta: {
|
|
34
|
+
webpack: {
|
|
35
|
+
builtAt: '2019-01-01T00:00:00.000Z',
|
|
36
|
+
hash: 'abcd1234',
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
internalBuildNumber: 2,
|
|
42
|
+
meta: {
|
|
43
|
+
webpack: {
|
|
44
|
+
builtAt: '2019-01-02T00:00:00.000Z',
|
|
45
|
+
hash: 'efgh1234',
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
]}
|
|
50
|
+
/>
|
|
51
|
+
);
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import cx from 'classnames';
|
|
3
|
+
import { formatDateTime } from '@bundle-stats/utils';
|
|
4
|
+
|
|
5
|
+
import I18N from '../../i18n';
|
|
6
|
+
import { FlexStack } from '../../layout/flex-stack';
|
|
7
|
+
import { Stack } from '../../layout/stack';
|
|
8
|
+
import { Icon } from '../../ui/icon';
|
|
9
|
+
import { Tag } from '../../ui/tag';
|
|
10
|
+
import css from './jobs-header.module.css';
|
|
11
|
+
|
|
12
|
+
interface ItemProps {
|
|
13
|
+
job: {
|
|
14
|
+
internalBuildNumber: number;
|
|
15
|
+
meta?: {
|
|
16
|
+
webpack?: {
|
|
17
|
+
builtAt?: string;
|
|
18
|
+
hash?: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
tag: string;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export const Item = (props: ItemProps & React.ComponentProps<'div'>) => {
|
|
26
|
+
const { className, tag, job } = props;
|
|
27
|
+
|
|
28
|
+
const { builtAt, hash } = job.meta?.webpack || {};
|
|
29
|
+
const rootClassName = cx(css.item, className);
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<Stack className={rootClassName} space="xxsmall">
|
|
33
|
+
<FlexStack space="xsmall" alignItems="center">
|
|
34
|
+
<FlexStack space="xxxsmall" as="h1" className={css.itemTitle}>
|
|
35
|
+
<span>{`#${job.internalBuildNumber}`}</span>
|
|
36
|
+
{tag && <Tag className={css.itemTag}>{tag}</Tag>}
|
|
37
|
+
</FlexStack>
|
|
38
|
+
|
|
39
|
+
{builtAt && (
|
|
40
|
+
<FlexStack
|
|
41
|
+
space="xxxsmall"
|
|
42
|
+
alignItems="center"
|
|
43
|
+
inline
|
|
44
|
+
as="span"
|
|
45
|
+
title={builtAt}
|
|
46
|
+
className={css.itemMeta}
|
|
47
|
+
>
|
|
48
|
+
<Icon glyph="clock" className={css.itemMetaIcon} />
|
|
49
|
+
<span className={css.itemMetaText}>
|
|
50
|
+
{formatDateTime({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)}
|
|
51
|
+
</span>
|
|
52
|
+
</FlexStack>
|
|
53
|
+
)}
|
|
54
|
+
|
|
55
|
+
{hash && (
|
|
56
|
+
<FlexStack
|
|
57
|
+
space="xxxsmall"
|
|
58
|
+
alignItems="center"
|
|
59
|
+
inline
|
|
60
|
+
title="Webpack bundle hash"
|
|
61
|
+
className={css.itemMeta}
|
|
62
|
+
>
|
|
63
|
+
<Icon glyph="commit" className={css.itemMetaIcon} />
|
|
64
|
+
<span className={css.itemMetaText}>{hash.slice(0, 7)}</span>
|
|
65
|
+
</FlexStack>
|
|
66
|
+
)}
|
|
67
|
+
</FlexStack>
|
|
68
|
+
</Stack>
|
|
69
|
+
);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
interface JobsHeaderProps {
|
|
73
|
+
jobs?: Array<ItemProps['job']> | null;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header'>) => {
|
|
77
|
+
const { className, jobs } = props;
|
|
78
|
+
const rootClassName = cx(css.root, className);
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<FlexStack className={rootClassName}>
|
|
82
|
+
{jobs?.map((job, index) => (
|
|
83
|
+
<Item
|
|
84
|
+
key={job.internalBuildNumber || index}
|
|
85
|
+
job={job}
|
|
86
|
+
tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
|
|
87
|
+
/>
|
|
88
|
+
))}
|
|
89
|
+
</FlexStack>
|
|
90
|
+
);
|
|
91
|
+
};
|
|
@@ -2,7 +2,15 @@ import React, { useMemo } from 'react';
|
|
|
2
2
|
import cx from 'classnames';
|
|
3
3
|
import isEmpty from 'lodash/isEmpty';
|
|
4
4
|
import noop from 'lodash/noop';
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
BUNDLE_MODULES_DUPLICATE,
|
|
7
|
+
FILE_TYPE_LABELS,
|
|
8
|
+
MODULE_SOURCE_TYPE_LABELS,
|
|
9
|
+
MetricRunInfo,
|
|
10
|
+
getBundleModulesByChunk,
|
|
11
|
+
getBundleModulesByFileTpe,
|
|
12
|
+
getBundleModulesBySource,
|
|
13
|
+
} from '@bundle-stats/utils';
|
|
6
14
|
import { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
|
|
7
15
|
|
|
8
16
|
import { Tag } from '../../ui/tag';
|
|
@@ -15,6 +23,8 @@ interface ModuleInfoProps {
|
|
|
15
23
|
label: string;
|
|
16
24
|
changed?: boolean;
|
|
17
25
|
duplicated?: boolean;
|
|
26
|
+
thirdParty?: boolean;
|
|
27
|
+
fileType?: string;
|
|
18
28
|
runs: Array<Module & MetricRunInfo>;
|
|
19
29
|
};
|
|
20
30
|
chunks?: Array<MetaChunk>;
|
|
@@ -44,16 +54,24 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
|
|
|
44
54
|
|
|
45
55
|
return (
|
|
46
56
|
<div>
|
|
47
|
-
<Tag as={CustomComponentLink} {...BUNDLE_MODULES_DUPLICATE} onClick={onClick} kind="danger">
|
|
57
|
+
<Tag as={CustomComponentLink} {...BUNDLE_MODULES_DUPLICATE} onClick={onClick} kind="danger">
|
|
58
|
+
Duplicate
|
|
59
|
+
</Tag>
|
|
48
60
|
</div>
|
|
49
61
|
);
|
|
50
62
|
}, [item]);
|
|
51
63
|
|
|
64
|
+
const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
|
|
65
|
+
|
|
66
|
+
const sourceTypeLabel = item.thirdParty
|
|
67
|
+
? MODULE_SOURCE_TYPE_LABELS.THIRD_PARTY
|
|
68
|
+
: MODULE_SOURCE_TYPE_LABELS.FIRST_PARTY;
|
|
69
|
+
|
|
52
70
|
return (
|
|
53
71
|
<EntryInfo item={item} labels={labels} tags={tags} className={rootClassName}>
|
|
54
72
|
{!isEmpty(currentRun?.chunkIds) && (
|
|
55
73
|
<div className={css.chunks}>
|
|
56
|
-
<span className={css.
|
|
74
|
+
<span className={css.label}>Chunks</span>
|
|
57
75
|
{currentRun.chunkIds.map((chunkId) => {
|
|
58
76
|
const chunk = chunks?.find(({ id }) => id === chunkId);
|
|
59
77
|
|
|
@@ -74,6 +92,30 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
|
|
|
74
92
|
})}
|
|
75
93
|
</div>
|
|
76
94
|
)}
|
|
95
|
+
|
|
96
|
+
{item?.fileType && (
|
|
97
|
+
<p>
|
|
98
|
+
<span className={css.label}>File type</span>
|
|
99
|
+
<Tag
|
|
100
|
+
as={CustomComponentLink}
|
|
101
|
+
{...getBundleModulesByFileTpe(item.fileType, fileTypeLabel)}
|
|
102
|
+
onClick={onClick}
|
|
103
|
+
>
|
|
104
|
+
{fileTypeLabel}
|
|
105
|
+
</Tag>
|
|
106
|
+
</p>
|
|
107
|
+
)}
|
|
108
|
+
|
|
109
|
+
<p>
|
|
110
|
+
<span className={css.label}>Source</span>
|
|
111
|
+
<Tag
|
|
112
|
+
as={CustomComponentLink}
|
|
113
|
+
{...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel)}
|
|
114
|
+
onClick={onClick}
|
|
115
|
+
>
|
|
116
|
+
{sourceTypeLabel}
|
|
117
|
+
</Tag>
|
|
118
|
+
</p>
|
|
77
119
|
</EntryInfo>
|
|
78
120
|
);
|
|
79
121
|
};
|
|
@@ -17,6 +17,7 @@ import { FileName } from '../../ui/file-name';
|
|
|
17
17
|
import { Tag } from '../../ui/tag';
|
|
18
18
|
import { EntryInfo } from '../entry-info';
|
|
19
19
|
import css from './package-info.module.css';
|
|
20
|
+
import { Icon } from '../../ui';
|
|
20
21
|
|
|
21
22
|
interface PackageInfoProps {
|
|
22
23
|
name: string;
|
|
@@ -36,19 +37,29 @@ export const PackageInfo = (props: PackageInfoProps & React.ComponentProps<'div'
|
|
|
36
37
|
item,
|
|
37
38
|
labels,
|
|
38
39
|
customComponentLink: CustomComponentLink = ComponentLink,
|
|
39
|
-
onClick = noop
|
|
40
|
+
onClick = noop,
|
|
40
41
|
} = props;
|
|
41
42
|
|
|
42
|
-
const fallbackPackagePath = `node_modules/${item.label
|
|
43
|
+
const fallbackPackagePath = `node_modules/${item.label
|
|
44
|
+
.split(PACKAGES_SEPARATOR)
|
|
45
|
+
.join('/node_modules/')}`;
|
|
43
46
|
const normalizedPackagePath = `${item.runs?.[0]?.path || fallbackPackagePath}/`;
|
|
44
47
|
const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
|
|
45
48
|
|
|
46
|
-
const packageTitle = useMemo(
|
|
47
|
-
|
|
48
|
-
<span className={css.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
const packageTitle = useMemo(
|
|
50
|
+
() => (
|
|
51
|
+
<span className={css.packageTitle}>
|
|
52
|
+
<span className={css.packageTitleText}>{normalizedName}</span>
|
|
53
|
+
{packageId && (
|
|
54
|
+
<span className={css.packageTitleId}>
|
|
55
|
+
{PACKAGE_ID_SEPARATOR}
|
|
56
|
+
{packageId}
|
|
57
|
+
</span>
|
|
58
|
+
)}
|
|
59
|
+
</span>
|
|
60
|
+
),
|
|
61
|
+
[normalizedName, packageId],
|
|
62
|
+
);
|
|
52
63
|
|
|
53
64
|
const tags = useMemo(() => {
|
|
54
65
|
if (!item.duplicate) {
|
|
@@ -57,7 +68,14 @@ export const PackageInfo = (props: PackageInfoProps & React.ComponentProps<'div'
|
|
|
57
68
|
|
|
58
69
|
return (
|
|
59
70
|
<div>
|
|
60
|
-
<Tag
|
|
71
|
+
<Tag
|
|
72
|
+
as={CustomComponentLink}
|
|
73
|
+
{...BUNDLE_PACKAGES_DUPLICATE}
|
|
74
|
+
onClick={onClick}
|
|
75
|
+
kind="danger"
|
|
76
|
+
>
|
|
77
|
+
Duplicate
|
|
78
|
+
</Tag>
|
|
61
79
|
</div>
|
|
62
80
|
);
|
|
63
81
|
}, [item]);
|
|
@@ -72,12 +90,15 @@ export const PackageInfo = (props: PackageInfoProps & React.ComponentProps<'div'
|
|
|
72
90
|
className={className}
|
|
73
91
|
>
|
|
74
92
|
<Stack space="small">
|
|
75
|
-
<p>
|
|
93
|
+
<p>
|
|
94
|
+
<span className={css.label}>Path</span>
|
|
95
|
+
<FileName name={normalizedPackagePath} className={css.fileName} />
|
|
96
|
+
</p>
|
|
76
97
|
|
|
77
98
|
<Stack space="xxxsmall">
|
|
78
99
|
{item.duplicate && (
|
|
79
100
|
<div>
|
|
80
|
-
<CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
|
|
101
|
+
<CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)} onClick={onClick}>
|
|
81
102
|
View all duplicate instances
|
|
82
103
|
</CustomComponentLink>
|
|
83
104
|
</div>
|
|
@@ -89,22 +110,30 @@ export const PackageInfo = (props: PackageInfoProps & React.ComponentProps<'div'
|
|
|
89
110
|
</Stack>
|
|
90
111
|
|
|
91
112
|
<FlexStack space="xsmall" alignItems="center" className={css.external}>
|
|
92
|
-
<
|
|
113
|
+
<FlexStack
|
|
114
|
+
space="xxxsmall"
|
|
115
|
+
alignItems="center"
|
|
116
|
+
as="a"
|
|
93
117
|
href={`https://www.npmjs.com/package/${normalizedName}`}
|
|
94
118
|
target="_blank"
|
|
95
119
|
rel="noreferrer"
|
|
96
120
|
className={css.externalLink}
|
|
97
121
|
>
|
|
98
|
-
npmjs.com
|
|
99
|
-
|
|
100
|
-
|
|
122
|
+
<span>npmjs.com</span>
|
|
123
|
+
<Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
|
|
124
|
+
</FlexStack>
|
|
125
|
+
<FlexStack
|
|
126
|
+
space="xxxsmall"
|
|
127
|
+
alignItems="center"
|
|
128
|
+
as="a"
|
|
101
129
|
href={`https://bundlephobia.com/result?p=${normalizedName}`}
|
|
102
130
|
target="_blank"
|
|
103
131
|
rel="noreferrer"
|
|
104
132
|
className={css.externalLink}
|
|
105
133
|
>
|
|
106
|
-
bundlephobia.com
|
|
107
|
-
|
|
134
|
+
<span>bundlephobia.com</span>
|
|
135
|
+
<Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />
|
|
136
|
+
</FlexStack>
|
|
108
137
|
</FlexStack>
|
|
109
138
|
</Stack>
|
|
110
139
|
</EntryInfo>
|
package/src/ui/icon/icon.jsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function
|
|
1
|
+
export function addRowFlags(row: any): any;
|
|
2
2
|
export function getCustomSort(sortBy: any): (item: any) => any;
|
|
3
3
|
export function getRowFilter(filters: any): (row: any) => boolean;
|
|
4
4
|
export function useModuleFilterByChunk({ jobs, filters, chunkIds }: {
|
|
@@ -9,7 +9,6 @@ export { Delta } from "./delta";
|
|
|
9
9
|
export { InsightIcon } from "./insight-icon";
|
|
10
10
|
export { Insights } from "./insights";
|
|
11
11
|
export { JobName } from "./job-name";
|
|
12
|
-
export { JobHeader } from "./job-header";
|
|
13
12
|
export { JobsHeader } from "./jobs-header";
|
|
14
13
|
export { LighthouseTable } from "./lighthouse-table";
|
|
15
14
|
export { Metric } from "./metric";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './jobs-header';
|
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
export { jobs_1 as jobs };
|
|
14
|
-
}
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ItemProps {
|
|
3
|
+
job: {
|
|
4
|
+
internalBuildNumber: number;
|
|
5
|
+
meta?: {
|
|
6
|
+
webpack?: {
|
|
7
|
+
builtAt?: string;
|
|
8
|
+
hash?: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
tag: string;
|
|
15
13
|
}
|
|
16
|
-
|
|
14
|
+
export declare const Item: (props: ItemProps & React.ComponentProps<'div'>) => JSX.Element;
|
|
15
|
+
interface JobsHeaderProps {
|
|
16
|
+
jobs?: Array<ItemProps['job']> | null;
|
|
17
|
+
}
|
|
18
|
+
export declare const JobsHeader: (props: JobsHeaderProps & React.ComponentProps<'header'>) => JSX.Element;
|
|
19
|
+
export {};
|
package/types/ui/icon/icon.d.ts
CHANGED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./job-meta"), exports);
|
|
18
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/job-meta/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.JobMeta = void 0;
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const prop_types_1 = __importDefault(require("prop-types"));
|
|
9
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
10
|
-
const job_meta_module_css_1 = __importDefault(require("./job-meta.module.css"));
|
|
11
|
-
const JobMeta = (props) => {
|
|
12
|
-
const { as: Component, className, meta, ...restProps } = props;
|
|
13
|
-
const rootClassName = (0, classnames_1.default)(job_meta_module_css_1.default.root, className);
|
|
14
|
-
return (react_1.default.createElement(Component, { className: rootClassName, ...restProps }, meta.map(({ title, content }, index) => {
|
|
15
|
-
const key = index;
|
|
16
|
-
return (react_1.default.createElement("div", { className: job_meta_module_css_1.default.item, key: key },
|
|
17
|
-
title && (react_1.default.createElement("h2", { className: job_meta_module_css_1.default.itemTitle }, title)),
|
|
18
|
-
content.map((item) => item)));
|
|
19
|
-
})));
|
|
20
|
-
};
|
|
21
|
-
exports.JobMeta = JobMeta;
|
|
22
|
-
exports.JobMeta.propTypes = {
|
|
23
|
-
className: prop_types_1.default.string,
|
|
24
|
-
meta: prop_types_1.default.arrayOf(prop_types_1.default.shape({
|
|
25
|
-
title: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.element]),
|
|
26
|
-
content: prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.element])),
|
|
27
|
-
})).isRequired,
|
|
28
|
-
as: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.element]),
|
|
29
|
-
};
|
|
30
|
-
exports.JobMeta.defaultProps = {
|
|
31
|
-
className: '',
|
|
32
|
-
as: 'div',
|
|
33
|
-
};
|
|
34
|
-
//# sourceMappingURL=job-meta.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"job-meta.js","sourceRoot":"","sources":["../../../src/components/job-meta/job-meta.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAE5B,gFAAwC;AAEjC,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;IAC/B,MAAM,EACJ,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAC7C,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,6BAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,SAAS,IAAC,SAAS,EAAE,aAAa,KAAM,SAAS,IAC/C,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;QACtC,MAAM,GAAG,GAAG,KAAK,CAAC;QAElB,OAAO,CACL,uCAAK,SAAS,EAAE,6BAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG;YAC/B,KAAK,IAAI,CAAC,sCAAI,SAAS,EAAE,6BAAG,CAAC,SAAS,IAAG,KAAK,CAAM,CAAC;YACrD,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CACxB,CACP,CAAC;IACJ,CAAC,CAAC,CACQ,CACb,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,OAAO,WAqBlB;AAEF,eAAO,CAAC,SAAS,GAAG;IAElB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,IAAI,EAAE,oBAAS,CAAC,OAAO,CAAC,oBAAS,CAAC,KAAK,CAAC;QACtC,KAAK,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,OAAO,CAAC,CAAC;QACjE,OAAO,EAAE,oBAAS,CAAC,OAAO,CAAC,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,OAAO,CAAC,CAAC,CAAC;KACvF,CAAC,CAAC,CAAC,UAAU;IAGd,EAAE,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,OAAO,CAAC,CAAC;CAC/D,CAAC;AAEF,eAAO,CAAC,YAAY,GAAG;IACrB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,KAAK;CACV,CAAC"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
.root {
|
|
2
|
-
padding: var(--space-xsmall) var(--space-small);
|
|
3
|
-
display: flex;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.item {
|
|
7
|
-
flex: 1 1 100%;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.itemTitle {
|
|
11
|
-
margin: 0;
|
|
12
|
-
font-size: 1em;
|
|
13
|
-
font-weight: bold;
|
|
14
|
-
color: var(--color-text-light);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.item + .item {
|
|
18
|
-
margin-left: var(--space-xsmall);
|
|
19
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/job-meta/index.js"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|