# club3

Latest version **1.0.7** (published 2018-11-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install club3
pnpm add club3
yarn add club3
bun add club3
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2018-11-23 |
| First published | 2018-11-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 52.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Johan Olsson |
| Maintainers | johano |

## Links

- npm: https://www.npmjs.com/package/club3
- npm.io page: https://npm.io/package/club3

## Dependencies (1)

- [club3-vdom](https://npm.io/package/club3-vdom.md) ^1.0.1

## Recent versions

- 1.0.7 (latest) — 2018-11-23
- 1.0.6 — 2018-11-16
- 1.0.4 — 2018-11-07
- 1.0.2 — 2018-11-04
- 1.0.1 — 2018-11-04
- 1.0.0 — 2018-11-04

## README

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### Table of Contents

-   [Component][1]
-   [register][2]
    -   [Parameters][3]
    -   [Examples][4]
-   [VComment][5]
-   [VNode][6]
    -   [diff][7]
        -   [Parameters][8]
-   [applyPatch][9]
    -   [Parameters][10]
    -   [Examples][11]

## Component

Component

## register

### Parameters

-   `name` **[string][12]** must be a unique dash separate string.
-   `Self` **Class** component life cycle class. (optional, default `Component`)

### Examples

```javascript
c3.register('app-root', class extends c3.Component {
  attached() {
    console.log(this.name, 'attached to', this.host.parentNode)
  }
})
```

## VComment

**Extends VNode**

Create a new virtual comment.

## VNode

### diff

Create a Vpatch with all differences between given node

#### Parameters

-   `next` **[VNode][13]** node to diff aganst.
-   `patch` **VPatch** VPatch to add changes to. (optional, default `new VPatch()`)

Returns **any** VPatch

## applyPatch

Apply all changes to given DOM Element

### Parameters

-   `node` **[HTMLElement][14]** 
-   `context` **[Object][15]** bind to all event (optional, default `{}`)

### Examples

```javascript
const parser = new HTMLParser()
const patch = new VDocument().diff(parser.parseHTML(`
  <div onclick="this.clickHandler(event)"></div>
`))

patch.applyPatch(document.body, {
  clickHandler(event) {
    // ...handle event
  }
})
```

[1]: #component

[2]: #register

[3]: #parameters

[4]: #examples

[5]: #vcomment

[6]: #vnode

[7]: #diff

[8]: #parameters-1

[9]: #applypatch

[10]: #parameters-2

[11]: #examples-1

[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[13]: #vnode

[14]: https://developer.mozilla.org/docs/Web/HTML/Element

[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

---
_Source: https://npm.io/package/club3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._