La console du navigateur et ses fonctions

Gérer Jurassic Park n'est pas une tâche facile. Quand des problèmes surgissent dans le système de suivi des dinosaures ou qu'on doit diagnostiquer rapidement pourquoi le protocole de confinement ne démarre pas correctement, le débogage est une compétence essentielle. L'un des outils de diagnostic les plus importants en JavaScript est la console du navigateur.

Dans cet exercice, nous allons découvrir un outil qui sera ton meilleur ami pour rechercher et résoudre les problèmes - la console de développement du navigateur.

Ouvrir la console de développement

Avant de commencer à utiliser la console, il faut savoir comment l'ouvrir :

• Chrome/Edge : <kbd>F12</kbd> ou <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>J</kbd> (Mac)
• Firefox : <kbd>F12</kbd> ou <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>K</kbd> (Mac)
• Safari : <kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>C</kbd> (tu dois d'abord activer les outils de développement dans les réglages)

Après l'ouverture, tu verras plusieurs onglets, dont « Console ». C'est là que nous allons nous concentrer.

Fonctions de base de la console

1. console.log() - ton meilleur ami

La fonction de console la plus utilisée est console.log(). Elle affiche des valeurs dans la console, ce qui est indispensable pendant le débogage :

1// Afficher des valeurs simples
2console.log("Système de suivi des dinosaures démarré");
3console.log(42); // nombre
4console.log(true); // valeur booléenne
5
6// Afficher plusieurs valeurs en même temps
7const dinosaur = { name: "Rex", type: "T-Rex", status: "contained" };
8console.log("Données du dinosaure :", dinosaur, "Mise à jour :", new Date());
9
10// Interpolation de chaîne
11const sector = "B7";
12const threat = "high";
13console.log(`Dinosaure détecté dans le secteur ${sector}. Niveau de menace : ${threat}`);

Dans notre système Jurassic Park, on peut utiliser console.log() pour suivre divers événements :

1function trackDinosaur(id, location) {
2  console.log(`Suivi du dinosaure #${id} à l'emplacement ${location}`);
3
4  // Logique de suivi...
5  const status = checkContainment(id);
6
7  if (status !== "contained") {
8    console.log(`ALERTE : Le dinosaure #${id} n'est pas dans son enclos ! État actuel : ${status}`);
9  }
10
11  return status;
12}

2. console.error(), console.warn(), console.info()

En plus du log standard, on dispose de méthodes spéciales pour différents niveaux de message :

1// Erreurs - généralement affichées en rouge
2console.error("ERREUR CRITIQUE : Panne du système de clôtures dans le secteur du T-Rex !");
3
4// Avertissements - généralement affichés en jaune
5console.warn("Avertissement : Le niveau de batterie du capteur de mouvement descend en dessous de 20%");
6
7// Info - souvent distingué des logs ordinaires
8console.info("Info : Révision technique du système prévue demain à 8h00");

Les utiliser aide à distinguer visuellement les types de messages dans la console, ce qui est particulièrement important quand on gère de grands volumes de logs.

3. console.table() - affichage propre de données tabulaires

Quand on manipule des tableaux d'objets, console.table() est précieux :

1// Tableau des dinosaures de notre parc
2const dinosaurs = [
3  { id: 1, name: "Rex", species: "T-Rex", danger: 9, location: "Enclos A" },
4  { id: 2, name: "Blue", species: "Velociraptor", danger: 8, location: "Enclos B" },
5  { id: 3, name: "Delta", species: "Velociraptor", danger: 8, location: "Enclos B" },
6  { id: 4, name: "Echo", species: "Velociraptor", danger: 7, location: "Enclos B" },
7  { id: 5, name: "Trike", species: "Triceratops", danger: 4, location: "Enclos C" }
8];
9
10// Affiche un beau tableau avec les données
11console.table(dinosaurs);
12
13// On peut aussi sélectionner des colonnes précises
14console.table(dinosaurs, ["name", "species", "danger"]);

C'est particulièrement utile pour l'analyse de données, la vérification des résultats de requêtes API ou l'examen de configurations.

4. console.group() - regrouper les logs

Quand on a de nombreux logs liés entre eux, on peut les regrouper pour plus de clarté :

1// Surveillance d'un dinosaure précis
2function monitorDinosaur(dinosaur) {
3  console.group(`Surveillance : ${dinosaur.name} (${dinosaur.species})`);
4
5  console.log(`Emplacement : ${dinosaur.location}`);
6  console.log(`Niveau de danger : ${dinosaur.danger}/10`);
7
8  const healthStatus = checkHealth(dinosaur.id);
9  console.log(`État de santé : ${healthStatus.status}`);
10
11  if (healthStatus.issues.length > 0) {
12    console.warn(`Problèmes de santé détectés : ${healthStatus.issues.join(', ')}`);
13  }
14
15  const securityStatus = checkSecurity(dinosaur.location);
16  console.log(`État de sécurité : ${securityStatus.status}`);
17
18  if (securityStatus.issues.length > 0) {
19    console.error(`Problèmes de sécurité : ${securityStatus.issues.join(', ')}`);
20  }
21
22  console.groupEnd();
23
24  return { healthStatus, securityStatus };
25}
26
27// Le regroupement peut aussi être imbriqué
28function monitorAllDinosaurs(dinosaurs) {
29  console.group('Surveillance de tous les dinosaures');
30
31  dinosaurs.forEach(dino => {
32    monitorDinosaur(dino);
33  });
34
35  console.groupEnd();
36}
37
38monitorAllDinosaurs(dinosaurs);

Tu peux aussi démarrer un groupe replié avec console.groupCollapsed(), ce qui est utile quand il y a beaucoup de groupes.

5. console.time() et console.timeEnd() - mesurer le temps d'exécution

Parfois, on doit savoir combien de temps prennent certaines opérations :

1// Mesure du temps de chargement d'un module
2console.time('Chargement du module de suivi');
3
4loadTrackingModule()
5  .then(() => {
6    console.timeEnd('Chargement du module de suivi');
7    // Affiche par ex. : "Chargement du module de suivi: 235.41ms"
8  });
9
10// On peut avoir plusieurs chronomètres en parallèle
11console.time('Initialisation du système');
12console.time('Traitement des données');
13
14initSystem()
15  .then(() => {
16    console.timeEnd('Initialisation du système');
17    return processData();
18  })
19  .then(() => {
20    console.timeEnd('Traitement des données');
21  });

C'est extrêmement utile pour identifier les goulots d'étranglement dans les applications et optimiser les performances.

6. console.trace() - tracer la pile d'appels

Quand tu ne sais pas exactement d'où une fonction a été appelée :

1function monitorFenceStatus(sectorId) {
2  console.trace(`Vérification de l'état des clôtures dans le secteur ${sectorId}`);
3  // Reste du code...
4}
5
6function checkAllFences() {
7  const sectors = ['A1', 'B2', 'C3'];
8  sectors.forEach(monitorFenceStatus);
9}
10
11function dailySecurityCheck() {
12  checkAllFences();
13}
14
15dailySecurityCheck();

console.trace() affichera la pile d'appels complète, montrant le chemin d'exécution exact, ce qui est précieux pour déboguer des appels complexes.

7. console.assert() - messages de débogage conditionnels

Vérifie une condition et affiche une erreur quand la condition est fausse :

1function feedDinosaur(dinosaur, foodAmount) {
2  // S'assure que la quantité de nourriture est suffisante pour l'espèce
3  console.assert(
4    foodAmount >= getMinimumFoodRequirement(dinosaur.species),
5    `Nourriture insuffisante pour ${dinosaur.name} ! ` +
6    `Minimum requis : ${getMinimumFoodRequirement(dinosaur.species)}kg, ` +
7    `Fourni : ${foodAmount}kg`
8  );
9
10  // Reste du code...
11}
12
13feedDinosaur(dinosaurs[0], 5); // Si 5 kg c'est trop peu, on verra une erreur

C'est utile pour détecter tôt les problèmes potentiels sans arrêter l'exécution du programme.

8. console.count() - compter les appels

Compter combien de fois une fonction ou un bloc de code a été appelé :

1function checkFenceVoltage(sectorId) {
2  console.count(`Vérification de tension dans le secteur ${sectorId}`);
3  // Reste du code...
4}
5
6// Simule des vérifications régulières
7setInterval(() => checkFenceVoltage('A1'), 5000);
8setInterval(() => checkFenceVoltage('B2'), 8000);

Après chaque appel, on verra dans la console quelque chose comme :

1Vérification de tension dans le secteur A1: 1
2Vérification de tension dans le secteur A1: 2
3Vérification de tension dans le secteur B2: 1
4Vérification de tension dans le secteur A1: 3

On peut réinitialiser le compteur avec console.countReset('name').

9. console.dir() - afficher les propriétés d'un objet

Quand on veut voir la structure complète d'un objet :

1const parkSystem = {
2  name: "Jurassic Park",
3  sectors: {
4    A: { dinosaurs: [/*...*/], status: "secure" },
5    B: { dinosaurs: [/*...*/], status: "alert" }
6  },
7  security: {
8    fences: { status: "online", voltage: 10000 },
9    cameras: { operational: 45, offline: 3 }
10  }
11};
12
13// Affiche une structure d'objet interactive et dépliable
14console.dir(parkSystem);

Cette fonction est particulièrement utile pour les objets complexes, car elle permet de parcourir les propriétés imbriquées.

10. Mise en forme des messages de la console

La console prend aussi en charge une mise en forme de base avec des spécificateurs de format :

1// Styliser du texte avec du CSS
2console.log(
3  "%cAVERTISSEMENT ! %cNiveau de danger critique %cdans le secteur B !",
4  "color: red; font-size: 20px; font-weight: bold;",
5  "color: orange; font-size: 16px;",
6  "color: black; font-weight: bold;"
7);
8
9// Afficher des variables dans un message
10console.log("Le dinosaure %s a un niveau de danger de %d", "Rex", 9);

Fonctionnalités avancées de la console

1. Filtrer les messages

La plupart des consoles de navigateur permettent de filtrer les messages affichés. On peut filtrer par :

• Niveau (Error, Warning, Info, Log)
• Texte (en tapant une expression de recherche)
• Source (par ex. uniquement depuis un fichier précis)

C'est extrêmement utile quand on gère de grands volumes de logs.

2. Sauvegarder dans un fichier

Les messages de la console peuvent généralement être sauvegardés dans un fichier, ce qui est utile pour l'analyse des logs :

1. Clic droit dans la console
2. Sélectionne « Enregistrer sous... »

3. Vider la console

La console peut être vidée de plusieurs façons :

• En cliquant sur l'icône de cercle barré dans la console
• En appuyant sur <kbd>Ctrl</kbd>+<kbd>L</kbd> (quand la console est active)
• Avec du code : console.clear()

4. La console comme environnement REPL

La console du navigateur fonctionne aussi comme un REPL (Read-Eval-Print Loop), ce qui signifie qu'on peut y exécuter du code JavaScript directement :

1// Directement dans la console
2const dinos = [{name: "Rex"}, {name: "Blue"}];
3dinos.filter(d => d.name === "Blue");
4
5// Définir des fonctions
6function alertSecurity(message) {
7  return `[ALERTE SÉCURITÉ] ${message} - ${new Date().toISOString()}`;
8}
9
10// Utiliser la fonction
11alertSecurity("Brèche dans la clôture du secteur C2");

C'est extrêmement utile pour tester de petits extraits de code ou déboguer sans modifier le code source.

Implémentation pratique dans notre système Jurassic Park

Créons une implémentation pratique d'un système de journalisation pour notre Jurassic Park qui exploite diverses fonctions de la console :

1// Logger pour le système Jurassic Park
2class JurassicLogger {
3  constructor(moduleName) {
4    this.moduleName = moduleName;
5    this.logCount = 0;
6    this.errorCount = 0;
7    this.warnCount = 0;
8  }
9
10  log(...args) {
11    this.logCount++;
12    console.log(`[${this.moduleName}] `, ...args);
13  }
14
15  error(...args) {
16    this.errorCount++;
17    console.error(`[${this.moduleName}] ERREUR :`, ...args);
18  }
19
20  warn(...args) {
21    this.warnCount++;
22    console.warn(`[${this.moduleName}] AVERTISSEMENT :`, ...args);
23  }
24
25  info(...args) {
26    console.info(`[${this.moduleName}] INFO :`, ...args);
27  }
28
29  startGroup(label) {
30    console.group(`[${this.moduleName}] ${label}`);
31  }
32
33  endGroup() {
34    console.groupEnd();
35  }
36
37  startTimer(label) {
38    console.time(`[${this.moduleName}] ${label}`);
39  }
40
41  endTimer(label) {
42    console.timeEnd(`[${this.moduleName}] ${label}`);
43  }
44
45  table(data, columns) {
46    console.log(`[${this.moduleName}] Données tabulaires :`);
47    console.table(data, columns);
48  }
49
50  getStats() {
51    return {
52      moduleName: this.moduleName,
53      logs: this.logCount,
54      errors: this.errorCount,
55      warnings: this.warnCount
56    };
57  }
58
59  trace(message) {
60    console.log(`[${this.moduleName}] TRACE : ${message}`);
61    console.trace();
62  }
63
64  assert(condition, message) {
65    console.assert(condition, `[${this.moduleName}] Assertion échouée : ${message}`);
66  }
67
68  // Mise en forme spéciale pour les alertes de sécurité
69  securityAlert(message, level = 'warning') {
70    const styles = {
71      warning: "background: #FFA500; color: black; padding: 2px 5px; border-radius: 3px;",
72      critical: "background: #FF0000; color: white; padding: 2px 5px; border-radius: 3px; font-weight: bold;",
73      info: "background: #0066FF; color: white; padding: 2px 5px; border-radius: 3px;"
74    };
75
76    console.log(
77      `%c[${this.moduleName}] ALERTE SÉCURITÉ %c${message}`,
78      styles[level] || styles.warning,
79      "color: black;"
80    );
81  }
82}
83
84// Exemple d'utilisation
85const securityLogger = new JurassicLogger('ParkSecurity');
86const dinosaurLogger = new JurassicLogger('DinosaurTracker');
87const systemLogger = new JurassicLogger('MainSystem');
88
89// Initialisation du système
90systemLogger.startTimer('Initialisation du système');
91systemLogger.log("Démarrage de l'initialisation du système Jurassic Park...");
92
93setTimeout(() => {
94  systemLogger.info('Sous-systèmes démarrés');
95  systemLogger.endTimer('Initialisation du système');
96
97  // Informations sur les dinosaures
98  const dinoData = [
99    { id: 'TRX-01', name: 'Rex', species: 'T-Rex', status: 'contained', healthLevel: 92 },
100    { id: 'VEL-01', name: 'Blue', species: 'Velociraptor', status: 'contained', healthLevel: 87 },
101    { id: 'VEL-02', name: 'Delta', species: 'Velociraptor', status: 'sedated', healthLevel: 65 },
102    { id: 'TRI-01', name: 'Sarah', species: 'Triceratops', status: 'contained', healthLevel: 95 }
103  ];
104
105  dinosaurLogger.startGroup("Rapport d'état des dinosaures");
106  dinosaurLogger.table(dinoData);
107
108  // Vérifie la santé des dinosaures
109  dinoData.forEach(dino => {
110    dinosaurLogger.startGroup(`Dinosaure : ${dino.name}`);
111
112    if (dino.healthLevel < 70) {
113      dinosaurLogger.warn(`Le niveau de santé du dinosaure ${dino.name} est bas : ${dino.healthLevel}%`);
114    } else {
115      dinosaurLogger.log(`État de santé : ${dino.healthLevel}%`);
116    }
117
118    if (dino.status !== 'contained') {
119      dinosaurLogger.error(`Le dinosaure ${dino.name} n'est pas dans son enclos ! État : ${dino.status}`);
120      securityLogger.securityAlert(`Dinosaure ${dino.name} (${dino.species}) état : ${dino.status}`, 'critical');
121    }
122
123    dinosaurLogger.endGroup();
124  });
125
126  dinosaurLogger.endGroup();
127
128  // Vérifie les systèmes de sécurité
129  securityLogger.startGroup('Systèmes de sécurité');
130
131  const fenceStatus = { sector: 'B', voltage: 9800, status: 'active' };
132  securityLogger.log(`État des clôtures dans le secteur ${fenceStatus.sector} : ${fenceStatus.status}`);
133  securityLogger.assert(
134    fenceStatus.voltage >= 10000,
135    `La tension des clôtures dans le secteur ${fenceStatus.sector} est trop basse : ${fenceStatus.voltage}V (min. 10000V)`
136  );
137
138  securityLogger.endGroup();
139
140  // Affiche les statistiques des logs
141  systemLogger.startGroup('Statistiques des logs');
142  console.table([
143    securityLogger.getStats(),
144    dinosaurLogger.getStats(),
145    systemLogger.getStats()
146  ]);
147  systemLogger.endGroup();
148
149}, 2000);

Journalisation en production et en développement

Dans les applications réelles, il vaut mieux séparer la journalisation de développement de celle de production :

1// logger.js
2class Logger {
3  constructor(isProduction = process.env.NODE_ENV === 'production') {
4    this.isProduction = isProduction;
5  }
6
7  log(...args) {
8    if (!this.isProduction) {
9      console.log(...args);
10    }
11  }
12
13  // Pour les erreurs critiques, on journalise même en production
14  error(...args) {
15    console.error(...args);
16
17    if (this.isProduction) {
18      // En production, on peut envoyer les erreurs à un service de monitoring
19      this.sendToErrorMonitoring(args);
20    }
21  }
22
23  sendToErrorMonitoring(errorData) {
24    // Implémentation pour l'envoi vers Sentry, LogRocket, etc.
25  }
26}
27
28export default new Logger();

Résumé

La console du navigateur est un outil puissant qui simplifie grandement le débogage et la surveillance des applications JavaScript. Dans le contexte de notre Jurassic Park, de bonnes pratiques de journalisation peuvent faire la différence entre un parc qui tourne sans accroc et... eh bien, le scénario des films !

Fonctions clés à retenir :

• console.log() - journalisation de base
• console.error(), console.warn(), console.info() - différents niveaux de message
• console.table() - affichage propre des données
• console.group() - organisation des logs liés
• console.time() et console.timeEnd() - mesure des performances
• console.trace() - diagnostiquer d'où vient un appel
• console.assert() - messages de débogage conditionnels

Souviens-toi d'utiliser régulièrement la console pendant le développement - ça t'aidera à détecter et corriger les bugs plus vite, avant que les dinosaures ne trouvent une faille dans ton code !

1// Re-exportowanie i module aggregation - Jurassic Park
2// Tworzenie "index" modules for easier importing
3
4console.log("Re-exportowanie i Module Aggregation");
5console.log("Module structure organization\n");
6
7// ===========================================
8// BASE MODULES
9// ===========================================
10
11// === types/DinosaurTypes.js ===
12const DinosaurTypes = {
13  CARNIVORE: 'carnivore',
14  HERBIVORE: 'herbivore',
15  OMNIVORE: 'omnivore'
16};
17
18const DangerLevels = {
19  LOW: 1,
20  MEDIUM: 5,
21  HIGH: 7,
22  CRITICAL: 9
23};
24
25// === models/Dinosaur.js ===
26class Dinosaur {
27  constructor(name, species, type, dangerLevel) {
28    this.name = name;
29    this.species = species;
30    this.type = type;
31    this.dangerLevel = dangerLevel;
32    this.health = 100;
33    this.id = Math.random().toString(36).substr(2, 9);
34  }
35
36  getInfo() {
37    return `${this.name} (${this.species}) - Danger: ${this.dangerLevel}/10`;
38  }
39}
40
41// === models/Enclosure.js ===
42class Enclosure {
43  constructor(id, name, capacity) {
44    this.id = id;
45    this.name = name;
46    this.capacity = capacity;
47    this.dinosaurs = [];
48  }
49
50  addDinosaur(dinosaur) {
51    if (this.dinosaurs.length >= this.capacity) {
52      throw new Error('Enclosure is full');
53    }
54    this.dinosaurs.push(dinosaur);
55  }
56
57  getStatus() {
58    return `${this.name}: ${this.dinosaurs.length}/${this.capacity} dinosaurs`;
59  }
60}
61
62// === models/Visitor.js ===
63class Visitor {
64  constructor(name, age, ticketType) {
65    this.name = name;
66    this.age = age;
67    this.ticketType = ticketType;
68    this.id = Math.random().toString(36).substr(2, 9);
69  }
70
71  getDetails() {
72    return `${this.name}, ${this.age} years old (${this.ticketType} ticket)`;
73  }
74}
75
76// === utils/validators.js ===
77function validateDinosaur(data) {
78  const { name, species, type, dangerLevel } = data;
79  const errors = [];
80
81  if (!name || typeof name !== 'string') errors.push('Invalid name');
82  if (!species || typeof species !== 'string') errors.push('Invalid species');
83  if (!Object.values(DinosaurTypes).includes(type)) errors.push('Invalid type');
84  if (dangerLevel < 1 || dangerLevel > 10) errors.push('Danger level must be 1-10');
85
86  return { valid: errors.length === 0, errors };
87}
88
89function validateEnclosure(data) {
90  const { id, name, capacity } = data;
91  const errors = [];
92
93  if (!id || typeof id !== 'string') errors.push('Invalid id');
94  if (!name || typeof name !== 'string') errors.push('Invalid name');
95  if (!capacity || capacity < 1) errors.push('Capacity must be at least 1');
96
97  return { valid: errors.length === 0, errors };
98}
99
100// === utils/formatters.js ===
101function formatDinosaurReport(dinosaur) {
102  return {
103    id: dinosaur.id,
104    name: dinosaur.name,
105    species: dinosaur.species,
106    type: dinosaur.type,
107    dangerLevel: dinosaur.dangerLevel,
108    health: `${dinosaur.health}%`,
109    status: dinosaur.health > 70 ? 'Good' : 'Needs attention'
110  };
111}
112
113function formatEnclosureReport(enclosure) {
114  return {
115    id: enclosure.id,
116    name: enclosure.name,
117    occupancy: `${enclosure.dinosaurs.length}/${enclosure.capacity}`,
118    dinosaurs: enclosure.dinosaurs.map(d => d.name),
119    status: enclosure.dinosaurs.length >= enclosure.capacity ? 'Full' : 'Available'
120  };
121}
122
123// ===========================================
124// AGGREGATING MODULES (BARREL EXPORTS)
125// ===========================================
126
127// === models/index.js - Agrégation de tous les modules ===
128// Re-export de tous les modules depuis un seul endroit
129const ModelsModule = {
130  Dinosaur,
131  Enclosure,
132  Visitor
133};
134
135console.log("Models Module:");
136console.log("  - Dinosaur");
137console.log("  - Enclosure");
138console.log("  - Visitor\n");
139
140// === types/index.js - Type aggregation ===
141const TypesModule = {
142  DinosaurTypes,
143  DangerLevels
144};
145
146console.log("Types Module:");
147console.log("  - DinosaurTypes");
148console.log("  - DangerLevels\n");
149
150// === utils/index.js - Aggregation utilities ===
151const UtilsModule = {
152  // validators
153  validateDinosaur,
154  validateEnclosure,
155  // formatters
156  formatDinosaurReport,
157  formatEnclosureReport
158};
159
160console.log("Utils Module:");
161console.log("  - validateDinosaur");
162console.log("  - validateEnclosure");
163console.log("  - formatDinosaurReport");
164console.log("  - formatEnclosureReport\n");
165
166// === index.js - MAIN AGGREGATING MODULE ===
167// Re-export everything from submodules
168const JurassicParkSDK = {
169  // Models
170  ...ModelsModule,
171  // Types
172  ...TypesModule,
173  // Utils
174  ...UtilsModule
175};
176
177console.log("Main SDK Module (All exports):");
178console.log("  All models");
179console.log("  All types");
180console.log("  All utilities\n");
181
182// ===========================================
183// USAGE DEMONSTRATION
184// ===========================================
185
186console.log("=== DEMONSTRACJA RE-EXPORTOWANIA ===\n");
187
188// Zamiast import from many places:
189console.log("WITHOUT re-exports (many imports):");
190console.log("import { Dinosaur } from './models/Dinosaur.js';");
191console.log("import { Enclosure } from './models/Enclosure.js';");
192console.log("import { DinosaurTypes } from './types/DinosaurTypes.js';");
193console.log("import { validateDinosaur } from './utils/validators.js';");
194console.log("import { formatDinosaurReport } from './utils/formatters.js';\n");
195
196// We can import everything from one place:
197console.log("Z re-exportami (jeden import):");
198console.log("import {");
199console.log("  Dinosaur, Enclosure,");
200console.log("  DinosaurTypes,");
201console.log("  validateDinosaur, formatDinosaurReport");
202console.log("} from './index.js';\n");
203
204console.log("=== PRACTICAL USAGE ===\n");
205
206// Tworzenie dinosaura
207const dinoData = {
208  name: 'Rexy',
209  species: 'Tyrannosaurus Rex',
210  type: JurassicParkSDK.DinosaurTypes.CARNIVORE,
211  dangerLevel: JurassicParkSDK.DangerLevels.CRITICAL
212};
213
214console.log("1. Validation des données du dinosaure :");
215const validation = JurassicParkSDK.validateDinosaur(dinoData);
216console.log(`   Valid: ${validation.valid}`);
217
218if (validation.valid) {
219  const trex = new JurassicParkSDK.Dinosaur(
220    dinoData.name,
221    dinoData.species,
222    dinoData.type,
223    dinoData.dangerLevel
224  );
225
226  console.log(`\n2. Dinosaure créé : ${trex.getInfo()}`);
227
228  const report = JurassicParkSDK.formatDinosaurReport(trex);
229  console.log("\n3. Report dinosaura:");
230  console.log(JSON.stringify(report, null, 2));
231}
232
233// Creating paddock
234console.log("\n4. Creating paddock:");
235const enclosureData = {
236  id: 'ENC-001',
237  name: 'T-Rex Paddock',
238  capacity: 2
239};
240
241const encValidation = JurassicParkSDK.validateEnclosure(enclosureData);
242console.log(`   Valid: ${encValidation.valid}`);
243
244if (encValidation.valid) {
245  const paddock = new JurassicParkSDK.Enclosure(
246    enclosureData.id,
247    enclosureData.name,
248    enclosureData.capacity
249  );
250
251  const trex = new JurassicParkSDK.Dinosaur(
252    'Rexy',
253    'T-Rex',
254    JurassicParkSDK.DinosaurTypes.CARNIVORE,
255    9
256  );
257
258  paddock.addDinosaur(trex);
259
260  const encReport = JurassicParkSDK.formatEnclosureReport(paddock);
261  console.log("\n5. Report paddocku:");
262  console.log(JSON.stringify(encReport, null, 2));
263}
264
265console.log("\n=== ZALETY RE-EXPORTOWANIA ===\n");
266
267console.log("Uproszczone importy:");
268console.log("   - Jeden import zamiast wielu");
269console.log("   - Czystszy kod\n");
270
271console.log("Lepsze DX (Developer Experience):");
272console.log("   - Easier API discovery");
273console.log("   - Intuicyjna struktura\n");
274
275console.log("Easier refactoring:");
276console.log("   - Zmiany internal structure don't affect users");
277console.log("   - Publiczne API pozostaje stabilne\n");
278
279console.log("Tree Shaking:");
280console.log("   - Bundlery can remove unused code");
281console.log("   - Taille de bundle plus petite\n");
282
283console.log("=== EXAMPLE PATTERNS ===\n");
284
285console.log("// Podstawowy re-export");
286console.log("export { Dinosaur } from './Dinosaur.js';\n");
287
288console.log("// Re-export z aliasem");
289console.log("export { Dinosaur as Dino } from './Dinosaur.js';\n");
290
291console.log("// Re-export de tout");
292console.log("export * from './models.js';\n");
293
294console.log("// Re-export with aggregation");
295console.log("export { Dinosaur } from './Dinosaur.js';");
296console.log("export { Enclosure } from './Enclosure.js';");
297console.log("export { Visitor } from './Visitor.js';\n");
298
299console.log("// Mixed export (default + named)");
300console.log("export { default as Dinosaur, DinosaurTypes } from './Dinosaur.js';\n");
301
302console.log("Demonstracja completed!");