Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
refactor: unnecessary onMount calls
+158
-164
+63
-66
src/primitives/dropdown/dropdown-listbox.tsx
+63
-66
src/primitives/dropdown/dropdown-listbox.tsx
···
1
1
import { autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
2
-
import { createEffect, onCleanup, onMount, type JSX } from 'solid-js';
2
+
import { createEffect, onCleanup, type JSX } from 'solid-js';
3
3
import { Portal } from 'solid-js/web';
4
4
5
5
import { useDropdownContext } from './context';
···
25
25
<div
26
26
ref={(el) => {
27
27
ctx.setListboxRef(el);
28
+
onCleanup(() => {
29
+
ctx.setListboxRef(null);
30
+
});
28
31
29
-
onMount(() => {
30
-
createEffect(() => {
31
-
const trigger = ctx.triggerRef();
32
-
if (!trigger) {
33
-
return;
34
-
}
32
+
createEffect(() => {
33
+
const trigger = ctx.triggerRef();
34
+
if (!trigger) {
35
+
return;
36
+
}
35
37
36
-
const updatePosition = async () => {
37
-
const { x, y } = await computePosition(trigger, el, {
38
-
placement: 'bottom-start',
39
-
strategy: 'absolute',
40
-
middleware: [
41
-
offset(4),
42
-
flip(),
43
-
shift({ padding: 8 }),
44
-
size({
45
-
padding: 8,
46
-
apply({ availableWidth }) {
47
-
Object.assign(el.style, {
48
-
maxWidth: `${availableWidth}px`,
49
-
});
50
-
},
51
-
}),
52
-
],
53
-
});
38
+
const updatePosition = async () => {
39
+
const { x, y } = await computePosition(trigger, el, {
40
+
placement: 'bottom-start',
41
+
strategy: 'absolute',
42
+
middleware: [
43
+
offset(4),
44
+
flip(),
45
+
shift({ padding: 8 }),
46
+
size({
47
+
padding: 8,
48
+
apply({ availableWidth }) {
49
+
Object.assign(el.style, {
50
+
maxWidth: `${availableWidth}px`,
51
+
});
52
+
},
53
+
}),
54
+
],
55
+
});
54
56
55
-
Object.assign(el.style, {
56
-
position: 'absolute',
57
-
left: `${x}px`,
58
-
top: `${y}px`,
59
-
minWidth: `${trigger.offsetWidth}px`,
60
-
});
61
-
};
57
+
Object.assign(el.style, {
58
+
position: 'absolute',
59
+
left: `${x}px`,
60
+
top: `${y}px`,
61
+
minWidth: `${trigger.offsetWidth}px`,
62
+
});
63
+
};
62
64
63
-
onCleanup(autoUpdate(trigger, el, updatePosition));
64
-
});
65
-
66
-
{
67
-
// handle click outside to close
68
-
const handleClickOutside = (ev: MouseEvent) => {
69
-
const currentTrigger = ctx.triggerRef();
70
-
if (
71
-
!el.contains(ev.target as Node) &&
72
-
currentTrigger &&
73
-
!currentTrigger.contains(ev.target as Node)
74
-
) {
75
-
ctx.setOpen(false);
76
-
}
77
-
};
65
+
onCleanup(autoUpdate(trigger, el, updatePosition));
66
+
});
78
67
79
-
// handle escape key to close
80
-
const handleKeyDown = (ev: KeyboardEvent) => {
81
-
if (ev.key === 'Escape') {
82
-
ev.preventDefault();
83
-
ctx.setOpen(false);
84
-
ctx.triggerRef()?.focus();
85
-
}
86
-
};
68
+
{
69
+
// handle click outside to close
70
+
const handleClickOutside = (ev: MouseEvent) => {
71
+
const currentTrigger = ctx.triggerRef();
72
+
if (
73
+
!el.contains(ev.target as Node) &&
74
+
currentTrigger &&
75
+
!currentTrigger.contains(ev.target as Node)
76
+
) {
77
+
ctx.setOpen(false);
78
+
}
79
+
};
87
80
88
-
document.addEventListener('mousedown', handleClickOutside);
89
-
document.addEventListener('keydown', handleKeyDown);
81
+
// handle escape key to close
82
+
const handleKeyDown = (ev: KeyboardEvent) => {
83
+
if (ev.key === 'Escape') {
84
+
ev.preventDefault();
85
+
ctx.setOpen(false);
86
+
ctx.triggerRef()?.focus();
87
+
}
88
+
};
90
89
91
-
onCleanup(() => {
92
-
document.removeEventListener('mousedown', handleClickOutside);
93
-
document.removeEventListener('keydown', handleKeyDown);
94
-
});
95
-
}
96
-
});
90
+
document.addEventListener('mousedown', handleClickOutside);
91
+
document.addEventListener('keydown', handleKeyDown);
97
92
98
-
onCleanup(() => {
99
-
ctx.setListboxRef(null);
100
-
});
93
+
onCleanup(() => {
94
+
document.removeEventListener('mousedown', handleClickOutside);
95
+
document.removeEventListener('keydown', handleKeyDown);
96
+
});
97
+
}
101
98
}}
102
99
id={ctx.listboxId}
103
100
role="listbox"
+54
-56
src/primitives/popover/popover-surface.tsx
+54
-56
src/primitives/popover/popover-surface.tsx
···
1
1
import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
2
-
import { createEffect, onCleanup, onMount, type JSX } from 'solid-js';
2
+
import { createEffect, onCleanup, type JSX } from 'solid-js';
3
3
import { Portal } from 'solid-js/web';
4
4
5
5
import { usePopoverContext } from './context';
···
39
39
<div
40
40
ref={(el) => {
41
41
ctx.setSurfaceRef(el);
42
+
onCleanup(() => {
43
+
ctx.setSurfaceRef(null);
44
+
});
42
45
43
-
onMount(() => {
44
-
createEffect(() => {
45
-
const trigger = ctx.triggerRef();
46
-
if (!trigger) {
47
-
return;
48
-
}
46
+
createEffect(() => {
47
+
const trigger = ctx.triggerRef();
48
+
if (!trigger) {
49
+
return;
50
+
}
49
51
50
-
const placement = ctx.placement();
52
+
const placement = ctx.placement();
51
53
52
-
const updatePosition = async () => {
53
-
const { x, y } = await computePosition(trigger, el, {
54
-
placement: placement,
55
-
strategy: 'absolute',
56
-
middleware: [offset(4), flip(), shift({ padding: 8 })],
57
-
});
54
+
const updatePosition = async () => {
55
+
const { x, y } = await computePosition(trigger, el, {
56
+
placement: placement,
57
+
strategy: 'absolute',
58
+
middleware: [offset(4), flip(), shift({ padding: 8 })],
59
+
});
58
60
59
-
Object.assign(el.style, {
60
-
position: 'absolute',
61
-
left: `${x}px`,
62
-
top: `${y}px`,
63
-
});
64
-
};
61
+
Object.assign(el.style, {
62
+
position: 'absolute',
63
+
left: `${x}px`,
64
+
top: `${y}px`,
65
+
});
66
+
};
65
67
66
-
onCleanup(autoUpdate(trigger, el, updatePosition));
67
-
});
68
+
onCleanup(autoUpdate(trigger, el, updatePosition));
69
+
});
68
70
69
-
{
70
-
// handle click outside to close (only in click mode)
71
-
const handleClickOutside = (ev: MouseEvent) => {
72
-
if (ctx.openOnHover()) {
73
-
return;
74
-
}
75
-
const currentTrigger = ctx.triggerRef();
76
-
if (
77
-
!el.contains(ev.target as Node) &&
78
-
currentTrigger &&
79
-
!currentTrigger.contains(ev.target as Node)
80
-
) {
81
-
ctx.setOpen(false, 'clickoutside');
82
-
}
83
-
};
71
+
{
72
+
// handle click outside to close (only in click mode)
73
+
const handleClickOutside = (ev: MouseEvent) => {
74
+
if (ctx.openOnHover()) {
75
+
return;
76
+
}
84
77
85
-
// handle escape key to close
86
-
const handleKeyDown = (ev: KeyboardEvent) => {
87
-
if (ev.key === 'Escape') {
88
-
ev.preventDefault();
89
-
ctx.setOpen(false, 'escape');
90
-
ctx.triggerRef()?.focus();
91
-
}
92
-
};
78
+
const currentTrigger = ctx.triggerRef();
79
+
if (
80
+
!el.contains(ev.target as Node) &&
81
+
currentTrigger &&
82
+
!currentTrigger.contains(ev.target as Node)
83
+
) {
84
+
ctx.setOpen(false, 'clickoutside');
85
+
}
86
+
};
93
87
94
-
document.addEventListener('mousedown', handleClickOutside);
95
-
document.addEventListener('keydown', handleKeyDown);
88
+
// handle escape key to close
89
+
const handleKeyDown = (ev: KeyboardEvent) => {
90
+
if (ev.key === 'Escape') {
91
+
ev.preventDefault();
92
+
ctx.setOpen(false, 'escape');
93
+
ctx.triggerRef()?.focus();
94
+
}
95
+
};
96
96
97
-
onCleanup(() => {
98
-
document.removeEventListener('mousedown', handleClickOutside);
99
-
document.removeEventListener('keydown', handleKeyDown);
100
-
});
101
-
}
102
-
});
97
+
document.addEventListener('mousedown', handleClickOutside);
98
+
document.addEventListener('keydown', handleKeyDown);
103
99
104
-
onCleanup(() => {
105
-
ctx.setSurfaceRef(null);
106
-
});
100
+
onCleanup(() => {
101
+
document.removeEventListener('mousedown', handleClickOutside);
102
+
document.removeEventListener('keydown', handleKeyDown);
103
+
});
104
+
}
107
105
}}
108
106
id={ctx.surfaceId}
109
107
role="dialog"