<commit_before># frzr
Super simple MVC inspired by Riot.js 2.0

## install


    npm install frzr


  or [download from here](http://pakastin.github.io/frzr/dist/frzr.js)

## Why yet another MVC?
Frzr.js is different because:
- It's small, really small
- Collections are indexed, so queries are superfast!
- You can provide controllers to models themselves.
- Models/collections can be viewmodels / viewcollections or simple models/collections.
- Small learning curve: only models and collections!
- Embraces vanilla JS!
- No HTML mixed in JS or JS mixed in HTML
- Semi-immutable: if you change only one item, there's no need to check the others

## model(params)

Parameters:

- init: called when model is created
- update: called when model is updating
- updated: called when model is updated
- template: HTML template
- render: register 'render' listener
- rendered: register 'rendered' listener
- mount: register 'mount' listener
- unmount: register 'unmount' listener
- destroy: register 'destroy' listener

Attributes:
- set(key, value): set by key
- unset(key): unset by key
- reset(data): set by object
- mount(target): mount to DOM
- unmount(): unmount from DOM
- destroy(): destroy model (removes listeners etc)

Events:
- init: model created
- update: model updating
- updated: model updated
- render: rendering to DOM
- rendered: rendered to DOM
- mount: mounted to DOM
- unmount: unmounted from DOM
- destroy: model destroyed

Inside render:
- this.$el: DOM element
- this.$find(query): Shortcut to this.$el.querySelector(query)
  - NEW! if you have a DOM node with a special attribute ```<div frzr="test">```, you can find this node superfast by using ```this.$find('$test')```
- this.$findAll(query): Shortcut to Array.prototype.slice.call(this.$el.querySelectorAll(query))

Example:

    var model = frzr.model({
        init: function () {
        },
        update: function (data, oldData) {
            this.c = data.a + data.b
        },
        updated: function (data, oldData) {
            console.log(this.a, this.b, this.c)
        },
        template: '<div class="model"></div>',
        render: function (data) {
            this.$el.textContent = data.a + ' + ' + data.b + ' = ' + data.c
        }
    })
    model.reset({
        a: 1,
        b: 2
    })
    model.set({a: 2, d: 3})
    model.unset('d')
    model.mount(document.body)


## collection(params)

Parameters:

- key: ID key, i.e. "_id"
- index: attributes to index, separated by space, i.e. "parent resolution"
- model: model to use

Example:

    var collection = frzr.collection({
        key: '_id',
        index: 'parent resolution',
        model: model
    })
    collection.reset([
        {_id: 1, title: 'Title 1'},
        {_id: 2, title: 'Title 2', parent: 1},
        {_id: 3, title: 'Title 3', parent: 1}
    ])
    console.log(collection.find('parent', 1))
    console.log(collection.get(2))
    collection.mount(document.body)


Attributes:

- get(): Get all models
- get(id): Get model by id or index (whether key is set or not)
- raw(): Get raw data
- raw(id): Get raw data by id or index
- set(id, data): Set data by id or index
- find(key, value): Find all where data[key] === value (key must be indexed)
- findOne(key, value): Find first one where data[key] === value
- filter(iterator): Filter collection in place
- sort(iterator): Sort collection in place
- unset(id): Unset by id
- reset(data): Reset data (if key set, inserts/reorders/updates models)
- mount(target): Mount all models to the DOM
- unmount(): Unmount all models from DOM

## transition(el, time, params)

Parameters:

- from: Style attributes to animate from (if 'auto', value is calculated automatically)
- to: Style attributes to animate to (if 'auto', value is calculated automatically)
- delay: Animation delay
- ease: What easing to use (look options from below)
- remove: Attributes to remove after transition is ready (separated by space)
- onComplete: What to do when transition is ready

Example:

    frzr.transition(el, 1.5, {
        delay: .5,
        from: {
            height: 'auto',
            transform: 'translate(0, 0)'
        },
        to: {
            height: 0,
            transform: 'translate(0, 100)'
        },
        ease: 'inOutQuart',
        remove: 'height transform transition',
        onComplete: function () {
            console.log('Animation ready!')
        }
    })


Easing functions:

- inQuad, inCubic, inQuart, inQuint, inSine, inExpo, inCirc, inBack
- outQuad, outCubic, outQuart, outQuint, outSine, outExpo, outCirc, outBack
- inOutQuad, inOutCubic, inOutQuart, inOutQuint, inOutSine, inOutExpo, inOutCirc, inOutBack
<commit_msg>small add..<commit_after># frzr
Super simple MVC inspired by Riot.js 2.0

## install


    npm install frzr


  or [download from here](http://pakastin.github.io/frzr/dist/frzr.js)

## Why yet another MVC?
Frzr.js is different because:
- It's small, really small
- Collections are indexed, so queries are superfast!
- You can provide controllers to models themselves.
- Models/collections can be viewmodels / viewcollections or simple models/collections.
- Small learning curve: only models and collections!
- Embraces vanilla JS!
- No HTML mixed in JS or JS mixed in HTML
- Semi-immutable: if you change only one item, there's no need to check the others

## model(params)

Parameters:

- init: called when model is created
- update: called when model is updating
- updated: called when model is updated
- template: HTML template
- render: register 'render' listener
- rendered: register 'rendered' listener
- mount: register 'mount' listener
- unmount: register 'unmount' listener
- destroy: register 'destroy' listener

Attributes:
- set(key, value): set by key
- unset(key): unset by key
- reset(data): set by object
- mount(target): mount to DOM
- unmount(): unmount from DOM
- destroy(): destroy model (removes listeners etc)

Events:
- init: model created
- update: model updating
- updated: model updated
- render: rendering to DOM
- rendered: rendered to DOM
- mount: mounted to DOM
- unmount: unmounted from DOM
- destroy: model destroyed

Inside render:
- this.$el: DOM element
- this.$find(query): Shortcut to this.$el.querySelector(query)
  - NEW! if you have a DOM node with a special attribute ```<div frzr="test">```, you can find this node superfast by using ```this.$find('$test')```. ```frzr```-attribute is not added to DOM.
- this.$findAll(query): Shortcut to Array.prototype.slice.call(this.$el.querySelectorAll(query))

Example:

    var model = frzr.model({
        init: function () {
        },
        update: function (data, oldData) {
            this.c = data.a + data.b
        },
        updated: function (data, oldData) {
            console.log(this.a, this.b, this.c)
        },
        template: '<div class="model"></div>',
        render: function (data) {
            this.$el.textContent = data.a + ' + ' + data.b + ' = ' + data.c
        }
    })
    model.reset({
        a: 1,
        b: 2
    })
    model.set({a: 2, d: 3})
    model.unset('d')
    model.mount(document.body)


## collection(params)

Parameters:

- key: ID key, i.e. "_id"
- index: attributes to index, separated by space, i.e. "parent resolution"
- model: model to use

Example:

    var collection = frzr.collection({
        key: '_id',
        index: 'parent resolution',
        model: model
    })
    collection.reset([
        {_id: 1, title: 'Title 1'},
        {_id: 2, title: 'Title 2', parent: 1},
        {_id: 3, title: 'Title 3', parent: 1}
    ])
    console.log(collection.find('parent', 1))
    console.log(collection.get(2))
    collection.mount(document.body)


Attributes:

- get(): Get all models
- get(id): Get model by id or index (whether key is set or not)
- raw(): Get raw data
- raw(id): Get raw data by id or index
- set(id, data): Set data by id or index
- find(key, value): Find all where data[key] === value (key must be indexed)
- findOne(key, value): Find first one where data[key] === value
- filter(iterator): Filter collection in place
- sort(iterator): Sort collection in place
- unset(id): Unset by id
- reset(data): Reset data (if key set, inserts/reorders/updates models)
- mount(target): Mount all models to the DOM
- unmount(): Unmount all models from DOM

## transition(el, time, params)

Parameters:

- from: Style attributes to animate from (if 'auto', value is calculated automatically)
- to: Style attributes to animate to (if 'auto', value is calculated automatically)
- delay: Animation delay
- ease: What easing to use (look options from below)
- remove: Attributes to remove after transition is ready (separated by space)
- onComplete: What to do when transition is ready

Example:

    frzr.transition(el, 1.5, {
        delay: .5,
        from: {
            height: 'auto',
            transform: 'translate(0, 0)'
        },
        to: {
            height: 0,
            transform: 'translate(0, 100)'
        },
        ease: 'inOutQuart',
        remove: 'height transform transition',
        onComplete: function () {
            console.log('Animation ready!')
        }
    })


Easing functions:

- inQuad, inCubic, inQuart, inQuint, inSine, inExpo, inCirc, inBack
- outQuad, outCubic, outQuart, outQuint, outSine, outExpo, outCirc, outBack
- inOutQuad, inOutCubic, inOutQuart, inOutQuint, inOutSine, inOutExpo, inOutCirc, inOutBack

{'fraction_non_alphanumeric': 0.1216288242191664, 'fraction_numerical': 0.0055431190704615715, 'mean_word_length': 3.0283383426363244, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, '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': '2384420', 'n_tokens_mistral': 2937, 'n_tokens_neox': 2830, 'n_words': 1049}