Stencil helpers are a set of project upgrades and additions to Stencil's components tool.
These steps assume you've scaffolded a Stencil project elsewhere.
npm init stencil
- Update the contents of the generated
.gitignore
with the.gitignore
of this project - Create an
.nvmrc
file and set your node version. Add this check toscripts
inpackage.json
:"preinstall": "npx check-node-version --node $(cat .nvmrc)"
- Add utility JS packages:
npm i classnames concurrently lit-html wait-on web-component-analyzer -D
- Remove default
readme.md
and replace with project-specificREADME.md
- Namespace your package name in
package.json
- Evaluate and include Stencil extras in your
stencil.config.js
file - Add Global CSS:
- Add Global stylesheet
src/assets/css/index.css
- If desisred, create a directory structure for stylesheets via
@import
rules inindex.css
(handled by postcss) - Update
stencil.config.js
for global css:globalStyle: 'src/assets/css/index.css'
- Add Global stylesheet
- Add and Configure PostCSS
- Configure Tokens
- Configure Code Style and Formatting
- Evaluate starter components in
./components
for use (considerfrog-form-control
to start) - Replace utility functions in
src/utils
with those from templates - Remove default
src/components/my-component
and rebuild withnpm run build
- Add Storybook
- Run
npx sort-package-json
to sort the scripts we've added with Stencil's defaults.