npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pentatrion-lib

v0.3.10

Published

Des fonctions utiles pour vos projets

Downloads

4

Readme

Pentatrion-Lib

Fonctions que j'utilise pour mes projets. Pourquoi ne pas les rendre publiques ? J'ai désactivé la création des sourcemap car ils pointaient vers des fichier .ts inexistant.

Animator

on applique Animator sur un élément masqué avec display: none. afin de lui appliquer une transition à la vue

<nav id="nav" class="hide" data-transition-name="navbar">...</nav>
.hide {
  display: none !important;
}

.navbar-enter-active,
.navbar-leave-active {
  transition: all 0.5s ease;
}

.navbar-enter,
.navbar-leave-to {
  opacity: 0;
}
       .navbar-enter-active ---------  | .navbar-leave-active ---------
       .navbar-enter .navbar-enter-to  | .navbar-leave .navbar-leave-to
.hide-----                             |                          .hide----
import Animator from "pentatrion-lib/Animator";

let animator = new Animator({
  inactiveClass: "hide",
  // can be surcharged with "data-transition-name"
  transitionName: "transition",
});

animator.animEnter(elt);
animator.animLeave(elt);

apiHelper

import {
  jsonFetch,
  formFetch,
  ApiError,

  // dépendent de mini-notifier
  jsonFetchOrNotify,
  formFetchOrNotify,
  fetchOrNotify,
} from "pentatrion-lib/apiHelper";
formFetch(
  url,
  {
    body: jsonObj | formData,
    // others
  },
  (xRequestedWidth = false)
);

on envoie par POST (surcharger si on souhaite une autre méthode) des données FormData (application/x-www-form-urlencoded, multipart/form-data) meilleure compatibilité pour les cors. par contre c'est compliqué si on souhaite envoyer un objet avec une profondeur plus grande que 1.

jsonFetch

jsonFetch(
  url,
  {
    body: jsonObj | formData,
    // others
  },
  (xRequestedWidth = false)
);

Envoie une requête fetch avec un body de type JSON. On peut spécifier un contenu de type FormData / Objet, celui-ci sera sérialisé avant d'être envoyé. pratique si on a un objet avec de la profondeur. niveau CORS nécessite une requête OPTIONS car le Content-Type est application/json.

Retourne une promesse avec l'objet déjà parsé en JSON s'il est de type application/json sinon renvoie l'objet response.

Si la requête échoue (status non compris entre 200 et 299) soulève une Exception de type ApiError qui contient 2 propriétés : status et message. message est complété en essayant de voir si la réponse au format JSON possède ces champs :

let title = data.err || data.title || data.detail || "Erreur serveur";

dateHelper

import { toIsoString, ago } from "pentatrion-lib/dateHelper";

let dateTime = new Date();
toIsoString(dateTime);
// 2021-04-12
toIsoString(dateTime, true);
// 2021-04-12T11-40

ago(from, to);
// "il y a 3 jours"

downloadHelper

import {
  downloadFromBlob,
  downloadFromUrl,
  stringToSlug,
} from "pentatrion-lib/downloadHelper";

stringToSlug("Salut les élèves !");
// salut-les-eleves-

downloadFromUrl("/sav.svg", "sac.svg");
// ok
// attention aux problèmes de cors si la requête est effectuée vers un autre domaine

emitEvent

import emitEvent from "pentatrion-lib/emitEvent";

emitEvent(
  "mon-custom-event",
  {
    foo: "bar",
  },
  document.querySelector("#el")
);

EventEmitter

import EventEmitter from "pentatrion-lib/EventEmitter";

class MaClasse extends EventEmitter {
  constructor() {
    this.on("finish", this.cb);
    // ou
    this.once("finish", this.cb);
  }

  cb(arg1, arg2) {
    console.log(arg1, arg2);
    // "a", "b"
  }

  autre() {
    this.emitEvent("finish", ["a", "b"]);
  }

  destroy() {
    this.off("finish", this.cb);
    // ou
    this.allOff();
  }
}

functionHelper

import { debounceMethod, throttleMethod } from "pentatrion-lib/functionHelper";

supportHelper

import { supportsCssVars } from "pentatrion-lib/supportHelper";
if (supportsCssVars()) {
  // TODO
}