1.0.0 • Published 4 years ago
super-x v1.0.0
super-x
A reactive UI lib.
Introduction
super-x
is a reactive UI lib which aims at being lightweight. To create interactive UIs, just declare them in a reactive way, and this lib will do the rest. More specifically, instead of using diff algorithm to find out what needs to be updated, super-x
employs reactive declaration to directly declare reactive data in views.
Links
Example
Here is an example of a todo app:
const h = X.createElement;
// the item list
const $list = X.toReactive([]);
const ListItem = X.createComponent(($item, $index) => (
h('li', {
style: {
textDecoration: $item.finished.map(
finished => finished ? 'line-through' : 'none'
),
},
listeners: {
click() {
$list.replace($index, {
content: $item.content.current,
finished: !$item.finished.current,
});
},
},
},
$item.content,
)
));
function TodoApp() {
// the reference of the input element
const $inputRef = new X.ReactiveValue(null);
// submission handler
function submit() {
const input = $inputRef.current,
content = input.value;
if (content) {
$list.push({ content, finished: false });
input.value = '';
} else {
input.focus();
}
}
// create DOM structure
return X.Utils.createFragment([
h('h1', null, 'TODO LIST'),
h('form', { action: 'javascript:;', listeners: { submit } },
h('input', { ref: $inputRef, placeholder: 'content' }),
h('input', { type: 'submit', value: 'add' }),
),
$list.toElement('ul', null, ListItem),
]);
}
1.0.0
4 years ago
0.17.1
4 years ago
0.17.0
4 years ago
0.16.2
4 years ago
0.16.1
4 years ago
0.16.0
4 years ago
0.15.2
4 years ago
0.15.1
4 years ago
0.15.0
4 years ago
0.14.1
4 years ago
0.14.0
4 years ago
0.13.0
4 years ago
0.12.0
4 years ago
0.11.0
4 years ago
0.10.0
4 years ago
0.9.0
4 years ago
0.8.0
4 years ago
0.7.0
4 years ago
0.5.0
4 years ago
0.6.0
4 years ago
0.5.1
4 years ago
0.4.0
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.0
5 years ago