Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
chore: alter recommendations
+320
-182
+1
-182
src/app.tsx
+1
-182
src/app.tsx
···
22
22
import { initPackage } from './npm/worker-client';
23
23
import Button from './primitives/button';
24
24
import Tooltip from './primitives/tooltip';
25
-
26
-
const RECOMMENDATIONS: (string | string[])[] = [
27
-
// UI frameworks
28
-
'preact',
29
-
'react',
30
-
'solid-js',
31
-
'svelte',
32
-
'vue',
33
-
34
-
// routing
35
-
'@solidjs/router',
36
-
'@tanstack/react-router',
37
-
'navaid',
38
-
'path-to-regexp',
39
-
'react-router',
40
-
'regexparam',
41
-
'trouter',
42
-
'vue-router',
43
-
'wouter',
44
-
45
-
// state management
46
-
'immer',
47
-
'jotai',
48
-
'nanostores',
49
-
'zustand',
50
-
'valtio',
51
-
52
-
// data fetched
53
-
['@tanstack/react-query', '@tanstack/vue-query', '@tanstack/solid-query'],
54
-
'swr',
55
-
56
-
// HTTP clients
57
-
'axios',
58
-
'ky',
59
-
'ofetch',
60
-
'redaxios',
61
-
'wretch',
62
-
63
-
// validation/schema
64
-
'zod',
65
-
'valibot',
66
-
'yup',
67
-
'ajv',
68
-
'arktype',
69
-
'superstruct',
70
-
'@badrap/valita',
71
-
72
-
// date/time
73
-
['date-fns', '@date-fns/tz', '@date-fns/utc'],
74
-
'dayjs',
75
-
'luxon',
76
-
'moment',
77
-
'tinydate',
78
-
79
-
// class names/styling
80
-
'clsx',
81
-
'classnames',
82
-
'tailwind-merge',
83
-
84
-
// ID generation
85
-
'nanoid',
86
-
'uuid',
87
-
'hexoid',
88
-
'uid',
89
-
90
-
// deep clone/equality
91
-
'klona',
92
-
'dequal',
93
-
'fast-deep-equal',
94
-
'rfdc',
95
-
96
-
// query strings
97
-
'qs',
98
-
'qss',
99
-
'query-string',
100
-
101
-
// i18n
102
-
'i18next',
103
-
'rosetta',
104
-
105
-
// markdown
106
-
'marked',
107
-
['markdown-it', 'markdown-exit'],
108
-
109
-
// search
110
-
'fuse.js',
111
-
'minisearch',
112
-
113
-
// animation
114
-
['framer-motion', 'motion-v', 'motion'],
115
-
116
-
// forms
117
-
'formik',
118
-
'react-hook-form',
119
-
[
120
-
'@formisch/preact',
121
-
'@formisch/qwik',
122
-
'@formisch/react',
123
-
'@formisch/solid',
124
-
'@formisch/svelte',
125
-
'@formisch/vue',
126
-
],
127
-
[
128
-
'@tanstack/angular-form',
129
-
'@tanstack/lit-form',
130
-
'@tanstack/react-form',
131
-
'@tanstack/solid-form',
132
-
'@tanstack/svelte-form',
133
-
'@tanstack/vue-form',
134
-
],
135
-
136
-
// tables
137
-
[
138
-
'@tanstack/angular-table',
139
-
'@tanstack/lit-table',
140
-
'@tanstack/qwik-table',
141
-
'@tanstack/react-table',
142
-
'@tanstack/solid-table',
143
-
'@tanstack/svelte-table',
144
-
'@tanstack/vue-table',
145
-
],
146
-
147
-
// virtualization
148
-
'rc-virtual-list',
149
-
'virtua',
150
-
[
151
-
'@tanstack/angular-virtual',
152
-
'@tanstack/lit-virtual',
153
-
'@tanstack/react-virtual',
154
-
'@tanstack/solid-virtual',
155
-
'@tanstack/svelte-virtual',
156
-
'@tanstack/vue-virtual',
157
-
],
158
-
159
-
// storage
160
-
'idb-keyval',
161
-
'idb',
162
-
163
-
// CSV
164
-
'papaparse',
165
-
166
-
// sanitization
167
-
'dompurify',
168
-
169
-
// functional/result types
170
-
'effect',
171
-
'neverthrow',
172
-
'true-myth',
173
-
174
-
// promise utilities
175
-
'p-all',
176
-
'p-limit',
177
-
'p-map',
178
-
'p-queue',
179
-
'p-series',
180
-
181
-
// utilities
182
-
'es-toolkit',
183
-
'lodash-es',
184
-
'ramda',
185
-
'underscore',
186
-
187
-
// UI component libraries
188
-
'@base-ui/react',
189
-
'@chakra-ui/react',
190
-
'@fluentui/react-components',
191
-
'antd',
192
-
'corvu',
193
-
'tamagui',
194
-
['@mui/material', '@mui/joy'],
195
-
['radix-ui', '@radix-ui/themes'],
196
-
['radix-vue', 'reka-ui'],
197
-
198
-
// CSS-in-JS / styling
199
-
['@emotion/react', '@emotion/styled'],
200
-
'styled-components',
201
-
'styled-jsx',
202
-
203
-
// positioning/floating
204
-
'nanopop',
205
-
['@floating-ui/dom', '@floating-ui/react', '@floating-ui/react-dom', '@floating-ui/vue'],
206
-
];
25
+
import { RECOMMENDATIONS } from './recommendations';
207
26
208
27
const isSafari = (() => {
209
28
const ua = navigator.userAgent;
+319
src/recommendations.ts
+319
src/recommendations.ts
···
1
+
export const RECOMMENDATIONS: (string | string[])[] = [
2
+
// UI frameworks
3
+
'lit-html',
4
+
'preact',
5
+
'react',
6
+
'solid-js',
7
+
'svelte',
8
+
'vue',
9
+
10
+
// routing
11
+
'@solidjs/router',
12
+
['@tanstack/react-router', '@tanstack/solid-router'],
13
+
'navaid',
14
+
'path-to-regexp',
15
+
'react-router',
16
+
'regexparam',
17
+
'trouter',
18
+
'vue-router',
19
+
'wouter',
20
+
21
+
// state management
22
+
'effector',
23
+
'immer',
24
+
'jotai',
25
+
['mobx', 'mobx-react'],
26
+
'nanostores',
27
+
'pinia',
28
+
['redux', 'react-redux'],
29
+
'valtio',
30
+
['@xstate/react', '@xstate/solid', '@xstate/svelte', '@xstate/vue'],
31
+
'zustand',
32
+
33
+
// standalone reactivity
34
+
'@preact/signals-core',
35
+
'@vue/reactivity',
36
+
'alien-signals',
37
+
38
+
// data fetching
39
+
'@apollo/client',
40
+
'graphql-request',
41
+
[
42
+
'@tanstack/angular-query',
43
+
'@tanstack/react-query',
44
+
'@tanstack/solid-query',
45
+
'@tanstack/svelte-query',
46
+
'@tanstack/vue-query',
47
+
],
48
+
['@trpc/client', '@trpc/react-query'],
49
+
'swr',
50
+
'urql',
51
+
52
+
// HTTP clients
53
+
'axios',
54
+
'ky',
55
+
'ofetch',
56
+
'redaxios',
57
+
'wretch',
58
+
59
+
// validation/schema
60
+
'ajv',
61
+
'arktype',
62
+
'@badrap/valita',
63
+
'@sinclair/typebox',
64
+
'superstruct',
65
+
'valibot',
66
+
'yup',
67
+
'zod',
68
+
69
+
// date/time
70
+
['date-fns', '@date-fns/tz', '@date-fns/utc'],
71
+
'dayjs',
72
+
'@formkit/tempo',
73
+
'luxon',
74
+
75
+
// class names/styling
76
+
'classnames',
77
+
'clsx',
78
+
'tailwind-merge',
79
+
80
+
// ID generation
81
+
'cuid2',
82
+
'human-id',
83
+
'nanoid',
84
+
'ulid',
85
+
'uuid',
86
+
87
+
// deep clone/equality
88
+
'dequal',
89
+
'fast-deep-equal',
90
+
'klona',
91
+
'rfdc',
92
+
93
+
// object utilities
94
+
'deepmerge',
95
+
'defu',
96
+
'destr',
97
+
'dot-prop',
98
+
99
+
// string utilities
100
+
'change-case',
101
+
'slugify',
102
+
103
+
// memoization / caching
104
+
'fast-memoize',
105
+
'memoize',
106
+
'p-memoize',
107
+
'tinylru',
108
+
109
+
// throttle / debounce
110
+
'throttle-debounce',
111
+
112
+
// query strings
113
+
'qs',
114
+
'query-string',
115
+
116
+
// i18n
117
+
['@formatjs/intl', 'react-intl'],
118
+
['@fluent/bundle', '@fluent/react'],
119
+
['i18next', 'react-i18next', 'vue-i18n'],
120
+
['@lingui/core', '@lingui/react'],
121
+
'@inlang/paraglide-js',
122
+
123
+
// markdown
124
+
'markdown-it',
125
+
'marked',
126
+
'turndown',
127
+
128
+
// syntax highlighting
129
+
'highlight.js',
130
+
'prismjs',
131
+
'shiki',
132
+
133
+
// rich text editors
134
+
['lexical', '@lexical/react'],
135
+
'quill',
136
+
'slate',
137
+
['@tiptap/core', '@tiptap/react', '@tiptap/vue-3', '@tiptap/starter-kit'],
138
+
139
+
// template literals
140
+
'htm',
141
+
142
+
// search
143
+
'fuse.js',
144
+
'minisearch',
145
+
146
+
// animation
147
+
'animejs',
148
+
'@formkit/auto-animate',
149
+
['framer-motion', 'motion-v', 'motion'],
150
+
'gsap',
151
+
'popmotion',
152
+
153
+
// forms
154
+
['final-form', 'react-final-form'],
155
+
'react-hook-form',
156
+
[
157
+
'@formisch/preact',
158
+
'@formisch/qwik',
159
+
'@formisch/react',
160
+
'@formisch/solid',
161
+
'@formisch/svelte',
162
+
'@formisch/vue',
163
+
],
164
+
[
165
+
'@tanstack/angular-form',
166
+
'@tanstack/lit-form',
167
+
'@tanstack/react-form',
168
+
'@tanstack/solid-form',
169
+
'@tanstack/svelte-form',
170
+
'@tanstack/vue-form',
171
+
],
172
+
173
+
// tables
174
+
[
175
+
'@tanstack/angular-table',
176
+
'@tanstack/lit-table',
177
+
'@tanstack/qwik-table',
178
+
'@tanstack/react-table',
179
+
'@tanstack/solid-table',
180
+
'@tanstack/svelte-table',
181
+
'@tanstack/vue-table',
182
+
],
183
+
184
+
// virtualization
185
+
'rc-virtual-list',
186
+
'virtua',
187
+
[
188
+
'@tanstack/angular-virtual',
189
+
'@tanstack/lit-virtual',
190
+
'@tanstack/react-virtual',
191
+
'@tanstack/solid-virtual',
192
+
'@tanstack/svelte-virtual',
193
+
'@tanstack/vue-virtual',
194
+
],
195
+
196
+
// drag and drop
197
+
['@dnd-kit/core', '@dnd-kit/sortable'],
198
+
'@atlaskit/pragmatic-drag-and-drop',
199
+
'sortablejs',
200
+
201
+
// charts / visualization
202
+
'chart.js',
203
+
'd3',
204
+
'echarts',
205
+
'recharts',
206
+
207
+
// icons
208
+
'@iconify/iconify',
209
+
['lucide', 'lucide-react'],
210
+
211
+
// toast / notifications
212
+
'react-hot-toast',
213
+
'sonner',
214
+
215
+
// storage
216
+
'idb',
217
+
'idb-keyval',
218
+
'localforage',
219
+
220
+
// CSV
221
+
'papaparse',
222
+
223
+
// PDF
224
+
'pdf-lib',
225
+
'pdfjs-dist',
226
+
227
+
// sanitization
228
+
'dompurify',
229
+
230
+
// compression
231
+
'fflate',
232
+
'pako',
233
+
234
+
// encoding / binary
235
+
'multiformats',
236
+
'uint8arrays',
237
+
238
+
// cryptography
239
+
'@noble/curves',
240
+
'@noble/hashes',
241
+
242
+
// color
243
+
'colord',
244
+
'culori',
245
+
246
+
// math / precision
247
+
'big.js',
248
+
'bignumber.js',
249
+
'decimal.js',
250
+
251
+
// formatting
252
+
'ms',
253
+
'pretty-bytes',
254
+
255
+
// serialization
256
+
'devalue',
257
+
'ohash',
258
+
'superjson',
259
+
260
+
// events
261
+
'eventemitter3',
262
+
'mitt',
263
+
264
+
// functional / result types
265
+
'effect',
266
+
'neverthrow',
267
+
'true-myth',
268
+
'ts-pattern',
269
+
270
+
// promise utilities
271
+
'p-all',
272
+
'p-limit',
273
+
'p-map',
274
+
'p-queue',
275
+
'p-series',
276
+
277
+
// utilities
278
+
'es-toolkit',
279
+
'lodash-es',
280
+
'ramda',
281
+
282
+
// head management
283
+
'react-helmet',
284
+
'react-helmet-async',
285
+
286
+
// React utilities
287
+
'react-freeze',
288
+
289
+
// web workers
290
+
'comlink',
291
+
292
+
// benchmarking
293
+
'tinybench',
294
+
295
+
// AI / LLM
296
+
'ai',
297
+
['@tanstack/ai', '@tanstack/ai-react', '@tanstack/ai-solid'],
298
+
299
+
// UI component libraries
300
+
'antd',
301
+
'@base-ui/react',
302
+
'@chakra-ui/react',
303
+
'corvu',
304
+
'@fluentui/react-components',
305
+
['@mui/material', '@mui/joy'],
306
+
['radix-ui', '@radix-ui/themes'],
307
+
['radix-vue', 'reka-ui'],
308
+
['react-aria', 'react-stately'],
309
+
'tamagui',
310
+
311
+
// CSS-in-JS / styling
312
+
['@emotion/react', '@emotion/styled'],
313
+
'styled-components',
314
+
'styled-jsx',
315
+
316
+
// positioning/floating
317
+
'nanopop',
318
+
['@floating-ui/dom', '@floating-ui/react', '@floating-ui/react-dom', '@floating-ui/vue'],
319
+
];