Intégration dans une page hôte
Capytale intègre CapyCode dans un cadre (<iframe>). La page hôte peut régler certaines fonctions de l'IDE, par exemple proposer CapyCode sans Git. Ces réglages passent par postMessage, pas par l'URL : ils peuvent changer à tout moment, sans recharger la page, et ne sont pas enregistrés (ils valent pour la page chargée).
Le protocole
| Sens | Message | Quand |
|---|---|---|
| CapyCode → hôte | { type: 'capycode:ready' } | au démarrage, avant le premier rendu |
| hôte → CapyCode | { type: 'capycode:configure', options: { git: false } } | à tout moment |
| CapyCode → hôte | { type: 'capycode:configured', options: { git: false } } | en réponse à chaque configure : toutes les options en vigueur |
- Les options sont partielles : celles qui manquent gardent leur valeur. Une option inconnue ou mal typée est ignorée.
- Seuls les messages de la fenêtre parente sont écoutés (
event.source === window.parent). La réponse est adressée à l'origine de l'hôte ('*'si elle est opaque) ;readyne contient rien et part vers'*'. - Page ouverte directement (sans cadre) : rien n'est écouté, les options gardent leur valeur par défaut.
| Option | Défaut | Effet |
|---|---|---|
git | true | Intégration de Git : panneau et onglet de la barre d'activité, branche et graphe de la barre d'état, lettres de statut de l'explorateur et des onglets, commandes Git (palette), commande git du terminal, historique dans les liens de partage |
Côté Capytale :
const frame = document.querySelector('iframe#capycode')
window.addEventListener('message', (event) => {
if (event.source !== frame.contentWindow) return
if (event.data?.type === 'capycode:ready') {
frame.contentWindow.postMessage({ type: 'capycode:configure', options: { git: false } }, 'https://…/p/capycode/')
}
})Attendre ready évite d'envoyer les options avant que CapyCode écoute. Comme ready part avant le premier rendu, l'interface s'affiche en général directement sans Git ; si les options arrivent plus tard, elle s'adapte à chaud.
Dans le code
src/services/embedding.ts: le protocole, sans Vue. Le singletonembeddingtient les options et prévient ses abonnés (onChange) ;main.tsappelleembedding.connect()avant de monter l'application.src/stores/embedding.ts: le storeembeddingcombine l'autorisation de la page hôte (hostGitAllowed) et l'activation de l'extension par l'élève (extensionsStore.isGitEnabled) pour calculergitEnabled; les stores et composants s'y réfèrent, jamais au service directement.
Ce que fait git: false :
- store
git: il se comporte comme sans dépôt (isRepofaux, aucun statut) et ne lit plus rien. Tout ce qui dépend deisRepoou du statut disparaît de lui-même (barre d'état, décorations). À la réactivation, il recharge tout ; - store
layout: le panneau Git ne peut plus être ouvert ; s'il l'était, l'explorateur le remplace ; - store
editor: le graphe Git et les comparaisons ouvertes se ferment ; - commandes :
gitCommandsetview.sidebar.gitne sont plus proposées (palette, raccourcis) ; - terminal : la session passe
disabledGroups: {'git'}dans leTerminalContext;gitdevient une commande inconnue, absente de l'aide et de la complétion (voir Terminal) ; - barre d'activité, fenêtres « Partager » et « À propos » : l'onglet Git, l'historique à partager et la mention de Git sont masqués.
Le dépôt .git du projet n'est pas touché : il reste dans le workspace, dans l'export ZIP, et le projet de départ comme les liens de partage continuent d'en créer un. Désactiver Git masque la fonction, sans changer le format du projet.
Ajouter une option
- L'ajouter à
EmbeddingOptions,DEFAULT_EMBEDDING_OPTIONSetparseOptions(src/services/embedding.ts). - L'exposer dans le store
embedding, puis l'appliquer là où elle a un effet, de préférence dans les stores (par abonnement réactif), pour que l'interface suive seule. - La tester dans
tests/interface/embedding.spec.tset la décrire ici.