<commit_before># Riot Action

This library provides an easy way to separate the view (`tag`) and the logic (`action`).

**NOTE: Riot Action is still in development**

## Usage

Write the view and apply the mixin `riot-action`:

```html
<memo>
  <input type="text" value={ message || '' } onchange={ change }>
  <button onclick={ click }>Clear</button>

  <script>
    this.mixin('riot-action') // load mixin

    this.change = (e) => {
      this.trigger('save', this.message = e.target.value)
    }
    this.click = (e) => {
      this.trigger('clear')
    }
  </script>
</memo>
```

Write the logic as a separated class:

```js
import Action from 'riot-action'

export default class $ extends Action {
  // Actions
  // - actions are triggered via events
  // - actions are automatically registered to its view as an events
  save (message) {
    someAPI.save(message)
      .catch(error => {
        this.update({ error })
      })
  }
  clear () {
    someAPI.clearAll()
      .then(() => {
        this.update({ message: '' })
      })
  }
}
```

Combine the view and the logic:

```html
import Memo from './action-memo'

<app>
  <memo action={ action.Memo } />
  <script>
    this.action = { Memo }
  </script>
</app>
```
<commit_msg>Update README: how to attach logic via JavaScript<commit_after># Riot Action

This library provides an easy way to separate the view (`tag`) and the logic (`action`).

**NOTE: Riot Action is still in development**

## Usage

Write the view and apply the mixin `riot-action`:

```html
<memo>
  <input type="text" value={ message || '' } onchange={ change }>
  <button onclick={ click }>Clear</button>

  <script>
    this.mixin('riot-action') // load mixin

    this.change = (e) => {
      this.trigger('save', this.message = e.target.value)
    }
    this.click = (e) => {
      this.trigger('clear')
    }
  </script>
</memo>
```

Write the logic as a separated class:

```js
import Action from 'riot-action'

export default class $ extends Action {
  // Actions
  // - actions are triggered via events
  // - actions are automatically registered to its view as an events
  save (message) {
    someAPI.save(message)
      .catch(error => {
        this.update({ error })
      })
  }
  clear () {
    someAPI.clearAll()
      .then(() => {
        this.update({ message: '' })
      })
  }
}
```

Combine the view and the logic:

```js
import riot from 'riot'
import Memo from './action-memo'
import './memo.tag'

riot.mount('memo', { action: Memo })
```

Or:

```html
import Memo from './action-memo'

<app>
  <memo action={ action.Memo } />
  <script>
    this.action = { Memo }
  </script>
</app>
```

In both cases, the Action is passed by its attributes.

{'fraction_non_alphanumeric': 0.15871254162042175, 'fraction_numerical': 0.0, 'mean_word_length': 2.787114845938375, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, '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': '4896568', 'n_tokens_mistral': 916, 'n_tokens_neox': 876, 'n_words': 280}