☰

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));