TemplateEngine 1.1.1 déployé (ajout de 2 extensions)

Bonjour tout le monde,

La semaine dernière, j’ai publié sur npm la version 1.1.1 (l'invasion des uns) de ma petite librairie ultra légère :
@niuxe/template-engine

Cette mise à jour apporte des améliorations autour des partials, avec l’ajout de deux extensions complémentaires.

Partials dynamiques

Il est désormais possible de choisir dynamiquement le partial à rendre en fonction des données :

import { TemplateEngine } from "@niuxe/template-engine"
import { PartialsPlugin, DynamicPartialsPlugin } from "@niuxe/template-engine/plugins"

const engine = new TemplateEngine()
  .use(PartialsPlugin)
  .use(DynamicPartialsPlugin)

engine.partial('imageCard', '<div class="image">Image</div>')
engine.partial('videoCard', '<div class="video">Video</div>')
engine.partial('textCard', '<div class="text">Texte</div>')

const items = engine.render(`
  [[ items.forEach(item => { ]]
    [[> (item.type) ]]
  [[ }) ]]
`, {
  items: [
    { type: 'imageCard' },
    { type: 'videoCard' },
    { type: 'textCard' }
  ]
})

console.log(items)

Partials paramétrés

Les partials peuvent maintenant accepter des paramètres, ce qui permet de créer de vrais composants réutilisables :

import { TemplateEngine } from "@niuxe/template-engine"
import { PartialsPlugin, ParamsPartialsPlugin } from "@niuxe/template-engine/plugins"

const engine = new TemplateEngine()
  .use(PartialsPlugin)
  .use(ParamsPartialsPlugin)

// Composant bouton réutilisable
engine.partial('button', `
  <button class="btn btn-[[= variant ]] btn-[[= size ]]" type="[[= type ]]">
    [[= label ]]
  </button>
`)

const html = engine.render(`
  [[> button variant="primary" size="large" type="submit" label="Save Changes" ]]
  [[> button variant="secondary" size="small" type="button" label="Cancel" ]]
`, {})

console.log(html)

Autre exemple avec un composant d’alerte :

engine.partial('alert', `
  <div class="alert alert-[[= type ]]" role="alert">
    [[= message ]]
  </div>
`)

const alerts = engine.render(`
  [[> alert type="success" message="Operation successful!" ]]
  [[> alert type="warning" message="Please be careful" ]]
  [[> alert type="error" message="Something went wrong" ]]
`, {})

console.log(alerts)

N’hésitez pas à jeter un œil, tester, ou faire des retours. Vos avis sont toujours les bienvenus

Bonne journée à tous !
Modifié par Niuxe (28 Jan 2026 - 15:11)