<commit_before># <img src="asset/capsid.svg" />

[![Circle CI](https://circleci.com/gh/capsidjs/capsid.svg?style=svg)](https://circleci.com/gh/capsidjs/capsid)
[![codecov.io](https://codecov.io/github/capsidjs/capsid/coverage.svg?branch=master)](https://codecov.io/github/capsidjs/capsid?branch=master)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
[![bitHound Overall Score](https://www.bithound.io/github/capsidjs/capsid/badges/score.svg)](https://www.bithound.io/github/capsidjs/capsid)
[![npm](https://img.shields.io/npm/v/capsid.svg)](https://npm.im/capsid)
[![GitHub stars](https://img.shields.io/github/stars/capsidjs/capsid.svg?style=social&label=Star)](https://github.com/capsidjs/capsid)

> Class driven component framework

`capsid` is an UI framework for browsers. It helps organizing your JavaScript code in component-based programming style.

### Basic features

- It's an **UI framework**.
- It has **no dependencies**, but plays nice with `jQuery`.
- **no virtual dom, no templates**
- **small APIs**: 5 apis & 5 decorators
- **small size**: **1.4KB** gzipped

### Install

Download [https://unpkg.com/capsid](https://unpkg.com/capsid) and load it in the page:

```html
<script src="https://unpkg.com/capsid"></script>
<script>
class Hello {
  __mount__ () {
    this.el.textContent = 'Hello, world!'
  }
}

capsid.def('hello', Hello)
</script>

<span class="hello"></span>
```

[See the working demo](https://codepen.io/kt3k/pen/MmYxBB?editors=1010).

Or you can install via npm:

    npm install capsid --save-dev

And require `capsid` module:

```js
const { def } = require('capsid')

class Hello {...}

def('hello', Hello)
```

**Note**: You need to set up webpack/browserify/rollup in the this case.

### License

MIT License<commit_msg>docs: update doc site README<commit_after># <img src="asset/capsid.svg" />

[![Circle CI](https://circleci.com/gh/capsidjs/capsid.svg?style=svg)](https://circleci.com/gh/ca
psidjs/capsid)
[![codecov.io](https://codecov.io/github/capsidjs/capsid/coverage.svg?branch=master)](https://co
decov.io/github/capsidjs/capsid?branch=master)
[![Greenkeeper badge](https://badges.greenkeeper.io/capsidjs/capsid.svg)](https://greenkeeper.io
/)
[![npm](https://img.shields.io/npm/v/capsid.svg)](https://npm.im/capsid)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/li
censes/MIT)

> Component-based DOM programming

`capsid` is a library for component-based DOM programming.

# :sparkles: Features

- **Component-based DOM programming library**
- :leaves: Lightweight: **~1.7KB**
- :sunglasses: **no dependencies**
- :sunny: **Plain JavaScript (+ ESNext decorators)**
- :bento: Adds **behaviors** (event handlers and lifecycles) to **classes** of elements based on
 **component** definition.
 - :lollipop: **7 APIs** & **5 decorators**

### Install

# :cd: Install

## Via npm

    npm install --save capsid

then:

```js
const capsid = require('capsid')
```

## Via file

Download [capsid.min.js](https://unpkg.com/capsid@0.23.4/dist/capsid.min.js) Then:

```html
<script src="path/to/capsid.js"></script>
```

In this case, the library exports the global variable `capsid`.

```js
capsid.def('my-component', MyComponent)
```

### License

MIT License
{'fraction_non_alphanumeric': 0.19317838816782373, 'fraction_numerical': 0.005734983398732267, 'mean_word_length': 4.855123674911661, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 15, 'https://': 26, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '294335', 'n_tokens_mistral': 1231, 'n_tokens_neox': 1168, 'n_words': 231}