FRZR
Cool new javascript view library.
Made with ♥ + ES6.
Also check out my little open source vanilla js Deck of Cards: https://deck-of-cards.js.org
download
Development (~10 kb uncompressed)
Production (~5 kb uncompressed & minified)
example
I challenge you to do a similar bench with your favourite framework x ;)
documentation
Not completely there yet. Will add more details here soon..
View
constructor(type, options)
var view = new View('p', {
class: 'view',
update: function (data) {
this.textContent('Item ' + data.id)
}
})
view.set({
id: 1
})View.extend(type, options)
var CustomView = View.extend('p', {
class: 'custom-view',
update: function (data) {
this.textContent('Item ' + data.id)
this.setStyle({
color: 'red'
})
}
})
var view = new CustomView()
view.set({id: 1})mount(target)
view.mount(document.body)mountBefore(target, before)
view.mountBefore(document.body, document.body.firstChild)unmount()
view.unmount()destroy()
view.destroy()set(data)
view.set({
id: 1,
title: 'Item 1'
})setOptions(options)
view.setOptions({
class: {
item: false
},
attrs: {
placeholder: 'value'
},
style: {
color: 'red'
}
})textContent(text)
view.textContent('Lorem ipsum')setClass(classes)
view.setClass({
red: true
})setStyle(styles)
view.setStyle({
color: 'red'
})setAttributes(attrs)
view.setAttributes({
autofocus: false,
placeholder: 'Your name'
})Views
constructor(ChildView, type, options)
var ListView = View.extend('li', {
update: function (data) {
this.textContent = data.title
}
})
var views = new Views(ListView, 'ul', {
class: 'views'
})
views.reset([{title: 1}, {title: 2}, {title: 3}])mount(target)
views.mount(document.body)mountBefore(target, before)
views.mountBefore(document.body, document.firstChild)unmount()
views.unmount()reset(data, key)
views.reset([{title: 2}, {title: 3}, {title: 4}], 'title')
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent