Moteur de template léger (fichier minifié : 920 octets)

Bonjour Niuxe,

Bonne initiative !

Par contre sur la démo il y a quelque chose de cassé, mais je ne sais pas où**. J'ai réussi à obtenir un rendu en neutralisant ce tag HTML :

<div id="target_b"></div>

Donc un problème avec la structure des données qui passe mal dans la boucle for ?

Une fois ce problème réglé il faudra aussi s'attaquer aux balises injectées qui ne sont pas interprétées :

<strong>Découvrez nos articles !</strong>

___
** Je ne peux rien tester, je bidouille à partir de mon smartphone car mon setup (totalement obsolète) est down depuis une semaine ... l'occasion de racheter une nouvelle unité centrale plus à jour .
Modifié par Olivier C (30 Jan 2025 - 04:45)

Pour les échappements j'ai trouvé : si l'on remplace les .textContent par des .innerHTML :

txtTplIndexPosts = tplIndexPosts.innerHTML,
txtTplUsersList = tplUsersList.innerHTML,

... et que l'on neutralise la regex permettant d'échapper les chevrons (intervention possible à deux endroits dans le code, ici on le fait au niveau de la fonction de rendu) :

return renderFunction(data, str => str.replace(/[&"']/g,

Alors le rendu sera correct (mais sans doute plus sécurisé pour tous les cas d'usage).

Il faudrait prévoir une option pour échapper ou non les chevrons, les moteurs de rendu font cela en général, au niveau de la variable elle-même à rendre dans le HTML. Exemple sous Pug.js : `=` vs `!=` (le point d'exclamation rend la variable sans échapper son contenu).

EDIT : ah mais tu l'avais fait ! C'est juste l'exemple où il y avait un oubli. Au final il m'a juste fallu remplacer ceci :

{%= description %}

Par cela :

{%- description %}

Modifié par Olivier C (30 Jan 2025 - 05:28)

bonjour Olivier

En effet, je viens de m'apercevoir de ce souci. Sur un serveur en local, je n'ai pas de problème. Je pense que ça vient de codepen.

Lors du développement de cette lib, j'ai eu quelques soucis avec l'élément <template>. J'ai eu des comportements douteux . Si j'utilise <table> dans <template>, l'objet à itérer n'est pas accessible. Avec <template>, il m'est arrivé régulièrement d'avoir des déboires avec. C'est la raison pour laquelle, j'utilise une meilleure alternative <script type="text/template>

Tu affiches la variable telle quelle :

{%- .... %}

Tu affiches la variable échappée :

{%= .... %}

C'est une expression JS :

{% .... %}

À noter que si par exemple, tu dois utiliser la méthode Array.join(), tu devras faire :

{%- ['a', 'b'].join(', ') %}

Ne pas oublier que ce moteur est une bicyclette.
Modifié par niuxe (30 Jan 2025 - 12:34)

J'ai pris 5 minutes pour retrouver gulp-html-extend : import mais pas 100% statique et ça me suffisait bien, à de nombreuses reprises. "9 years ago" ué et un peu plus

Je vois dans ta réponse à Olivier les possibilités : c'est flexible et répond aux besoins principaux.

3615 myproject Je ne connais pas encore exactement mon besoin, c'est probablement plus à base de <template> et... à voir. Des CSS injectées dans des pages, bookmarklets ou repris de bookmarklets, extension navigateur : c'est un bazar pour l'instant car je construis les morceaux avant de penser à comment les réunir ou harmoniser