https://github.com/zerodevx/web-component-starter
An opinionated starter template to quickly scaffold shareable native web-components.
https://github.com/zerodevx/web-component-starter
starter-template webcomponents
Last synced: 11 months ago
JSON representation
An opinionated starter template to quickly scaffold shareable native web-components.
- Host: GitHub
- URL: https://github.com/zerodevx/web-component-starter
- Owner: zerodevx
- License: isc
- Created: 2019-05-22T07:54:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-09-12T15:46:16.000Z (over 4 years ago)
- Last Synced: 2025-02-02T01:12:14.693Z (about 1 year ago)
- Topics: starter-template, webcomponents
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 2
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# web-component-starter
An opinionated starter template to quickly scaffold shareable native web-components.
Comes with:
- [x] Rollup build
- [x] Dev server with live-reload
- [x] Mocha/Chai for browser-run testing
- [x] 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.
## Install
Clone with [degit](https://github.com/Rich-Harris/degit), [update](https://www.npmjs.com/package/npm-check-updates)
(optional) and install dependencies:
```bash
$ npx degit zerodevx/web-component-starter my-element
$ cd my-element
$ npx ncu -u
$ npm i
```
## Usage
### Develop
Run the dev server.
```bash
$ 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](https://developers.google.com/web/fundamentals/web-components/customelements) coding patterns.
Bare modules import can be used.
### Test
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.
```js
...
it('creates showdowRoot', () => {
const fixture = add(``)
assert.exists(fixture.shadowRoot)
fixture.remove()
})
```
### Lint
Lint your code with `Standardjs` rules.
```bash
$ npm run lint
```
And fix warnings automatically.
```bash
$ npm run lint -- --fix
```
### Build
Build your component.
```bash
$ npm run build
```
This creates the Rollup minified bundle into `dist/index.min.js` that is useful for consumption via CDN.