Boilerplate d'outils pour svelte-ide

Ce projet montre comment embarquer la librairie svelte-ide dans une application autonome. Il expose un outil de bloc-notes minimal et constitue un point de depart pour les developpeurs qui souhaitent creer leurs propres outils.

Ressources utiles

• Architecture du boilerplate : _GUIDES/ARCHITECTURE.md
• Services IDE : _GUIDES/SVELTE-IDE.md
• Architecture du noyau : voir le dépôt svelte_ide, fichier _GUIDES/ARCHITECTURE.md

Demarrage rapide

npm install
npm run dev

Le fichier .env.development active le MockProvider et les logs pour le developpement. Avant de livrer, copiez .env.production.example en .env.production et remplissez les identifiants OAuth adequats (VITE_AUTH_PROVIDERS, VITE_GOOGLE_CLIENT_ID, etc.).

Pour rester aligne sur la branche main du framework, vous pouvez declencher ponctuellement :

npm install svelte-ide@github:pylanglois/svelte_ide#main

Structure

• src/main.js : applique la CSP, enregistre les outils systemes (Console, Notifications) et configure la barre de statut.
• src/App.svelte : monte l IDE et transmet les tableaux externalTools, systemTools et statusMessages.
• src/tools/quick-editor/ : code source de l outil Bloc-notes (panneau + onglet + restauration via tab:hydrate).
• .env* : configuration de l authentification, chiffrement des jetons (VITE_AUTH_TOKEN_ENCRYPTION_KEY) et directives CSP (VITE_CSP_DIRECTIVES).

Ce qui est pre-configure

• applyCsp (expose via svelte-ide) ajoute automatiquement une politique CSP stricte en production (personnalisable via VITE_CSP_DIRECTIVES).
• Les outils systemes Console et Notifications sont exposes pour suivre les logs et alertes generes par vos outils.
• La barre de statut est renseignee avec un message systeme, l onglet actif et une horloge illustrative.
• Un menu Aide par defaut est enregistre via registerDefaultHelpMenu, ce qui montre comment manipuler mainMenuService.
• L outil Bloc-notes diffuse un evenement quick-editor:saved via l eventBus et se restaure apres rechargement de l IDE.

Tests / build

npm run build

Le build Vite charge la configuration de production. Sans fournisseur OAuth declare, l application refusera de demarrer (MockProvider bloque en production). Ajustez vos variables d environnement avant le deploiement.

Personnaliser le branding

Le App de svelte-ide accepte une prop branding sous la forme { component, props }. Ce boilerplate passe par défaut un composant ClientBrand qui affiche ❱BNR-CVD❰ :

<IDEApp
  {externalTools}
  {systemTools}
  {statusMessages}
  branding={defaultBranding}
/>

Remplacez component ou props pour appliquer votre identité visuelle.