@shopify/cli
Version:
A CLI tool to build for the Shopify platform
2,050 lines • 68.5 kB
HTML
<!doctype html>
<!-- Open this file in your browser for an interactive view of your bundle -->
<!-- saved from url=(0034)https://esbuild.github.io/analyze/ -->
<!-- Snapshot: 2023/07/16 -->
<html lang="en" data-theme="null">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>esbuild - Bundle Size Analyzer</title>
<link
rel="icon"
type="image/svg+xml"
href="https://esbuild.github.io/favicon.svg"
/>
<meta property="og:title" content="esbuild - Bundle Size Analyzer" />
<meta property="og:type" content="website" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html:not([data-theme='dark']) {
--bg: #fff;
--fg-on: #000;
--fg: #222;
--pre-dim: #777;
--pre-val: #870;
--pre: #222;
--bar-min-width: 1px;
}
html[data-theme='dark'] {
color-scheme: dark;
--bg: #191919;
--fg-on: #ddd;
--fg: #aaa;
--pre-dim: #999;
--pre-val: #cb8;
--pre: #ccc;
--bar-min-width: 3px;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='light']) {
color-scheme: dark;
--bg: #191919;
--fg-on: #ddd;
--fg: #aaa;
--pre-dim: #999;
--pre-val: #cb8;
--pre: #ccc;
--bar-min-width: 3px;
}
}
body {
margin: 50px;
font: 16px/20px sans-serif;
background: var(--bg);
color: var(--fg);
}
#startPanel {
margin: 10% auto 0;
}
#resultsPanel {
display: none;
}
section {
margin: auto;
max-width: 600px;
}
#logo {
background-image: url(https://esbuild.github.io/favicon.svg);
background-size: 80px;
background-repeat: no-repeat;
padding-left: 100px;
display: inline-block;
text-align: left;
margin-bottom: 10px;
}
h1 {
font-size: 80px;
line-height: 1em;
color: var(--fg-on);
margin: 0;
}
blockquote {
font-size: 29px;
line-height: 1em;
margin: 5px 0;
font-style: italic;
}
p {
margin: 30px 0;
}
a,
b {
color: var(--fg-on);
}
code {
font:
14px/20px Noto Sans Mono,
monospace;
background: rgba(127, 127, 127, 0.2);
padding: 2px 4px;
margin-bottom: -2px;
border-radius: 3px;
}
pre {
color: var(--pre);
font:
14px/20px Noto Sans Mono,
monospace;
padding: 0;
margin: 0;
white-space: pre-wrap;
}
.center {
text-align: center;
}
.noscript {
color: #e24834;
}
button {
padding: 5px 30px;
line-height: 1.5em;
background: none;
color: var(--fg);
border: 1px solid var(--fg);
border-radius: 100px;
cursor: pointer;
}
button:active,
button:hover {
color: var(--fg-on);
border: 1px solid var(--fg-on);
background: rgba(127, 127, 127, 0.2);
}
button:active {
padding: 6px 30px 4px;
background: rgba(0, 0, 0, 0.2);
}
#settingsPanel {
text-align: center;
}
#settingsPanel .chartSwitcher {
position: relative;
margin: 50px 0;
display: flex;
justify-content: center;
}
#settingsPanel .chartSwitcher:after {
position: absolute;
left: 0;
right: 0;
top: 0.5em;
content: '';
display: block;
border: 1px solid #ffcf00;
z-index: -1;
}
#settingsPanel .chartSwitcher span {
background: var(--bg);
padding: 0 1em;
border-left: 2px solid #ffcf00;
}
#settingsPanel .chartSwitcher span:first-child {
border: none;
}
#settingsPanel a {
text-decoration: none;
color: var(--fg);
}
#settingsPanel a:hover {
text-decoration: underline;
}
#settingsPanel a.active {
font-weight: 700;
color: var(--fg-on);
}
.summary {
max-width: 600px;
margin: auto;
}
.tooltip {
position: absolute;
background: black;
color: #999;
border-radius: 30px;
padding: 0 10px;
font-size: 14px;
line-height: 30px;
display: none;
user-select: none;
touch-action: none;
pointer-events: none;
z-index: 1;
white-space: pre;
}
.tooltip b {
color: #fff;
}
#dragTarget {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
user-select: none;
touch-action: none;
box-shadow: inset 0 0 0 10px #ffcf00;
z-index: 10;
}
#summaryPanel {
text-align: center;
}
#summaryPanel table {
border-collapse: collapse;
margin: auto;
}
#summaryPanel td:first-child {
text-align: right;
}
#summaryPanel h2 {
font-size: 30px;
line-height: 1em;
color: var(--fg-on);
margin: 0;
}
#summaryPanel .symbol {
font-size: 30px;
padding: 0 30px;
}
#summaryPanel .formatBreakdown {
display: inline-block;
margin: 20px auto 0;
white-space: nowrap;
text-decoration: none;
}
#summaryPanel .formatBreakdown:hover .side {
text-decoration: underline;
}
#summaryPanel .bar {
display: inline-table;
vertical-align: middle;
margin: 0 0.8em;
border: 1px solid #222;
}
#summaryPanel .bar > div {
height: 20px;
display: table-cell;
}
#colorLegend {
padding-left: 1.6em;
line-height: 1.1em;
}
#colorLegend .chit {
display: inline-block;
vertical-align: middle;
width: 1.1em;
height: 1.1em;
margin-left: -1.6em;
margin-right: 0.5em;
border: 1px solid #222;
box-sizing: border-box;
}
#colorLegend small {
display: block;
opacity: 0.5;
margin-bottom: 1em;
}
#sunburstPanel main {
display: flex;
justify-content: center;
margin-top: 50px;
margin-bottom: 500px;
}
#sunburstPanel .left {
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#sunburstPanel canvas {
display: block;
margin-bottom: 30px;
}
#sunburstPanel .details {
flex: 1;
max-width: 800px;
position: relative;
}
#sunburstPanel .dir {
font-size: 20px;
line-height: 1.2em;
display: flex;
white-space: pre;
margin: 0 10px 20px;
}
#sunburstPanel .dir .segments {
flex: 1;
height: 20px;
}
#sunburstPanel .dir a {
opacity: 0.5;
text-decoration: none;
}
#sunburstPanel .dir a[href]:hover {
text-decoration: underline;
}
#sunburstPanel .dir a:last-child {
opacity: 1;
color: var(--fg-on);
font-weight: 700;
}
#sunburstPanel .bars {
width: 100%;
}
#sunburstPanel .bars .row {
display: table-row;
text-decoration: none;
line-height: 26px;
color: var(--fg);
}
#sunburstPanel .bars .row.hover {
background: rgba(127, 127, 127, 0.2);
color: var(--fg-on);
}
#sunburstPanel .bars .row.hover .bar:after {
content: '';
position: absolute;
left: 1px;
top: 1px;
right: 1px;
bottom: 1px;
background: rgba(255, 255, 255, 0.3);
}
#sunburstPanel .bars .row > div {
display: table-cell;
}
#sunburstPanel .bars .name {
padding: 0 10px;
vertical-align: top;
white-space: pre;
}
#sunburstPanel .bars .name span {
opacity: 0.5;
}
#sunburstPanel .bars .size {
width: 100%;
padding-right: 100px;
}
#sunburstPanel .bars .bar {
position: relative;
height: 27px;
box-shadow: inset 0 0 0 1px #222;
margin-bottom: -1px;
min-width: var(--bar-min-width);
}
#sunburstPanel .bars .bar.empty {
min-width: 0;
}
#sunburstPanel .bars .last {
position: absolute;
right: -10px;
width: 0;
white-space: nowrap;
}
#whyFile {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 50px;
background: rgba(0, 0, 0, 0.6);
overflow-y: auto;
}
#whyFile .dialog {
position: relative;
margin: 0 auto;
padding: 50px;
max-width: 1000px;
background: var(--bg);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
box-sizing: border-box;
border-radius: 20px;
}
#whyFile .dialog:focus {
outline: none;
}
#whyFile .closeButton {
position: absolute;
right: 0;
top: 0;
width: 50px;
text-decoration: none;
font-size: 30px;
line-height: 50px;
text-align: center;
color: var(--fg);
}
#whyFile .closeButton:hover {
font-size: 35px;
color: var(--fg-on);
}
#whyFile .closeButton:active {
font-size: 30px;
}
#whyFile h2 {
border-bottom: 2px solid #ffcf00;
padding-bottom: 4px;
margin: 0;
font-size: 20px;
line-height: 1.2em;
color: var(--fg-on);
}
#whyFile .outputFile {
position: relative;
border: 1px solid rgba(127, 127, 127, 0.5);
padding: 30px 10px 10px;
border-radius: 10px;
white-space: pre-wrap;
margin-top: 10px;
line-height: 22px;
}
#whyFile .outputPath {
position: absolute;
left: 0;
top: 0;
background: rgba(127, 127, 127, 0.1);
border-right: 1px solid rgba(127, 127, 127, 0.5);
border-bottom: 1px solid rgba(127, 127, 127, 0.5);
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 5px 10px;
}
#whyFile pre {
padding: 0 0 0 30px;
}
#whyFile .comment {
color: var(--pre-dim);
}
#whyFile .keyword {
color: var(--fg-on);
}
#whyFile .string {
color: var(--pre-val);
}
#whyFile .arrow,
#whyFile .longArrow {
position: relative;
}
#whyFile .arrow:after,
#whyFile .longArrow:after {
content: '';
position: absolute;
top: 0;
width: 30px;
background: var(--fg);
opacity: 0.5;
}
#whyFile .arrow:after {
height: 40px;
--icon: url('data:image/svg+xml,<svg width="30" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 26L20.5 35L23 25.5L16.5 26Z"/><path d="M5 7C15 7 19 15 20 30" fill="none" stroke="black"/></svg>');
mask-image: var(--icon);
-webkit-mask-image: var(--icon);
}
#whyFile .longArrow:after {
height: 90px;
--icon: url('data:image/svg+xml,<svg width="30" height="90" xmlns="http://www.w3.org/2000/svg"><path d="M17 76L20 85L23 76H17Z"/><path d="M5 7C15 7 20 25 20 80" fill="none" stroke="black"/></svg>');
mask-image: var(--icon);
-webkit-mask-image: var(--icon);
}
#flamePanel main {
position: relative;
margin-top: 60px;
}
#flamePanel canvas {
position: absolute;
left: -50px;
top: 0;
}
#flamePanel section {
margin-top: 30px;
min-height: 500px;
}
#warningsPanel {
max-width: 1000px;
margin: auto;
}
#warningsPanel .expand {
margin-top: 20px;
text-align: center;
}
#warningsPanel .content {
display: none;
}
#warningsPanel .warning {
margin: 30px 0;
white-space: pre-wrap;
color: var(--fg-on);
}
#warningsPanel ul {
color: var(--fg);
margin: 5px 0 0;
}
#warningsPanel .dim {
opacity: 0.5;
}
#warningsPanel pre a {
text-decoration: none;
}
#warningsPanel pre a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="dragTarget"></div>
<div id="startPanel">
<section>
<div class="center">
<div id="logo">
<h1>esbuild</h1>
<blockquote>Bundle Size Analyzer</blockquote>
</div>
</div>
<p>
This page provides a way to visualize the contents of your esbuild
bundle. Add the
<a href="https://esbuild.github.io/api/#metafile">metafile</a> option
to your esbuild command, then import it using the button below:
</p>
<p class="center">
<button id="importButton">Import your metafile...</button>
</p>
<p>
Or you can
<a href="javascript:void 0" id="loadExample">load an example</a> to
play around with the visualization.
</p>
<noscript>
<p class="noscript">
❌ This page requires JavaScript. Please enable JavaScript and
reload the page.
</p>
</noscript>
</section>
</div>
<div id="resultsPanel">
<div id="summaryPanel"></div>
<div id="warningsPanel"></div>
<div id="settingsPanel">
<div class="chartSwitcher">
<span
><a id="useSunburst" href="javascript:void 0"
>Sunburst Chart</a
></span
>
<span><a id="useFlame" href="javascript:void 0">Flame Chart</a></span>
</div>
</div>
<div id="chartPanel"></div>
</div>
<input type="file" style="display: none" />
<script>
'use strict';
globalThis.METAFILE = '';
(() => {
var d = document,
c = Math,
Y = requestAnimationFrame,
Z = localStorage,
B = window;
var be = Object.prototype.hasOwnProperty,
Et = Array.prototype.indexOf,
$e,
Yt = /\.\w+\.map$/,
Vt = /^\(disabled\):/,
vt = navigator.platform.indexOf('Mac') >= 0,
et = () => (B.performance || Date).now(),
tt = (e) => {
try {
return Z.getItem(e);
} catch (t) {
return null;
}
},
lt = (e, t) => {
try {
Z.setItem(e, t);
} catch (r) {}
},
ye = (e) => Yt.test(e);
var Ce = (e) => e.replace(Vt, ''),
xe = (e) => ($e ? $e.format(e) : e + ''),
Ke = (e) => {
let t = e.toFixed(1).split('.', 2);
return xe(+t[0]) + '.' + t[1];
},
le = (e) =>
e === 1
? '1 byte'
: e < 1024
? xe(e) + ' bytes'
: e < 1024 * 1024
? Ke(e / 1024) + ' kb'
: e < 1024 * 1024 * 1024
? Ke(e / (1024 * 1024)) + ' mb'
: Ke(e / (1024 * 1024 * 1024)) + ' gb',
H = (e) =>
e
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>'),
Be = (e) => {
let t = 0.6 + 0.4 * c.max(0, c.cos(e)),
r = 0.5 + 0.2 * c.max(0, c.cos(e + (c.PI * 2) / 3));
return (
'hsl(' +
(e * 180) / c.PI +
'deg, ' +
c.round(100 * t) +
'%, ' +
c.round(100 * r) +
'%)'
);
},
K = (e) => d.createTextNode(e),
rt = (e) => {
let t = d.createElement('code');
return (t.textContent = e), t;
},
Me = (e, t) => {
let r = d.createElement('span');
return (r.className = e), (r.textContent = t), r;
},
Ue = (e, t) => {
let r = e.split('/');
if (!t) return r;
for (let s = 0; s <= r.length; s++)
if (t[s] !== r[s]) {
t.length = s;
break;
}
return t;
},
Ct = (e, t) => {
let r = e.split('/');
if (!t) return r.reverse();
for (let s = 0; s <= r.length; s++)
if (t[s] !== r[r.length - s - 1]) {
t.length = s;
break;
}
return t;
},
xt = (e) => {
let t = e.lastIndexOf('/');
return t < 0 ? '.' : e.slice(0, t);
},
Mt = (e, t) => {
let r = e.split('/'),
s = t === '.' ? [] : t.split('/'),
n = 0;
for (; n < s.length && r[0] === s[n]; ) r.shift(), n++;
if (n === s.length) r.unshift('.');
else for (; n < s.length; ) r.unshift('..'), n++;
return r.join('/');
},
Nt = (e) => {
let t = e.split('/');
for (let r = t.length - 1; r >= 0; r--)
if (t[r] === 'node_modules')
return (
(t = t.slice(r + 1)),
t.length > 1 &&
/^index\.(?:[jt]sx?)$/.test(t[t.length - 1]) &&
t.pop(),
t.join('/')
);
return null;
},
Ee = !1,
bt = matchMedia('(prefers-color-scheme: dark)'),
yt = () => Re && Re(),
Ze = null,
Qe = null,
Re = null,
je = (e) => (Ze = e),
ze = (e) => (Qe = e),
Ge = (e) => (Re = e);
d.addEventListener('keydown', () => (Ee = !0), {capture: !0});
d.addEventListener('mousedown', () => (Ee = !1), {capture: !0});
B.addEventListener('wheel', (e) => Ze && Ze(e), {passive: !1});
B.addEventListener('resize', () => Qe && Qe());
try {
bt.addEventListener('change', yt);
} catch (e) {
bt.addListener(yt);
}
try {
$e = new Intl.NumberFormat();
} catch (e) {}
var it = d.getElementById('dragTarget'),
qt = d.getElementById('importButton'),
ot = 0,
nt,
It = (e, t = e.dataTransfer) =>
t && t.types && Et.call(t.types, 'Files') !== -1,
Ot = (e) => {
if (e.length === 1) {
let t = new FileReader();
(t.onload = () => De(t.result)), t.readAsText(e[0]);
}
};
d.ondragover = (e) => {
e.preventDefault();
};
d.ondragenter = (e) => {
e.preventDefault(), It(e) && ((it.style.display = 'block'), ot++);
};
d.ondragleave = (e) => {
e.preventDefault(),
It(e) && --ot === 0 && (it.style.display = 'none');
};
d.ondrop = (e) => {
e.preventDefault(),
(it.style.display = 'none'),
(ot = 0),
e.dataTransfer && e.dataTransfer.files && Ot(e.dataTransfer.files);
};
qt.onclick = function () {
nt && d.body.removeChild(nt);
let e = d.createElement('input');
(e.type = 'file'),
(e.style.display = 'none'),
d.body.appendChild(e),
(nt = e),
e.click(),
(e.onchange = () => e.files && Ot(e.files));
};
d.body.addEventListener('paste', (e) => {
e.clipboardData &&
(e.preventDefault(), De(e.clipboardData.getData('text/plain')));
});
var St = (e) => {
let t = e.inputs;
for (let r in t) if (t[r].format) return !0;
return !1;
};
var Ne = (e, t) => t.t - e.t || +(e.e > t.e) - +(e.e < t.e),
Ie = (e, t, r) => {
let s = t.split('/'),
n = s.length,
i = e,
u = '';
e.t += r;
for (let a = 0; a < n; a++) {
let l = s[a],
o = i.o,
m = o[l],
p = l + (a + 1 < n ? '/' : '');
(u += p),
be.call(o, l) || ((m = {n: p, e: u, t: 0, o: {}}), (o[l] = m)),
(m.t += r),
(i = m);
}
return n;
};
var Lt,
Pt,
Rt,
Xe = d.createElement('canvas'),
j = Xe.getContext('2d'),
Q = 1,
at,
dt,
st = 0,
Je,
Ae = {},
ut = null,
Ye = (e) => (ut = e),
Ve = (e, t, r, s, n) => {
let i = Ae[t] || Se;
if (i instanceof Array) {
let u = B.devicePixelRatio || 1;
if (Lt !== e || Pt !== u || Rt !== n) {
let a = c.round(64 * u) / 64,
l,
o,
m;
(Q = n),
(Q = c.log2(Q)),
(Q -= c.floor(Q)),
(l = Q),
(o = c.min(1, 8 * l)),
(Q = c.pow(2, Q)),
(m = (8 * c.SQRT2) / Q),
(Lt = e),
(Pt = u),
(Rt = n),
(Xe.width = Xe.height = c.round(64 * a)),
j.scale(a, a),
(j.fillStyle = i[0]),
j.fillRect(0, 0, 64, 64),
(j.globalAlpha = 0.25),
(j.fillStyle = i[1]),
j.fillRect(0, 0, 64, 64),
(j.globalAlpha = 0.67),
(j.strokeStyle = i[1]),
j.beginPath();
for (let p = 0; p <= 64; p += 16)
j.moveTo(p - 32, p + 32), j.lineTo(p + 32, p - 32);
if (
((j.lineWidth = m * (1 - (o - l) / 2)), j.stroke(), o + l > 0)
) {
j.beginPath();
for (let p = 8; p < 64; p += 16)
j.moveTo(p - 32, p + 32), j.lineTo(p + 32, p - 32);
(j.lineWidth = (m * (o + l)) / 2), j.stroke();
}
(at = e.createPattern(Xe, 'repeat')), (Q /= a);
}
return (
(r /= 64 * Q * u),
(r -= c.floor(r)),
(r *= 64 * Q * u),
at.setTransform(new DOMMatrix([Q, 0, 0, Q, r, s])),
at
);
}
return i;
},
_e = (e) => {
let t = Ae[e] || Se;
return t instanceof Array
? `url('data:image/svg+xml,<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg"><rect width="26" height="26" fill="${t[0]}"/><rect width="26" height="26" fill="${t[1]}" fill-opacity="25%"/><path d="M22.5 -3.5L-3.5 22.5M35.5 9.5L9.5 35.5" stroke="${t[1]}" stroke-opacity="67%" stroke-width="9.19239"/></svg>')`
: t;
},
Ht = (e, t) => {
if (dt !== e) {
let r = e.outputs;
(dt = e), (st = 0), (Je = {n: '', e: '', t: 0, o: {}});
for (let s in r) {
if (ye(s)) continue;
let i = r[s].inputs;
for (let u in i) Ie(Je, Ce(u), i[u].bytesInOutput);
}
}
st !== t &&
((st = t),
(Ae = {}),
(Oe.innerHTML = ''),
t === 1
? wt(Ae, Je, 0, c.PI * 2)
: t === 2 && (Ft(Ae, Je), (Oe.innerHTML = Zt)),
ut && ut());
},
wt = (e, t, r, s) => {
let n = t.t,
i = t.o,
u = [];
e[t.e] = Be(r + s / 2);
for (let a in i) u.push(i[a]);
for (let a of u.sort(Ne)) {
let l = (a.t / n) * s;
wt(e, a, r, l), (r += l);
}
},
He = Be(3.5),
we = Be(1),
Se = '#CCC',
Kt = [He, we],
$t = (e) => (e ? (e === 1 ? He : e === 2 ? we : Kt) : Se),
Fe = (e, t) =>
e === Se
? ''
: e === we
? t + 'ESM'
: e === He
? t + 'CJS'
: t + 'ESM & CJS',
Ft = (e, t) => {
let r = t.o,
s = 0,
n = !1;
for (let i in r) (s |= Ft(e, r[i])), (n = !0);
if (!n) {
let i = dt.inputs[t.e],
u = i && i.format;
s = u === 'esm' ? 2 : u === 'cjs' ? 1 : 0;
}
return (e[t.e] = $t(s)), s;
},
Oe = d.createElement('div'),
Zt =
'<span class="chit" style="background:' +
we +
'"></span>ESM <small>modern, faster, smaller</small><span class="chit" style="background:' +
He +
'"></span>CommonJS <small>legacy, slower, larger</small><span class="chit" style="background:' +
Se +
'"></span>Other';
Oe.id = 'colorLegend';
var kt = d.getElementById('summaryPanel'),
Dt = (e) => (e === 1 ? 'file' : 'files'),
At = (e, t) => {
let r = e.inputs,
s = e.outputs,
n = 0,
i = 0,
u = 0,
a = 0,
l = 0,
o = 0,
m = 0,
p,
I,
P;
for (let g in r) {
let O = r[g],
x = O.format;
x === 'esm'
? (l += O.bytes)
: x === 'cjs'
? (o += O.bytes)
: (m += O.bytes),
n++,
(u += O.bytes);
}
for (let g in s) ye(g) || (i++, (a += s[g].bytes));
(p = c.round((200 * l) / u)),
(I = c.round((200 * o) / u)),
(kt.innerHTML =
'<table><tr><td><h2>' +
H(le(u)) +
'</h2>' +
H(xe(n)) +
' input ' +
Dt(n) +
'</td><td class="symbol">→</td><td><h2>' +
H(le(a)) +
'</h2>' +
H(xe(i)) +
' output ' +
Dt(i) +
'</td></tr></table>' +
(l || o
? '<a href="javascript:void 0" class="formatBreakdown"><span class="side">' +
xe(c.round((100 * o) / u)) +
'% CJS</span><div class="bar"><div style="background:' +
He +
';width:' +
I +
'px"></div><div style="background:#CCC;width:' +
(200 - p - I) +
'px"></div><div style="background:' +
we +
';width:' +
p +
'px"></div></div><span class="side">' +
xe(c.round((100 * l) / u)) +
'% ESM</span></a>'
: '')),
(P = kt.querySelector('.formatBreakdown')),
P && (P.onclick = t);
};
var ve = d.createElement('div'),
_t,
pt,
qe = null,
Wt = () => ve.parentElement !== null,
We = () => {
ve.remove(), qe && (qe.focus(), (qe = null));
},
Qt = (e) => {
let t = e.inputs,
r = e.outputs,
s = {},
n = {},
i = [],
u = {};
for (let l in r) {
let o = r[l],
m = o.entryPoint;
if (m) {
(s[m] = l), i.push(l);
for (let p of o.imports)
!p.external && !be.call(u, p.path) && (u[p.path] = !0);
}
}
let a = [];
for (let l of i) {
let o = r[l].entryPoint;
be.call(u, l) ||
((n[o] = {e: o, d: void 0, i: 'entry-point'}), a.push(o));
}
if (!a.length)
for (let l of i) {
let o = r[l].entryPoint;
(n[o] = {e: o, d: void 0, i: 'entry-point'}), a.push(o);
}
for (; a.length > 0; ) {
let l = [];
for (let o of a) {
let m = t[o];
for (let p of m.imports)
!p.external &&
!be.call(n, p.path) &&
((n[p.path] = {e: o, d: p.original, i: p.kind}),
l.push(p.path));
}
a = l;
}
return {h: s, g: n};
},
Le = (e, t, r) => {
let s = e.inputs[t],
n = d.activeElement;
if (!s) return;
(!pt || _t !== e) && ((_t = e), (pt = Qt(e))),
Ee && n && n.focus && n.tagName === 'A' && (qe = n);
let i = d.createElement('div');
(i.className = 'dialog'),
(i.innerHTML =
'<h2>' +
H(t) +
'</h2><p>Original size: <b>' +
H(le(s.bytes)) +
'</b>' +
(r === null
? ''
: '<br>Bundled size: <b>' + H(le(r)) + '</b>') +
(s.format === 'esm'
? '<br>Module format: <b>ESM</b>'
: s.format === 'cjs'
? '<br>Module format: <b>CommonJS</b>'
: '') +
'</p>'),
el(i, pt, t);
let u = d.createElement('a');
(u.className = 'closeButton'),
(u.href = 'javascript:void 0'),
(u.onclick = We),
(u.innerHTML = '×'),
i.appendChild(u),
(i.tabIndex = 0),
(ve.id = 'whyFile'),
(ve.innerHTML = ''),
ve.appendChild(i),
(ve.onmousedown = (a) => {
a.target === ve && We();
}),
d.body.appendChild(ve),
i.focus(),
(i.onkeydown = (a) => {
a.key === 'Escape' &&
!a.shiftKey &&
!a.metaKey &&
!a.ctrlKey &&
!a.altKey &&
(a.preventDefault(), We());
});
},
el = (e, t, r) => {
let s = t.g,
n = r,
i = [{e: r, c: null}];
for (;;) {
let o = s[n];
if (!o) return;
if (n === o.e) break;
i.push({e: o.e, c: {e: n, d: o.d, i: o.i}}), (n = o.e);
}
i.reverse();
let u = t.h,
a,
l = 'Entry point';
e.appendChild(K('This file is included in the bundle because:'));
for (let o of i) {
if (be.call(u, o.e)) {
let P = d.createElement('div');
(a = d.createElement('div')),
(a.className = 'outputFile'),
(P.className = 'outputPath'),
(P.textContent = 'Output file '),
P.appendChild(rt(u[o.e])),
a.appendChild(P),
e.appendChild(a);
} else if (!a) return;
let m = K(l + ' '),
p = K(` is included in the bundle.
`);
a.firstChild &&
a.appendChild(
K(`
`),
),
a.appendChild(m),
a.appendChild(rt(o.e)),
a.appendChild(p);
let I = o.c;
if (I) {
let P = I.d || Nt(I.e) || Mt(I.e, xt(o.e)),
g = d.createElement('pre'),
O = d.createElement('span');
if (
((O.className = be.call(u, I.e) ? 'longArrow' : 'arrow'),
I.i === 'import-statement')
)
g.appendChild(Me('keyword', 'import ')),
g.appendChild(Me('string', JSON.stringify(P))),
g.appendChild(K(';')),
(l = 'Imported file');
else if (I.i === 'require-call')
g.appendChild(K('require(')),
g.appendChild(Me('string', JSON.stringify(P))),
g.appendChild(K(');')),
(l = 'Required file');
else if (I.i === 'dynamic-import')
g.appendChild(K('import(')),
g.appendChild(Me('string', JSON.stringify(P))),
g.appendChild(K(');')),
(l = 'Dynamically-imported file');
else if (I.i === 'import-rule')
g.appendChild(K('@import ')),
g.appendChild(Me('string', JSON.stringify(P))),
g.appendChild(K(';')),
(l = 'Imported stylesheet');
else if (I.i === 'url-token')
g.appendChild(K('url(')),
g.appendChild(Me('string', JSON.stringify(P))),
g.appendChild(K(')')),
(l = 'URL reference');
else return;
(p.textContent = ` contains:
`),
g.appendChild(O),
g.appendChild(
K(`
`),
),
a.appendChild(g);
} else m.textContent = 'So ' + m.textContent.toLowerCase();
}
};
var Bt = (e, t) => {
for (; t; ) {
if (t === e) return !0;
t = t.r;
}
return !1;
},
tl = (e) => {
let t = e.inputs,
r = e.outputs,
s = {n: '', e: '', t: 0, o: {}},
n = (a) => {
let l = a.o,
o = [];
for (let m in l) o.push(n(l[m]));
return {e: a.e, t: a.t, l: o.sort(Ne), r: null};
},
i = (a, l) => {
let o = 0;
for (let m of a.l) {
let p = i(m, l + 1);
(m.r = a), p > o && (o = p);
}
return o + 1;
};
for (let a in t) Ie(s, Ce(a), 0);
for (let a in r) {
if (ye(a)) continue;
let o = r[a].inputs;
for (let m in o) Ie(s, Ce(m), o[m].bytesInOutput);
}
let u = n(s);
for (; u.l.length === 1; ) u = u.l[0];
return {a: u, f: i(u, 0)};
},
ft = (e, t, r) => {
if (e === t) return;
let s = t.r,
n = s.t || 1,
i = 0;
ft(e, s, r);
for (let u of s.l) {
if (u === t) {
(r.u += (r.s * i) / n), (r.s = (u.t / n) * r.s);
break;
}
i += u.t;
}
r.p += 1;
},
ke = (e) => 50 * 8 * c.log(1 + c.log(1 + e / 8)),
jt = (e) => {
let t = d.createElement('div'),
r = d.createElement('main'),
s = tl(e),
n = s.a,
i = null,
u = (g) => {
n !== g && ((n = g), p(), P());
},
a = (g) => {
i !== g && ((i = g), p(), P());
},
l = () => {
let g = d.createElement('div'),
O = d.createElement('canvas'),
x = O.getContext('2d'),
U = () => {
let f = 2 * c.ceil(ke(s.f)),
C = B.devicePixelRatio || 1;
(w = c.min(c.round(innerWidth * 0.4), f)),
(z = w),
(W = w >> 1),
(A = z >> 1),
(O.style.width = w + 'px'),
(O.style.height = z + 'px'),
(O.width = c.round(w * C)),
(O.height = c.round(z * C)),
x.scale(C, C),
pe();
},
he = (f, C, N, L, se, $, D) => {
let q = ke(C + 1);
if (q > A) return D;
f === i && ($ |= 8);
let de = (N + q) / 2,
te = L + se;
if (te - D < 1.5 / de) return D;
let X = 2 / de;
if ((se > X && (X = se), $ & 2))
(x.fillStyle = Ve(x, f.e, W, A, 1)),
x.beginPath(),
x.arc(W, A, N, L, L + X, !1),
x.arc(W, A, q, L + X, L, !0),
x.fill(),
i &&
($ & 8 || f.r === i) &&
((x.fillStyle = 'rgba(255, 255, 255, 0.3)'),
x.fill());
else {
let ce = X === c.PI * 2,
Tt = $ & 4 || ce ? q : N;
$ & 1 && N > 0 && x.arc(W, A, N, L + X, L, !0),
x.moveTo(W + Tt * c.cos(L), A + Tt * c.sin(L)),
x.arc(W, A, q, L, L + X, !1),
ce ||
x.lineTo(W + N * c.cos(L + X), A + N * c.sin(L + X));
}
let me = f.t,
ge = $ & 10,
Te = 0,
ne = -1 / 0;
for (let ce of f.l)
(ne = he(
ce,
C + 1,
q,
L + (se * Te) / me,
(ce.t / me) * se,
ge,
ne,
)),
(Te += ce.t),
(ge |= 4);
return te;
},
pe = () => {
x.clearRect(0, 0, w, z),
he(F, G, ke(G), J, re, 3, -1 / 0),
(x.strokeStyle = '#222'),
x.beginPath(),
he(F, G, ke(G), J, re, 1, -1 / 0),
x.stroke(),
G === 0 &&
((x.fillStyle = '#222'),
(x.font = 'bold 16px sans-serif'),
(x.textAlign = 'center'),
(x.textBaseline = 'middle'),
x.fillText(le(S.t), W, A));
},
ee = -c.PI / 2,
w = 0,
z = 0,
W = 0,
A = 0,
V = null,
ie = 0,
T = 0,
R = ee,
_ = c.PI * 2,
S = n,
fe = T,
oe = R,
ae = _,
F = n,
G = T,
J = R,
re = _,
h = (f) => {
let C = (D, q, de, te, X) => {
let me = ke(q + 1);
if (me > A) return null;
if (se >= de && se < me) {
let ne = $ - te;
if (
((ne /= c.PI * 2),
(ne -= c.floor(ne)),
(ne *= c.PI * 2),
ne < X)
)
return D === F ? D.r : D;
}
let ge = D.t,
Te = 0;
for (let ne of D.l) {
let ce = C(
ne,
q + 1,
me,
te + (X * Te) / ge,
(ne.t / ge) * X,
);
if (ce) return ce;
Te += ne.t;
}
return null;
},
N = f.pageX,
L = f.pageY;
for (let D = O; D; D = D.offsetParent)
(N -= D.offsetLeft), (L -= D.offsetTop);
(N -= W), (L -= A);
let se = c.sqrt(N * N + L * L),
$ = c.atan2(L, N);
return C(F, G, ke(G), J, re);
},
b = () => {
let f = (et() - ie) / 350;
f < 0 || f > 1
? ((f = 1),
(V = null),
(F = S),
(fe = 0),
(oe = ee),
(ae = c.PI * 2))
: (f < 0.5
? (f *= 4 * f * f)
: ((f = 1 - f), (f *= 4 * f * f), (f = 1 - f)),
(V = Y(b))),
(G = T + (fe - T) * f),
(J = R + (oe - R) * f),
(re = _ + (ae - _) * f),
pe();
},
y = d.createElement('div'),
E = (f, C, N) => {
(y.style.display = 'block'),
(y.style.left = f + 'px'),
(y.style.top = C + 'px'),
(y.innerHTML = N);
},
v = () => {
y.style.display = 'none';
},
k = null,
M = [];
return (
U(),
Ge(pe),
ze(U),
je(null),
(O.onmousemove = (f) => {
let C = h(f);
if ((a(C), C && C !== F.r)) {
let N = C.e;
if (C.r) {
let L = C.r.e.length;
N = H(N.slice(0, L)) + '<b>' + H(N.slice(L)) + '</b>';
} else N = '<b>' + H(N) + '</b>';
ue === 2
? (N += H(Fe(_e(C.e), ' \u2013 ')))
: (N += ' \u2013 ' + H(le(C.t))),
E(f.pageX, f.pageY + 20, N),
(O.style.cursor = 'pointer');
} else v();
}),
(O.onmouseout = () => {
a(null), v();
}),
(O.onclick = (f) => {
let C = h(f);
if (!C) return;
v();
let N = [];
C !== F.r
? (N = M.concat(n))
: M.length > 0 && ((C = M.pop()), (N = M.slice())),
C.l.length > 0
? (u(C), (M = N))
: (f.preventDefault(), Le(e, C.e, C.t));
}),
(g.className = 'left'),
g.appendChild(O),
g.appendChild(Oe),
(y.className = 'tooltip'),
r.appendChild(y),
r.appendChild(g),
[
pe,
() => {
if (
(k !== i &&
((k = i),
i || ((O.style.cursor = 'auto'), v()),
V === null && (V = Y(b))),
S !== n)
) {
if (
((M.length = 0),
V === null && (V = Y(b)),
(ie = et()),
Bt(F, n))
) {
let f = {p: G, u: J, s: re};
ft(F, n, f),
(G = f.p),
(J = f.u),
(re = f.s),
(fe = 0),
(oe = ee),
(ae = c.PI * 2),
(F = n);
} else if (Bt(n, F)) {
let f = {p: 0, u: ee, s: c.PI * 2};
ft(n, F, f), (fe = f.p), (oe = f.u), (ae = f.s);
} else (ie = -1 / 0), (F = n);
(T = G), (R = J), (_ = re), (S = n);
}
},
]
);
},
o = () => {
let g = d.createElement('div'),
O = () => {
let w = n.r,
z = n.l,
W = d.createElement('div'),
A = 1;
W.className = 'bars';
for (let T of z) {
let R = T.t;
R > A && (A = R);
}
if (((x.length = 0), (U.length = 0), w)) {
let T = d.createElement('a');
(T.className = 'row'), (T.tabIndex = 0), W.appendChild(T);
let R = d.createElement('div');
(R.className = 'name'), T.appendChild(R);
let _ = d.createElement('div');
(_.className = 'size'),
T.appendChild(_),
(T.href = 'javascript:void 0'),
(R.textContent = '../'),
(T.onclick = () => {
u(w), Ee && U.length > 0 && U[0].focus();
}),
(T.onfocus = T.onmouseover = () => a(w)),
(T.onblur = T.onmouseout = () => a(null)),
x.push(w),
U.push(T);
}
for (let T of z) {
let R = T.e.slice(n.e.length),
_ = le(T.t),
S = d.createElement('a');
(S.className = 'row'), (S.tabIndex = 0), W.appendChild(S);
let fe = /^[^/]*\/?/.exec(R)[0],
oe = d.createElement('div');
(oe.className = 'name'),
(oe.innerHTML =
H(fe) + '<span>' + R.slice(fe.length) + '</span>'),
S.appendChild(oe);
let ae = d.createElement('div');
(ae.className = 'size'), S.appendChild(ae);
let F = d.createElement('div'),
G = _e(T.e);
(F.className = T.t ? 'bar' : 'bar empty'),
(F.style.background = G),
(F.style.width = (100 * T.t) / A + '%'),
ae.appendChild(F);
let J = d.createElement('div');
(J.className = 'last'),
(J.textContent = ue === 2 ? Fe(G, '') : _),
F.appendChild(J),
(S.href = 'javascript:void 0'),
(S.onclick = (re) => {
re.preventDefault(),
T.l.length > 0
? (u(T), Ee && U.length > 0 && U[0].focus())
: Le(e, T.e, T.t);
}),
(S.onfocus = S.onmouseover = () => a(T)),
(S.onblur = S.onmouseout = () => a(null)),
x.push(T),
U.push(S);
}
let V = d.createElement('div');
(V.className = 'dir'), (V.textContent = 'Directory: ');
let ie = d.createElement('div');
(ie.className = 'segments'), V.appendChild(ie);
for (let T = n; T; T = T.r) {
let R = T.e || '/',
_ = d.createElement('a');
T.r && (R = R.slice(T.r.e.length)),
(_.textContent = R),
T !== n &&
((_.href = 'javascript:void 0'),
(_.onclick = (S) => {
S.preventDefault(),
u(T),
Ee &&
U.length > 0 &&
U[!x[0] && U.length > 1 ? 1 : 0].focus();
})),
ie.insertBefore(_, ie.firstChild),
n == s.a &&
((_.tabIndex = -1), x.unshift(n), U.unshift(_));
}
(g.innerHTML = ''), g.appendChild(V), g.appendChild(W);
},
x = [],
U = [],
he = n,
pe = null,
ee = null;
return (
(g.className = 'details'),
r.appendChild(g),
O(),
[
O,
() => {
if ((he !== n && ((he = n), O()), pe !== i)) {
(pe = i),
ee && (ee.classList.remove('hover'), (ee = null));
for (let w = i; w; w = w.r) {
let z = x.indexOf(w);
if (z >= 0) {
(ee = U[z]), ee.classList.add('hover');
break;
}
}
}
},
]
);
},
[m, p] = l(),
[I, P] = o();
return (
Ye(() => {
m(), I();
}),
(t.id = 'sunburstPanel'),
(t.innerHTML =
'<div class="summary"><p>This visualization shows how much space each input file takes up in the final bundle. Input files that take up 0 bytes have been completely eliminated by tree-shaking.</p></div>'),
t.appendChild(r),
t
);
};
var ll = (e) => {
let t = e.outputs,
r = 0,
s = 0,
n = [],
i,
u = (l) => ' \u2013 ' + le(l),
a = (l) => {
let o = l.o,
m = [];
for (let p in o) m.push(a(o[p]));
return {n: l.n, e: l.e, m: u(l.t), t: l.t, l: m.sort(Ne)};
};
for (let l in t) {
let o = l.split('/');
o.pop(), (i = Ue(o.join('/'), i));
}
for (let l in t) {
if (ye(l)) continue;
let m = {
n: i ? l.split('/').slice(i.length).join('/') : l,
e: '',
t: 0,
o: {},
},
p = t[l],
I = p.inputs,
P = p.bytes;
for (let g in I) {
let O = Ie(m, Ce(g), I[g].bytesInOutput);
O > s && (s = O);
}
(m.t = P), (r += P), n.push(a(m));
}
e: for (;;) {
let l;
for (let o of n) {
let m = o.l;
if (!m.length) continue;
if (m.length > 1 || m[0].l.length !== 1) break e;
let p = m[0].n;
if (l === void 0) l = p;
else if (l !== p) break e;
}
if (l === void 0) break;
for (let o of n) {
let m = o.l;
if (m.length) {
m = m[0].l;
for (let p of m) p.n = l + p.n;
o.l = m;
}
}
s--;
}
for (let l of n) {
let o = 0;
for (let m of l.l) o += m.t;
o < l.t &&
l.l.push({
n: '(unassigned)',
e: '',
m: u(l.t - o),
t: l.t - o,
l: [],
});
}
return n.sort(Ne), {a: {n: '', e: '', m: '', t: r, l: n}, f: s + 1};
},
zt = (e) => {
let t = ll(e),
r = t.a.t,
s = 0,
n = r,
i = d.createElement('div'),
u = d.createElement('main'),
a = d.createElement('canvas'),
l = a.getContext('2d'),
o = 0,
m = 0,
p = 0,
I = 0,
P = 1,
g = null,
O = null,
x = '',
U = '14px sans-serif',
he = {},
pe = 'bold ' + U,
ee = {},
w = 0,
z = ee,
W = (h) => {
O !== h &&
((O = h),
(a.style.cursor = h && !h.l.length ? 'pointer' : 'auto'),
h || oe(),
_());
},
A = (h, b) => {
let y = h[b];
return (
y === void 0 &&
((y = l.measureText(String.fromCharCode(b)).width),
(h[b] = y)),
y
);
},
V = () => {
let h = B.devicePixelRatio || 1;
(o = i.clientWidth + 2 * 50),
(m = t.f * 24 + 1),
(p = (o - 1e3) >> 1),
(I = p + 1e3),
p < 0 && (p = 0),
I > o && (I = o),
(I -= p),
(P = r / I),
(a.style.width = o + 'px'),
(a.style.height = m + 'px'),
(u.style.height = m + 'px'),
(a.width = c.round(o * h)),
(a.height = c.round(m * h)),
l.scale(h, h),
R();
},
ie = (h, b) => {
let y = w,
E = h.length,
v = 0;
for (; v < E && ((y += A(z, h.charCodeAt(v))), !(y > b)); ) v++;
return h.slice(0, v) + '...';
},
T = (h, b, y, E, v) => {
let k = I / (n - s),
M = p + (y - s) * k,
f = h.t * k,
C = M + f;
if (C < E + 1.5) return E;
if (M + f < 0 || M > o) return C;
let N = f < 2 ? 2 : f,
L = (M > 0 ? M : 0) + 5,
se = b + 24 / 2,
$ = '',
D = '',
q,
de = 0,
te = f + M - L,
X = h.e ? Ve(l, h.e, p - s * k, 24, k * P) : Se,
me = 'black',
ge = -1 / 0;
v & 1
? ((me = x), (l.font = pe), (z = he), (w = 3 * A(z, 46)))
: ((l.fillStyle = X),
l.fillRect(M, b, N, 24),
(v & 2 || (O && h.e === O.e)) &&
((l.fillStyle = 'rgba(255, 255, 255, 0.3)'),
l.fillRect(M, b, N, 24),
(v |= 2))),
w < te &&
(($ = h.n),
(q = l.measureText($).width),
q <= te ? (de += q) : (($ = ie($, te)), (de = te)),
(l.fillStyle = me),
l.fillText($, L, se)),
v & 1 && ((l.font = U), (z = ee), (w = 3 * A(z, 46))),
de + w < te &&
((D = ue === 2 ? Fe(X, ' \u2013 ') : h.m),
(q = l.measureText(D).width),
de + q > te && (D = ie(D, te - de)),
(l.globalAlpha = 0.5),
l.fillText(D, L + de, se),
(l.globalAlpha = 1));
for (let Te of h.l)
(ge = T(Te, b + 24, y, ge, v & -2)), (y += Te.t);
return (
v & 1 ||
((l.strokeStyle = '#222'), l.strokeRect(M, b, N, 24)),
C
);
},
R = () => {
let h = getComputedStyle(d.body),
b = 0,
y = -1 / 0;
(g = null),
(x = h.getPropertyValue('--fg-on')),
l.clearRect(0, 0, o, m),
(l.textBaseline = 'middle');
for (let E of t.a.l) (y = T(E, 0, b, y, 1)), (b += E.t);
},
_ = () => {
g === null && (g = Y(R));
},
S = d.createElement('div'),
fe = (h, b, y) => {
(S.style.display = 'block'),
(S.style.left = h + 'px'),
(S.style.top = b + 'px'),
(S.innerHTML = y);
let E = S.offsetWidth;
for (let v = S; v; v = v.offsetParent) E += v.offsetLeft;
E > o && (S.style.left = h + o - E + 'px');
},
oe = () => {
S.style.display = 'none';
},
ae = (h) => {
let b = (M, f, C) => {
if (v >= C && v < C + M.t) {
if (E >= f && E < f + 24 && M.e) return M;
if (E >= f + 24)
for (let N of M.l) {
let L = b(N, f + 24, C);
if (L) return L;
C += N.t;
}
}
return null;
},
y = h.pageX,
E = h.pageY;
for (let M = a; M; M = M.offsetParent)
(y -= M.offsetLeft), (E -= M.offsetTop);
let v = s + ((n - s) / I) * (y - p),
k = 0;
for (let M of t.a.l) {
let f = b(M, 0, k);
if (f) return f;
k += M.t;
}
return null;
},
F = (h, b, y) => {
let E = s,
v = n,
k = 0;
if (y !== null) {
let M = E + ((v - E) / I) * (y - p),
f = c.pow(1.01, b);
(E = M + (E - M) * f), (v = M + (v - M) * f);
} else k = (h * (v - E)) / I;
E + k < 0 ? (k = -E) : v + k > r && (k = r - v),
(E += k),
(v += k),
E < 0 && (E = 0),
v > r && (v = r),
(s !== E || n !== v) && ((s = E), (n = v), _());
},
G = (h) => {
let b = ae(h);
if ((W(b), b)) {
let y = b.e,
E = y.length - b.n.length;
(y = H(y.slice(0, E)) + '<b>' + H(y.slice(E)) + '</b>'),
ue === 2
? (y += H(Fe(_e(b.e), ' \u2013 ')))
: (y += ' \u2013 ' + H(le(b.t))),
fe(h.pageX, h.pageY + 20, y);
} else oe();
},
J = !1;
(a.onmousedown = (h) => {
if (((J = !1), h.button !== 2)) {
let b = h.pageX,
y = (v) => {
let k = v.pageX - b;
(!J && c.abs(k) < 3) ||
((J = !0), F(-k, 0, null), (b = v.pageX));
},
E = () => {
d.removeEventListener('mousemove', y),
d.removeEventListener('mouseup', E);
};
h.preventDefault(),
d.addEventListener('mousemove', y),
d.addEventListener('mouseup', E);
}
}),
(a.onmousemove = (h) => {
G(h);
}),
(a.onmouseout = (h) => {
W(null);
}),
(a.onclick = (h) => {
if (J) return;
let b = ae(h);
W(b), b && !b.l.length && Le(e, b.e, b.t);
}),
je((h) => {
if (Wt()) return;
let b = h.deltaX,
y = h.deltaY,
E = h.ctrlKey || h.metaKey;
(E || c.abs(b) >= c.abs(y)) && h.preventDefault(),
F(b, y, E ? h.pageX : null),
G(h);
}),
V(),
Promise.resolve().then(V),
Ge(R),
Ye(R),
ze(V),
(i.id = 'flamePanel'),
(i.innerHTML =
'<div class="summary"><p>This visualization shows which input files were placed into each output file in the bundle. Use the scroll wheel with the ' +
(vt ? 'command' : 'control') +
' key to zoom in and out.</p></div>'),
(S.className = 'tooltip'),
u.appendChild(a),
i.appendChild(u),
i.appendChild(S);
let re = d.createElement('section');
return re.appendChild(Oe), i.appendChild(re), i;
};
var Gt,
rl = (e) => {
let t = e.inputs,
r = {},
s = [];
for (let n in t) {
let i = t[n];
for (let u of i.imports)
if (u.original && u.original[0] !== '.') {
let a = r[u.original] || (r[u.original] = []);
a.includes(u.path) || a.push(u.path);
}
}
for (let n in r) {
let i = r[n];
if (i.length > 1) {
let u = d.createElement('div'),
a = d.createElement('ul'),
l,
o;
(u.className = 'warning'),
(u.innerHTML =
'The import path <code>' +
H(n) +
'</code> resolves to multiple files in the bundle:');
for (let m of i) l = Ue(m, l);
for (let m of i) {
let p = m.split('/');
l && (p = p.slice(l.length)), (o = Ct(p.join('/'), o));
}
for (let m of i.sort()) {
let p = m.split('/').map(H),
I = d.createElement('li'),
P = '<pre><a href="javascript:void 0">',
g = '';
l &&
l.length &&
((P +=
'<span class="dim">' +
p.slice(0, l.length).join('/') +
'/</span>'),
(p = p.slice(l.length))),
o &&
o.length &&
((g =
'<span class="dim">' +
(p.length > o.length ? '/' : '') +
p.slice(p.length - o.length).join('/') +
'</span>'),
(p.length -= o.length)),
(I.innerHTML =
P + '<b>' + p.join('/') + '</b>' + g + '</a></pre>'),
a.appendChild(I),
(I.querySelector('a').onclick = () => {
Le(e, m, null);
});
}
u.appendChild(a), s.push(u);
}
}
return s;
},
Jt = (e) => {
if (Gt === e) return;
Gt = e;
let t = d.getElementById('warningsPanel'),
r = rl(e),
s = r.length;
if (s) {
t.innerHTML =
'<div class="expand">\u26A0\uFE0F This bundle has <b><a href="javascript:void 0">' +
s +
' warning' +
(s === 1 ? '' : 's') +
'</a></b><span>.</span></div>';
let n = t.querySelector('span'),
i = d.createElement('div');
i.className = 'content';
for (let u of r) i.appendChild(u);
t.appendChild(i),
(t.querySelector('a').onclick = () => {
i.style.display === 'block'
? ((n.textContent = '.'), (i.style.display = 'none'))
: ((n.textContent = ':'), (i.style.display = 'block'));
});
} else t.innerHTML = '';
};
var nl = d.getElementById('startPanel'),
il = d.getElementById('resultsPanel'),
mt = d.getElementById('chartPanel'),
ct = d.getElementById('useSunburst'),
ht = d.getElementById('useFlame'),
Pe = 0,
ue = 0,
gt = (e) =>
typeof e == 'object' && e !== null && !(e instanceof Array),
De = (e) => {
let t = JSON.parse(e),
r = St(t),
s = (i) => {
Pe !== i &&
(Pe === 1
? ct.classList.remove('active')
: Pe === 2 && ht.classList.remove('active'),
(Pe = i),
(mt.innerHTML = ''),
Pe === 1
? (mt.appendChild(jt(t)),
ct.classList.add('active'),
lt('chart', 'sunburst'))
: Pe === 2 &&
(mt.appendChild(zt(t)),
ht.classList.add('active'),
lt('chart', 'flame')));
},
n = (i) => {
ue !== i && ((ue = i), Ht(t, ue));
};
if (!gt(t) || !gt(t.inputs) || !gt(t.outputs))
throw new Error('Invalid metafile format');
(nl.style.display = 'none'),
(il.style.display = 'block'),
(ct.onclick = () => s(1)),
(ht.onclick = () => s(2)),
(Pe = 0),
(ue = 0),
At(t, () => n(ue === 1 ? 2 : 1)),
Jt(t),
We(),
s(tt('chart') === 'flame' ? 2 : 1),
n(1);
},
ol = d.documentElement.dataset,
Xt = () => {
(ol.theme = tt('theme') + ''), Re && Re();
};
Xt();
B.addEventListener('storage', Xt);
d.getElementById('loadExample').onclick = () => {
fetch('example-metafile.json')
.then((e) => e.text())
.then(De);
};
if (true) {
try {
De(atob(location.hash.slice(1) || globalThis.METAFILE));
} catch (e) {}
try {
history.replaceState({}, '', location.pathname);
} catch (e) {}
}
})();
</script>
</body>
</html>