Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
fix: consistent color in size brreakdown
+11
-2
+11
-2
src/components/package-dependencies.tsx
+11
-2
src/components/package-dependencies.tsx
···
60
60
61
61
// #region size breakdown bar
62
62
63
+
/** derives a consistent color index from a package name */
64
+
function getColorIndex(name: string): number {
65
+
let hash = 0;
66
+
for (let i = 0; i < name.length; i++) {
67
+
hash = (hash * 31 + name.charCodeAt(i)) | 0;
68
+
}
69
+
return Math.abs(hash) % SEGMENT_COLORS.length;
70
+
}
71
+
63
72
interface SizeBreakdownBarProps {
64
73
packages: InstalledPackage[];
65
74
installSize: number;
···
69
78
const segments = createMemo(() => {
70
79
// sort by size descending for the bar
71
80
const sorted = [...props.packages].sort((a, b) => b.size - a.size);
72
-
return sorted.map((pkg, i) => ({
81
+
return sorted.map((pkg) => ({
73
82
pkg,
74
83
percent: (pkg.size / props.installSize) * 100,
75
-
color: SEGMENT_COLORS[i % SEGMENT_COLORS.length],
84
+
color: SEGMENT_COLORS[getColorIndex(pkg.name)],
76
85
}));
77
86
});
78
87