<commit_before>clearwater
----------

  - [![Quality](http://img.shields.io/codeclimate/github/clearwater-rb/clearwater.svg?style=flat-square)](https://codeclimate.com/github/clearwater-rb/clearwater)
  - [![Coverage](http://img.shields.io/codeclimate/coverage/github/clearwater-rb/clearwater.svg?style=flat-square)](https://codeclimate.com/github/clearwater-rb/clearwater)
  - [![Build](http://img.shields.io/travis-ci/clearwater-rb/clearwater.svg?style=flat-square)](https://travis-ci.org/clearwater-rb/clearwater)
  - [![Dependencies](http://img.shields.io/gemnasium/clearwater-rb/clearwater.svg?style=flat-square)](https://gemnasium.com/clearwater-rb/clearwater)
  - [![Downloads](http://img.shields.io/gem/dtv/clearwater.svg?style=flat-square)](https://rubygems.org/gems/clearwater)
  - [![Tags](http://img.shields.io/github/tag/clearwater-rb/clearwater.svg?style=flat-square)](http://github.com/clearwater-rb/clearwater/tags)
  - [![Releases](http://img.shields.io/github/release/clearwater-rb/clearwater.svg?style=flat-square)](http://github.com/clearwater-rb/clearwater/releases)
  - [![Issues](http://img.shields.io/github/issues/clearwater-rb/clearwater.svg?style=flat-square)](http://github.com/clearwater-rb/clearwater/issues)
  - [![License](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)
  - [![Version](http://img.shields.io/gem/v/clearwater.svg?style=flat-square)](https://rubygems.org/gems/clearwater)

Clearwater is a rich front-end framework for building fast, reasonable, and easily composable browser applications in Ruby. It renders to a virtual DOM and applies the virtual DOM to the browser's actual DOM to update only what has changed on the page.

Installing
==========

If you're using this as a standalone application then just install via:

    $ gem install clearwater

If you're using rails then add these lines to your application's Gemfile:

``` ruby
gem 'clearwater'
gem 'opal-rails' # Only needed for Rails apps
```


Using
=====

Clearwater has three distinct parts:

1. The component: the presenter and template engine
1. The router: the dispatcher and control
1. The application: the "Go" button

**The Component**
``` ruby
class Blog
  include Clearwater::Component

  # The render method defines what gets rendered. It needs to return a
  # virtual-DOM element using the element DSL.
  def render
    # Element DSL is tag_name(attributes, content)
    # The attributes can be omitted if you don't need to customize the element.
    div({ id: 'foo' }, [
      # Content types:
      h1('Heading'), # Another element
      'Hello, world!',    # String
      123,                # Numeric
      nil,                # Absolutely nothing
      ArticleIndex.new    # Another component
    ])
  end
end
```

**The Router**
<commit_msg>Making the view layer a little easier to understand<commit_after>clearwater
----------

  - [![Quality](http://img.shields.io/codeclimate/github/clearwater-rb/clearwater.svg?style=flat-square)](https://codeclimate.com/github/clearwater-rb/clearwater)
  - [![Coverage](http://img.shields.io/codeclimate/coverage/github/clearwater-rb/clearwater.svg?style=flat-square)](https://codeclimate.com/github/clearwater-rb/clearwater)
  - [![Build](http://img.shields.io/travis-ci/clearwater-rb/clearwater.svg?style=flat-square)](https://travis-ci.org/clearwater-rb/clearwater)
  - [![Dependencies](http://img.shields.io/gemnasium/clearwater-rb/clearwater.svg?style=flat-square)](https://gemnasium.com/clearwater-rb/clearwater)
  - [![Downloads](http://img.shields.io/gem/dtv/clearwater.svg?style=flat-square)](https://rubygems.org/gems/clearwater)
  - [![Tags](http://img.shields.io/github/tag/clearwater-rb/clearwater.svg?style=flat-square)](http://github.com/clearwater-rb/clearwater/tags)
  - [![Releases](http://img.shields.io/github/release/clearwater-rb/clearwater.svg?style=flat-square)](http://github.com/clearwater-rb/clearwater/releases)
  - [![Issues](http://img.shields.io/github/issues/clearwater-rb/clearwater.svg?style=flat-square)](http://github.com/clearwater-rb/clearwater/issues)
  - [![License](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)
  - [![Version](http://img.shields.io/gem/v/clearwater.svg?style=flat-square)](https://rubygems.org/gems/clearwater)

Clearwater is a rich front-end framework for building fast, reasonable, and easily composable browser applications in Ruby. It renders to a virtual DOM and applies the virtual DOM to the browser's actual DOM to update only what has changed on the page.

Installing
==========

If you're using this as a standalone application then just install via:

    $ gem install clearwater

If you're using rails then add these lines to your application's Gemfile:

``` ruby
gem 'clearwater'
gem 'opal-rails' # Only needed for Rails apps
```


Using
=====

Clearwater has three distinct parts:

1. The component: the presenter and template engine
1. The router: the dispatcher and control
1. The application: the "Go" button

**The Component**
``` ruby
class Blog
  # All components need a set of behavior, but don't worry it's not a massive list.
  include Clearwater::Component

  # This method needs to return a virtual-DOM element using the element DSL.
  def render
    main({ id: 'content' }, [Articles.new, Biography.new])
  end
  

end
```

While we use two components in this example, you can use all of these as well:

``` ruby
# Render <main><h1>Heading</h1><article>hello!</article></main>
def render
  main(properties, [h1('Heading'), article('hello!')])
end

# Render <main>Hello, world!</main>
def render
  main(properties, 'Hello, world!')
end

# Render <main>123</main>
def render
  main(properties, 123)
end

# Render <main></main>
def render
  main(properties, nil)
end
```

**The Router**

{'fraction_non_alphanumeric': 0.1544493692465053, 'fraction_numerical': 0.0032390044323218547, 'mean_word_length': 4.447539461467038, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, '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': '155996', 'n_tokens_mistral': 1951, 'n_tokens_neox': 1842, 'n_words': 405}