How to Develop Stencil Components
Key Elements
When developing a Stencil component, there are some key elements that should be considered to ensure a high-quality, scalable, and maintainable component:
Component Naming Conventions
- Follow consistent and descriptive naming conventions to improve clarity and reusability.
- Use kebab-case for the component tag name. Example:
<eds-mycomponent></eds-mycomponent> - Ensure the component’s name reflects its purpose.
Prefix: All Stencil components must begin with the eds- prefix to align with the design system conventions.
One-word Naming: The second part of the component name must be a single, descriptive word that reflects the purpose of the component.
Shadow DOM
Where applicable, enable the shadow DOM to encapsulate the component’s internal structure and styles.
Error Handling and Edge Cases
- Account for and handle edge cases within the component logic.
- Provide fallback states or error messages for unexpected scenarios.
Component Structure
Each Stencil component must follow a standardized structure. Below is an example layout for a component:
| File | Description |
|---|---|
| eds-mycomponent.tsx | The main logic and JSX for the component. |
| eds-mycomponent.spec.tsx | Unit test file to validate the component functionality. |
| eds-mycomponent.e2e.tsx | End-to-end test file. |
| eds-mycomponent.stories.tsx | Storybook stories that showcase the component’s use cases. |
| eds-mycomponent.css | (Optional) Styling for the component if needed. Tailwind configuration applies! |
| readme.md | Documentation for the component, automatically generated with Stencil’s docs output feature. |
Component Acceptance Criteria
Before your component can be accepted, ensure the following criteria are met:
Test Files Exists
A .spec.tsx and a .e2e.tsx files are present, covering unit tests and e2e tests for the component.
Storybook Integration
A .stories.tsx file exists, demonstrating how to use the component in Storybook.
Auto-generated Documentation
The readme.md file is auto-generated and includes manual additions where necessary.
Analytics Implementation
Analytics tracking is implemented within the component, ensuring that necessary data is captured and logged according to the analytics requirements.
Linting
No linting issues should be present, based on the default configuration.