Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
feat: toggle component
+87
-17
+1
-1
.oxfmtrc.json
+1
-1
.oxfmtrc.json
+1
-1
.vscode/settings.json
+1
-1
.vscode/settings.json
+1
package.json
+1
package.json
+9
pnpm-lock.yaml
+9
pnpm-lock.yaml
···
23
23
'@rolldown/browser':
24
24
specifier: ^1.0.0-rc.1
25
25
version: 1.0.0-rc.1
26
+
clsx:
27
+
specifier: ^2.1.1
28
+
version: 2.1.1
26
29
dequal:
27
30
specifier: ^2.0.3
28
31
version: 2.0.3
···
1240
1243
chai@6.2.2:
1241
1244
resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
1242
1245
engines: {node: '>=18'}
1246
+
1247
+
clsx@2.1.1:
1248
+
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
1249
+
engines: {node: '>=6'}
1243
1250
1244
1251
convert-source-map@2.0.0:
1245
1252
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
···
2738
2745
caniuse-lite@1.0.30001765: {}
2739
2746
2740
2747
chai@6.2.2: {}
2748
+
2749
+
clsx@2.1.1: {}
2741
2750
2742
2751
convert-source-map@2.0.0: {}
2743
2752
+12
-15
src/components/package-result.tsx
+12
-15
src/components/package-result.tsx
···
1
1
import { createSignal, Show } from 'solid-js';
2
2
3
3
import type { PackageSession } from '../npm/worker-client';
4
+
import Toggle from '../primitives/toggle';
4
5
5
6
import PackageBundle from './package-bundle';
6
7
import PackageDependencies from './package-dependencies';
···
17
18
const [excludePeers, setExcludePeers] = createSignal(false);
18
19
19
20
const hasPeerDeps = result.peerDependencies.length > 0;
21
+
const hasSubpaths = result.subpaths.defaultSubpath !== null;
20
22
21
23
return (
22
24
<div class="flex flex-col gap-8">
···
29
31
<span class="my-1.25 text-base-400 text-neutral-foreground-3">{result.version}</span>
30
32
</div>
31
33
32
-
{/* peer deps toggle */}
33
-
<Show when={hasPeerDeps}>
34
-
<label class="flex items-center gap-2 text-base-300 text-neutral-foreground-2">
35
-
<input
36
-
type="checkbox"
37
-
checked={excludePeers()}
38
-
onChange={(e) => setExcludePeers(e.currentTarget.checked)}
39
-
class="accent-brand-background-1 size-4"
40
-
/>
41
-
<span>Exclude peer dependencies</span>
42
-
</label>
43
-
</Show>
34
+
{hasPeerDeps && (
35
+
<Toggle
36
+
checked={excludePeers()}
37
+
onChange={(ev) => setExcludePeers(ev.currentTarget.checked)}
38
+
class="-mx-2"
39
+
>
40
+
Exclude peer dependencies
41
+
</Toggle>
42
+
)}
44
43
45
-
{/* bundle size section */}
46
-
{result.subpaths.defaultSubpath !== null && (
44
+
{hasSubpaths && (
47
45
<>
48
46
<PackageBundle
49
47
packageName={/* @once */ result.name}
···
56
54
</>
57
55
)}
58
56
59
-
{/* install size section */}
60
57
<PackageDependencies
61
58
packages={/* @once */ result.packages}
62
59
installSize={/* @once */ result.installSize}
+63
src/primitives/toggle.tsx
+63
src/primitives/toggle.tsx
···
1
+
import clsx from 'clsx';
2
+
import { createUniqueId, splitProps, type JSX } from 'solid-js';
3
+
4
+
export interface ToggleProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
5
+
children: JSX.Element;
6
+
}
7
+
8
+
const Toggle = (props: ToggleProps) => {
9
+
const [local, rest] = splitProps(props, ['children', 'class', 'id']);
10
+
11
+
const id = createUniqueId();
12
+
13
+
return (
14
+
<div class={clsx('relative inline-flex items-start', local.class)}>
15
+
<input
16
+
id={id}
17
+
type="checkbox"
18
+
role="switch"
19
+
class={clsx(`peer absolute top-0 left-0 h-9 w-14 opacity-0 outline-none`)}
20
+
{...rest}
21
+
/>
22
+
23
+
<div
24
+
aria-hidden="true"
25
+
class={clsx(
26
+
`pointer-events-none m-2 h-5 w-10 shrink-0 rounded-full border transition duration-200 ease-fluent`,
27
+
28
+
`border-neutral-stroke-accessible peer-hover:border-neutral-stroke-accessible-hover peer-active:border-neutral-stroke-accessible-pressed peer-disabled:border-neutral-stroke-disabled`,
29
+
`p peer-checked:border-transparent-stroke peer-checked:bg-compound-brand-background peer-checked:peer-hover:border-transparent-stroke-interactive peer-checked:peer-hover:bg-compound-brand-background-hover peer-checked:peer-active:border-transparent-stroke-interactive peer-checked:peer-active:bg-compound-brand-background-pressed peer-checked:peer-disabled:border-transparent-stroke-disabled peer-checked:peer-disabled:bg-neutral-background-disabled`,
30
+
)}
31
+
></div>
32
+
33
+
<div
34
+
aria-hidden="true"
35
+
class={clsx(
36
+
`pointer-events-none absolute top-0 left-0 m-2.75 size-3.5 rounded-full transition duration-200 ease-fluent`,
37
+
38
+
`peer-checked:translate-x-5`,
39
+
40
+
`bg-neutral-stroke-accessible peer-hover:bg-neutral-stroke-accessible-hover peer-active:bg-neutral-stroke-accessible-pressed peer-disabled:bg-neutral-foreground-disabled`,
41
+
`peer-checked:bg-neutral-foreground-inverted peer-checked:peer-hover:bg-neutral-foreground-inverted peer-checked:peer-active:bg-neutral-foreground-inverted peer-checked:peer-disabled:bg-neutral-foreground-disabled`,
42
+
)}
43
+
></div>
44
+
45
+
<div
46
+
aria-hidden="true"
47
+
class="pointer-events-none absolute inset-0 rounded-md outline-2 outline-transparent peer-focus-visible:outline-stroke-focus-2"
48
+
></div>
49
+
50
+
<label
51
+
for={id}
52
+
class={clsx(
53
+
`p-2 text-base-300 select-none`,
54
+
`text-neutral-foreground-1 peer-disabled:text-neutral-foreground-disabled`,
55
+
)}
56
+
>
57
+
{local.children}
58
+
</label>
59
+
</div>
60
+
);
61
+
};
62
+
63
+
export default Toggle;