{"id":2490,"date":"2026-05-20T09:00:00","date_gmt":"2026-05-20T08:00:00","guid":{"rendered":"https:\/\/coding4phone.com\/?p=2490"},"modified":"2026-05-20T02:09:39","modified_gmt":"2026-05-20T01:09:39","slug":"le-mogwai-playground-sameliore-editeur-fichiers-et-bien-plus","status":"publish","type":"post","link":"https:\/\/coding4phone.com\/?p=2490","title":{"rendered":"Le MOGWAI Playground s’am\u00e9liore : \u00e9diteur, fichiers et bien plus"},"content":{"rendered":"\n
Quand j’ai publi\u00e9 le MOGWAI Playground en d\u00e9but d’ann\u00e9e, l’id\u00e9e \u00e9tait simple : offrir un environnement en ligne pour tester du code MOGWAI sans rien installer. Un terminal dans le navigateur, quelques exemples cliquables, et le moteur complet embarqu\u00e9 en WebAssembly. Fonctionnel, mais limit\u00e9 \u00e0 la saisie ligne par ligne.<\/p>\n\n\n\n
Aujourd’hui, le playground fait un bond en avant avec plusieurs nouvelles fonctionnalit\u00e9s qui le rapprochent d’un vrai petit environnement de d\u00e9veloppement l\u00e9ger. Voici ce qui change.<\/p>\n\n\n\n
Un \u00e9diteur multi-lignes int\u00e9gr\u00e9<\/h2>\n\n\n\n
C’est la nouveaut\u00e9 principale. Jusqu’ici, \u00e9crire une fonction r\u00e9cursive ou un programme un peu structur\u00e9 dans le terminal relevait du parcours du combattant : une ligne \u00e0 la fois, sans retour en arri\u00e8re, sans vue d’ensemble.<\/p>\n\n\n\n
Il suffit maintenant de taper edit<\/code> dans le terminal, ou de cliquer sur le bouton \u270e Edit<\/strong> dans la barre d’exemples, pour basculer vers un \u00e9diteur plein \u00e9cran. Une zone de texte propre, en monospace, qui occupe tout l’espace disponible.<\/p>\n\n\n
\nMOGWAI Playground avec \u00e9diteur de code int\u00e9gr\u00e9<\/figcaption><\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\n
Quelques raccourcis utiles \u00e0 conna\u00eetre :<\/p>\n\n\n\n
\n
Tab<\/strong> ins\u00e8re une indentation de 4 espaces (sans perdre le focus, ce qui est loin d’\u00eatre automatique dans un navigateur)<\/li>\n\n\n\n
Ctrl+Enter<\/strong> lance directement le code sans quitter l’\u00e9diteur<\/li>\n\n\n\n
\u2715 Close<\/strong> referme l’\u00e9diteur et revient au terminal \u2014 le contenu du buffer est conserv\u00e9, on peut y revenir \u00e0 tout moment<\/li>\n<\/ul>\n\n\n\n
Le code \u00e9crit dans l’\u00e9diteur est ex\u00e9cut\u00e9 en un seul bloc, ce qui change vraiment l’exp\u00e9rience : on peut d\u00e9finir des fonctions, les appeler, structurer son programme normalement. Et comme le moteur fonctionne en mode keepAlive<\/code>, tout ce qui a \u00e9t\u00e9 d\u00e9fini reste disponible dans le terminal apr\u00e8s l’ex\u00e9cution.<\/p>\n\n\n\n
Les exemples comme point de d\u00e9part<\/h2>\n\n\n\n
Avant, cliquer sur un exemple l’ex\u00e9cutait imm\u00e9diatement dans le terminal. C’\u00e9tait pratique pour une d\u00e9monstration rapide, mais \u00e7a laissait peu de place \u00e0 l’exploration.<\/p>\n\n\n\n
Le comportement a chang\u00e9 : cliquer sur un exemple ouvre maintenant l’\u00e9diteur avec le code de l’exemple pr\u00e9charg\u00e9. On peut le lire, le modifier, l’adapter, avant de l’ex\u00e9cuter. Les exemples deviennent des templates de d\u00e9part plut\u00f4t que des bo\u00eetes noires.<\/p>\n\n\n\n
Si l’\u00e9diteur contient d\u00e9j\u00e0 du code, une banni\u00e8re de confirmation s’affiche avant d’\u00e9craser le buffer \u2014 aucune mauvaise surprise.<\/p>\n\n\n\n
Charger et enregistrer des fichiers .mog<\/code><\/h2>\n\n\n\n
C’est peut-\u00eatre la fonctionnalit\u00e9 la plus attendue : la possibilit\u00e9 de travailler sur de vrais fichiers, de les sauvegarder entre deux sessions, et de les rouvrir plus tard.<\/p>\n\n\n\n
Charger un fichier<\/h3>\n\n\n\n
Le bouton \ud83d\udcc2 Load<\/strong> permet d’ouvrir un fichier .mog<\/code> depuis sa machine. Sur Chrome et Edge, une vraie bo\u00eete de dialogue syst\u00e8me s’ouvre \u2014 celle qu’on conna\u00eet depuis n’importe quel logiciel. Sur Firefox et Safari, le comportement passe par le s\u00e9lecteur de fichier classique du navigateur, qui fait le travail sans fioritures.<\/p>\n\n\n\n
L\u00e0 encore, si l’\u00e9diteur n’est pas vide, une confirmation est demand\u00e9e avant d’\u00e9craser le contenu.<\/p>\n\n\n\n
Enregistrer<\/h3>\n\n\n\n
Deux boutons cohabitent :<\/p>\n\n\n\n
\n
\ud83d\udcbe Save<\/strong> enregistre le contenu dans le fichier courant. La premi\u00e8re fois, une bo\u00eete \u00ab\u00a0Enregistrer sous\u00a0\u00bb s’ouvre pour choisir le nom et l’emplacement. Les fois suivantes, l’enregistrement se fait directement dans le m\u00eame fichier, sans dialogue \u2014 comme dans un \u00e9diteur classique.<\/li>\n\n\n\n
\ud83d\udcbe\u2026 Save As<\/strong> ouvre toujours la bo\u00eete de dialogue, quel que soit l’\u00e9tat courant. Id\u00e9al pour dupliquer un script ou le d\u00e9placer dans un autre dossier.<\/li>\n<\/ul>\n\n\n\n
Le nom du fichier courant s’affiche dans la barre de l’\u00e9diteur, juste \u00e0 c\u00f4t\u00e9 des raccourcis clavier, pour toujours savoir sur quoi on travaille.<\/p>\n\n\n\n
\n
Note :<\/strong> la gestion directe des fichiers (Save \/ Save As avec bo\u00eete syst\u00e8me) repose sur la File System Access API<\/em>, disponible uniquement dans les navigateurs Chromium (Chrome, Edge). Sur Firefox et Safari, le bouton Save d\u00e9clenche un t\u00e9l\u00e9chargement classique dans le dossier de t\u00e9l\u00e9chargements.<\/p>\n<\/blockquote>\n\n\n\n
En r\u00e9sum\u00e9<\/h2>\n\n\n\n
Le playground reste ce qu’il \u00e9tait : un outil l\u00e9ger, sans installation, qui tourne enti\u00e8rement dans le navigateur. Mais il offre maintenant une exp\u00e9rience bien plus confortable pour \u00e9crire du vrai code MOGWAI, le tester, le conserver et le partager.<\/p>\n\n\n\n
![\"Interface](\"https:\/\/i0.wp.com\/coding4phone.com\/wp-content\/uploads\/2026\/05\/playground-editor-small.gif?resize=480%2C303&ssl=1\")