<commit_before><img src="http://capsidjs.github.io/capsid/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)
[![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)

> Class driven component framework

`capsid` is a framework for creating UI Components based on HTML classes.

`capsid` doesn't generate DOM nodes. Rather, it binds behaviors to existing DOM nodes. See [Hello world](https://codepen.io/kt3k/pen/MmYxBB) or [Timer](https://codepen.io/kt3k/pen/YVPoWm) examples.

`capsid` encourages the declarative programming by the use of decorators. See [Button](https://codepen.io/kt3k/pen/RVNOvM) or [Mirroring](https://codepen.io/kt3k/pen/VbvKNp) examples.

`capsid` is very different from lately popular frameworks like React or Vue. Those frameworks update DOM nodes based on markups written in their DSL (jsx or vue's markup). `capsid` takes very different approach for creating components. It never creates or updates DOM nodes automatically, but let the framework users do it. `capsid` just helps organizing the event handlers and the DOM nodes relationships.

`capsid` recommends the use of [flux][] design pattern. In `capsid`, you don't need any framework or library to apply flux to your app. You can just use [@emits](https://github.com/capsidjs/capsid#emitseventname) and [@notifies](https://github.com/capsidjs/capsid#notifieseventselector) decorators for making unidirectional data flow among your components.

# 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

# Hello world

The hello world example:

```html
<script src="path/to/capsid"></script>
<script>
class Hello {
  __init__ () {
    this.el.textContent = 'Hello, world!'
  }
}

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

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

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

When you *define* the component, then dom elements which has `hello` class is automatically mounted by Hello component.

# The timer

The timer example:

```html
<span class="timer"></span>

<script src="https://unpkg.com/capsid"></script>
<script>
class Timer {
  __init__ () {
    this.secondsElapsed = 0
    this.start()
  }

  // Starts the timer
  start () {
    this.interval = setInterval(() => { this.tick() }, 1000)
  }

  // Ticks the timer
  tick () {
    this.secondsElapsed++
    this.el.textContent = `Seconds Elapsed: ${this.secondsElapsed}`
  }

  // Stops the timer
  stop () {
    clearInterval(this.interval)
  }
}

capsid.def('timer', Timer)
</script>
```

See [the working demo](https://codepen.io/kt3k/pen/YVPoWm).

# The concept

See [Component and Coelement](http://capsidjs.github.io/capsid/basics/component.html) section of the document.

# :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.18.2/dist/capsid.min.js) Then:

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

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

```js
window.capsid.def('timer', Timer)
```

# APIs

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

- `capsid.def(name, constructor)`
  - Registers class-component.
- `capsid.prep(name[, element])`
  - Initialize class-component on the given range.
- `capsid.make(name, element)`
  - Initializes the element with the component of the given name and return the coelement instance.
- `capsid.mount(Constructor, element)`
  - Initializes the element with the component of the given class and return the coelement.<commit_msg>docs: add decription of capsid lifecycle<commit_after><img src="http://capsidjs.github.io/capsid/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)
[![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)

> Class driven component framework

`capsid` is an UI framework for creating components written in JS classes.

`capsid` doesn't generate DOM nodes. Rather, it binds behaviors to existing DOM nodes. See [Hello world](https://codepen.io/kt3k/pen/MmYxBB) or [Timer](https://codepen.io/kt3k/pen/YVPoWm) examples.

`capsid` encourages the declarative programming by the use of decorators. See [Button](https://codepen.io/kt3k/pen/RVNOvM) or [Mirroring](https://codepen.io/kt3k/pen/VbvKNp) examples.

`capsid` is very different from lately popular frameworks like React or Vue. Those frameworks update DOM nodes based on markups written in their DSL (jsx or vue's markup). `capsid` takes very different approach for creating components. It never creates or updates DOM nodes automatically, but let the framework users do it. `capsid` just helps organizing the event handlers and the DOM nodes relationships.

`capsid` recommends the use of [flux][] design pattern. In `capsid`, you don't need any framework or library to apply flux pattern to your app. You can just use [@emits](https://github.com/capsidjs/capsid#emitseventname) and [@notifies](https://github.com/capsidjs/capsid#notifieseventselector) decorators for making unidirectional data flow among your components.

# 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

# Hello world

The hello world example:

```html
<script src="path/to/capsid"></script>
<script>
class Hello {
  __init__ () {
    this.el.textContent = 'Hello, world!'
  }
}

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

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

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

When you *define* the component, then dom elements which has `hello` class is automatically mounted by Hello component.

# The timer

The timer example shows how you can store component's states in it:

```html
<span class="timer"></span>

<script src="https://unpkg.com/capsid"></script>
<script>
class Timer {
  __init__ () {
    this.secondsElapsed = 0
    this.start()
  }

  // Starts the timer
  start () {
    this.interval = setInterval(() => { this.tick() }, 1000)
  }

  // Ticks the timer
  tick () {
    this.secondsElapsed++
    this.el.textContent = `Seconds Elapsed: ${this.secondsElapsed}`
  }

  // Stops the timer
  stop () {
    clearInterval(this.interval)
  }
}

capsid.def('timer', Timer)
</script>
```

See [the working demo](https://codepen.io/kt3k/pen/YVPoWm).

# The concept

See [Component and Coelement](http://capsidjs.github.io/capsid/basics/component.html) section of the document.

# :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.18.2/dist/capsid.min.js) Then:

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

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

```js
window.capsid.def('timer', Timer)
```

# capsid lifecycle

φ -> [mount] -> mounted -> [discard] -> φ

## capsid lifecycle events

- mount
  - at `DOMContentLoaded` all elements in the page which have the capsid class-names are mounted by the capsid components
  - at `mount` event element and coelement (instance of the component class) are coupled and starting working together. See the below for details.
  - after `DOMContentLoaded`, you need to call `prep` function explicitly to mount capsid components to corresponding elements.

- discard
  - capsid doesn't provide the special method for unmounting the components. If you stop using a component, then simply remove the corresponding dom from the page. That's the end of the component lifecycle.

## anatomy of [mount]

At [mount] event, many things happen. These are the core feature of capsid.js:

- The component class's `instance` is created.
- `instance`.el is set to corresponding dom element.
- event listeners defined by `@on` decorators are attached to the dom element.
- plugin hooks are invoked if you use any.
- if `instance` has __init__ method, then `instance.__init__()` is called.

These things happen in this order, which means in `__init__` method you can access the dom element by `this.el` and you can invoke the event handlers by triggering event at `this.el`.

See the source code of initComponent method for details: https://github.com/capsidjs/capsid/blob/master/src/init-component.js#L14-L44

## capsid lifecycle methods

### `constructor`

The constructor is called at the start of mount event. Its instance (coelement) is bound to element by the framework.

### `__init__`

`__init__` is called at the end of the mount event. When it called, dom element, event handlers are ready and available through `this.el`.

# APIs

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

- `capsid.def(name, constructor)`
  - Registers class-component.
- `capsid.prep(name[, element])`
  - Initialize class-component on the given range.
- `capsid.make(name, element)`
  - Initializes the element with the component of the given name and return the coelement instance.
- `capsid.mount(Constructor, element)`
  - Initializes the element with the component of the given class and return the coelement.
{'fraction_non_alphanumeric': 0.1386643571978445, 'fraction_numerical': 0.005196304849884526, 'mean_word_length': 4.40738813735692, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 41, 'https://': 43, 'lorem ipsum': 0, 'www.': 4, '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': '5022410', 'n_tokens_mistral': 3418, 'n_tokens_neox': 3268, 'n_words': 1011}