Skip to content
English

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 ​

SensMessageQuand
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) ; ready ne contient rien et part vers '*'.
  • Page ouverte directement (sans cadre) : rien n'est écouté, les options gardent leur valeur par défaut.
OptionDéfautEffet
gittrueInté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 :

js
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 singleton embedding tient les options et prévient ses abonnés (onChange) ; main.ts appelle embedding.connect() avant de monter l'application.
  • src/stores/embedding.ts : le store embedding combine l'autorisation de la page hôte (hostGitAllowed) et l'activation de l'extension par l'élève (extensionsStore.isGitEnabled) pour calculer gitEnabled ; 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 (isRepo faux, aucun statut) et ne lit plus rien. Tout ce qui dépend de isRepo ou 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 : gitCommands et view.sidebar.git ne sont plus proposées (palette, raccourcis) ;
  • terminal : la session passe disabledGroups: {'git'} dans le TerminalContext ; git devient 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 ​

  1. L'ajouter à EmbeddingOptions, DEFAULT_EMBEDDING_OPTIONS et parseOptions (src/services/embedding.ts).
  2. 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.
  3. La tester dans tests/interface/embedding.spec.ts et la décrire ici.