Méthodologie

1. Architecture de l'éditeur

L'espace de travail utilise trois éditeurs de texte pour HTML, CSS et JavaScript avec gouttières de numéros de ligne, gestion de l'indentation par tabulation, contrôles de taille de police et retour à la ligne optionnel.

2. Traitement HTML

Le HTML du volet HTML est placé dans le body d'un document généré. L'outil n'exécute pas le HTML comme interface de la page parente.

3. Injection CSS

Le CSS est inséré dans un élément style de la head du document généré afin que les règles ne s'appliquent qu'au document d'aperçu.

4. Exécution JavaScript

JavaScript est placé dans un élément script à l'intérieur du document d'aperçu. Il s'exécute dans le contexte de navigation de l'iframe après Run.

5. Rendu iframe

Le document combiné est assigné à iframe.srcdoc, ce qui crée un nouveau document d'aperçu sans naviguer la page parente.

6. Isolation sandbox

L'iframe utilise un attribut sandbox (scripts autorisés pour l'aperçu). Les API DOM parentes ne sont pas exposées pour l'exécution du code utilisateur.

7. Gestion de la console

Un petit pont à l'intérieur de l'aperçu transmet console.log/info/warn/error et les erreurs d'exécution au parent via postMessage pour affichage.

8. API du navigateur

Ce que les scripts peuvent faire dépend de la politique du navigateur et des permissions sandbox. Certaines API se comportent différemment dans les iframes que sur les pages de premier niveau.

9. Stockage local

L'état de l'éditeur peut être écrit dans des clés localStorage limitées à cette origine afin qu'un rafraîchissement n'efface pas le travail en cours.

10. Limitations

Il n'y a pas de compilation côté serveur pour HTML/CSS/JS standard. Les pipelines de build complexes, les paquets privés et les API d'appareil privilégiées sont hors scope.

11. Considérations de confidentialité

L'assemblage de l'aperçu est côté client. La persistance locale reste dans le navigateur sauf si vous exportez ou copiez le contenu ailleurs.