Charles

48K de likes, il a cracké X ce dimanche et tout le monde se demande à quoi ça peut servir. Cheng Lou, c'est l'ingénieur derrière react-motion (21K stars), ReasonML et le front-end de Messenger chez Meta. Il est aujourd'hui chez Midjourney où il gère tout le stack UI. Son pattern : trouver une contrainte que tout le monde accepte depuis des années, et la supprimer. Pretext n'est pas « juste une lib de plus qui mesure du texte ». C'est le missing piece qui fait passer le texte dynamique du statut « on se démerde » à « on peut enfin faire ce qu'on veut ». En temps normal, quand une app web veut savoir "ce paragraphe fait combien de pixels de haut ?", elle n'a pas le choix : elle doit l'injecter dans la page, puis demander au navigateur de le mesurer. Et le navigateur, pour mesurer un seul élément, recalcule la position de tous les éléments de la page. -> C'est le reflow. Fais ça 500 fois en alternant lectures et écritures, t'as 500 recalculs complets. C'est pour ça que les grosses listes de messages ou les éditeurs de texte rament. Pretext contourne le problème en deux temps. D'abord, une passe de préparation : la lib prend ton texte et ta police, et mesure la largeur de chaque mot directement via le moteur de fonts du navigateur (avec canvas.measureText()), sans jamais insérer quoi que ce soit dans la page. Elle stocke toutes ces largeurs en cache. Ça prend ~18ms pour 500 blocs de texte, et c'est fait une seule fois. Ensuite, à chaque fois que l'interface a besoin de recalculer le layout (redimensionnement de fenêtre, scroll, affichage dynamique), Pretext fait juste de l'arithmétique avec les largeurs en cache : additionner, trouver où couper les lignes, calculer les hauteurs. Zéro appel au navigateur, zéro reflow. C'est cette séparation qui fait tout. Le travail coûteux (mesurer) est fait une fois. Le travail récurrent (positionner au resize, au scroll) devient quasi gratuit -> c'est juste des additions. Messageries et feeds : le cas qui tue. Quand tu as une app type Slack, Discord, WhatsApp Web avec des milliers de messages, il faut virtualiser la liste (n'afficher que ce qui est visible à l'écran). Pour virtualiser, tu dois connaître la hauteur de chaque message avant de l'afficher. Aujourd'hui, soit tu devines (et le scroll saute), soit tu mesures via le DOM (et ça rame). Pretext te donne la hauteur sans rien rendre. Dans une démo partagée sur le thread X : 50 000 messages, 55ms au lieu de 11 secondes. > Éditeurs de texte : Notion, Google Docs, VS Code. Chaque frappe, chaque resize déclenche des recalculs de layout. Avec Pretext, tu peux prédire le rendu d'un paragraphe sans toucher au DOM. Ça rend possible des éditeurs qui restent fluides même sur des documents massifs. > Typographie avancée et design éditorial : le text wrapping autour d'objets, les layouts multi-colonnes dynamiques, le texte qui coule autour d'une forme. CSS Shapes fait un bout du chemin mais c'est limité et statique. Pretext permet de faire ça en temps réel, animé, à 60fps. La démo du dragon qui traverse du texte et les mots se réorganisent autour en temps réel, c'est ça. > Apps mobiles hybrides et Canvas/WebGL : pour tout ce qui rend du texte hors du DOM classique (jeux, dataviz, apps Canvas), mesurer du texte était galère. Pretext donne une API propre pour ça. En résumé, partout où une interface affiche beaucoup de texte dynamique et doit en connaître les dimensions sans le rendre, c'est un vrai saut. Ça ouvre aussi la porte à du responsive "intelligent" par exemple, décider à la volée si un texte tient sur une ligne ou s'il faut passer en layout multi-colonnes, sans jamais rendre un brouillon dans le DOM pour mesurer. Ça transforme un goulot d'étranglement fondamental du web en non-problème. open source, 15 kB, zéro dépendance.