La conception web contemporaine s'appuie largement sur des bibliothèques externes, qu'il s'agisse d'outils d'animation, de systèmes d'icônes ou de frameworks CSS. Dans GB Coder, plusieurs voies complémentaires vous permettent d'adopter des dépendances tierces sans aucune configuration fastidieuse. Grâce au gestionnaire d'injections et au volet de bibliothèques, vous intégrez aisément des scripts CDN, des modules ESM modernes et des balises personnalisées au sein de vos aperçus isolés.

1. Les Trois Niveaux de Gestion des Dépendances dans GB Coder

Selon la nature du projet, vous pouvez administrer vos dépendances à trois échelons : les balises de scripts CDN classiques, les imports de modules ESM natifs ou l'installation complète de paquets npm dans l'environnement WebContainer. Cette souplesse vous laisse arbitrer entre la simplicité immédiate sans étape de compilation et la puissance des outils de regroupement avancés. Pour un prototype rapide, l'injection CDN apporte une réponse immédiate sans délai d'installation.

2. Gestionnaire d'Injections : Choix entre En-tête (<head>) et Corps (<body>)

Le panneau d'injections personnalisées vous offre le contrôle précis sur l'emplacement de chaque ressource externe. Les feuilles de style et les polices trouvent naturellement leur place dans le <head> afin d'éviter tout scintillement de contenu brut (FOUC). À l'inverse, des bibliothèques JavaScript plus imposantes — comme un moteur 3D (Three.js) ou une bibliothèque d'animation (GSAP) — peuvent être placées en fin de <body> pour s'assurer que le DOM est complètement chargé avant leur initialisation.

<!-- Exemple de configuration d'injections personnalisées -->
{
  "headTags": [
    "<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'>",
    "<link rel='preconnect' href='https://fonts.googleapis.com'>"
  ],
  "bodyScripts": [
    "<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js'></script>"
  ]
}

3. Modules ESM Modernes : Le JavaScript d'Aujourd'hui sans Bundler

Grâce à la prise en charge étendue des modules ECMAScript (ESM) par les navigateurs récents, vous pouvez importer des paquets npm directement dans votre code sans recourir à un bundler local. En exploitant des CDN adaptés comme esm.sh ou unpkg, vous écrivez des imports natifs dans l'Éditeur Statique. Vous combinez ainsi le confort d'une syntaxe moderne avec la rapidité d'exécution de code statique directement côté client.

// Importation directe de modules ESM dans l'éditeur
import confetti from 'https://esm.sh/canvas-confetti@1.9.3';
import { formatDistanceToNow } from 'https://esm.sh/date-fns@4.1.0';

confetti({ particleCount: 100, spread: 70 });

4. Injection de Feuilles de Style et Préservation de la Cascade CSS

Lorsque vous associez votre propre feuille de style avec des frameworks externes tels que Bootstrap ou le CDN de Tailwind, l'ordre de chargement détermine la priorité. GB Coder veille à insérer les styles externes avant le fichier styles.css du projet. Vos classes et variables CSS personnalisées conservent ainsi la primauté sur les règles par défaut du framework, sans vous obliger à user de directives !important indésirables.

5. Intégration de Polices Web et de Catalogues d'Icônes

La typographie et les icônes confèrent son identité visuelle à toute application web. Grâce au catalogue de bibliothèques, vous pouvez intégrer des polices Google Fonts et des jeux d'icônes réputés tels que FontAwesome, Lucide ou Material Icons d'un simple clic. GB Coder applique automatiquement des indications preconnect aux feuilles de polices, garantissant un affichage net dès la première seconde.

6. Sécurité des Scripts Externes : Règles CSP et Bac à Sable

Faire tourner du code tiers au sein d'un IDE de navigateur réclame un cloisonnement sans compromis. Dans GB Coder, toutes les prévisualisations s'exécutent dans des iframes isolées régies par des politiques Content Security Policy (CSP) et COEP. Ces protections empêchent les scripts externes d'accéder aux données IndexedDB de votre projet, de lire des cookies d'authentification ou d'interférer avec la fenêtre principale de Monaco.

7. Conservation des Injections au Fil des Sauvegardes

L'ensemble des balises d'en-tête, scripts et dépendances configurés est automatiquement enregistré dans les métadonnées de votre projet dans IndexedDB. Lors de l'exportation d'une sauvegarde au format ZIP, ces choix sont fidèlement consignés dans un fichier project.json. Restaurer l'archive sur une autre machine ou la transmettre à un confrère rétablit l'intégralité de l'environnement sans requérir la moindre ressaisie manuelle.

8. Résolution des Échecs Réseau et Alternatives Hors-Ligne

Des configurations de réseau d'entreprise ou des pare-feu peuvent ponctuellement bloquer certains serveurs de distribution. La console virtuelle de GB Coder surveille les requêtes réseau de l'aperçu et signale immédiatement les erreurs HTTP 404 ou les refus CORS avec des indications utiles. Vous pouvez ainsi basculer facilement entre plusieurs miroirs CDN (comme jsDelivr, cdnjs ou unpkg) pour continuer à travailler en toute sérénité.