import React from "react"; import { useFireproof } from "use-vibes"; const ACCENT = "#d8b4fe"; const BG = "#0b0e14"; const PANEL = "#131721"; const BORDER = "#2a3040"; const INK = "#e6e9f0"; const MUTED = "#8b93a7"; const MONO = "'IBM Plex Mono', ui-monospace, Menlo, monospace"; const DISP = "'Space Grotesk', system-ui, sans-serif"; function ensureFonts() { if (typeof document === "undefined") return; if (document.getElementById("wu-fonts")) return; const l = document.createElement("link"); l.id = "wu-fonts"; l.rel = "stylesheet"; l.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap"; document.head.appendChild(l); const s = document.createElement("style"); s.textContent = "@keyframes wu-spin{to{transform:rotate(360deg)}} *{box-sizing:border-box} body{margin:0} ::selection{background:" + ACCENT + ";color:#1a1226}"; document.head.appendChild(s); } function regUrl(name) { return "https://registry.npmjs.org/" + encodeURIComponent(name).replace("%40", "@"); } function dlUrl(name) { return "https://api.npmjs.org/downloads/point/last-week/" + encodeURIComponent(name).replace("%40", "@"); } function fmtNum(n) { return n == null ? "—" : n.toLocaleString(); } function fmtDate(s) { if (!s) return "—"; try { return new Date(s).toISOString().slice(0, 10); } catch { return "—"; } } function verSort(a, b) { const pa = a.replace(/[-+].*$/, "").split(".").map(Number); const pb = b.replace(/[-+].*$/, "").split(".").map(Number); for (let i = 0; i < 3; i++) { if ((pb[i] || 0) !== (pa[i] || 0)) return (pb[i] || 0) - (pa[i] || 0); } const preA = /[-+]/.test(a); const preB = /[-+]/.test(b); if (preA !== preB) return preA ? 1 : -1; return b.localeCompare(a); } async function fetchRegistry(name) { const res = await fetch(regUrl(name), { mode: "cors" }); if (res.status === 404) return { notFound: true }; if (!res.ok) throw new Error("registry " + res.status); return { data: await res.json() }; } async function fetchDownloads(name) { try { const res = await fetch(dlUrl(name), { mode: "cors" }); if (!res.ok) return null; const j = await res.json(); return typeof j.downloads === "number" ? j.downloads : null; } catch { return null; } } async function probeEsm(name, version) { const url = "https://esm.sh/" + name + "@" + version; try { const res = await fetch(url, { mode: "cors", redirect: "follow" }); const text = await res.text(); return { requested: url, finalUrl: res.url, status: res.status, contentType: res.headers.get("content-type") || "", types: res.headers.get("x-typescript-types") || "", lines: text.split("\n").slice(0, 15).join("\n"), }; } catch (e) { return { requested: url, error: e.message }; } } function Stat({ label, value, big }) { return (

{label}

{value}

); } function CopyLine({ text }) { const [done, setDone] = React.useState(false); return (


        {text}

); } export default function App() { const { database, useLiveQuery } = useFireproof("esm-viewer"); const [query, setQuery] = React.useState("react"); const [name, setName] = React.useState("react"); const [data, setData] = React.useState(null); const [notFound, setNotFound] = React.useState(false); const [downloads, setDownloads] = React.useState(null); const [selected, setSelected] = React.useState(""); const [probe, setProbe] = React.useState(null); const [loading, setLoading] = React.useState(false); const [probing, setProbing] = React.useState(false); const { docs: history } = useLiveQuery("at", { descending: true, limit: 14 }); React.useEffect(() => { ensureFonts(); }, []); const doProbe = React.useCallback(async (nm, ver) => { setProbing(true); setProbe(null); const p = await probeEsm(nm, ver); setProbe(p); setProbing(false); }, []); const load = React.useCallback( async (nm) => { nm = nm.trim(); if (!nm) return; setLoading(true); setNotFound(false); setData(null); setProbe(null); setDownloads(null); setName(nm); try { const { data: d, notFound: nf } = await fetchRegistry(nm); if (nf) { setNotFound(true); setLoading(false); return; } setData(d); const latest = (d["dist-tags"] && d["dist-tags"].latest) || Object.keys(d.versions || {}).pop(); setSelected(latest); setLoading(false); fetchDownloads(nm).then(setDownloads); doProbe(nm, latest); try { await database.put({ type: "pkg", name: nm, version: latest, at: Date.now() }); } catch {} } catch (e) { setLoading(false); setNotFound(true); } }, [database, doProbe] ); const didMount = React.useRef(false); React.useEffect(() => { if (didMount.current) return; didMount.current = true; load("react"); }, [load]); function selectVersion(v) { setSelected(v); doProbe(name, v); } const versions = data ? Object.keys(data.versions || {}).sort(verSort) : []; const vdoc = data && selected ? data.versions[selected] : null; const deps = vdoc && vdoc.dependencies ? Object.entries(vdoc.dependencies) : []; const distTags = data && data["dist-tags"] ? Object.entries(data["dist-tags"]) : []; const lastPub = data && data.time ? data.time[selected] || data.time.modified : null; const repo = data && data.repository ? (typeof data.repository === "string" ? data.repository : data.repository.url) : ""; const input = { background: "#0d1017", border: `1px solid ${BORDER}`, borderRadius: 8, color: INK, fontFamily: MONO, fontSize: 13, padding: "10px 12px", outline: "none" }; const panel = { background: PANEL, border: `1px solid ${BORDER}`, borderRadius: 12, padding: 16 }; const label = { fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: MUTED, marginBottom: 8 }; const linkStyle = { color: ACCENT, textDecoration: "none", fontFamily: MONO, fontSize: 12, wordBreak: "break-all" }; return (

WEB-UTILS

esm-viewer

Inspect any npm package and see exactly what esm.sh serves it as.

{notFound && (

Package not found

No package named {name} on the npm registry.

)} {data && (

{data.name} selected {selected}

{data.description &&

{data.description}

}

{data.homepage && ( homepage ↗ )} {repo && ( repository ↗ )}

{distTags.length > 0 && (

dist-tags

{distTags.map(([t, v]) => ( ))}

)}

esm.sh import — {selected}

esm.sh probe {probing ? "· resolving…" : ""}

{probe && probe.error &&

Probe failed: {probe.error}

} {probe && !probe.error && (

status {probe.status} resolved {probe.finalUrl} content-type {probe.contentType || "—"} types {probe.types || "none"}

                      {probe.lines}

)}

dependencies — {selected} ({deps.length})

{deps.length === 0 &&

No runtime dependencies.

}

{deps.map(([d, range]) => ( ))}

versions ({versions.length})

{versions.map((v) => ( ))}

recent lookups

{history.length === 0 &&

Nothing yet.

} {history.map((h) => ( ))}

)}

); }