Stencil is a really nice tool for building and maintaining of web components.
Pretty impressed how fast it can be learned as well as how many integrations it has.
Also I find fascinating Shadow DOM feature, which makes you components fully isolated (HTML, JavaScript, CSS) and accessible only through documented public methods.
Added form animation on successful submit.
- the form should be unaware of the component's multiple separate input fields, the input should be accessible as a single, combined value.
- the form should only be submittable when the combined value passes a self-chosen pattern / validation.
- basic input behaviour / state should apply (e.g. disabled, required).
To run the task for development, run:
npm install
npm startTo build the components for tests and production, run:
npm run buildTo run the unit tests for the components, run:
npm testMost of the time I spent for learning how to develop with Stencil and related challenges.
- Read Stencil documentation - 1h
- Implement From and Input components - 2h
- Implement Styling - 1h
- Add Unit and E2E tests - 1h
- Fixing bugs and other challenges - 1h
- Component documentation
- Components and classes namings
- Components are fully isolated using Shadow DOM
- Styles are constructed with Sass and easy adjustable using variables
- From the UX perspective in my opinion better:
- Submit button should be always active
- Validation happens on submit
- Better performance - validation happens once instead of per every keypress
- On Submit click with invalid inputs:
- focus on first invalid input
- show validation captions per every input
- Add CSS cross-browser compatibility (e.g. with Webpack plugins)
- Investigate why globalStyles are not applied in
stencil.config.js(usedindex.htmlinline styles instead) - Investigate how to get node with Input invalid class:
expect(inputName).toHaveClass(':invalid')inreflect-input.e2e.ts