*FRZR*
Turboboosted 2 KB view library with 100 % test coverage.
Contributing:
Issues/pull requests are more than welcome! Please use the dev
branch for pull requests, thanks!
Install:
npm install frzr
Download:
- Development: https://pakastin.github.io/frzr/frzr.js (10 KB before, 3 KB after GZIP)
- Production: https://pakastin.github.io/frzr/frzr.min.js (4 KB before, 2 KB after GZIP)
- cdnjs: https://cdnjs.com/libraries/frzr
Latest updates
- v0.22: List no longer part of the build if not used (when tree shaking is in use)
- v0.21: JSX component support!
- v0.20: el.extend(tagName)
- v0.19: Destroy method + notifyDown helper
- v0.18: custom elements & custom attributes
- v0.17: lifecycle "events"
Using at server-side
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
SurviveJS interview:
http://survivejs.com/blog/frzr-interview/
el(tagName, (attributes), (...children))
Creates a HTML element:
var p = ;
You can also define children:
var div = ;
You can also omit attributes:
var p = ;
var div = ;
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 = ;var canvas = ;
Creating components
Components (or Views) are just POJF (plain old JavaScript functions):
{ thisel = ;}Itemprototype { thiseltextContent = text;}var item = ;item;; // <body><p>Hello world!</p></body>
You can also use ES6 classes:
{ thisel = ; } { thiseltextContent = text; }const item = ;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 = Item;;list; // <body><p>1</p><p>2</p><p>3</p></body>list; // <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.
;;;
mountBefore(target, child, before)
;
unmount(target, child)
Unmounts element/component from element/component.
;
setChildren(target, [child])
This cleverly replaces target's children. Children already in the DOM automatically gets moved / kept in place.
;
virtual-dom version
If you like virtual dom updates better, check out RZR. You can also mix & match!