SXA Umbrella Web Components
This is a sample project showcasing how to write and consume web components created with Stencil.
One of the components is an Address Card component:
- Written in a version using attributes and a version using slots (for SEO)
- Consumed in ReactJS (see )
- Consumed in Vue
- Showcased in Storybook
See https://mango-river-020e4d803.azurestaticapps.net/ for the above samples.
The components are published to NPM as well as the package sxa-umbrella-webcomponents.
Components can be loaded directly through https://unpkg.com by adding the following lines to the head section of your HTML page:
<link rel="stylesheet" href="https://firstname.lastname@example.org/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.css" /> <script type="module" src="https://email@example.com/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.esm.js"></script> <script nomodule src="https://firstname.lastname@example.org/dist/sxa-umbrella-webcomponents/sxa-umbrella-webcomponents.js"></script>
@0.0.3 with the latest version.
How to use
package.json for the different script commands available:
|start||do a build of the Stencil web components in watch mode, runs at default port http://localhost:3333|
|start:legacy||as above, but with support for Internet Support 11|
|build||build the Stencil web components|
|test||execute the Stencil web component tests|
|test.watch||execute the Stencil web component tests in watch mode|
|generate||scaffold a new Stencil web component|
|storybook||start build of the Stencil web components in watch mode, and Storybook in watch mode|
|build:all||build Stencil web components, React and Vue examples and Storybook, used from build server|