# [Tranel](https://github.com/etoah/tranel)
[![](https://img.shields.io/badge/Powered%20By%20Plugge-brightgreen.svg)](https://github.com/etoah/Plugge)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/etoah/tranel/blob/master/LICENSE)
[![Build Status](https://travis-ci.org/etoah/tranel.svg?branch=master)](https://travis-ci.org/etoah/tranel)
[![Coveralls](https://img.shields.io/coveralls/etoah/tranel.svg)](https://coveralls.io/github/etoah/tranel)
[![npm](https://img.shields.io/badge/npm-0.1.0-orange.svg)](http://www.npmtrends.com/tranel)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/etoah/tranel.svg)](http://isitmaintained.com/project/etoah/tranel "Percentage of issues still open")


Worker First DOM Manipulate Library

## Characteristics

- Use DOM API like main thread in dom

**Note:** you should clean ref in worker

## Compatibility
Unit tests guarantee support on the following environment:

| IE   | CH   | SF   | IOS  | Android |
| ---- | ---- | ---- | ---- | ---- |
| 10+  | ALL  | 9+   | 9+   | 5+   |

> Note: code depend on Proxy API, so you need import Polyfill to compatible with old version.

## Directory
```
├── demo - Using demo
├── dist - Compiler output code
├── docs - Project documents
├── src - Source code directory
├── test - Unit tests
├── CHANGELOG.md - Change log

```

## Usage Instructions

Using npm, download and install the code. 

```bash
$ npm install --save tranel
```

For Render Thread：

```html
  <script src="../../lib/tranel-dom.js"></script>
  <script>
    new Tranel().listen("./worker.js").registerGlobal()
  </script>
```

For Worker Thread：

```javascript
  importScripts("../../lib/tranel-dom.js");
  new Tranel().listen().registerGlobal()
```

Then you can use DOM API in worker:

```javascript
let $wcomputeButton = document.getElementById('wcompute');
let $wresult = document.getElementById('wresult');
let $input = document.getElementById('input')
$wcomputeButton.addEventListener('click', () => {
  $wresult.innerText = $input.value
})
```
Open [demo](./demo/) get more example.

## Documents
[API](./docs/api.md)

## Contribution Guide

How to switch `JS` and `TS`

- `srctype` and `scripts` in `package.json`
- `require` file of `test/test.js`
- `require` file of `test/browser/index.html`

For the first time to run, you need to install dependencies firstly.

```bash
$ npm install
```
To dev & serve demo

```bash
$ npm run dev
```

To build the project:

```bash
$ npm run build
```

To run unit tests:

```bash
$ npm t
```

> Note: The browser environment needs to be tested manually under ```test/browser```

Modify the version number in package.json, modify the version number in README.md, modify the CHANGELOG.md, and then release the new version.

```bash
$ npm run release
```

Publish the new version to NPM.

```bash
$ npm publish
```


## Contributors

[contributors](https://github.com/etoah/tranel/graphs/contributors)

## Change Log
[CHANGELOG.md](./CHANGELOG.md)

## TODO
[TODO.md](./docs/.todo)

## Current Users


## Relative links

- [worker-dom](https://github.com/ampproject/worker-dom)