Vous devriez envoyer un manifeste avec vos composants Web

Outre vos composants, le manifeste des éléments personnalisés est la chose la plus importante que vous puissiez expédier dans votre bibliothèque.

Qu'est-ce qu'un manifeste d'éléments personnalisés (CEM) ?

Le manifeste des éléments personnalisés est un schéma conçu pour documenter les métadonnées de vos éléments/composants Web personnalisés, y compris les attributs, les propriétés, les méthodes, les événements, les emplacements, les parties CSS et les variables CSS. Il prend toutes les informations sur vos composants et les sérialise dans un seul fichier json dans votre projet.

Pourquoi les utilisateurs en ont-ils besoin ?

Cette méthode de documentation standardisée ouvre d'énormes possibilités quant à la manière dont les équipes utilisent et interagissent avec votre bibliothèque de composants. Les développeurs peuvent l'utiliser à des fins de documentation, comme la documentation de l'API d'Adobe Spectrum.

Les équipes peuvent également les utiliser pour le framework, les intégrations IDE et d'autres outils comme Storybook.

C'est bien si vous souhaitez créer des types spécifiques ou des intégrations de framework que vous aimeriez livrer avec vos composants, mais il est difficile d'anticiper tous les besoins de vos utilisateurs. Vous créez peut-être vos composants pour les utiliser dans un environnement Vue.js, mais une autre équipe peut arriver et avoir besoin d'utiliser vos composants dans un environnement de réaction. Plutôt que d'attendre que vous construisiez et expédiiez des wrappers de réaction, les équipes peuvent utiliser le CEM pour générer leurs propres wrappers localement.

Un exemple récent de ceci était lorsque j'aidais une équipe à démarrer avec Shoelace dans une application Next.js. Shoelace fournit des wrappers de réaction, mais ils renvoyaient une erreur lorsque Next.js essayait de les restituer côté serveur. Heureusement, Shoelace expédie son CEM, j'ai donc pu l'utiliser pour générer de nouveaux wrappers sécurisés SSR.

Voici un lien vers un exemple :

Comment créer un CEM ?

Il existe quelques outils pour créer un CEM (web-component-analyzer et Lit labs ont un outil expérimental), mais mon outil de prédilection est l'analyseur de manifeste d'éléments personnalisés.

C'est une excellente option pour plusieurs raisons :

• Il prend en charge plusieurs frameworks
• Il dispose d'un excellent système de plugins permettant aux développeurs d'étendre les fonctionnalités de l'analyseur
• Non seulement il est facile à utiliser, mais il dispose également d'une excellente documentation et d'un support communautaire.

Voici quelques plugins disponibles que j'ai créés et qui peuvent vous aider à améliorer l'adoption de vos éléments personnalisés :

• Intégrations IDE

  • Intégration du code VS
  • Intégration de l'EDI JetBrains

• Intégrations du framework JS

  • React Wrappers
  • Types Vue.js
  • Types Solid.js
  • Types sveltes
  • Types JSX

REMARQUE : Ceux-ci fournissent des plugins et des fonctions CEM Analyzer pour les CEM pré-générés. Si vous n'utilisez pas l'analyseur CEM, ne vous inquiétez pas, vous pouvez toujours en profiter.

Conclusion

Le manifeste d'éléments personnalisés est un excellent outil pour accélérer l'adoption par les utilisateurs de votre bibliothèque de composants d'éléments personnalisés. En le fournissant dans le cadre de votre produit, vous pouvez fournir aux consommateurs les moyens de garantir que leurs besoins sont satisfaits lors de l'utilisation de vos éléments personnalisés.

Lors du choix d'une bibliothèque ou d'un framework pour la création de vos éléments personnalisés, c'est une bonne idée d'essayer d'en trouver une avec laquelle vous pouvez générer un CEM, surtout si vos composants seront utilisés par d'autres équipes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!