Greasy Fork is available in English.

[SNOLAB] NPM Typescript Flag

Show "Dt" and "Ts" Icon on npm package search result.

2023-11-11 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name [SNOLAB] NPM Typescript Flag
  3. // @namespace https://userscript.snomiao.com/
  4. // @version 0.1.0
  5. // @description Show "Dt" and "Ts" Icon on npm package search result.
  6. // @author snomiao@gmail.com
  7. // @match *://www.npmjs.com/search*
  8. // @match *://npmjs.com/search*
  9. // @grant none
  10. // @contributionURL https://snomiao.com/donate
  11. // @supportURL https://github.com/snomiao/userscript.js/issues
  12. // ==/UserScript==
  13.  
  14. const observer = new IntersectionObserver((entries) =>
  15. entries.forEach(async (entry) => {
  16. if (!entry.isIntersecting) return;
  17. const h3 = entry.target;
  18. if (h3.ariaChecked) return;
  19. //const rect = h3.getBoundingClientRect();
  20. //const isVisible = 0 < rect.bottom && rect.top < window.innerHeight;
  21. // if(!isVisible) return;
  22. const pathname = h3.parentElement.pathname;
  23. const content = await (
  24. await fetch(pathname, { cache: "force-cache" })
  25. ).text();
  26. const hasDt =
  27. content.match(
  28. '(?<="true">)<img.*?This package has TypeScript declarations provided by.*?/>'
  29. )?.[0] ?? "";
  30. const hasTs =
  31. content.match(
  32. '(?<="true">)<img.*?This package contains built-in TypeScript declarations.*?/>'
  33. )?.[0] ?? "";
  34. h3.innerHTML = h3.innerText + " / " + hasDt + hasTs;
  35. console.log({ pathname, hasDt, hasTs });
  36. h3.ariaChecked = true;
  37. })
  38. );
  39.  
  40. function $$(sel, el = document) {
  41. return [...el.querySelectorAll(sel)];
  42. }
  43.  
  44. $$("a>h3").forEach(async (h3) => observer.observe(h3));