@pakastin/f v0.2.6
f
Turboboosted view library in 2 KB with 100 % test coverage. This will probably eventually replace FRZR, but for now it's a separate project.
Install:
npm install @pakastin/fDownload:
- Development: https://pakastin.github.io/f/f.js (4.5 KB)
- Production: https://pakastin.github.io/f/f.min.js (2 KB)
Some simple examples:
- SVG clock: http://codepen.io/pakastin/pen/oxWNxy
- Animating inserts/reorders/removes: https://jsfiddle.net/pakastin/a80srsmt/
- Animating SVG: https://jsfiddle.net/pakastin/h2h36xm5/
- Replacing table data with inserts/removes: https://jsfiddle.net/pakastin/cbL56sz0/
- Replacing table data: https://jsfiddle.net/pakastin/8ormrkf9/
- @teropa's Metacircles fork: http://pakastin.github.io/metacircles/
- iOS homescreen with JavaScript: https://github.com/pakastin/homescreen (work in progress..)
f.el(tagName, (attributes), children...)
Creates a HTML element:
var p = f.el('p', { textContent: 'Hello world!' });You can also define children:
var div = f.el('div', null, p);You can also skip attributes:
var p = f.el('p', 'Hello world!' );var div = f.el('div', p);f.svg(tagName, attributes, children...)
Works like f.el, but creates a SVG element:
var circle = f.el('circle', { cx: 50, cy: 50, r: 50 });
var svg = f.el('svg', { width: 100, height: 100 }, circle);Creating components
Components are just POJF (plain old JavaScript functions):
function Item () {
this.el = f.el('p');
}
Item.prototype.update = function (text) {
this.el.textContent = text;
}
var item = new Item();
item.update('Hello world!');
f.mount(document.body, item); // <body><p>Hello world!</p></body>f.list(Component, key, initData);
Automatically inserts, removes and even reorders components. Previous example makes a lot more sense now:
var list = f.list(Item);
f.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>You can delay removing the elements by defining a remove-method to a component:
Item.prototype.remove = function (doRemove) {
setTimeout(doRemove, 1000); // remove after 1 second
}f.mount(target, child)
You can mount HTML elements/components to HTML elements/components.
f.mount(document.body, p);
f.mount(document.body, div);
f.mount(div, p);If a component gets mounted, Component.mount/Component.reorder gets called, if present:
Item.prototype.mount = function () {
console.log('mounted');
}
Item.prototype.reorder = function () {
// was already in the DOM when asked to mount
console.log('reordered');
}f.mountBefore(target, child, before)
f.mountBefore(document.body, svg, div);f.unmount(target, child)
Unmounts element/component from element/component. Component.unmount gets called, if present:
Item.prototype.unmount = function () {
console.log('unmounted');
}f.setChildren(target, child)
This cleverly replaces target's children. Children already in the DOM automatically gets moved / kept in place.
f.setChildren(document.body, [p, svg]);9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago