<commit_before><p align="center">
	<a href="https://npmjs.com/package/sugar-js">
		<img src="https://img.shields.io/npm/v/sugar-js.svg?style=flat" alt="NPM version"/>
	</a>
	<a href="https://travis-ci.org/tangbc/sugar">
		<img src="https://travis-ci.org/tangbc/sugar.svg?branch=master" alt="Travis CI Status"/>
	</a>
	<a href="https://codecov.io/gh/tangbc/sugar">
		<img src="https://codecov.io/gh/tangbc/sugar/branch/master/graph/badge.svg" alt="codecov"/>
	</a>
	<a href="https://saucelabs.com/u/tangbc">
		<img src="https://saucelabs.com/buildstatus/tangbc" alt="Sauce Test Status"/>
	</a>
	<br>
	<a href="https://saucelabs.com/u/tangbc">
		<img src="https://saucelabs.com/browser-matrix/tangbc.svg" alt="Sauce Browser Matrix"/>
	</a>
</p>


## sugar

> A lightweight and powerful JavaScript MVVM library for building web UI component.

Simple api and without any dependence.
Consists of two independent libraries:
* **`sugar.js`** *Component system + MVVM , for building flexible web component*.
* **`mvvm.js`** *Achived above MVVM* , **it doesn't rely on sugar, it can be used independently**.


## Diagram

<img src="https://tangbc.github.io/github-images/sugar-diagram-en.png" width="600">


## HelloWorld
```html
...
<body>
	<div id="app">
		<h1>{{ title }}</h1>
	</div>
</body>
...
```
```javascript
// define HelloWorld component:
var HelloWorld = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config, {
			target: '#app',
			model: {
				title: 'Hello world!'
			}
		});
	}
});

// create component instance:
var app = sugar.core.create('hello-world', HelloWord);
```
And then the HTML structure was rendered to be:
```html
...
<body>
	<div class="app">
		<h1>Hello world!</h1>
	</div>
</body>
...
```
Data reactive (Model Drive View):
```javascript
app.vm.$data.title = 'Change the title!'; // <h1>Change the title!</h1>
```

## Demos

There are several complete demos in **`demos/`**, check it out and preview them in the following links:

* [StarRating](https://tangbc.github.io/sugar/demos/starRating)
* [DatePicker](https://tangbc.github.io/sugar/demos/datePicker)
* [TodoMVC](https://tangbc.github.io/sugar/demos/todoMVC)
* [Snake eat apple game](https://tangbc.github.io/sugar/demos/snake-eat-apples)

*(Some demos need httpSever (Ajax), so run script `npm run server` to preview if in your local.)*

You can also experience `sugar.js` with a ***RadioComponent*** at [jsfiddle](https://jsfiddle.net/tangbc/may7jzb4/9/).


## Usage

* Get by Node.js package: `npm install sugar-js`

* Both support [`UMD`](https://github.com/umdjs/umd) (Universal Module Definition)
	* `mvvm.js (about 28 kb)` `https://tangbc.github.io/sugar/dist/mvvm.min.js`
	* `sugar.js (about 34 kb)` `https://tangbc.github.io/sugar/dist/sugar.min.js`

* Browsers: **Not support IE8 and below**. Besides, support most modern desktop and mobile browsers.


## Documentation

[Get start and check documentation on Wiki.](https://github.com/tangbc/sugar/wiki)


## Directories

* **`build/`** Development, production and test configurations.
<commit_msg>Save browser-matrix avoid from SauceLabs expiring.<commit_after><p align="center">
	<a href="https://npmjs.com/package/sugar-js">
		<img src="https://img.shields.io/npm/v/sugar-js.svg?style=flat" alt="NPM version"/>
	</a>
	<a href="https://travis-ci.org/tangbc/sugar">
		<img src="https://travis-ci.org/tangbc/sugar.svg?branch=master" alt="Travis CI Status"/>
	</a>
	<a href="https://codecov.io/gh/tangbc/sugar">
		<img src="https://codecov.io/gh/tangbc/sugar/branch/master/graph/badge.svg" alt="Code Coverage"/>
	</a>
	<a href="https://saucelabs.com/u/tangbc">
		<img src="https://saucelabs.com/buildstatus/tangbc" alt="Sauce Test Status"/>
	</a>
	<br>
	<img src="https://tangbc.github.io/github-images/browser-matrix.svg" alt="Sauce Browser Matrix"/>
</p>


## sugar

> A lightweight and powerful JavaScript MVVM library for building web UI component.

Simple api and without any dependence.
Consists of two independent libraries:
* **`sugar.js`** *Component system + MVVM , for building flexible web component*.
* **`mvvm.js`** *Achived above MVVM* , **it doesn't rely on sugar, it can be used independently**.


## Diagram

<img src="https://tangbc.github.io/github-images/sugar-diagram-en.png" width="600">


## HelloWorld
```html
...
<body>
	<div id="app">
		<h1>{{ title }}</h1>
	</div>
</body>
...
```
```javascript
// define HelloWorld component:
var HelloWorld = sugar.Component.extend({
	init: function (config) {
		this.Super('init', config, {
			target: '#app',
			model: {
				title: 'Hello world!'
			}
		});
	}
});

// create component instance:
var app = sugar.core.create('hello-world', HelloWord);
```
And then the HTML structure was rendered to be:
```html
...
<body>
	<div class="app">
		<h1>Hello world!</h1>
	</div>
</body>
...
```
Data reactive (Model Drive View):
```javascript
app.vm.$data.title = 'Change the title!'; // <h1>Change the title!</h1>
```

## Demos

There are several complete demos in **`demos/`**, check it out and preview them in the following links:

* [StarRating](https://tangbc.github.io/sugar/demos/starRating)
* [DatePicker](https://tangbc.github.io/sugar/demos/datePicker)
* [TodoMVC](https://tangbc.github.io/sugar/demos/todoMVC)
* [Snake eat apple game](https://tangbc.github.io/sugar/demos/snake-eat-apples)

*(Some demos need httpSever (Ajax), so run script `npm run server` to preview if in your local.)*

You can also experience `sugar.js` with a ***RadioComponent*** at [jsfiddle](https://jsfiddle.net/tangbc/may7jzb4/9/).


## Usage

* Get by Node.js package: `npm install sugar-js`

* Both support [`UMD`](https://github.com/umdjs/umd) (Universal Module Definition)
	* `mvvm.js (about 28 kb)` `https://tangbc.github.io/sugar/dist/mvvm.min.js`
	* `sugar.js (about 35 kb)` `https://tangbc.github.io/sugar/dist/sugar.min.js`

* Browsers: **Not support IE8 and below**. Besides, support most modern desktop and mobile browsers.


## Documentation

[Get start and check documentation on Wiki.](https://github.com/tangbc/sugar/wiki)


## Directories

* **`build/`** Development, production and test configurations.

{'fraction_non_alphanumeric': 0.18718408609163542, 'fraction_numerical': 0.005543779553236589, 'mean_word_length': 4.211554800339847, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 69, 'https://': 39, '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': '2572057', 'n_tokens_mistral': 2349, 'n_tokens_neox': 2220, 'n_words': 527}