Usage
Until Salesforce integrates Node library support, the easiest way to use library components is just to copy them directly.
This can be done easily with the following command:
npx lwc-library <component-name> <destination-path>
This copies over the component along with required shared components.
List of Required Components
-
stylesShared
(required)
Use --all
or -a
option to copy over all components.
npx lwc-library --all <destination-path>
Use --ignore
or -i
to ignore shared components.
npx lwc-library --ignore -c accordion (copy just the accordion - this will break!)
All Options
-
--component
or-c
to specify a component -
--target
or-t
to specify a destination path -
--all
or-a
to copy all components -
--ignore
or-i
to ignore shared components -
--help
or-h
to see all options
Contribution Guidelines
The main purpose of this library is to simplify components, ensure they are fully accessible, have a singular purpose. They are meant to be extensible rather than covering all use cases.
Install
Trying out bun.
bun install
This package is a major work-in-progress, but here is a general guide that outlines questions to ask:
New Component Recipe
- Accessibility First
- What will never change about the component?
- What are the required structure and semantic tags?
- What are the required ARIA attributes?
- Functionality
- What is the components singular purpose?
- What is the structural layout? Are multiple s needed?
- What are the functional variants?
- Are there slots?
- Does it make sense to abstract any logic or use a utility?
- Application & Data
- How does it react to a larger application and data?
- What datasources does it subscribe to?
- Style Base and Classes
- What is the most basic / generic / opinionated style?
- What are some binary customization options (CSS Classes)?
- Style Customization
- What are the ::part(s) to be defined?
- What are the most obvious CSS Variables to add custom style?
CSS Variable Naming Conventions (WIP)
Theme-Level
Use single dashes for theme-level variables. These are variables that are used across the entire application. They are the base truth for the application.
Three Examples:
primary-color
secondary-color
background-color
Component-Level
Use BEM for component-level variables. These are variables that are used within a component. They read defaults from the theme-level variables (typically in a themeable.css
file).
Three Examples:
button__primary-color
button__secondary-color
button__background-color