0.22.7 • Published 9 years ago

frzr v0.22.7

Weekly downloads
-
License
ISC
Repository
-
Last release
9 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!

@infinitebrahmanuniverse/nolb-frz@everything-registry/sub-chunk-1705
0.22.7

9 years ago

0.22.5

9 years ago

0.22.4

9 years ago

0.22.3

9 years ago

0.22.2

9 years ago

0.22.1

9 years ago

0.22.0

9 years ago

0.21.3

9 years ago

0.21.2

9 years ago

0.21.1

9 years ago

0.21.0

9 years ago

0.20.0

9 years ago

0.19.1

9 years ago

0.19.0

9 years ago

0.18.3

9 years ago

0.18.2

9 years ago

0.18.1

9 years ago

0.18.0

9 years ago

0.17.0

9 years ago

0.16.3

9 years ago

0.16.2

9 years ago

0.16.1

9 years ago

0.16.0

9 years ago

0.15.1

9 years ago

0.15.0

9 years ago

0.14.3

9 years ago

0.14.2

9 years ago

0.14.1

9 years ago

0.14.0

9 years ago

0.13.0

9 years ago

0.12.2

9 years ago

0.12.1

9 years ago

0.12.0

9 years ago

0.11.4

9 years ago

0.11.3

9 years ago

0.11.2

9 years ago

0.11.1

9 years ago

0.11.0

9 years ago

0.10.1

9 years ago

0.10.0

9 years ago

0.9.10

9 years ago

0.9.9

9 years ago

0.9.8

9 years ago

0.9.7

9 years ago

0.9.6

9 years ago

0.9.5

9 years ago

0.9.4

9 years ago

0.9.3

9 years ago

0.9.2

9 years ago

0.9.1

9 years ago

0.9.0

9 years ago

0.8.14

10 years ago

0.8.13

10 years ago

0.8.12

10 years ago

0.8.11

10 years ago

0.8.10

10 years ago

0.8.9

10 years ago

0.8.8

10 years ago

0.8.5

10 years ago

0.8.4

10 years ago

0.8.3

10 years ago

0.8.2

10 years ago

0.8.1

10 years ago

0.8.0

10 years ago

0.7.9

10 years ago

0.7.8

10 years ago

0.7.7

10 years ago

0.7.6

10 years ago

0.7.5

10 years ago

0.7.4

10 years ago

0.7.3

10 years ago

0.7.2

10 years ago

0.7.1

10 years ago

0.7.0

10 years ago

0.6.6

10 years ago

0.6.5

10 years ago

0.6.4

10 years ago

0.6.3

10 years ago

0.6.2

10 years ago

0.6.1

10 years ago

0.5.1

10 years ago

0.5.0

10 years ago

0.4.9

10 years ago

0.4.8

10 years ago

0.4.7

10 years ago

0.4.6

10 years ago

0.4.5

10 years ago

0.4.4

10 years ago

0.4.3

10 years ago

0.4.2

10 years ago

0.4.1

10 years ago

0.4.0

10 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.16

10 years ago

0.2.15

10 years ago

0.2.14

10 years ago

0.2.13

10 years ago

0.2.12

10 years ago

0.2.11

10 years ago

0.2.10

10 years ago

0.2.9

10 years ago

0.2.8

10 years ago

0.2.7

10 years ago

0.2.6

10 years ago

0.2.5

10 years ago

0.2.4

10 years ago

0.2.3

10 years ago

0.2.2

10 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago