index.svg

<svg viewBox="0 0 1216 928" xmlns="http://www.w3.org/2000/svg"><title>ESM vs. CJS on npm</title>
<style>
text { font-size: 24px; font-weight: bolder; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-variant-numeric: tabular-nums; paint-order: stroke; dominant-baseline: middle; }
.b { fill: white; }
.esm { fill: white; }
.dual { fill: url(#a); }
.faux { fill: url(#b); }
.cjs { fill: url(#c); }
.esm, .dual, .faux, .cjs { stroke: #0d1117; stroke-width: 3px; }
text { fill: #0d1117; stroke: white; stroke-width: 3px; }
pattern line { stroke: #0d1117; stroke-width: 2px }
pattern rect { fill: #0d1117 }

@media (prefers-color-scheme: dark) {
  .b { fill: #0d1117; }
  .cjs, .dual, .esm, .faux { stroke: white; }
  .esm { fill: #0d1117; }
  text { fill: white; stroke: #0d1117; }
  pattern line { stroke: white; }
  pattern rect { fill: white }
}
</style>
<defs>
<pattern id="a" height="6" patternUnits="userSpaceOnUse" width="6" x="0" y="0"><line x1="0" y1="0" x2="0" y2="6"></line></pattern>
<pattern id="b" height="6" patternUnits="userSpaceOnUse" width="6" x="0" y="0"><line x1="0" y1="0" x2="6" y2="0"></line></pattern>
<pattern id="c" height="6" patternUnits="userSpaceOnUse" width="6" x="0" y="0"><rect height="1" width="1" x="0" y="0"></rect></pattern></defs>
<rect class="b" height="928" width="1216" x="0" y="0"></rect>
<g><g>
<rect class="esm" height="32" width="58.280220758411964" x="32" y="32"></rect>
<rect class="dual" height="32" width="16.23642513797401" x="90.28022075841196" y="32"></rect>
<rect class="faux" height="32" width="142.19690226099343" x="106.51664589638597" y="32"></rect>
<rect class="cjs" height="32" width="743.2864518426206" x="248.7135481573794" y="32"></rect>
<text text-anchor="middle" transform="translate(61.14011037920598, 48) rotate(-45)">6.1%</text>
<text text-anchor="middle" transform="translate(98.39843332739896, 48) rotate(-45)">1.7%</text>
<text text-anchor="middle" transform="translate(177.61509702688267, 48)">14.8%</text>
<text text-anchor="middle" transform="translate(620.3567740786897, 48)">77.4%</text>
<text x="1024" y="48">2021-08-24</text>
</g><g>
<rect class="esm" height="32" width="69.87072782008146" x="32" y="96"></rect>
<rect class="dual" height="32" width="20.230210731361783" x="101.87072782008146" y="96"></rect>
<rect class="faux" height="32" width="137.5314326190898" x="122.10093855144324" y="96"></rect>
<rect class="cjs" height="32" width="732.367628829467" x="259.632371170533" y="96"></rect>
<text text-anchor="middle" transform="translate(66.93536391004073, 112) rotate(-45)">7.3%</text>
<text text-anchor="middle" transform="translate(111.98583318576235, 112) rotate(-45)">2.1%</text>
<text text-anchor="middle" transform="translate(190.86665486098815, 112)">14.3%</text>
<text text-anchor="middle" transform="translate(625.8161855852666, 112)">76.3%</text>
<text x="1024" y="112">2021-11-09</text>
</g><g>
<rect class="esm" height="32" width="74.11888849806542" x="32" y="160"></rect>
<rect class="dual" height="32" width="25.156524797748858" x="106.11888849806542" y="160"></rect>
<rect class="faux" height="32" width="136.58811115019347" x="131.27541329581427" y="160"></rect>
<rect class="cjs" height="32" width="724.1364755539922" x="267.8635244460078" y="160"></rect>
<text text-anchor="middle" transform="translate(69.05944424903271, 176) rotate(-45)">7.7%</text>
<text text-anchor="middle" transform="translate(118.69715089693985, 176) rotate(-45)">2.6%</text>
<text text-anchor="middle" transform="translate(199.569468870911, 176)">14.2%</text>
<text text-anchor="middle" transform="translate(629.931762223004, 176)">75.4%</text>
<text x="1024" y="176">2022-01-27</text>
</g><g>
<rect class="esm" height="32" width="83.0415068015347" x="32" y="224"></rect>
<rect class="dual" height="32" width="34.65643529822113" x="115.0415068015347" y="224"></rect>
<rect class="faux" height="32" width="132.43111266131845" x="149.69794209975583" y="224"></rect>
<rect class="cjs" height="32" width="709.8709452389257" x="282.12905476107426" y="224"></rect>
<text text-anchor="middle" transform="translate(73.52075340076735, 240) rotate(-45)">8.7%</text>
<text text-anchor="middle" transform="translate(132.36972445064526, 240) rotate(-45)">3.6%</text>
<text text-anchor="middle" transform="translate(215.91349843041507, 240)">13.8%</text>
<text text-anchor="middle" transform="translate(637.0645273805371, 240)">73.9%</text>
<text x="1024" y="240">2022-08-01</text>
</g><g>
<rect class="esm" height="32" width="86.52862362971985" x="32" y="288"></rect>
<rect class="dual" height="32" width="36.08143379154342" x="118.52862362971985" y="288"></rect>
<rect class="faux" height="32" width="131.12928484426658" x="154.61005742126326" y="288"></rect>
<rect class="cjs" height="32" width="706.2606577344701" x="285.73934226552984" y="288"></rect>
<text text-anchor="middle" transform="translate(75.26431181485992, 304) rotate(-45)">9.0%</text>
<text text-anchor="middle" transform="translate(136.56934052549155, 304) rotate(-45)">3.8%</text>
<text text-anchor="middle" transform="translate(220.17469984339655, 304)">13.7%</text>
<text text-anchor="middle" transform="translate(638.8696711327649, 304)">73.6%</text>
<text x="1024" y="304">2022-11-04</text>
</g><g>
<rect class="esm" height="32" width="89.61051766639277" x="32" y="352"></rect>
<rect class="dual" height="32" width="40.230073952341826" x="121.61051766639277" y="352"></rect>
<rect class="faux" height="32" width="135.04683648315532" x="161.8405916187346" y="352"></rect>
<rect class="cjs" height="32" width="695.1125718981101" x="296.8874281018899" y="352"></rect>
<text text-anchor="middle" transform="translate(76.80525883319638, 368) rotate(-45)">9.3%</text>
<text text-anchor="middle" transform="translate(141.72555464256368, 368) rotate(-45)">4.2%</text>
<text text-anchor="middle" transform="translate(229.36400986031225, 368)">14.1%</text>
<text text-anchor="middle" transform="translate(644.4437140509449, 368)">72.4%</text>
<text x="1024" y="368">2023-02-06</text>
</g><g>
<rect class="esm" height="32" width="96.92307692307692" x="32" y="416"></rect>
<rect class="dual" height="32" width="64.15384615384615" x="128.9230769230769" y="416"></rect>
<rect class="faux" height="32" width="120.46153846153845" x="193.07692307692304" y="416"></rect>
<rect class="cjs" height="32" width="678.4615384615385" x="313.5384615384615" y="416"></rect>
<text text-anchor="middle" transform="translate(80.46153846153845, 432) rotate(-45)">10.1%</text>
<text text-anchor="middle" transform="translate(160.99999999999997, 432) rotate(-45)">6.7%</text>
<text text-anchor="middle" transform="translate(253.30769230769226, 432) rotate(-45)">12.5%</text>
<text text-anchor="middle" transform="translate(652.7692307692307, 432)">70.7%</text>
<text x="1024" y="432">2023-05-29</text>
</g><g>
<rect class="esm" height="32" width="97.79385171790236" x="32" y="480"></rect>
<rect class="dual" height="32" width="68.42676311030742" x="129.79385171790236" y="480"></rect>
<rect class="faux" height="32" width="126.72694394213381" x="198.22061482820976" y="480"></rect>
<rect class="cjs" height="32" width="667.0524412296563" x="324.94755877034356" y="480"></rect>
<text text-anchor="middle" transform="translate(80.89692585895118, 496) rotate(-45)">10.2%</text>
<text text-anchor="middle" transform="translate(164.00723327305607, 496) rotate(-45)">7.1%</text>
<text text-anchor="middle" transform="translate(261.5840867992767, 496) rotate(-45)">13.2%</text>
<text text-anchor="middle" transform="translate(658.4737793851717, 496)">69.5%</text>
<text x="1023.9999999999999" y="496">2023-08-24</text>
</g><g>
<rect class="esm" height="32" width="103.34995599882663" x="32" y="544"></rect>
<rect class="dual" height="32" width="71.80991493106482" x="135.34995599882663" y="544"></rect>
<rect class="faux" height="32" width="124.04810794954531" x="207.15987092989144" y="544"></rect>
<rect class="cjs" height="32" width="660.7920211205632" x="331.2079788794367" y="544"></rect>
<text text-anchor="middle" transform="translate(83.67497799941331, 560) rotate(-45)">10.8%</text>
<text text-anchor="middle" transform="translate(171.25491346435905, 560) rotate(-45)">7.5%</text>
<text text-anchor="middle" transform="translate(269.1839249046641, 560) rotate(-45)">12.9%</text>
<text text-anchor="middle" transform="translate(661.6039894397184, 560)">68.8%</text>
<text x="1023.9999999999999" y="560">2023-11-22</text>
</g><g>
<rect class="esm" height="32" width="112.60437375745526" x="32" y="608"></rect>
<rect class="dual" height="32" width="80.97699517182618" x="144.60437375745528" y="608"></rect>
<rect class="faux" height="32" width="121.73814257313265" x="225.58136892928144" y="608"></rect>
<rect class="cjs" height="32" width="644.6804884975859" x="347.3195115024141" y="608"></rect>
<text text-anchor="middle" transform="translate(88.30218687872764, 624) rotate(-45)">11.7%</text>
<text text-anchor="middle" transform="translate(185.09287134336836, 624) rotate(-45)">8.4%</text>
<text text-anchor="middle" transform="translate(286.4504402158478, 624) rotate(-45)">12.7%</text>
<text text-anchor="middle" transform="translate(669.6597557512071, 624)">67.2%</text>
<text x="1024" y="624">2024-02-20</text>
</g><g>
<rect class="esm" height="32" width="111.65009940357852" x="32" y="672"></rect>
<rect class="dual" height="32" width="100.33513206475433" x="143.6500994035785" y="672"></rect>
<rect class="faux" height="32" width="112.60437375745526" x="243.98523146833284" y="672"></rect>
<rect class="cjs" height="32" width="635.4103947742118" x="356.5896052257881" y="672"></rect>
<text text-anchor="middle" transform="translate(87.82504970178925, 688) rotate(-45)">11.6%</text>
<text text-anchor="middle" transform="translate(193.8176654359557, 688) rotate(-45)">10.5%</text>
<text text-anchor="middle" transform="translate(300.28741834706045, 688) rotate(-45)">11.7%</text>
<text text-anchor="middle" transform="translate(674.294802612894, 688)">66.2%</text>
<text x="1023.9999999999999" y="688">2024-05-27</text>
</g><g>
<rect class="esm" height="32" width="116.00942655145326" x="32" y="736"></rect>
<rect class="dual" height="32" width="110.10212097407698" x="148.00942655145326" y="736"></rect>
<rect class="faux" height="32" width="110.10212097407698" x="258.1115475255302" y="736"></rect>
<rect class="cjs" height="32" width="623.7863315003927" x="368.2136684996072" y="736"></rect>
<text text-anchor="middle" transform="translate(90.00471327572663, 752) rotate(-45)">12.1%</text>
<text text-anchor="middle" transform="translate(203.06048703849174, 752) rotate(-45)">11.5%</text>
<text text-anchor="middle" transform="translate(313.16260801256874, 752) rotate(-45)">11.5%</text>
<text text-anchor="middle" transform="translate(680.1068342498036, 752)">65.0%</text>
<text x="1024" y="752">2024-08-28</text>
</g><g>
<rect class="esm" height="32" width="111.82391492518857" x="32" y="800"></rect>
<rect class="dual" height="32" width="136.7528131569185" x="143.82391492518857" y="800"></rect>
<rect class="faux" height="32" width="100.0717200445159" x="280.5767280821071" y="800"></rect>
<rect class="cjs" height="32" width="611.351551873377" x="380.64844812662295" y="800"></rect>
<text text-anchor="middle" transform="translate(87.91195746259429, 816) rotate(-45)">11.6%</text>
<text text-anchor="middle" transform="translate(212.20032150364784, 816)">14.2%</text>
<text text-anchor="middle" transform="translate(330.61258810436505, 816) rotate(-45)">10.4%</text>
<text text-anchor="middle" transform="translate(686.3242240633115, 816)">63.7%</text>
<text x="1024" y="816">2024-11-27</text>
</g>
<g>
<rect class="esm" height="32" width="96" x="32" y="864"></rect>
<rect class="dual" height="32" width="96" x="160" y="864"></rect>
<rect class="faux" height="32" width="96" x="288" y="864"></rect>
<rect class="cjs" height="32" width="96" x="416" y="864"></rect>
<text text-anchor="middle" transform="translate(80, 880)">esm</text>
<text text-anchor="middle" transform="translate(208, 880)">dual</text>
<text text-anchor="middle" transform="translate(336, 880)">faux</text>
<text text-anchor="middle" transform="translate(464, 880)">cjs</text></g>
</g>
</svg>