Téléverser et publier

Cette page décrit le processus complet de publication d'un composant local sur la plateforme. La première publication doit passer par ici ; pour les itérations suivantes, voir Mise à jour et versions.

Vérifications avant le téléversement

• [ ] Le composant est un dossier indépendant contenant un fichier d'entrée (voir Spécification des composants).
• [ ] Les dépendances utilisées sont déjà dans le node_modules du projet courant.
• [ ] Fichier unique ≤ 3 Mo, taille totale ≤ 10 Mo, nombre de fichiers ≤ 30.
• [ ] Le nom du composant respecte PascalCase ou kebab-case et n'est pas déjà utilisé.
• [ ] Un README.md est prêt, avec les propriétés et événements clairement documentés.

Publication en cinq étapes

1. Ouvrir la page de téléversement

Après le démarrage du service local, cliquez sur « Téléverser un composant » dans le menu de gauche.

2. Choisir le répertoire du composant

L'arborescence de gauche affiche le répertoire défini par dir dans le fichier de configuration. Naviguez jusqu'au dossier du composant, sélectionnez-le, puis cliquez sur « Sélectionner ».

3. Configurer l'aperçu

L'aperçu en temps réel est en haut de la page, la zone de configuration en bas :

Élément de configuration	Description
Aperçu en petite fenêtre	Fichier affiché dans la carte de la liste, par convention demo/index.vue
Aperçu en plein écran	Fichier affiché dans la page de détail, par convention demo/full.vue
Dépendances du composant	Extraites automatiquement du code source ; vérifiez les manques avant de publier
Description	Une phrase décrivant l'usage du composant
Informations supplémentaires	Explications plus détaillées, indexées pour la recherche

Pour Vue / React, choisissez un fichier .vue / .jsx / .tsx ; pour un Web Component, un fichier .html.

4. Générer la configuration

Cliquez sur « Générer la configuration » : la plateforme écrit comp.json :

{
  "__id__": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "name": "MyComponent",
  "version": "1.0.0"
}

Après la première publication réussie, le serveur réécrit __id__. Ne le modifiez pas manuellement : c'est la base d'identification du composant lors des mises à jour.

5. Publier

Une fois l'aperçu et les dépendances vérifiés, cliquez sur « Publier ». En cas de succès, le composant apparaît dans « Mes composants » et entre dans le marché des composants selon les règles de recommandation.

Comment le framework est détecté

La plateforme applique les règles suivantes dans l'ordre et s'arrête à la première correspondance :

1. Présence de index.vue → Vue.
2. Présence de index.jsx / index.tsx → React.
3. customElements.define( ou extends HTMLElement dans un fichier source → Web Component.
4. Présence de index.js sans enregistrement d'élément personnalisé → React.
5. Aucune correspondance → aucune valeur par défaut ; la sélection est manuelle sur la page de téléversement.

Le champ « Framework du composant » dans « Informations supplémentaires » de la page de téléversement peut remplacer le résultat de la détection ; c'est le choix effectué dans l'interface qui fait foi.

Ne dépendez pas à la fois de vue et de react dans un même composant

Sinon le framework ne peut pas être déterminé, et la vérification comme le rendu échouent.

Composants en double

La plateforme effectue une détection de similarité. En cas de doublon :

• Le composant n'entre pas dans les listes « Recommandé », « Populaire » et « Récent ».
• Il n'est visible que dans « Mes composants ».
• Il apparaît dans les recommandations de composants similaires.
• Après une mise à jour, il ne bénéficie pas non plus du poids de recommandation.

Recherchez avant le téléversement si un composant similaire existe déjà : vous éviterez un aller-retour inutile.

Différence entre première publication et mise à jour

	Première publication	Mises à jour suivantes
Point d'entrée	Page de téléversement	Page de mise à jour ou comphub upload
Création du composant	Oui, avec écriture de __id__	Non, ajout d'une version uniquement
Aperçu / description modifiables	Oui	Oui via la page de mise à jour ; non via la CLI
Numéro de version	Version initiale	Toute modification de code exige une nouvelle version

Diagnostiquer un échec de publication

Symptôme	Cause	Traitement
Message de dépendance manquante	La dépendance n'est pas installée dans le projet courant	Exécutez npm install <pkg> à la racine du projet
Component has no default export	L'entrée React n'a que des exports nommés	Passez à export default
L'aperçu Web Component signale un module script introuvable	Le HTML ne contient pas <script type="module">, ou il est placé dans <head>	Placez-le dans <body>
Aperçu vide sans erreur dans le terminal	Chemin de ressource avec alias, ou dépendance ayant changé de majeure	Utilisez des chemins relatifs et vérifiez les dépendances
Message de dépassement de limite de fichiers	Fichier unique > 3 Mo / total > 10 Mo / nombre > 30	Compressez les ressources ou scindez le composant

Prochaines étapes

• Continuer à itérer les versions : Mise à jour et versions
• Publier en ligne de commande : Utiliser la CLI
• Développer et publier depuis le navigateur : Utiliser Studio