<commit_before># Introduction

- [What is Mag.JS?](#what-is-magjs)
- [Getting started](#getting-started)
- [Hello world](#hello-world)
- [DOM elements](#dom-elements)
- [Components](#components)
- [Routing](#routing)
- [XHR](#xhr)

---

### What is Mag.JS?

Mag.JS is an simple intuitive Javascript library for component templating.  
It's small (8kb gzip), fast and provides routing and XHR utilities out of the box ([Addons](https://github.com/magnumjs/mag.js/blob/master/src/addons/README.md)).

Mag.JS is used for quickly prototyping UI templates. It focuses on the clean and unobtrusive separation of HTML and JavaScript. 
While keeping the interaction between the two effortless and fun!
---

### Getting started

The easiest way to try out Mag.JS is to include it from rawgit, and follow this tutorial. 
It'll cover the majority of the API surface (including routing and XHR) but it'll only take 10 minutes.

Let's create an HTML file to follow along:

```html
<body></body>
<script src="//rawgit.com/magnumjs/mag.js/master/mag-latest.min.js"></script>
<script>
var root = document.body

// your code goes here!
</script>
```
[Example](http://jsbin.com/deyozubafa/edit?html,output)
---

### Hello world

Let's start as small as well can: render some text on screen. Copy the code below into your file (and by copy, I mean type it out - you'll learn better)

Let's wrap our text in an `<h1>` tag.

```html
<body>
  <h1></h1>
</body>
```

```javascript
var root = document.body

mag.module(root, {view: (state)=> state.h1 = "Hello world" })
```
[Example](http://jsbin.com/vixerohumu/edit?html,output)

Now, let's change the text to something else. Add this line of code under the previous one:

```javascript
state.h1 = "My first app"
```
[Example](http://jsbin.com/sadavemeri/edit?html,output)

As you can see, you use the same code to both create and update HTML. 
Mag.JS automatically figures out the most efficient way of updating the text, rather than blindly recreating it from scratch.

---

### DOM elements

Let's wrap our text in an `<h1>` tag template.

```javascript
mag.module(root, {view: (state)=> {
  state.placeholder = mag('template', {
    view: (state)=> state.h1 = 'My first app'
  })
 }
})
```
[Example](http://jsbin.com/pidicezeki/edit?html,output)

The `mag()` function can be used to reference any HTML element you want. Either by its element ID or the Node itself:
The main difference between `mag` and `mag.module` is that `mag` uses the template indirectly while `mag.module` uses it directly.

```javascript
mag(document.getElementById('template'), {
  view: (state)=> state.h1 = 'My first app'
})
```

The `state` Object can be used to describe any HTML structure you want. So if you to add a class to the `<h1>`:

```javascript
state.h1 = { _class: "title", _text: "My first app" }
```
A leading underscore denotes a property/attribute. The `_text` and `_html` are used as expected.
[Example](http://jsbin.com/kipezarepe/edit?html,output)

If you want to have multiple elements:

```javascript
state.li = [
  {h1: { _class: "title", _text: "My first app"}},
  {button: "A button"}
]
```
Any array of items will automatically create the same amount for the matching selectors.
[Example](http://jsbin.com/suhopewita/edit?html,output)

And so on:

```javascript
state.main = {li: [
  {h1: {_class: "title"}, _text: "My first app"},
  {button: "A button"}
]}
```
[Example](http://jsbin.com/retafokuko/edit?html,output)

Note: If you prefer external templates you can do that too, [it's possible via an extension](https://github.com/magnumjs/mag.js/tree/master/src/extends).

```javascript
//Syntax via mag.template extends
mag.module('template.html', {view: ()});
mag('template.html', {view: ()});

mag.module({templateUrl: 'template.html', view: ()});
mag({templateUrl: 'template.html', view: ()});
```

**Element Matchers**
<commit_msg>Update introduction.md<commit_after># Introduction

- [What is Mag.JS?](#what-is-magjs)
- [Getting started](#getting-started)
- [Hello world](#hello-world)
- [DOM elements](#dom-elements)
- [Components](#components)
- [Routing](#routing)
- [XHR](#xhr)

---

### What is Mag.JS?

Mag.JS is an simple intuitive Javascript library for component templating.  
It's small (8kb gzip), fast and provides routing and XHR utilities out of the box ([Addons](https://github.com/magnumjs/mag.js/blob/master/src/addons/README.md)).

Mag.JS is used for quickly prototyping UI templates. It focuses on the clean and unobtrusive separation of HTML and JavaScript. 
While keeping the interaction between the two effortless and fun!
---

### Getting started

The easiest way to try out Mag.JS is to include it from rawgit, and follow this tutorial. 
It'll cover the majority of the API surface (including routing and XHR) but it'll only take 10 minutes.

Let's create an HTML file to follow along:

```html
<body></body>
<script src="//rawgit.com/magnumjs/mag.js/master/mag-latest.min.js"></script>
<script>
var root = document.body

// your code goes here!
</script>
```
[Example](http://jsbin.com/deyozubafa/edit?html,output)
---

### Hello world

Let's start as small as well can: render some text on screen. Copy the code below into your file (and by copy, I mean type it out - you'll learn better)

Let's wrap our text in an `<h1>` tag.

```html
<body>
  <h1></h1>
</body>
```

```javascript
var root = document.body

mag.module(root, {view: (state)=> state.h1 = "Hello world" })
```
[Example](http://jsbin.com/vixerohumu/edit?html,output)

Now, let's change the text to something else. Add this line of code under the previous one:

```javascript
state.h1 = "My first app"
```
[Example](http://jsbin.com/sadavemeri/edit?html,output)

As you can see, you use the same code to both create and update HTML. 
Mag.JS automatically figures out the most efficient way of updating the text, rather than blindly recreating it from scratch.

---

### DOM elements

Let's wrap our text in an `<h1>` tag template.

```javascript
mag.module(root, {view: (state)=> {
  state.placeholder = mag('template', {
    view: (state)=> state.h1 = 'My first app'
  })
 }
})
```
[Example](http://jsbin.com/pidicezeki/edit?html,output)

The `mag()` function can be used to reference any HTML element you want. Either by its element ID or the Node itself:
The main difference between `mag` and `mag.module` is that `mag` uses the template indirectly while `mag.module` uses it directly.

```javascript
mag(document.getElementById('template'), {
  view: (state)=> state.h1 = 'My first app'
})
```

The `state` Object can be used to describe any HTML structure you want. So if you to add a class to the `<h1>`:

```javascript
state.h1 = { _class: "title", _text: "My first app" }
```
A leading underscore denotes a property/attribute. The `_text` and `_html` are used as expected.
[Example](http://jsbin.com/kipezarepe/edit?html,output)

If you want to have multiple elements:

```javascript
state.li = [
  {h1: { _class: "title", _text: "My first app"}},
  {button: "A button"}
]
```
Any array of items will automatically create the same amount for the matching selectors.
[Example](http://jsbin.com/suhopewita/edit?html,output)

And so on:

```javascript
state.main = {li: [
  {h1: {_class: "title"}, _text: "My first app"},
  {button: "A button"}
]}
```
[Example](http://jsbin.com/retafokuko/edit?html,output)

Note: If you prefer external templates you can do that too, [it's possible via an extension](https://github.com/magnumjs/mag.js/blob/master/src/extends/README.md).

```javascript
//Syntax via mag.template extends
mag.module('template.html', {view: ()});
mag('template.html', {view: ()});

mag.module({templateUrl: 'template.html', view: ()});
mag({templateUrl: 'template.html', view: ()});
```

**Element Matchers**

{'fraction_non_alphanumeric': 0.14937491944838252, 'fraction_numerical': 0.0038664776388709883, 'mean_word_length': 4.4152128401953945, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 37, 'https://': 4, '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': '503726', 'n_tokens_mistral': 2587, 'n_tokens_neox': 2486, 'n_words': 895}