storybook-addon-performance
Version:
A storybook addon to help better understand and debug performance for React components
654 lines (649 loc) • 16.4 kB
JavaScript
import {
bytesToKiloBytes
} from "./chunk-VPNLT3OG.mjs";
// src/tasks/preset/server.tsx
import ReactDOMServer from "react-dom/server";
// ../../node_modules/.pnpm/fflate@0.7.4/node_modules/fflate/esm/browser.js
var u8 = Uint8Array;
var u16 = Uint16Array;
var u32 = Uint32Array;
var fleb = new u8([
0,
0,
0,
0,
0,
0,
0,
0,
1,
1,
1,
1,
2,
2,
2,
2,
3,
3,
3,
3,
4,
4,
4,
4,
5,
5,
5,
5,
0,
/* unused */
0,
0,
/* impossible */
0
]);
var fdeb = new u8([
0,
0,
0,
0,
1,
1,
2,
2,
3,
3,
4,
4,
5,
5,
6,
6,
7,
7,
8,
8,
9,
9,
10,
10,
11,
11,
12,
12,
13,
13,
/* unused */
0,
0
]);
var clim = new u8([16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15]);
var freb = function(eb, start) {
var b = new u16(31);
for (var i = 0; i < 31; ++i) {
b[i] = start += 1 << eb[i - 1];
}
var r = new u32(b[30]);
for (var i = 1; i < 30; ++i) {
for (var j = b[i]; j < b[i + 1]; ++j) {
r[j] = j - b[i] << 5 | i;
}
}
return [b, r];
};
var _a = freb(fleb, 2);
var fl = _a[0];
var revfl = _a[1];
fl[28] = 258, revfl[258] = 28;
var _b = freb(fdeb, 0);
var fd = _b[0];
var revfd = _b[1];
var rev = new u16(32768);
for (i = 0; i < 32768; ++i) {
x = (i & 43690) >>> 1 | (i & 21845) << 1;
x = (x & 52428) >>> 2 | (x & 13107) << 2;
x = (x & 61680) >>> 4 | (x & 3855) << 4;
rev[i] = ((x & 65280) >>> 8 | (x & 255) << 8) >>> 1;
}
var x;
var i;
var hMap = function(cd, mb, r) {
var s = cd.length;
var i = 0;
var l = new u16(mb);
for (; i < s; ++i) {
if (cd[i])
++l[cd[i] - 1];
}
var le = new u16(mb);
for (i = 0; i < mb; ++i) {
le[i] = le[i - 1] + l[i - 1] << 1;
}
var co;
if (r) {
co = new u16(1 << mb);
var rvb = 15 - mb;
for (i = 0; i < s; ++i) {
if (cd[i]) {
var sv = i << 4 | cd[i];
var r_1 = mb - cd[i];
var v = le[cd[i] - 1]++ << r_1;
for (var m = v | (1 << r_1) - 1; v <= m; ++v) {
co[rev[v] >>> rvb] = sv;
}
}
}
} else {
co = new u16(s);
for (i = 0; i < s; ++i) {
if (cd[i]) {
co[i] = rev[le[cd[i] - 1]++] >>> 15 - cd[i];
}
}
}
return co;
};
var flt = new u8(288);
for (i = 0; i < 144; ++i)
flt[i] = 8;
var i;
for (i = 144; i < 256; ++i)
flt[i] = 9;
var i;
for (i = 256; i < 280; ++i)
flt[i] = 7;
var i;
for (i = 280; i < 288; ++i)
flt[i] = 8;
var i;
var fdt = new u8(32);
for (i = 0; i < 32; ++i)
fdt[i] = 5;
var i;
var flm = /* @__PURE__ */ hMap(flt, 9, 0);
var fdm = /* @__PURE__ */ hMap(fdt, 5, 0);
var shft = function(p) {
return (p + 7) / 8 | 0;
};
var slc = function(v, s, e) {
if (s == null || s < 0)
s = 0;
if (e == null || e > v.length)
e = v.length;
var n = new (v.BYTES_PER_ELEMENT == 2 ? u16 : v.BYTES_PER_ELEMENT == 4 ? u32 : u8)(e - s);
n.set(v.subarray(s, e));
return n;
};
var wbits = function(d, p, v) {
v <<= p & 7;
var o = p / 8 | 0;
d[o] |= v;
d[o + 1] |= v >>> 8;
};
var wbits16 = function(d, p, v) {
v <<= p & 7;
var o = p / 8 | 0;
d[o] |= v;
d[o + 1] |= v >>> 8;
d[o + 2] |= v >>> 16;
};
var hTree = function(d, mb) {
var t = [];
for (var i = 0; i < d.length; ++i) {
if (d[i])
t.push({ s: i, f: d[i] });
}
var s = t.length;
var t2 = t.slice();
if (!s)
return [et, 0];
if (s == 1) {
var v = new u8(t[0].s + 1);
v[t[0].s] = 1;
return [v, 1];
}
t.sort(function(a, b) {
return a.f - b.f;
});
t.push({ s: -1, f: 25001 });
var l = t[0], r = t[1], i0 = 0, i1 = 1, i2 = 2;
t[0] = { s: -1, f: l.f + r.f, l, r };
while (i1 != s - 1) {
l = t[t[i0].f < t[i2].f ? i0++ : i2++];
r = t[i0 != i1 && t[i0].f < t[i2].f ? i0++ : i2++];
t[i1++] = { s: -1, f: l.f + r.f, l, r };
}
var maxSym = t2[0].s;
for (var i = 1; i < s; ++i) {
if (t2[i].s > maxSym)
maxSym = t2[i].s;
}
var tr = new u16(maxSym + 1);
var mbt = ln(t[i1 - 1], tr, 0);
if (mbt > mb) {
var i = 0, dt = 0;
var lft = mbt - mb, cst = 1 << lft;
t2.sort(function(a, b) {
return tr[b.s] - tr[a.s] || a.f - b.f;
});
for (; i < s; ++i) {
var i2_1 = t2[i].s;
if (tr[i2_1] > mb) {
dt += cst - (1 << mbt - tr[i2_1]);
tr[i2_1] = mb;
} else
break;
}
dt >>>= lft;
while (dt > 0) {
var i2_2 = t2[i].s;
if (tr[i2_2] < mb)
dt -= 1 << mb - tr[i2_2]++ - 1;
else
++i;
}
for (; i >= 0 && dt; --i) {
var i2_3 = t2[i].s;
if (tr[i2_3] == mb) {
--tr[i2_3];
++dt;
}
}
mbt = mb;
}
return [new u8(tr), mbt];
};
var ln = function(n, l, d) {
return n.s == -1 ? Math.max(ln(n.l, l, d + 1), ln(n.r, l, d + 1)) : l[n.s] = d;
};
var lc = function(c) {
var s = c.length;
while (s && !c[--s])
;
var cl = new u16(++s);
var cli = 0, cln = c[0], cls = 1;
var w = function(v) {
cl[cli++] = v;
};
for (var i = 1; i <= s; ++i) {
if (c[i] == cln && i != s)
++cls;
else {
if (!cln && cls > 2) {
for (; cls > 138; cls -= 138)
w(32754);
if (cls > 2) {
w(cls > 10 ? cls - 11 << 5 | 28690 : cls - 3 << 5 | 12305);
cls = 0;
}
} else if (cls > 3) {
w(cln), --cls;
for (; cls > 6; cls -= 6)
w(8304);
if (cls > 2)
w(cls - 3 << 5 | 8208), cls = 0;
}
while (cls--)
w(cln);
cls = 1;
cln = c[i];
}
}
return [cl.subarray(0, cli), s];
};
var clen = function(cf, cl) {
var l = 0;
for (var i = 0; i < cl.length; ++i)
l += cf[i] * cl[i];
return l;
};
var wfblk = function(out, pos, dat) {
var s = dat.length;
var o = shft(pos + 2);
out[o] = s & 255;
out[o + 1] = s >>> 8;
out[o + 2] = out[o] ^ 255;
out[o + 3] = out[o + 1] ^ 255;
for (var i = 0; i < s; ++i)
out[o + i + 4] = dat[i];
return (o + 4 + s) * 8;
};
var wblk = function(dat, out, final, syms, lf, df, eb, li, bs, bl, p) {
wbits(out, p++, final);
++lf[256];
var _a2 = hTree(lf, 15), dlt = _a2[0], mlb = _a2[1];
var _b2 = hTree(df, 15), ddt = _b2[0], mdb = _b2[1];
var _c = lc(dlt), lclt = _c[0], nlc = _c[1];
var _d = lc(ddt), lcdt = _d[0], ndc = _d[1];
var lcfreq = new u16(19);
for (var i = 0; i < lclt.length; ++i)
lcfreq[lclt[i] & 31]++;
for (var i = 0; i < lcdt.length; ++i)
lcfreq[lcdt[i] & 31]++;
var _e = hTree(lcfreq, 7), lct = _e[0], mlcb = _e[1];
var nlcc = 19;
for (; nlcc > 4 && !lct[clim[nlcc - 1]]; --nlcc)
;
var flen = bl + 5 << 3;
var ftlen = clen(lf, flt) + clen(df, fdt) + eb;
var dtlen = clen(lf, dlt) + clen(df, ddt) + eb + 14 + 3 * nlcc + clen(lcfreq, lct) + (2 * lcfreq[16] + 3 * lcfreq[17] + 7 * lcfreq[18]);
if (flen <= ftlen && flen <= dtlen)
return wfblk(out, p, dat.subarray(bs, bs + bl));
var lm, ll, dm, dl;
wbits(out, p, 1 + (dtlen < ftlen)), p += 2;
if (dtlen < ftlen) {
lm = hMap(dlt, mlb, 0), ll = dlt, dm = hMap(ddt, mdb, 0), dl = ddt;
var llm = hMap(lct, mlcb, 0);
wbits(out, p, nlc - 257);
wbits(out, p + 5, ndc - 1);
wbits(out, p + 10, nlcc - 4);
p += 14;
for (var i = 0; i < nlcc; ++i)
wbits(out, p + 3 * i, lct[clim[i]]);
p += 3 * nlcc;
var lcts = [lclt, lcdt];
for (var it = 0; it < 2; ++it) {
var clct = lcts[it];
for (var i = 0; i < clct.length; ++i) {
var len = clct[i] & 31;
wbits(out, p, llm[len]), p += lct[len];
if (len > 15)
wbits(out, p, clct[i] >>> 5 & 127), p += clct[i] >>> 12;
}
}
} else {
lm = flm, ll = flt, dm = fdm, dl = fdt;
}
for (var i = 0; i < li; ++i) {
if (syms[i] > 255) {
var len = syms[i] >>> 18 & 31;
wbits16(out, p, lm[len + 257]), p += ll[len + 257];
if (len > 7)
wbits(out, p, syms[i] >>> 23 & 31), p += fleb[len];
var dst = syms[i] & 31;
wbits16(out, p, dm[dst]), p += dl[dst];
if (dst > 3)
wbits16(out, p, syms[i] >>> 5 & 8191), p += fdeb[dst];
} else {
wbits16(out, p, lm[syms[i]]), p += ll[syms[i]];
}
}
wbits16(out, p, lm[256]);
return p + ll[256];
};
var deo = /* @__PURE__ */ new u32([65540, 131080, 131088, 131104, 262176, 1048704, 1048832, 2114560, 2117632]);
var et = /* @__PURE__ */ new u8(0);
var dflt = function(dat, lvl, plvl, pre, post, lst) {
var s = dat.length;
var o = new u8(pre + s + 5 * (1 + Math.ceil(s / 7e3)) + post);
var w = o.subarray(pre, o.length - post);
var pos = 0;
if (!lvl || s < 8) {
for (var i = 0; i <= s; i += 65535) {
var e = i + 65535;
if (e >= s) {
w[pos >> 3] = lst;
}
pos = wfblk(w, pos + 1, dat.subarray(i, e));
}
} else {
var opt = deo[lvl - 1];
var n = opt >>> 13, c = opt & 8191;
var msk_1 = (1 << plvl) - 1;
var prev = new u16(32768), head = new u16(msk_1 + 1);
var bs1_1 = Math.ceil(plvl / 3), bs2_1 = 2 * bs1_1;
var hsh = function(i2) {
return (dat[i2] ^ dat[i2 + 1] << bs1_1 ^ dat[i2 + 2] << bs2_1) & msk_1;
};
var syms = new u32(25e3);
var lf = new u16(288), df = new u16(32);
var lc_1 = 0, eb = 0, i = 0, li = 0, wi = 0, bs = 0;
for (; i < s; ++i) {
var hv = hsh(i);
var imod = i & 32767, pimod = head[hv];
prev[imod] = pimod;
head[hv] = imod;
if (wi <= i) {
var rem = s - i;
if ((lc_1 > 7e3 || li > 24576) && rem > 423) {
pos = wblk(dat, w, 0, syms, lf, df, eb, li, bs, i - bs, pos);
li = lc_1 = eb = 0, bs = i;
for (var j = 0; j < 286; ++j)
lf[j] = 0;
for (var j = 0; j < 30; ++j)
df[j] = 0;
}
var l = 2, d = 0, ch_1 = c, dif = imod - pimod & 32767;
if (rem > 2 && hv == hsh(i - dif)) {
var maxn = Math.min(n, rem) - 1;
var maxd = Math.min(32767, i);
var ml = Math.min(258, rem);
while (dif <= maxd && --ch_1 && imod != pimod) {
if (dat[i + l] == dat[i + l - dif]) {
var nl = 0;
for (; nl < ml && dat[i + nl] == dat[i + nl - dif]; ++nl)
;
if (nl > l) {
l = nl, d = dif;
if (nl > maxn)
break;
var mmd = Math.min(dif, nl - 2);
var md = 0;
for (var j = 0; j < mmd; ++j) {
var ti = i - dif + j + 32768 & 32767;
var pti = prev[ti];
var cd = ti - pti + 32768 & 32767;
if (cd > md)
md = cd, pimod = ti;
}
}
}
imod = pimod, pimod = prev[imod];
dif += imod - pimod + 32768 & 32767;
}
}
if (d) {
syms[li++] = 268435456 | revfl[l] << 18 | revfd[d];
var lin = revfl[l] & 31, din = revfd[d] & 31;
eb += fleb[lin] + fdeb[din];
++lf[257 + lin];
++df[din];
wi = i + l;
++lc_1;
} else {
syms[li++] = dat[i];
++lf[dat[i]];
}
}
}
pos = wblk(dat, w, lst, syms, lf, df, eb, li, bs, i - bs, pos);
if (!lst && pos & 7)
pos = wfblk(w, pos + 1, et);
}
return slc(o, 0, pre + shft(pos) + post);
};
var crct = /* @__PURE__ */ function() {
var t = new Int32Array(256);
for (var i = 0; i < 256; ++i) {
var c = i, k = 9;
while (--k)
c = (c & 1 && -306674912) ^ c >>> 1;
t[i] = c;
}
return t;
}();
var crc = function() {
var c = -1;
return {
p: function(d) {
var cr = c;
for (var i = 0; i < d.length; ++i)
cr = crct[cr & 255 ^ d[i]] ^ cr >>> 8;
c = cr;
},
d: function() {
return ~c;
}
};
};
var dopt = function(dat, opt, pre, post, st) {
return dflt(dat, opt.level == null ? 6 : opt.level, opt.mem == null ? Math.ceil(Math.max(8, Math.min(13, Math.log(dat.length))) * 1.5) : 12 + opt.mem, pre, post, !st);
};
var wbytes = function(d, b, v) {
for (; v; ++b)
d[b] = v, v >>>= 8;
};
var gzh = function(c, o) {
var fn = o.filename;
c[0] = 31, c[1] = 139, c[2] = 8, c[8] = o.level < 2 ? 4 : o.level == 9 ? 2 : 0, c[9] = 3;
if (o.mtime != 0)
wbytes(c, 4, Math.floor(new Date(o.mtime || Date.now()) / 1e3));
if (fn) {
c[3] = 8;
for (var i = 0; i <= fn.length; ++i)
c[i + 10] = fn.charCodeAt(i);
}
};
var gzhl = function(o) {
return 10 + (o.filename && o.filename.length + 1 || 0);
};
function gzipSync(data, opts) {
if (!opts)
opts = {};
var c = crc(), l = data.length;
c.p(data);
var d = dopt(data, opts, gzhl(opts), 8), s = d.length;
return gzh(d, opts), wbytes(d, s - 8, c.d()), wbytes(d, s - 4, l), d;
}
var te = typeof TextEncoder != "undefined" && /* @__PURE__ */ new TextEncoder();
var td = typeof TextDecoder != "undefined" && /* @__PURE__ */ new TextDecoder();
var tds = 0;
try {
td.decode(et, { stream: true });
tds = 1;
} catch (e) {
}
function strToU8(str, latin1) {
if (latin1) {
var ar_1 = new u8(str.length);
for (var i = 0; i < str.length; ++i)
ar_1[i] = str.charCodeAt(i);
return ar_1;
}
if (te)
return te.encode(str);
var l = str.length;
var ar = new u8(str.length + (str.length >> 1));
var ai = 0;
var w = function(v) {
ar[ai++] = v;
};
for (var i = 0; i < l; ++i) {
if (ai + 5 > ar.length) {
var n = new u8(ai + 8 + (l - i << 1));
n.set(ar);
ar = n;
}
var c = str.charCodeAt(i);
if (c < 128 || latin1)
w(c);
else if (c < 2048)
w(192 | c >> 6), w(128 | c & 63);
else if (c > 55295 && c < 57344)
c = 65536 + (c & 1023 << 10) | str.charCodeAt(++i) & 1023, w(240 | c >> 18), w(128 | c >> 12 & 63), w(128 | c >> 6 & 63), w(128 | c & 63);
else
w(224 | c >> 12), w(128 | c >> 6 & 63), w(128 | c & 63);
}
return slc(ar, 0, ai);
}
// src/tasks/preset/server.tsx
var renderToString = {
type: "timed",
name: "Render to string",
description: `This task records how long a ReactDOM.renderToString() call takes`,
run: async ({ getElement }) => {
ReactDOMServer.renderToString(getElement());
}
};
var renderToStaticMarkup = {
type: "timed",
name: "Render to static markup (cannot be hydrated)",
description: `
This task records how long a ReactDOM.renderToStaticMarkup() call takes.
This output cannot be hydrated on the client
`,
run: async ({ getElement }) => {
ReactDOMServer.renderToStaticMarkup(getElement());
}
};
var getRawStringSizeInKB = {
type: "static",
name: "String output size",
description: `
The size of the string generated by ReactDOM.renderToString().
`,
scale: "kb",
run: async ({ getElement }) => {
const output = ReactDOMServer.renderToString(getElement());
const blob = new Blob([output]);
return bytesToKiloBytes(blob.size);
}
};
var getGzipStringSizeInKB = {
type: "static",
name: "String output size (gzip)",
description: `
The gzipped size of the string generated by ReactDOM.renderToString().
`,
scale: "kb",
run: async ({ getElement }) => {
const output = ReactDOMServer.renderToString(getElement());
const buf = strToU8(output);
const bytes = gzipSync(buf, { level: 9 });
return bytesToKiloBytes(bytes.length);
}
};
var getRawStaticMarkupSizeInKB = {
type: "static",
name: "Static markup output size",
description: `
The size of the string generated by ReactDOM.renderToStaticMarkup().
`,
scale: "kb",
run: async ({ getElement }) => {
const output = ReactDOMServer.renderToStaticMarkup(getElement());
const blob = new Blob([output]);
return bytesToKiloBytes(blob.size);
}
};
var getGzipStaticMarkupSizeInKB = {
type: "static",
name: "Static markup output size (gzip)",
description: `
The gzipped size of the string generated by ReactDOM.renderToStaticMarkup().
`,
scale: "kb",
run: async ({ getElement }) => {
const output = ReactDOMServer.renderToStaticMarkup(getElement());
const buf = strToU8(output);
const bytes = gzipSync(buf, { level: 9 });
return bytesToKiloBytes(bytes.length);
}
};
var group = {
groupId: "Server",
name: "Server \u2601\uFE0F",
tasks: [
renderToString,
renderToStaticMarkup,
getRawStringSizeInKB,
getGzipStringSizeInKB,
getRawStaticMarkupSizeInKB,
getGzipStaticMarkupSizeInKB
]
};
var server_default = group;
export {
server_default
};