Certains bugs résistent aux solutions élégantes. Vous les approchez avec des idées architecturales, des modifications de compilateur et des améliorations du runtime. Vous implémentez des solutions complexes. Elles ne fonctionnent pas. Et puis, après cinq à sept sessions de complexité croissante, vous découvrez que la correction est deux lignes de code qui n'utilisent que des API web standard.
Le bug du toggle de thème a consommé plus de temps d'ingénierie que n'importe quelle fonctionnalité individuelle de l'application, et la correction finale n'a nécessité zéro changement au compilateur, zéro changement à la VM et zéro changement au moteur de rendu.
Le problème était que le toggle de thème reposait sur un attribut data-theme sur l'élément <div> racine, mais le système de réactivité côté client de FLIN ne gérait que les liaisons de contenu texte et de visibilité, pas les liaisons d'attributs.
Après trois tentatives échouées (expressions ternaires, instructions séparées par points-virgules, querySelector avec guillemets), la solution est venue d'une lecture attentive de ce que le lexer de FLIN pouvait réellement gérer : le chaînage d'affectations avec la notation par points.
flinclick={document.body.firstElementChild.dataset.theme = theme = "dark"}Cette expression unique fait trois choses : définit la variable d'exécution FLIN, retourne la valeur, et l'assigne à l'attribut DOM. Pas de points-virgules. Pas de guillemets simples. Pas de querySelector. La correction a modifié exactement deux lignes de code dans un seul fichier.
Parfois la meilleure correction est celle qui ne nécessite aucun changement au système et travaille plutôt avec ce qui existe déjà.
Ceci est la partie 165 de la série « Comment nous avons construit FLIN », documentant comment un CEO à Abidjan et un CTO IA ont conçu et construit un langage de programmation à partir de zéro.
Navigation de la série : - [164] Correction de la résolution des fonctions de bibliothèque - [165] Le bug du toggle de thème (vous êtes ici) - [166] Le bug de la méthode Entity .get()