An opinionated starter template to quickly scaffold shareable native web-components.
Comes with:
- Rollup build
- Dev server with live-reload
- Mocha/Chai for browser-run testing
- Standardjs for linting
The beauty of this template is in its simplicity - it's a bare-bones setup that requires only a few dependencies, with a well-tested tooling pipeline that's not overly complicated, and easily extensible.
Clone with degit, update (optional) and install dependencies:
$ npx degit zerodevx/web-component-starter my-element
$ cd my-element
$ npx ncu -u
$ npm i
Run the dev server.
$ npm run dev
This serves the test/
directory at http://localhost:5000
with file-watching and live-reload capabilities.
Develop the web-component at src/index.js
- the example component template showcases some common
Custom Elements v1 coding patterns.
Bare modules import can be used.
Tests are integrated and run inside your browser during development. Write tests using Mocha BDD with Chai asserts
at test/index.spec.js
. A convenience add()
function is included - it creates the test fixture, appends it into
DOM, and returns the node.
...
it('creates showdowRoot', () => {
const fixture = add(`<my-element name="test"></my-element>`)
assert.exists(fixture.shadowRoot)
fixture.remove()
})
Lint your code with Standardjs
rules.
$ npm run lint
And fix warnings automatically.
$ npm run lint -- --fix
Build your component.
$ npm run build
This creates the Rollup minified bundle into dist/index.min.js
that is useful for consumption via CDN.