Stencil makes it easy to build and share web components across any framework.
The easiest way to build and distribute web components with Stencil is by using our stencil-component-starter. This starter includes all of the config and package.json changes that are discussed below by default with instructions in the readme.
Configuring Stencil for distribution is easy. Simply set the following config options in the stencil.config.js file:
exports.config = {
namespace: 'myname',
generateDistribution: true,
generateWWW: false,
...
};
You also need to add the following to your package.json:
{
"main": "dist/collection/index.js",
"types": "dist/collection/index.d.ts",
"collection": "dist/collection/collection-manifest.json",
"files": [
"dist/"
],
"browser": "dist/myname.js",
...
}
There are three strategies we recommend for using web components built with Stencil.
The first step for all three of these strategies is to Publish to NPM.
<script src='https://unpkg.com/my-name@0.0.1/dist/myname.js'></script> in the head of your index.htmlnpm install my-name --save<script src='node_modules/my-name/dist/myname.js></script> in the head of your index.htmlnpm install my-name --save{ name: 'my-name' } to your collections