Pretext.JS

Pretext.js : Le moteur de mise en page de texte révolutionnaire sans DOM

Dans le développement web moderne, la mesure de texte est souvent un goulot d'étranglement majeur pour les performances. Pretext.js change la donne en proposant une bibliothèque Pure JS qui mesure et positionne le texte multiligne entièrement par calcul arithmétique. Avec Pretext.js, oubliez les appels coûteux à getBoundingClientRect(), les saccades de rendu (jank) et le gaspillage de ressources.

Qu'est-ce que Pretext.js ?

Pretext.js est un moteur de mise en page de texte conçu par Chenglou (ancien membre de l'équipe React). Contrairement aux approches traditionnelles qui forcent le navigateur à effectuer un rendu invisible pour calculer des dimensions, Pretext.js effectue ses mesures sans jamais toucher au DOM après l'initialisation.

Le moteur utilise l'API Canvas pour mesurer les segments de texte une seule fois, puis utilise des calculs mathématiques purs pour déterminer les sauts de ligne et la hauteur totale. C'est une solution TypeScript-first, ultra-légère et sans dépendances, capable de traiter 1 000 blocs de texte en environ 2ms, là où le DOM prendrait près de 100ms.

Caractéristiques principales de Pretext.js

L'adoption de Pretext.js apporte des avantages techniques significatifs pour les applications web exigeantes :

• Zéro lecture DOM : Une fois la phase de préparation terminée, chaque appel de mise en page est purement arithmétique. Aucun risque de déclencher un forced synchronous reflow.
• Métriques de polices réelles : En utilisant measureText() de Canvas, Pretext.js obtient les largeurs réelles des glyphes. Le résultat correspond exactement à ce que le navigateur afficherait.
• Multilingue par conception : Support complet de plus de 12 systèmes d'écriture, incluant le CJK (Chinois, Japonais, Coréen), l'Arabe, l'Hébreu, le Thaï et l'Hindi.
• Performance foudroyante : Capable d'être 500 fois plus rapide que les méthodes classiques. Un gain de performance indispensable pour maintenir 60 FPS.
• TypeScript-native : Écrit intégralement en TypeScript, offrant une autocomplétion précise et des types robustes sans packages @types externes.
• Zéro dépendance : Une bibliothèque légère qui n'alourdit pas votre bundle et utilise uniquement des API standards du navigateur.

Comment utiliser Pretext.js

L'intégration de Pretext.js dans votre projet se fait en trois étapes simples. Voici comment mesurer du texte sans toucher au DOM :

1. Installation

Installez la bibliothèque via votre gestionnaire de paquets préféré :

npm install @chenglou/pretext
# ou
pnpm add @chenglou/pretext

2. Préparation du texte

La fonction prepare segmente le texte selon les règles Unicode et mesure les segments via Canvas. Cette opération est effectuée une seule fois.

import { prepare, layout } from '@chenglou/pretext';

const handle = prepare(
  'Bonjour, Pretext.js — aucun reflow nécessaire.',
  '16px "Inter"'
);

3. Calcul de la mise en page

Utilisez la fonction layout pour obtenir la hauteur et le nombre de lignes instantanément pour n'importe quelle largeur de conteneur.

const { height, lineCount } = layout(
  handle,
  400,  // Largeur du conteneur en px
  24    // Hauteur de ligne (line-height) en px
);

console.log(height);    // Résultat immédiat

Cas d'utilisation (Use Cases)

Pretext.js brille là où les méthodes DOM traditionnelles échouent :

• Défilement virtuel (Virtual Scroll) : Affichez des listes de 10 000 éléments avec des hauteurs variables sans aucun ralentissement lors du scroll.
• Interfaces de Chat IA : Pré-calculez la hauteur des bulles de texte pour les réponses en streaming afin d'éliminer les sauts d'interface visuels gênants.
• Flux de contenu multilingue : Gérez des flux sociaux mélangeant diverses écritures (Arabe, Coréen, Latin) avec une précision parfaite et une seule passe de layout.
• Visualisations créatives : Créez des effets de texte complexes, comme du texte s'enroulant autour d'objets 3D ou d'obstacles dynamiques en temps réel.

"Pretext.js permet de faire ce que CSS Shapes ne peut pas faire : faire couler le texte des deux côtés d'un obstacle simultanément, le tout sans une seule lecture DOM."

FAQ (Foire aux questions)

Q : Pourquoi ne pas simplement utiliser getBoundingClientRect() ? R : Chaque appel à getBoundingClientRect() force le navigateur à recalculer le style et la mise en page (reflow), ce qui est extrêmement coûteux en performance, surtout dans des boucles de rendu.

Q : Est-ce que Pretext.js supporte les polices personnalisées ? R : Oui. Comme il utilise l'API Canvas du navigateur, il supporte toutes les polices chargées dans votre environnement web.

Q : Faut-il appeler prepare() à chaque changement de largeur ? R : Non. Un seul appel à prepare() suffit pour un texte et une police donnés. Vous pouvez ensuite appeler layout() avec différentes largeurs (mobile, tablette, bureau) de manière instantanée.

Q : Pretext.js est-il compatible avec React ou Vue ? R : Absolument. Étant agnostique au framework et sans dépendances, il s'intègre parfaitement dans n'importe quelle stack JavaScript ou TypeScript.