# Collective Webcomponents

Webcomponents for Collective made with [Stencil](https://github.com/ionic-team/stencil)

## Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

```bash
git clone https://github.com/builder/collective-webcomponents.git
cd collective-webcomponents
```

and run:

```bash
npm install
npm start
```

To watch for file changes during develop, run:

```bash
npm run dev
```

To build the component for production, run:

```bash
npm run build
```

To run the unit tests for the components, run:

```bash
npm test
```

Try using [Visual Studio Code](https://code.visualstudio.com/) to view and edit this code, it has best in class typescript/tsx support.

Need help? Check out the stencil docs [here](https://stenciljs.com/docs/my-first-component).

## Using these components

### Script tag

- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
- Put a script tag similar to this `<script src='https://unpkg.com/collective-webcomponents@0.0.1/dist/collectivewebcomponents.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### Node Modules

- Run `npm install collective-webcomponents --save`
- Put a script tag similar to this `<script src='node_modules/collective-webcomponents/dist/collectivewebcomponents.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### In a stencil-starter app

- Run `npm install collective-webcomponents --save`
- Add an import to the npm packages `import collective-webcomponents;`
- Then you can use the element anywhere in your template, JSX, html etc