@pakastin/f

v0.2.6

Published

3 years ago

FRZR lite

Downloads

0High
0Medium
0Low

pakastin

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/f

Download:

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]);