npm-versions-sort

try to take over the world!

// ==UserScript==
// @name         npm-versions-sort
// @namespace    http://tampermonkey.net/
// @version      1.0.1
// @description  try to take over the world!
// @author       JackZhouMine([email protected])
// @match        https://www.npmjs.com/package/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=npmjs.com
// @grant        none
// @license      MIT
// ==/UserScript==
!function(){const n=w("#package-tab-versions").closest("li");function t(){!function(n=1,t="Downloads (Last 7 Days)"){a()[n].appendChild(m("download",t))}(),a()[0].appendChild(m("version","Version")),a()[2].appendChild(m("published","Published"))}function e(){const n=w("#download-up"),t=w("#download-down");h("click",(()=>{d(s(),"asc"),n.classList.add("up-active"),t.classList.remove("down-active"),i("version"),i("published")}),n),h("click",(()=>{d(s(),"desc"),n.classList.remove("up-active"),t.classList.add("down-active"),i("version"),i("published")}),t)}function o(){const n=w("#version-up"),t=w("#version-down");h("click",(()=>{l(s(),"asc"),n.classList.add("up-active"),t.classList.remove("down-active"),i("download"),i("published")}),n),h("click",(()=>{l(s(),"desc"),n.classList.remove("up-active"),t.classList.add("down-active"),i("download"),i("published")}),t)}function r(){const n=w("#published-up"),t=w("#published-down");h("click",(()=>{u(s(),"asc"),n.classList.add("up-active"),t.classList.remove("down-active"),i("download"),i("version")}),n),h("click",(()=>{u(s(),"desc"),n.classList.remove("up-active"),t.classList.add("down-active"),i("download"),i("version")}),t)}function i(n="download"){const t=w(`#${n}-up`),e=w(`#${n}-down`);t.classList.remove("up-active"),e.classList.remove("down-active")}function c(){const n=w("#tabpanel-versions");return w('table[aria-labelledby="version-history"]',n)}function s(){return w("tbody",c())}function a(){return Array.from(b("th",w("thead",c())))}function d(n,t="desc"){const e=Array.from(b("tr",n));e.sort(((n,e)=>{const o=p(n),r=p(e);return"desc"===t?r-o:o-r}));const o=document.createDocumentFragment();e.forEach((n=>o.appendChild(n))),n.appendChild(o)}function l(n,t="desc"){const e=Array.from(b("tr",n));e.sort(((n,e)=>{const o=f(n),r=f(e);return"desc"===t?L(r,o):-L(r,o)}));const o=document.createDocumentFragment();e.forEach((n=>o.appendChild(n))),n.appendChild(o)}function u(n,t="desc"){const e=Array.from(b("tr",n));e.sort(((n,e)=>{const o=v(n),r=v(e);return"desc"===t?-x(r,o):x(r,o)}));const o=document.createDocumentFragment();e.forEach((n=>o.appendChild(n))),n.appendChild(o)}function p(n){const t=w(".downloads",n)?.textContent.replace(/,/g,"")||"0";return parseInt(t,10)}function f(n){const t=w("a",n)?.textContent.replace(/,/g,"");return t}function v(n){return w("time",n).getAttribute("datetime")}function m(n="download",t){let e="";e="download"===n?`\n      <div class="triangle up" id="${n}-up"></div>\n      <div class="triangle down down-active" id="${n}-down"></div>\n      `:`\n      <div class="triangle up" id="${n}-up"></div>\n      <div class="triangle down" id="${n}-down"></div>\n      `;const o=g("div");return o.classList.add("sort-icon"),o.innerHTML=e,o}function h(n,t,e){e&&e.addEventListener(n,t)}function w(n,t=document){return t.querySelector(n)}function b(n,t=document){return t.querySelectorAll(n)}function g(n){return document.createElement(n)}function L(n,t){const e=n=>{const[t,e]=n.split("-"),[o,r="0",i="0"]=t.split(".");return{major:parseInt(o,10),minor:parseInt(r,10),patch:parseInt(i,10),prerelease:e?e.split("."):[]}},o=e(n),r=e(t);if(o.major!==r.major)return o.major>r.major?1:-1;if(o.minor!==r.minor)return o.minor>r.minor?1:-1;if(o.patch!==r.patch)return o.patch>r.patch?1:-1;const i=o.prerelease,c=r.prerelease;if(0===i.length&&c.length>0)return 1;if(i.length>0&&0===c.length)return-1;if(0===i.length&&0===c.length)return 0;const s=Math.max(i.length,c.length);for(let n=0;n<s;n++){const t=i[n],e=c[n];if(void 0===t)return-1;if(void 0===e)return 1;const o=parseInt(t,10),r=parseInt(e,10);if(isNaN(o)){if(!isNaN(r))return 1}else{if(isNaN(r))return-1;if(o!==r)return o>r?1:-1}if(t!==e)return t>e?1:-1}return 0}function x(n,t){const e=new Date(n),o=new Date(t);return e>o?1:e<o?-1:0}!function(n){const t=g("style");t.textContent=n,document.head.appendChild(t)}("\n  :root {\n    --sort-color-default: #e8deff;\n    --sort-color-active: #885afa;\n    --bg-ali: aliceblue;\n  }\n  .bg-ali {\n    background-color:var(--bg-ali);\n  }\n  .flex {\n    display: flex;\n  }\n  .flex-end {\n    justify-content: flex-end;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .w-full_i {\n    width: 100% !important;\n  }\n  .sortable {\n    background-color: #f7f7f7;\n  }\n\n  .sort-icon {\n    display: inline-flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: 30px;\n    margin-left: 6px;\n  }\n  .triangle {\n    width: 0;\n    height: 0;\n    border-left: 10px solid transparent;\n    border-right: 10px solid transparent;\n    cursor: pointer;\n  }\n  .up {\n    border-bottom: 13px solid;\n    border-bottom-color: var(--sort-color-default);\n  }\n  .up-active {\n    border-bottom-color: var(--sort-color-active);\n  }\n  .down {\n    border-top: 13px solid;\n    border-top-color: var(--sort-color-default);\n  }\n  .down-active {\n    border-top-color: var(--sort-color-active);\n  }\n"),"versions"===function(){const n=new URLSearchParams(window.location.search);return n.get("activeTab")}()&&setTimeout((()=>{t(),d(s()),e(),o(),r(),console.log("in versions tab")}),100),h("click",(function(){setTimeout((()=>{t(),d(s()),e(),o(),r(),console.log("click versions tab")}),300)}),n)}();