Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
fix: add safari warning
+17
+17
src/app.tsx
+17
src/app.tsx
···
4
4
5
5
import PackageResult from './components/package-result';
6
6
import PackageSearchInput from './components/package-search-input';
7
+
import { CentralExclamationTriangleSolid } from './icons/central';
7
8
import {
8
9
LucideArrowDown,
9
10
LucideCircleAlert,
···
204
205
['@floating-ui/dom', '@floating-ui/react', '@floating-ui/react-dom', '@floating-ui/vue'],
205
206
];
206
207
208
+
const isSafari = (() => {
209
+
const ua = navigator.userAgent;
210
+
return /AppleWebKit/.test(ua) && !/Chrome|Chromium/.test(ua);
211
+
})();
212
+
207
213
function App() {
208
214
const [params, setParams] = useSearchParams({
209
215
q: v.pipe(v.string(), v.regex(PACKAGE_SPECIFIER_RE)),
···
274
280
onChange={setQuery}
275
281
onSelect={(specifier) => setParams({ q: specifier })}
276
282
/>
283
+
284
+
{isSafari && (
285
+
<div class="flex gap-2 rounded-md border border-status-warning-border-1 bg-status-warning-background-1 px-3 py-1.75">
286
+
<CentralExclamationTriangleSolid class="size-5 shrink-0 text-status-warning-foreground-3" />
287
+
288
+
<div class="min-w-0 grow text-base-300 text-neutral-foreground-1">
289
+
<span class="font-semibold">Not compatible with Safari.</span> Sorry, not sure why it doesn't
290
+
work there. It seems to be Rolldown and WASI related.
291
+
</div>
292
+
</div>
293
+
)}
277
294
278
295
<Switch>
279
296
<Match when={result()} keyed>