31:T41c,{ const sFull = formatBytes(full.size); const sAbbrev = formatBytes(abbrev.size); const sRatio = formatRatio(abbrev.size / full.size); const unpub = versions.filter(d => !d.published).length; const vTotal = formatCount(versions.length); const vUnpub = formatCount(unpub); const vUnpubRatio = formatRatio(unpub / versions.length); const intro = `The full packument is ${sFull}. The abbreviated packument is ${sAbbrev} (${sRatio}).`; if(!unpub) return md` ${intro} Out of ${vTotal} versions, no versions have been unpublished. `; return md` ${intro}

Out of ${vTotal} versions, ${vUnpub} ${unpub === 1 ? "version has" : "versions have"} been unpublished (${vUnpubRatio}).

Unpublished versions: ${Inputs.table(unpublishedVersions, { columns: ["tag", "time"], header: { tag: "Version", time: "Originally published" }, layout: "auto", width: "max-content", select: false, format: {time: d3.utcFormat("%Y-%m-%d %H:%M:%S")}, })} `; }32:T5b8,{ const DAY = 1000 * 60 * 60 * 24; const YEAR = DAY * 365; const data = versions; const span = (data.at(-1).time - data.at(0).time); const interval = forcedInterval ?? ( span >= 8 * YEAR ? "quarter" : span >= 2 * YEAR ? "month" : span >= 90 * DAY ? "monday" : "day"); const timeFormat = { "day": "%Y-%m-%d", "monday": "%Y-%m-%d", "month": "%Y-%m", "quarter": "%Y-%m", }[interval]; const formatPub = d => d ? "Published" : "Unpublished"; return Plot.plot({ width, height: 45 + 1 + 100, marginRight: 150, marginTop: 45, marginBottom: 1, color: {legend: true, tickFormat: formatPub, domain: [true, false], range: ["black", "lightgrey"]}, x: {type: "time", axis: "top"}, y: {zero: true, type: "sqrt", ticks: 4, label: "Versions", tickFormat: "s"}, style: {overflow: "visible"}, grid: true, inset: 5, insetTop: 10, marks: [ Plot.frame(), Plot.rectY(data, Plot.stackY(Plot.binX({y: "count"}, { x: "time", fill: "published", ...forcedInterval ? { insetLeft: 0, insetRight: 0, } : { insetLeft: 1, insetRight: 1, }, interval, order: [true, false], tip: { pointer: "x", anchor: "bottom", format: { x: timeFormat, fill: formatPub, }, }, }))), ], }); }33:T493,{ let sum = 0; const data = Object.entries(times) .sort(([, a], [, b]) => a - b) .reduce((values, [tag, time]) => { const size = measured.index.versions?.index[tag]?.size; if(size) values.push({tag, time, size: size + (values.at(-1)?.size ?? 0)}); return values; }, []); return Plot.plot({ width, height: 35 + 1 + 100, marginRight: 150, marginTop: 35, marginBottom: 1, x: {type: "time", axis: "top"}, y: {tickFormat: formatBytes, zero: true}, style: {overflow: "visible"}, grid: true, inset: 5, insetTop: 10, marks: [ Plot.frame(), Plot.line(data, { x: "time", y: "size", stroke: "black", curve: "step-after", }), Plot.dot(data, { x: "time", y: "size", fill: "black", marker: "dot", r: 1.5, tip: { pointer: "x", anchor: "bottom", format: { x: d3.utcFormat("%Y-%m-%d %H:%M:%S"), tag: d => d, y: formatBytes, }, }, channels: { tag: "tag" }, }), ], }); }34:T470,{ const {domain} = topN(versionPropSizes); const labeled = new Set(domain); const data = measured.index.versions?.children.flatMap(version => { const tag = version.key; const time = times[tag]; return domain.map(k => ({key: k, size: version.index[k]?.size ?? null, tag, time})); }); return Plot.plot({ width, height: 40 + 1 + 100 * domain.length, marginRight: 150, marginTop: 40, marginBottom: 1, fy: {domain, tickFormat: d => `.${d}`, label: null, padding: 0}, x: {axis: "top", type: "time"}, y: {tickFormat: formatBytes, type: "sqrt", ticks: 4, zero: true}, grid: true, inset: 5, insetTop: 10, style: {overflow: "visible"}, marks: [ Plot.frame(), Plot.dot(data, { x: "time", y: "size", fy: "key", fill: "black", r: 1.5, tip: { anchor: "bottom", format: { fy: null, x: d3.utcFormat("%Y-%m-%d %H:%M:%S"), tag: d => d, y: formatBytes, }, }, channels: { tag: "tag" }, }), ], }); }35:T680,// Efficiently measures the JSON byte length of individual props. Generated via Claude Opus 4.8 in multiple turns. // In V8 the preallocation of holey arrays provides a small performance benefit on write but can slightly increase read cost. measure = { const enc = new TextEncoder(); function byteLen(s) { for (let i = 0; i < s.length; i++) { if (s.charCodeAt(i) > 127) { return i + enc.encode(s.slice(i)).length; // ASCII prefix = i bytes } } return s.length; } return function measureJsonSize(value, key = null) { let size; let children = null; let index = null; if (Array.isArray(value)) { children = new Array(value.length); index = Object.create(null); size = 2; // [] for (let i = 0; i < value.length; i++) { const child = measureJsonSize(value[i], i); children[i] = child; index[i] = child; size += child.size; } if (value.length > 1) size += value.length - 1; // commas } else if (value !== null && typeof value === 'object') { const keys = Object.keys(value); children = new Array(keys.length); index = Object.create(null); size = 2; // {} for (let i = 0; i < keys.length; i++) { const k = keys[i]; const child = measureJsonSize(value[k], k); children[i] = child; index[k] = child; size += byteLen(JSON.stringify(k)) + 1 + child.size; // "key":value } if (keys.length > 1) size += keys.length - 1; // commas } else { size = byteLen(JSON.stringify(value)); // primitive } return { key, size, children, index }; } }36:[] 2f:{"title":"Chonky NPM Packument Props","cells":[{"id":0,"value":"# Chonky NPM Packument Props","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"This notebook explores how individual properties contribute to a [packument's](https://github.com/npm/registry/blob/main/docs/responses/package-metadata.md) overall uncompressed size. For one of the largest packuments check out [`renovate`](https://observablehq.com/@mootari/packument-prop-sizes?pkg=renovate&format=full), or discover more examples in the [NPM Registry Size notebook](https://observablehq.com/@mootari/npm-registry-size#s_docs).\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"htl.html`Share these settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof pkg = Inputs.text({\n submit: true,\n required: true,\n width: 400,\n label: \"Package name\",\n value: params.pkg ?? \"glob\",\n autocomplete: \"off\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"viewof format = {\n const outputs = {};\n const form = Inputs.radio([\"full\", \"abbrev\"], {\n label: \"Analyzed format\",\n value: params.format ?? \"full\",\n format: d => htl.html`${d}${outputs[d] = htl.html``}`\n });\n form.setLoading = (val, state) => {outputs[val].textContent = state ? `(loading…)` : \"\"};\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"### Largest top-level properties","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"summaryChart(measured.children)","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"### Largest version properties","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"summaryChart(versionPropSizes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"### Publish frequency","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"### Cumulative version size","pinned":false,"hidden":false,"mode":"md"},{"id":306,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"### Size contributions by version property","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md"},{"id":257,"value":"params = Object.fromEntries(new URL(document.baseURI).searchParams)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"full = trackLoading(\"full\", fetchMetadata(pkg, {invalidation}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"abbrev = trackLoading(\"abbrev\", fetchMetadata(pkg, {abbrev: true, invalidation}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"times = Object.fromEntries(Object.entries(full.data.time).map(([k, v]) => [k, new Date(v)]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"versions = Object.entries(times)\n .filter(([k]) => ![\"created\", \"modified\", \"unpublished\"].includes(k))\n .map(([k, v]) => ({tag: k, time: v, published: full.data.versions?.[k] != null}))\n .sort((a, b) => a.time - b.time)","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"unpublishedVersions = versions.filter(d => !d.published)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"measured = measure(({full, abbrev})[format].data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"versionPropSizes = {\n const sums = {};\n for(const version of measured.index.versions?.children ?? []) {\n for(const {key, size} of version.children) {\n const {min, max, size: sum} = sums[key] ??= {key, count: 0, size: 0, min: Infinity, max: 0};\n sums[key].count++;\n sums[key].size = sum + size;\n if(size < min) sums[key].min = size;\n if(size > max) sums[key].max = size;\n }\n }\n return Object.values(sums).sort((a, b) => b.size - a.size);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"viewof forcedInterval = Inputs.radio([null, \"quarter\", \"month\", \"monday\", \"day\"], {\n label: \"Forced interval\",\n format: (d) => d === \"monday\" ? \"week\" : (d ?? \"(auto)\"),\n value: null,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"async function fetchMetadata(pkgName, options = {}) {\n const {\n abbrev = false,\n invalidation: invalidated = invalidation,\n } = options;\n const controller = new AbortController();\n invalidated.then(() => controller.abort());\n\n // At least in Chrome the cache entry may not respect the accept header.\n // We include a cache breaker param as workaround.\n const res = await fetch(`https://registry.npmjs.org/${pkgName}?__f=${!abbrev}`, {\n signal: controller.signal,\n headers: abbrev ? {accept: \"application/vnd.npm.install-v1+json\"} : {},\n });\n if(!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n const blob = await res.blob();\n const size = blob.size;\n return {size, data: await new Response(blob).json()};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"async function trackLoading(val, promise) {\n viewof format.setLoading(val, true);\n promise.finally(() => viewof format.setLoading(val));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"formatBytes = (f => d => (f(d) + \"B\"))(d3.format(\".3~s\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"formatCount = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"formatRatio = d3.format(\".2~%\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"function topN(children, {minRatio = .01, maxValues = 9} = {}) {\n const sum = arr => arr.reduce((s, d) => s + d.size, 0);\n const total = sum(children);\n const top = children\n .map(({key, size}) => ({key, size, ratio: size / total}))\n .sort((a, b) => b.size - a.size);\n const cutoff = top.findIndex((d, i) => d.ratio < minRatio || i === maxValues) ?? 0;\n const values = top.slice(0, cutoff);\n const domain = values.map(d => d.key);\n const other = sum(top.slice(cutoff));\n if(other) values.push({key: \"\", size: other, ratio: other / total});\n \n return {total, other, domain, values};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"function summaryChart(children) {\n const {total, other, domain, values} = topN(children);\n const label = d => d ? `.${d}` : \"other\";\n if(!total) return htl.html`No data available.`;\n\n return Plot.plot({\n width,\n color: {legend: true, domain, unknown: \"lightgrey\", tickFormat: label},\n x: {tickFormat: formatBytes},\n style: {overflow: \"visible\"},\n marginRight: 50,\n marginLeft: 10,\n marks: [ \n Plot.barX(values, {\n fill: \"key\",\n x: \"size\",\n r: 3,\n insetRight: 1,\n sort: {z: \"-x\"},\n tip: {\n pointer: \"x\",\n maxRadius: Infinity,\n anchor: \"bottom\",\n channels: {\n ratio: d => d.size / total,\n },\n format: {\n fill: label,\n x: formatBytes,\n ratio: \".1%\",\n }\n }\n })\n ],\n })\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}