0.22.7 • Published 8 years ago

frzr v0.22.7

Weekly downloads
-
License
ISC
Repository
-
Last release
8 years ago

*FRZR*

Turboboosted 2 KB view library with 100 % test coverage.

npm Build Status npm Twitter Follow

Contributing:

Issues/pull requests are more than welcome! Please use the dev branch for pull requests, thanks!

Install:

npm install frzr

Download:

Latest updates

Using at server-side

FRZR-dom

Using with JSX

https://gist.github.com/fson/576eda4a5401fd078c18101cdda558e0#file-todo-js

Getting started

http://codepen.io/collection/XKwVMG (more will be added soon..)

Calendar project example

https://github.com/pakastin/frzr-calendar

Creating a table

https://jsfiddle.net/mhLq0p9r/1/

Performance

HelsinkiJS talk

http://youtu.be/0nh2EK1xveg

SurviveJS interview:

http://survivejs.com/blog/frzr-interview/

el(tagName, (attributes), (...children))

Creates a HTML element:

var p = el('p', { textContent: 'Hello world!' });

You can also define children:

var div = el('div', null, p);

You can also omit attributes:

var p = el('p', 'Hello world!' );
var div = el('div', p);

It's also possible the register custom elements and attributes, covered here.

svg(tagName, (attributes), (...children))

Works like el, but creates a SVG element:

var circle = svg('circle', { cx: 50, cy: 50, r: 50 });
var canvas = svg('svg', { width: 100, height: 100 }, circle);

Creating components

Components (or Views) are just POJF (plain old JavaScript functions):

function Item () {
  this.el = el('p');
}
Item.prototype.update = function (text) {
  this.el.textContent = text;
}
var item = new Item();
item.update('Hello world!');
mount(document.body, item); // <body><p>Hello world!</p></body>

You can also use ES6 classes:

class Item {
  constructor () {
    this.el = el('p');
  }
  update (text) {
    this.el.textContent = text;
  }
}
const item = new Item();
item.update('Hello world!');
mount(document.body, item); // <body><p>Hello world!</p></body>

There are also some lifecycle "events" covered here.

new List(View, (key), (initData), (skipRender));

Automatically inserts, removes and even reorders components. Previous example makes a lot more sense now:

var list = new List(Item);
mount(document.body, list);
list.update([1, 2, 3]); // <body><p>1</p><p>2</p><p>3</p></body>
list.update([2, 3, 4, 5]); // <body><p>2</p><p>3</p><p>4</p><p>5</p></body>

By defining a second key parameter you can reorder DOM elements. The third initData parameter just gets sent to the Component constructor as a first argument, with item and index. The fourth skipRender parameter skips the DOM update, if you want to implement a custom method.

mount(target, child)

You can mount HTML elements/components to HTML elements/components.

mount(document.body, p);
mount(document.body, div);
mount(div, p);

mountBefore(target, child, before)

mountBefore(document.body, svg, div);

unmount(target, child)

Unmounts element/component from element/component.

unmount(document.body, svg);

setChildren(target, child)

This cleverly replaces target's children. Children already in the DOM automatically gets moved / kept in place.

setChildren(document.body, [p, svg]);

virtual-dom version

If you like virtual dom updates better, check out RZR. You can also mix & match!

0.22.7

8 years ago

0.22.5

8 years ago

0.22.4

8 years ago

0.22.3

8 years ago

0.22.2

8 years ago

0.22.1

8 years ago

0.22.0

8 years ago

0.21.3

8 years ago

0.21.2

8 years ago

0.21.1

8 years ago

0.21.0

8 years ago

0.20.0

8 years ago

0.19.1

8 years ago

0.19.0

8 years ago

0.18.3

8 years ago

0.18.2

8 years ago

0.18.1

8 years ago

0.18.0

8 years ago

0.17.0

8 years ago

0.16.3

8 years ago

0.16.2

8 years ago

0.16.1

8 years ago

0.16.0

8 years ago

0.15.1

8 years ago

0.15.0

8 years ago

0.14.3

8 years ago

0.14.2

8 years ago

0.14.1

8 years ago

0.14.0

8 years ago

0.13.0

8 years ago

0.12.2

8 years ago

0.12.1

8 years ago

0.12.0

8 years ago

0.11.4

8 years ago

0.11.3

8 years ago

0.11.2

8 years ago

0.11.1

8 years ago

0.11.0

8 years ago

0.10.1

8 years ago

0.10.0

8 years ago

0.9.10

8 years ago

0.9.9

8 years ago

0.9.8

8 years ago

0.9.7

8 years ago

0.9.6

8 years ago

0.9.5

8 years ago

0.9.4

8 years ago

0.9.3

8 years ago

0.9.2

8 years ago

0.9.1

8 years ago

0.9.0

8 years ago

0.8.14

8 years ago

0.8.13

8 years ago

0.8.12

8 years ago

0.8.11

8 years ago

0.8.10

8 years ago

0.8.9

8 years ago

0.8.8

8 years ago

0.8.5

8 years ago

0.8.4

8 years ago

0.8.3

8 years ago

0.8.2

8 years ago

0.8.1

8 years ago

0.8.0

8 years ago

0.7.9

8 years ago

0.7.8

8 years ago

0.7.7

8 years ago

0.7.6

8 years ago

0.7.5

8 years ago

0.7.4

8 years ago

0.7.3

8 years ago

0.7.2

8 years ago

0.7.1

8 years ago

0.7.0

8 years ago

0.6.6

9 years ago

0.6.5

9 years ago

0.6.4

9 years ago

0.6.3

9 years ago

0.6.2

9 years ago

0.6.1

9 years ago

0.5.1

9 years ago

0.5.0

9 years ago

0.4.9

9 years ago

0.4.8

9 years ago

0.4.7

9 years ago

0.4.6

9 years ago

0.4.5

9 years ago

0.4.4

9 years ago

0.4.3

9 years ago

0.4.2

9 years ago

0.4.1

9 years ago

0.4.0

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.16

9 years ago

0.2.15

9 years ago

0.2.14

9 years ago

0.2.13

9 years ago

0.2.12

9 years ago

0.2.11

9 years ago

0.2.10

9 years ago

0.2.9

9 years ago

0.2.8

9 years ago

0.2.7

9 years ago

0.2.6

9 years ago

0.2.5

9 years ago

0.2.4

9 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.4

9 years ago

0.1.3

9 years ago

0.1.2

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago

0.0.7

9 years ago

0.0.6

9 years ago

0.0.5

9 years ago

0.0.4

9 years ago

0.0.2

9 years ago

0.0.1

9 years ago