Modules ES et classes : organiser le code

// js/stock.js
export const REF_VALIDE = /^[A-Z]{3}-\d{2,3}$/;

export function estEnAlerte(piece) {
  return piece.quantite <= piece.seuil;
}

export function valeurStock(pieces) {
  return pieces.reduce((total, p) => total + p.quantite * p.prix, 0);
}

function outilInterne() {
  // pas exportée : invisible depuis les autres fichiers
}

// js/vue.js
import { estEnAlerte, valeurStock } from './stock.js';

<script type="module" src="js/main.js"></script>

gestock/
├── index.html             la page, donnée en entier plus bas
├── package.json           créé par Vite : scripts dev, build et preview
├── public/
│   └── data/
│       └── pieces.json    le stock de départ, copié tel quel dans dist/
└── js/
    ├── main.js            point d'entrée : état, écouteurs, démarrage
    ├── stock.js           règles métier, aucun accès au DOM
    ├── vue.js             affichage : construit les éléments du DOM
    ├── stockage.js        localStorage et JSON
    ├── api.js             fetch, statut HTTP, délai maximal
    └── stock.test.js      tests de stock.js (chapitre 14)

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gestock : le stock de Réparinfo</title>
  <style>
    tr.alerte { background: #fdecee; font-weight: 600; }
    .erreur { color: #b00020; margin: 0 0 0.75rem; }
    input[aria-invalid="true"] { border-color: #b00020; }
  </style>
</head>
<body>
  <header>
    <h1>Gestock</h1>
    <p id="resume" aria-live="polite"></p>
  </header>

  <main>
    <section aria-labelledby="titre-liste">
      <h2 id="titre-liste">Pièces en stock</h2>
      <label for="recherche">Rechercher une pièce</label>
      <input type="search" id="recherche" autocomplete="off">
      <input type="checkbox" id="alertes-seules">
      <label for="alertes-seules">Seulement les pièces en alerte</label>

      <table>
        <thead>
          <tr>
            <th scope="col">Référence</th>
            <th scope="col">Nom</th>
            <th scope="col">Quantité</th>
            <th scope="col">Prix</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody id="liste-pieces"></tbody>
      </table>
    </section>

    <section aria-labelledby="titre-ajout">
      <h2 id="titre-ajout">Ajouter une pièce</h2>
      <form id="form-piece" novalidate>
        <label for="ref">Référence</label>
        <input id="ref" name="ref" required aria-describedby="erreur-ref">
        <p id="erreur-ref" class="erreur"></p>

        <label for="nom">Nom</label>
        <input id="nom" name="nom" required maxlength="60" aria-describedby="erreur-nom">
        <p id="erreur-nom" class="erreur"></p>

        <label for="categorie">Catégorie</label>
        <select id="categorie" name="categorie" aria-describedby="erreur-categorie">
          <option>Stockage</option>
          <option>Mémoire</option>
          <option>Alimentation</option>
          <option>Écran</option>
          <option>Consommable</option>
        </select>
        <p id="erreur-categorie" class="erreur"></p>

        <label for="quantite">Quantité</label>
        <input id="quantite" name="quantite" inputmode="numeric" required aria-describedby="erreur-quantite">
        <p id="erreur-quantite" class="erreur"></p>

        <label for="seuil">Seuil d'alerte</label>
        <input id="seuil" name="seuil" inputmode="numeric" required aria-describedby="erreur-seuil">
        <p id="erreur-seuil" class="erreur"></p>

        <label for="prix">Prix unitaire (€)</label>
        <input id="prix" name="prix" inputmode="decimal" required aria-describedby="erreur-prix">
        <p id="erreur-prix" class="erreur"></p>

        <button type="submit">Ajouter</button>
      </form>
      <p id="message" role="status"></p>
    </section>
  </main>

  <script type="module" src="js/main.js"></script>
</body>
</html>

// Les règles métier de Gestock : aucun accès au DOM ni au navigateur.

export const REF_VALIDE = /^[A-Z]{3}-\d{2,3}$/;

// Transforme « 42,9 » ou « 42.9 » en nombre ; NaN si la saisie n'est pas un nombre.
export function lireNombre(saisie) {
  const texte = String(saisie).trim().replace(',', '.');
  return texte === '' ? NaN : Number(texte);
}

export function estEnAlerte(piece) {
  return piece.quantite <= piece.seuil;
}

export function valeurStock(pieces) {
  return pieces.reduce((total, p) => total + p.quantite * p.prix, 0);
}

export function filtrerPieces(pieces, texte = '', alertesSeules = false) {
  const recherche = texte.trim().toLowerCase();
  return pieces.filter((p) => {
    const correspond =
      p.nom.toLowerCase().includes(recherche) || p.ref.toLowerCase().includes(recherche);
    return correspond && (!alertesSeules || estEnAlerte(p));
  });
}

export function ajusterQuantite(pieces, ref, delta) {
  return pieces.map((p) =>
    p.ref === ref ? { ...p, quantite: Math.max(0, p.quantite + delta) } : p,
  );
}

// Renvoie un objet { champ: message } : vide si la saisie est valide.
export function validerPiece(saisie, pieces) {
  const erreurs = {};
  const ref = saisie.ref.trim().toUpperCase();
  if (!REF_VALIDE.test(ref)) {
    erreurs.ref = 'Format attendu : trois lettres, un tiret, 2 ou 3 chiffres (ex. SSD-512).';
  } else if (pieces.some((p) => p.ref === ref)) {
    erreurs.ref = `La référence ${ref} existe déjà.`;
  }
  const nom = saisie.nom.trim();
  if (nom.length < 2 || nom.length > 60) {
    erreurs.nom = 'Le nom doit faire entre 2 et 60 caractères.';
  }
  const quantite = lireNombre(saisie.quantite);
  if (!Number.isInteger(quantite) || quantite < 0) {
    erreurs.quantite = 'La quantité est un nombre entier positif ou nul.';
  }
  const seuil = lireNombre(saisie.seuil);
  if (!Number.isInteger(seuil) || seuil < 0) {
    erreurs.seuil = "Le seuil d'alerte est un nombre entier positif ou nul.";
  }
  const prix = lireNombre(saisie.prix);
  if (!(prix > 0)) {
    erreurs.prix = 'Le prix est un nombre strictement positif.';
  }
  return erreurs;
}

export function creerPiece(saisie) {
  return {
    ref: saisie.ref.trim().toUpperCase(),
    nom: saisie.nom.trim(),
    categorie: saisie.categorie,
    quantite: lireNombre(saisie.quantite),
    seuil: lireNombre(saisie.seuil),
    prix: lireNombre(saisie.prix),
  };
}

[
  { "ref": "SSD-512", "nom": "SSD NVMe 512 Go", "categorie": "Stockage", "quantite": 12, "seuil": 5, "prix": 42.9 },
  { "ref": "RAM-16", "nom": "Barrette DDR4 16 Go", "categorie": "Mémoire", "quantite": 3, "seuil": 4, "prix": 38.5 },
  { "ref": "CHG-65", "nom": "Chargeur USB-C 65 W", "categorie": "Alimentation", "quantite": 0, "seuil": 2, "prix": 24 },
  { "ref": "ECR-156", "nom": "Dalle 15,6 pouces", "categorie": "Écran", "quantite": 2, "seuil": 1, "prix": 89 },
  { "ref": "PAT-01", "nom": "Pâte thermique", "categorie": "Consommable", "quantite": 25, "seuil": 10, "prix": 6.5 }
]

// Point d'entrée : l'état de l'application, les écouteurs, le démarrage.
import { filtrerPieces, ajusterQuantite, validerPiece, creerPiece } from './stock.js';
import { afficherPieces, afficherResume, afficherErreurs } from './vue.js';
import { chargerPieces, sauvegarderPieces } from './stockage.js';
import { chargerPiecesApi } from './api.js';

const etat = { pieces: [], recherche: '', alertesSeules: false };

const tbody = document.querySelector('#liste-pieces');
const resume = document.querySelector('#resume');
const champRecherche = document.querySelector('#recherche');
const caseAlertes = document.querySelector('#alertes-seules');
const form = document.querySelector('#form-piece');
const message = document.querySelector('#message');

function rafraichir() {
  afficherPieces(tbody, filtrerPieces(etat.pieces, etat.recherche, etat.alertesSeules));
  afficherResume(resume, etat.pieces);
}

function modifierStock(pieces) {
  etat.pieces = pieces;
  sauvegarderPieces(etat.pieces);
  rafraichir();
}

champRecherche.addEventListener('input', () => {
  etat.recherche = champRecherche.value;
  rafraichir();
});

caseAlertes.addEventListener('change', () => {
  etat.alertesSeules = caseAlertes.checked;
  rafraichir();
});

// Délégation : un seul écouteur pour tous les boutons + et − du tableau.
tbody.addEventListener('click', (event) => {
  const b = event.target.closest('button[data-action]');
  if (!b) return;
  const { action, ref } = b.dataset;
  modifierStock(ajusterQuantite(etat.pieces, ref, action === 'ajouter' ? 1 : -1));
  // Le tableau a été reconstruit : on rend le focus au même bouton (chapitre 13).
  tbody.querySelector(`button[data-ref="${ref}"][data-action="${action}"]`)?.focus();
});

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const saisie = Object.fromEntries(new FormData(form));
  const erreurs = validerPiece(saisie, etat.pieces);
  afficherErreurs(form, erreurs);
  if (Object.keys(erreurs).length > 0) {
    message.textContent = 'Le formulaire contient des erreurs.';
    return;
  }
  const piece = creerPiece(saisie);
  modifierStock([...etat.pieces, piece]);
  form.reset();
  message.textContent = `Pièce ${piece.ref} ajoutée.`;
});

async function demarrer() {
  const enregistrees = chargerPieces(null);
  if (enregistrees !== null) {
    etat.pieces = enregistrees;
    rafraichir();
    return;
  }
  resume.textContent = 'Chargement du stock…';
  try {
    modifierStock(await chargerPiecesApi('data/pieces.json'));
  } catch (erreur) {
    resume.textContent = `Impossible de charger le stock : ${erreur.message}`;
  }
}

demarrer();

// L'affichage : transforme les données en éléments du DOM.
import { estEnAlerte, valeurStock } from './stock.js';

const euros = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' });

function cellule(texte) {
  const td = document.createElement('td');
  td.textContent = texte;
  return td;
}

function bouton(texte, action, piece) {
  const b = document.createElement('button');
  b.type = 'button';
  b.textContent = texte;
  b.dataset.action = action;
  b.dataset.ref = piece.ref;
  b.setAttribute('aria-label', `${action === 'retirer' ? 'Retirer' : 'Ajouter'} une unité : ${piece.nom}`);
  return b;
}

export function lignePiece(piece) {
  const tr = document.createElement('tr');
  if (estEnAlerte(piece)) tr.classList.add('alerte');
  const actions = document.createElement('td');
  actions.append(bouton('−', 'retirer', piece), bouton('+', 'ajouter', piece));
  tr.append(
    cellule(piece.ref),
    cellule(piece.nom),
    cellule(String(piece.quantite)),
    cellule(euros.format(piece.prix)),
    actions,
  );
  return tr;
}

export function afficherPieces(tbody, pieces) {
  if (pieces.length === 0) {
    const tr = document.createElement('tr');
    const td = cellule('Aucune pièce ne correspond à ta recherche.');
    td.colSpan = 5;
    tr.append(td);
    tbody.replaceChildren(tr);
    return;
  }
  tbody.replaceChildren(...pieces.map(lignePiece));
}

export function afficherResume(element, pieces) {
  const nbAlertes = pieces.filter(estEnAlerte).length;
  element.textContent =
    `${pieces.length} références, ${nbAlertes} en alerte, ` +
    `valeur du stock : ${euros.format(valeurStock(pieces))}`;
}

export function afficherErreurs(form, erreurs) {
  for (const champ of form.querySelectorAll('input, select')) {
    const message = erreurs[champ.name] ?? '';
    const zone = form.querySelector(`#erreur-${champ.name}`);
    if (zone) zone.textContent = message;
    champ.setAttribute('aria-invalid', message ? 'true' : 'false');
  }
  const premier = form.querySelector('[aria-invalid="true"]');
  if (premier) premier.focus();
}

npm install dompurify

import DOMPurify from 'dompurify';   // un nom de paquet, sans ./ ni extension

boutonExport.addEventListener('click', async () => {
  const { exporterPdf } = await import('./export-pdf.js');
  exporterPdf(etat.pieces);
});

// CommonJS (Node.js, code ancien)
const { valeurStock } = require('./stock.js');
module.exports = { estEnAlerte };

class Piece {
  static REF_VALIDE = /^[A-Z]{3}-\d{2,3}$/;   // propriété de la classe elle-même
  #quantite;                                  // champ privé : inaccessible hors de la classe

  constructor({ ref, nom, quantite = 0, seuil = 0, prix }) {
    if (!Piece.REF_VALIDE.test(ref)) {
      throw new Error(`Référence invalide : ${ref}`);
    }
    this.ref = ref;
    this.nom = nom;
    this.#quantite = quantite;
    this.seuil = seuil;
    this.prix = prix;
  }

  get quantite() {           // accesseur : se lit comme une propriété
    return this.#quantite;
  }

  get enAlerte() {
    return this.#quantite <= this.seuil;
  }

  retirer(n = 1) {
    if (n > this.#quantite) {
      throw new Error(`Stock insuffisant pour ${this.ref} : ${this.#quantite} disponible(s)`);
    }
    this.#quantite -= n;
  }

  ajouter(n = 1) {
    this.#quantite += n;
  }

  toJSON() {                 // utilisée automatiquement par JSON.stringify
    return { ref: this.ref, nom: this.nom, quantite: this.#quantite, seuil: this.seuil, prix: this.prix };
  }
}

const ram = new Piece({ ref: 'RAM-16', nom: 'Barrette DDR4 16 Go', quantite: 3, seuil: 4, prix: 38.5 });
ram.quantite;        // 3
ram.enAlerte;        // true
ram.ajouter(2);
ram.enAlerte;        // false
ram.retirer(10);     // Error: Stock insuffisant pour RAM-16 : 5 disponible(s)
ram.quantite = 99;   // dans un module : TypeError: Cannot set property quantite of #<Piece> which has only a getter
JSON.stringify(ram); // '{"ref":"RAM-16","nom":"Barrette DDR4 16 Go","quantite":5,"seuil":4,"prix":38.5}'

class PieceReconditionnee extends Piece {
  constructor(donnees) {
    super(donnees);
    this.garantieMois = donnees.garantieMois ?? 6;
  }

  get libelle() {
    return `${this.nom} (reconditionné, garantie ${this.garantieMois} mois)`;
  }

  toJSON() {
    return { ...super.toJSON(), garantieMois: this.garantieMois };
  }
}

const ecran = new PieceReconditionnee({ ref: 'ECR-140', nom: 'Dalle 14 pouces', quantite: 1, seuil: 1, prix: 45 });
ecran.libelle;               // 'Dalle 14 pouces (reconditionné, garantie 6 mois)'
ecran.enAlerte;              // true : hérité de Piece
ecran instanceof Piece;      // true