Link Search Menu Expand Document

Utilitaires

Afin de permettre d’accéder à certaines méthodes utiles, quatre modules ont été créés.


Table of contents

  1. UTILS
  2. DOM
  3. SHADOWDOM
  4. LOG

UTILS

New - 2.1.26

Contient différentes méthodes permettant de simplifier certaines actions, comme la génération d’id, la transformation entre différents types, l’envoie de customEvent, la sauvegarde en local storage …

    /** Transforme une string dans le type renseigné */
    function fromString(value: string | null, type?: unknown): { [name: string]: unknown } | number | string
    /** Transforme une valeur du type renseigné en string */
    function toString(value: unknown, type?: unknown): string | { [name: string]: unknown }
    /** Transforme une chaîne du type camelCase en DashCase */
    function camelCaseToDashCase(name: unknown): string
    /** Transforme une chaîne du type DashCase en camelCase */
    function dashCaseToCamelCase(name: unknown): string
    /** Retourne un id de type string */
    function generateId(): string
    /** Envoie un customEvent sur l'élément parent, avec les propriétés renseignées dans property */
    function dispatchEvent(name: string, property: object, parent: HTMLElement = document.body): void
    /** Retourne la taille et la position de la fenêtre web courante */
    function getWindowSize(): { width: number, height: number, top: number, left: number }
    /** Retourne le texte contenu dans le fichier spécifié de façon asynchrone */
    async function getFile(url: string): Promise<Record<string, unknown> | string>
    /** Enregistre les données dans la clé spécifiée en local storage */
    function save<T>(key: string, datas: T): void
    /** Retourne les données spécifiées dans la clé en local storage */
    function load<T>(key: string): T
    /** Directive transformant des propriétés de types objet `Record<string, unknown>` en attribut compréhensible par lit-html et le tag html */
    propsToAttributes(...props: Record<string, unknown>): void
    /** Retourne une string utilisable dans une url (contenant toujours les / et les :) */
    function slugify(str: string, options?: { isPath?: boolean, replacementChar?: string }): string
    /** Retourne un id de type number en fonction de la chaîne de caratères passée en paramètre */
    function  generateIdFromString(str: string): number

DOM

Contient des méthodes permettant de manipuler le dom

    /** Assigne l'attribut spécifié et sa valeur à l'élément spécifié. Si isStyle, l'ajoute en tant que que style */
    function setAttribute(element: HTMLElement, name: string, value: any, isStyle?: boolean): void
    /** Transforme un style en nombre */
    function parseStyleToNumber(style: string): number
    /** Supprime la classe contenant le préfix renseigné */
    function removeClassByPrefix(element: HTMLElement, prefix: string): void
    /** Assigne la propriété renseignée dans le style si la valeur est différente. Retourne true dans ce cas */
    function setStyle(element: HTMLElement, name: string, value: string): boolean
    /** Crée un composant `tag` contenant les attributs et l'enfant passés en paramètres */
    function createComponent(tag: string, attributes?: Record<string, unknown>, children?: TemplateResult): TemplateResult

SHADOWDOM

Contient des méthodes permettant de manipuler et de retrouver les shadowdom entre eux

    /** Retrouve le host du shadowTree de ce noeud. */
    function findHost<T extends Element = Element>(from: Node): T
    /** Retrouve le 1er DocumentOrShadowRoot ancêtre d'un noeud. */
    function findDocumentOrShadowRoot(from: Node): Document | ShadowRoot
    /** Retourne le parent, incluant la balise <slot> dans la chaîne. */
    function deepClosestElement(selector: string, base: Element): Element
    /** Retrouve l'activeElement en pénétrant tous les shadowDOM. */
    function findDeepActiveElement(from?: DocumentOrShadowRoot): Element
    /** Retrouve tous les éléments assignés dans les slot de l'élément courant. */
    function findAssignedElements(from: Element): Element[]
    /** Retrouve le ou les éléments assignés dans le slotName. */
    function findAssignedElementBySlotName(from: Element, slotName: string): Element | Element[]
    /** Retrouve les éléments spécifiés dans le selector en fonction du root ou du document. */
    function querySelectorAllDeep(selector: string, root?: Element | Document): Element[]
    /** Retrouve l'élément spécifié dans le selector en fonction du root ou du document. */
    function querySelectorDeep(selector: string, root?: Element | Document): Element

LOG

Permet de faire différents type de log dans la console JS

    /** Si false, aucun log n'est publié à l'exception du log error. True par défaut */
    showLog: boolean = true
    /** Si false, les logs de type info ne sont pas publiés. True par défaut */
    showInfoLog: boolean = true
    /** Si false, les logs de type debug ne sont pas publiés. True par défaut */
    showDebugLog: boolean = true
    /** Si false, les logs de type warning ne sont pas publiés. True par défaut */
    showWarnLog: boolean = true
    /** log classique avec le message renseigné et les données datas si elles existent. */
    function info(message: string, ...datas: any[]): void
    /** log de type debug avec le message renseigné et les données datas si elles existent. */
    function debug(message: string, ...datas: any[]): void
    /** log de type warn (marron sur fond jaune) avec le message renseigné et les données datas si elles existent. */
    function warn(message: string, ...datas: any[]): void
    /** log de type error (rouge sur fond rose) avec le message renseigné et les données datas si elles existent. */
    function error(message: string, ...datas: any[]): void

Il est également possible d’utiliser JSX en important le module JSX. Exemple :

    import { JSX } from 'wapitis'
    ...
    document.body.appendChild(<div>Contenu</div>)

Copyright © 2020 Nicolas Boyer. Distributed by an MIT license.