Nodoj

Installation

Pour utiliser Nodoj, il suffit d’ajouter nodoj.js au projet et de le lier au HTML : <script src="nodoj.js"></script>.

Utilisation

Méthodes d’insertion dans le DOM

Ces méthodes reçoivent une liste d’objets élément (els) et un nœud DOM de référence (node). Elles insèrent les éléments créés dans le DOM et renvoient les nœuds créés sous forme de tableau.

• n.before(els, node) : insère els avant node.
• n.start(els, node) : insère els au début de node.
• n.inner(els, node) : remplace les enfants de node par els.
• n.end(els, node) : insère els à la fin de node.
• n.after(els, node) : insère els après node.
• n.replace(els, node) : remplace node lui‑même par els.

Méthodes utilitaires

Ces méthodes créent ou récupèrent des nœuds DOM sans insertion directe.

• n.temp(els) : crée des nœuds DOM à partir de els en mémoire, sans les insérer dans le DOM réel. Renvoie les nœuds créés sous forme de tableau.
• n.get(value) : récupère un élément du DOM par son identifiant (id).
• n.getClass(value) : récupère tous les éléments ayant la classe CSS donnée. Renvoie un tableau (copie statique) d’éléments.

Structure d’un objet élément (els)

Chaque objet dans le tableau els définit un nœud DOM à créer, avec des propriétés optionnelles pour spécifier la balise, le contenu, les attributs, les styles, les événements, les enfants, et des fonctions spéciales.

• tag (String) : nom de la balise HTML (par défaut : 'div').
• c (children, Array<Object>) : objets éléments imbriqués à ajouter comme enfants de ce nœud.
• className (Array<String> ou String) : classes CSS à affecter à element.className.
• style (Object ou String) : styles CSS à appliquer via element.style.
• on_nomÉvénement (Function) : fonction appelée lors de l’événement donné (ex. : on_click → événement click).
• data_clé (String) : définit l’attribut data-clé via element.dataset.
• _attribut (String, ou Array<String> pour _class) : définit l’attribut HTML correspondant (ex. : _id → attribut id, _href → attribut href, etc.).
• $nomFonction (Function ou [Function, ...args]) : fonction appelée sur l’élément après sa création. Elle est liée à l’élément (this), peut recevoir des arguments, et est attachée au nœud sous le même nom (ex. : el.$update()). Utile pour des mises à jour dynamiques ou une initialisation. Pour une initialisation immédiate, passer un tableau : la première valeur est la fonction, suivie de ses arguments.
• text (String) : si présent, crée un nœud texte avec ce contenu. Toutes les autres propriétés sont ignorées.
• comment (String) : si présent, crée un nœud commentaire avec ce contenu. Toutes les autres propriétés sont ignorées.
• svg, math (Boolean) : si true, crée un élément dans l’espace de noms SVG ou MathML (balise par défaut : 'svg' ou 'math').
• ns (String) : URI d’un espace de noms personnalisé (remplace SVG/MathML).
• Toute autre clé (String) : affectée directement comme propriété de l’élément DOM créé.

Démonstration (liste de tâches)

let tasks = [], uid = 0

const bt = (textContent, on_click) => ({
  tag: 'button', textContent, on_click
})

const addTask = txt => {
  const id = uid++
  const liId = `task_${id}`
  const nameId = `${liId}_name`
  tasks.push({id, txt})
  n.end([
    {id: liId, tag: 'li', c: [
      bt('Edit', () => {
        const task = tasks.find(t => t.id === id)
        task.txt = prompt('Modifier la tâche', task.txt)
        n.get(nameId).$edit(task.txt)
      }),
      bt('Supprimer', () => {
        tasks = tasks.filter(t => t.id !== id)
        n.get(liId).remove()
      }),
      {text: ' — '},
      {id: nameId, tag: 'span', $edit: [
        function (name) {this.textContent = name},
        txt
      ]}
    ]}
  ], n.get('todoList'))
}

n.start([
  {id: 'todoList', tag: 'ul'},
  bt('Nouvelle tâche…', () => {
    addTask(prompt('Ajouter une tâche'))
  })
], document.body)

const initTasks = ['Manger 🍭', 'Jouer 🛷', 'Dormir 🧸']
for (const task of initTasks) addTask(task)

Notes sur l’utilisation de els

On peut inclure null dans els pour ignorer conditionnellement un élément.
Si on insére un seul élément, l’envelopper dans un tableau est facultatif.

const show = true
n.start(
  show ? {text: 'Visible'} : null,
  document.body
)

Au‑delà de l’insertion DOM

Nodoj n’est pas un cadre de travail. Il ne gère ni état, ni réactivité, ni composants, ni routage. Il crée et insère simplement des nœuds DOM à partir d’objets déclaratifs. On contrôle entièrement la structure de notre application, en utilisant du JavaScript pur et le DOM réel — sans DOM virtuel ni couches d’abstraction.

Exemple de composant

const Component = node => n.start(
  {tag: 'h2', textContent: 'Bonjour depuis un composant'},
  node
)
Component(document.body)

Exemple de routage

const route = page =>
  n.inner({textContent: page}, document.body)
route('Accueil')

Exemple de gestion d’état

let value = 0
n.start([
  {id: 'count', $update: [
    function () {this.textContent = `${value} clic(s)`},
    value
  ]},
  {tag: 'button', textContent: '+', on_click: () => {
    value ++
    n.get('count').$update()
  }}
], document.body)