Edit Tree Shaking · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"tsh tsh--{{stage}}\" role=\"img\" aria-label=\"{{libraryName}} bundle, {{stage}} tree-shaking\">\n  <p class=\"tsh__title\">import {{libraryName}}</p>\n  <ul class=\"tsh__list\">\n    <li class=\"tsh__fn tsh__fn--used\" style=\"--a:{{accent}};\">formatDate() <span class=\"tsh__badge tsh__badge--used\">used</span></li>\n    <li class=\"tsh__fn tsh__fn--unused\">parseTimezone()<span class=\"tsh__badge tsh__badge--removed\">removed</span><span class=\"tsh__badge tsh__badge--unused\">unused</span></li>\n    <li class=\"tsh__fn tsh__fn--unused\">formatCalendar()<span class=\"tsh__badge tsh__badge--removed\">removed</span><span class=\"tsh__badge tsh__badge--unused\">unused</span></li>\n  </ul>\n  {{#if showSizes}}<p class=\"tsh__size tsh__size--before\">Bundle size: 48KB (all exports included)</p><p class=\"tsh__size tsh__size--after\">Bundle size: 6KB (unused exports removed)</p>{{/if}}\n</div>\n<style>\n.tsh { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.tsh__title { margin: 0 0 10px; font: 11px ui-monospace, monospace; color: #24143099; }\n.tsh__list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n.tsh__fn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 6px; background: #24143010; font-size: 11px; font-weight: 600; }\n.tsh__fn--used { background: var(--a); }\n.tsh__badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #24143018; color: #24143099; margin-left: auto; }\n.tsh__badge--used { display: none; background: #241430; color: #FAF7F2; }\n.tsh--before .tsh__badge--used { display: inline-block; }\n.tsh__badge--removed { display: none; text-decoration: line-through; }\n.tsh--after .tsh__badge--removed { display: inline-block; }\n.tsh--before .tsh__badge--unused { display: inline-block; }\n.tsh--after .tsh__badge--unused { display: none; }\n.tsh--after .tsh__fn--unused { opacity: .3; }\n.tsh__size { display: none; margin: 0; font-size: 10px; color: #24143099; }\n.tsh--before .tsh__size--before, .tsh--after .tsh__size--after { display: block; }\n</style>",
  "tailwind": "<div class=\"tshtw tshtw--{{stage}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\" role=\"img\" aria-label=\"{{libraryName}} bundle, {{stage}} tree-shaking\">\n  <p class=\"m-0 mb-2.5 font-mono text-[11px] text-[#24143099]\">import {{libraryName}}</p>\n  <ul class=\"list-none m-0 mb-2.5 p-0 flex flex-col gap-1.5\">\n    <li class=\"tshtw__used flex items-center gap-1.5 py-2 px-2.5 rounded-md bg-[#24143010] text-[11px] font-semibold\" style=\"--a:{{accent}};\">formatDate() <span class=\"tshtw__badge-used hidden ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#241430] text-[#FAF7F2]\">used</span></li>\n    <li class=\"tshtw__unused flex items-center gap-1.5 py-2 px-2.5 rounded-md bg-[#24143010] text-[11px] font-semibold\">parseTimezone()<span class=\"tshtw__badge-removed hidden ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#24143018] text-[#24143099] line-through\">removed</span><span class=\"tshtw__badge-unused ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#24143018] text-[#24143099]\">unused</span></li>\n    <li class=\"tshtw__unused flex items-center gap-1.5 py-2 px-2.5 rounded-md bg-[#24143010] text-[11px] font-semibold\">formatCalendar()<span class=\"tshtw__badge-removed hidden ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#24143018] text-[#24143099] line-through\">removed</span><span class=\"tshtw__badge-unused ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#24143018] text-[#24143099]\">unused</span></li>\n  </ul>\n  {{#if showSizes}}<p class=\"tshtw__size-before hidden m-0 text-[10px] text-[#24143099]\">Bundle size: 48KB (all exports included)</p><p class=\"tshtw__size-after hidden m-0 text-[10px] text-[#24143099]\">Bundle size: 6KB (unused exports removed)</p>{{/if}}\n</div>\n<style>\n.tshtw--before .tshtw__badge-used { display: inline-block; }\n.tshtw--after .tshtw__badge-removed { display: inline-block; }\n.tshtw--before .tshtw__badge-unused { display: inline-block; }\n.tshtw--after .tshtw__badge-unused { display: none; }\n.tshtw--after .tshtw__unused { opacity: .3; }\n.tshtw--before .tshtw__size-before, .tshtw--after .tshtw__size-after { display: block; }\n</style>",
  "react": "export function TreeShaking({\n  libraryName = \"{{libraryName}}\",\n  stage = \"{{stage}}\",\n  accent = \"{{accent}}\",\n  showSizes = {{showSizes}},\n}) {\n  const before = stage === \"before\";\n  const unusedBadge = { fontSize: 9, fontWeight: 700, padding: \"2px 7px\", borderRadius: 999, background: \"#24143018\", color: \"#24143099\", marginLeft: \"auto\", textDecoration: before ? \"none\" : \"line-through\" };\n  return (\n    <div role=\"img\" aria-label={`${libraryName} bundle, ${stage} tree-shaking`} style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n      <p style={{ margin: \"0 0 10px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>import {libraryName}</p>\n      <ul style={{ listStyle: \"none\", margin: \"0 0 10px\", padding: 0, display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n        <li style={{ display: \"flex\", alignItems: \"center\", gap: 6, padding: \"8px 10px\", borderRadius: 6, fontSize: 11, fontWeight: 600, background: accent }}>\n          formatDate() {before && <span style={{ fontSize: 9, fontWeight: 700, padding: \"2px 7px\", borderRadius: 999, background: \"#241430\", color: \"#FAF7F2\", marginLeft: \"auto\" }}>used</span>}\n        </li>\n        <li style={{ display: \"flex\", alignItems: \"center\", gap: 6, padding: \"8px 10px\", borderRadius: 6, fontSize: 11, fontWeight: 600, background: \"#24143010\", opacity: before ? 1 : .3 }}>parseTimezone()<span style={unusedBadge}>{before ? \"unused\" : \"removed\"}</span></li>\n        <li style={{ display: \"flex\", alignItems: \"center\", gap: 6, padding: \"8px 10px\", borderRadius: 6, fontSize: 11, fontWeight: 600, background: \"#24143010\", opacity: before ? 1 : .3 }}>formatCalendar()<span style={unusedBadge}>{before ? \"unused\" : \"removed\"}</span></li>\n      </ul>\n      {showSizes && <p style={{ margin: 0, fontSize: 10, color: \"#24143099\" }}>{before ? \"Bundle size: 48KB (all exports included)\" : \"Bundle size: 6KB (unused exports removed)\"}</p>}\n    </div>\n  );\n}"
}