// --- Pourquoi un bundler ? ---
// 1. Regrouper des dizaines/centaines de modules en peu de fichiers (moins de requetes HTTP)
// 2. Transpiler la syntaxe moderne vers une syntaxe compatible avec les navigateurs cibles
// 3. Minifier (reduire la taille) et faire du tree-shaking (eliminer le code mort)
// 4. Gerer les assets (CSS, images, fonts) comme des dependances importables

// fichier source : index.js
import { formaterDate } from "./utils/dates.js";
import "./styles/main.css";               // les bundlers modernes gerent aussi le CSS
import logo from "./assets/logo.png";     // les images deviennent des URLs/imports

console.log(formaterDate(new Date()));

// --- esbuild : bundler/transpileur extremement rapide (ecrit en Go) ---
// esbuild.config.js
require("esbuild").build({
    entryPoints: ["src/index.js"],
    bundle: true,
    minify: true,
    sourcemap: true,
    outfile: "dist/bundle.js",
    target: ["es2020"],
});

// --- Vite : dev server ultra-rapide (ESM natif en dev) + Rollup pour le build de prod ---
// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
    build: {
        target: "es2020",
        sourcemap: true,
        rollupOptions: {
            output: {
                manualChunks: {
                    vendor: ["react", "react-dom"],    // code-splitting manuel
                },
            },
        },
    },
    server: {
        port: 3000,
    },
});

// --- Babel : transpilation de syntaxe moderne vers une syntaxe compatible anciens navigateurs ---
{
    "presets": [
        ["@babel/preset-env", { "targets": "> 0.25%, not dead" }]
    ]
}

// Exemple : Babel transforme les optional chaining/nullish coalescing modernes
// en equivalent compatible avec d'anciens moteurs JS

// Code source (moderne)
const ville = utilisateur?.adresse?.ville ?? "inconnue";

// Sortie transpilee (simplifiee, compatible ES5)
// var ville = (utilisateur != null && utilisateur.adresse != null)
//     ? (utilisateur.adresse.ville != null ? utilisateur.adresse.ville : "inconnue")
//     : "inconnue";

// --- Code-splitting : charger le JS uniquement quand necessaire ---
async function chargerGraphiques() {
    // le bundler cree un chunk SEPARE pour ce module, charge a la demande seulement
    const { tracerGraphique } = await import("./graphiques.js");
    tracerGraphique(document.querySelector("#canvas"));
}
document.querySelector("#bouton-stats")?.addEventListener("click", chargerGraphiques);

// --- Tree-shaking : eliminer le code jamais utilise ---
// fichier utils.js exporte 50 fonctions, mais seule "formaterDate" est importee ailleurs
// export function formaterDate(d) { ... }
// export function fonctionJamaisUtilisee() { ... }    // eliminee du bundle final par le bundler

// --- Source maps : deboguer le code transforme comme s'il etait source ---
// Un fichier .map associe chaque ligne du bundle minifie a sa position dans le fichier original,
// permettant au navigateur d'afficher le code source lisible dans les DevTools.

# --- npm scripts : orchestrer les taches de build ---
npm run build          # execute le script "build" defini dans package.json
npm run dev              # lance le serveur de developpement

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "jest",
    "lint": "eslint src/"
  }
}