<commit_before>[![Logo](https://raw.githubusercontent.com/Chialab/dna/next/docs/logo.png)](http://dna.chialab.io)

Just another components pattern with IncrementalDOM templates.

[Documentation](http://dna.chialab.io/docs) | [Issue tracker](https://github.com/Chialab/dna/issues) | [Project home page](http://dna.chialab.io) | [Author home page](http://www.chialab.com)

## Install

[![NPM](https://img.shields.io/npm/v/@dnajs/idom.svg)](https://www.npmjs.com/package/@dnajs/idom)
```
$ npm i @dnajs/idom --save
```

## Usage

### Defining a template using `IDOM.h`
`IDOM.h` is a wrapper for IncrementalDOM api:
```js
// my-component.js
import { BaseComponent, IDOM } from '@dnajs/idom';

export class MyComponent extends BaseComponent {
    get template() {
        return () => IDOM.h('span', 'Hello!');
    }
}
```
it will look like:
```html
<my-component>
    <span>Hello!</span>
</my-component>
```

JSX support is provided too, passing `IDOM.h` as `pragma`:
```js
// .babelrc
...
    "plugins": [
        ...,
        ["transform-react-jsx", { "pragma": "IDOM.h" }],
        ...
    ]
...
```
```js
// my-component.js
import { BaseComponent, IDOM } from '@dnajs/idom';

export class MyComponent extends BaseComponent {
    get template() {
        return <span>Hello!</span>;
    }
}
```

### IncrementalDOM notifications
You can use IncrementalDOM notifications to trigger components' life cycle callbacks. This will save you from import heavy polyfills for Custom Elements support if your application is built entirely with DNA or IncrementalDOM.

In order to activate IncrementalDOM notifications, import the `observer.js` file in your application:
```js
import '@dnajs/idom/observer.js';
```<commit_msg>chore: update dna/idom README<commit_after>[![Logo](https://raw.githubusercontent.com/Chialab/dna/next/docs/logo.png)](http://dna.chialab.io)

Just another components pattern with IncrementalDOM templates.

[Documentation](http://dna.chialab.io/docs) | [Issue tracker](https://github.com/Chialab/dna/issues) | [Project home page](http://dna.chialab.io) | [Author home page](http://www.chialab.com)

## Install

[![NPM](https://img.shields.io/npm/v/@dnajs/idom.svg)](https://www.npmjs.com/package/@dnajs/idom)
```
$ npm i @dnajs/idom --save
```

## Usage

### Defining a template using `IDOM.h`
`IDOM.h` is a wrapper for IncrementalDOM api:
```js
// my-component.js
import { BaseComponent, IDOM } from '@dnajs/idom';

export class MyComponent extends BaseComponent {
    get template() {
        return () => IDOM.h('span', 'Hello!');
    }
}
```
it will look like:
```html
<my-component>
    <span>Hello!</span>
</my-component>
```

### With JSX!
JSX support is provided too, passing `IDOM.h` as `pragma`.
```sh
$ npm install babel-plugin-transform-react-jsx -D
```
```js
// .babelrc
...
    "plugins": [
        ...,
        ["transform-react-jsx", { "pragma": "IDOM.h" }],
        ...
    ]
...
```
```js
// my-component.js
import { BaseComponent, IDOM } from '@dnajs/idom';

export class MyComponent extends BaseComponent {
    get template() {
        return <span>Hello!</span>;
    }
}
```

### IncrementalDOM notifications
You can use IncrementalDOM notifications to trigger components' life cycle callbacks. This will save you from import heavy polyfills for Custom Elements support if your application is built entirely with DNA or IncrementalDOM.

In order to activate IncrementalDOM notifications, import the `observer.js` file in your application:
```js
import '@dnajs/idom/observer.js';
```
{'fraction_non_alphanumeric': 0.1689419795221843, 'fraction_numerical': 0.0, 'mean_word_length': 3.785034013605442, 'pattern_counts': {'":': 4, '<': 15, '<?xml version=': 0, '>': 17, 'https://': 8, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6510670', 'n_tokens_mistral': 1239, 'n_tokens_neox': 1154, 'n_words': 296}