Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
refactor: alter size display
+39
-27
+28
-23
src/components/package-dependencies.tsx
+28
-23
src/components/package-dependencies.tsx
···
316
316
(pkg) =>
317
317
pkg.name.toLowerCase().includes(filterText) || pkg.description?.toLowerCase().includes(filterText),
318
318
);
319
+
} else {
320
+
result = [...result];
319
321
}
320
322
321
323
return [...result].sort(sortConfig.compare);
···
338
340
<SizeBreakdownBar packages={displayPackages()} installSize={displayInstallSize()} />
339
341
340
342
{/* filter and sort controls */}
341
-
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
342
-
{/* filter input */}
343
-
<Input
344
-
class="sm:flex-1"
345
-
type="text"
346
-
placeholder="Filter packages..."
347
-
value={filter()}
348
-
onInput={(e) => setFilter(e.currentTarget.value)}
349
-
contentBefore={<LucideSearch class="size-4" />}
350
-
/>
343
+
{displayPackages().length > 1 && (
344
+
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
345
+
{/* filter input */}
346
+
<Input
347
+
class="sm:flex-4"
348
+
type="text"
349
+
placeholder="Filter packages..."
350
+
value={filter()}
351
+
onInput={(e) => setFilter(e.currentTarget.value)}
352
+
contentBefore={<LucideSearch class="size-4" />}
353
+
/>
354
+
355
+
{/* sort dropdown */}
356
+
<Dropdown.Root value={sortBy()} onValueChange={(v) => setSortBy(v as SortOption)}>
357
+
<Dropdown.Trigger class="sm:flex-3">
358
+
<span class="whitespace-pre text-neutral-foreground-3">Sort by </span>
359
+
<span>{SORT_OPTIONS[sortBy()].label}</span>
360
+
</Dropdown.Trigger>
351
361
352
-
{/* sort dropdown */}
353
-
<Dropdown.Root value={sortBy()} onValueChange={(v) => setSortBy(v as SortOption)}>
354
-
<Dropdown.Trigger class="w-auto">
355
-
<span class="mr-1 text-neutral-foreground-3">Sort:</span>
356
-
<span>{SORT_OPTIONS[sortBy()].label}</span>
357
-
</Dropdown.Trigger>
358
-
<Dropdown.Listbox>
359
-
<For each={Object.entries(SORT_OPTIONS) as [SortOption, SortConfig][]}>
360
-
{([key, config]) => <Dropdown.Option value={key}>{config.label}</Dropdown.Option>}
361
-
</For>
362
-
</Dropdown.Listbox>
363
-
</Dropdown.Root>
364
-
</div>
362
+
<Dropdown.Listbox>
363
+
<For each={Object.entries(SORT_OPTIONS) as [SortOption, SortConfig][]}>
364
+
{([key, config]) => <Dropdown.Option value={key}>{config.label}</Dropdown.Option>}
365
+
</For>
366
+
</Dropdown.Listbox>
367
+
</Dropdown.Root>
368
+
</div>
369
+
)}
365
370
366
371
{/* package list */}
367
372
<div class="-mx-3 flex flex-col">
+11
-4
src/primitives/dropdown/dropdown-trigger.tsx
+11
-4
src/primitives/dropdown/dropdown-trigger.tsx
···
1
-
import type { JSX } from 'solid-js';
1
+
import clsx from 'clsx';
2
+
import { createMemo, type JSX } from 'solid-js';
2
3
3
4
import { LucideChevronDown } from '../../icons/lucide';
4
5
import { tw } from '../../lib/classes';
···
30
31
31
32
// #region styles
32
33
33
-
const rootBaseStyles = tw`inline-flex w-full items-center justify-between bg-neutral-background-1 align-middle outline-2 -outline-offset-2 outline-transparent transition duration-100 select-none`;
34
+
const rootBaseStyles = tw`inline-flex w-full items-center justify-between bg-neutral-background-1 text-left align-middle outline-2 -outline-offset-2 outline-transparent transition duration-100 select-none`;
34
35
35
36
const rootSizeStyles: Record<DropdownSize, string> = {
36
37
small: tw`min-h-6 gap-2 px-2 text-base-200`,
···
145
146
}
146
147
};
147
148
148
-
const hasValue = () => ctx.selectedValue() !== undefined;
149
+
const hasValue = createMemo(() => ctx.selectedValue() !== undefined);
149
150
150
151
return (
151
152
<button
···
165
166
onKeyDown={handleKeyDown}
166
167
class={`${rootBaseStyles} ${rootSizeStyles[size()]} ${rootAppearanceStyles[appearance()]} ${props.disabled ? rootDisabledStyles : isInvalid() ? rootInvalidStyles : ''} ${props.class ?? ''}`}
167
168
>
168
-
<span class={hasValue() ? 'text-neutral-foreground-1' : 'text-neutral-foreground-4'}>
169
+
<span
170
+
class={clsx(
171
+
`min-w-0 grow truncate`,
172
+
hasValue() ? `text-neutral-foreground-1` : `text-neutral-foreground-4`,
173
+
)}
174
+
>
169
175
{props.children ?? props.placeholder}
170
176
</span>
177
+
171
178
<LucideChevronDown class={`${iconSizeStyles[size()]} shrink-0 text-neutral-foreground-3`} />
172
179
</button>
173
180
);