Utilitaires
Afin de permettre d’accéder à certaines méthodes utiles, quatre modules ont été créés.
Table of contents
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>)