https://github.com/djgrant/seb
Create stateful components in sites without the luxury of a virtual DOM
https://github.com/djgrant/seb
Last synced: 3 months ago
JSON representation
Create stateful components in sites without the luxury of a virtual DOM
- Host: GitHub
- URL: https://github.com/djgrant/seb
- Owner: djgrant
- Created: 2015-09-21T07:06:17.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-14T01:01:27.000Z (over 9 years ago)
- Last Synced: 2025-02-13T03:42:20.098Z (5 months ago)
- Language: JavaScript
- Size: 30.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# SEB
Create reactive components in sites without the luxury of a virtual DOM
SEB is a library for creating components in a browser's actual DOM by facilitating a one way data flow: `Events -> State -> Behaviours`.
Events can only change state, and behaviours in turn respond to state changes. Adaptors allow custom behaviour methods to be made available. For example, the jquery adaptor allows you to use jquery methods declaratively, triggering them as a representation of component's state.
[Examples](https://github.com/djgrant/seb/blob/master/demos/counter/script.js)
A sample counter component:
```js
import SEB from 'seb';
import $ from 'seb-adaptor-jquery';
import classnames from 'seb-adaptor-classnames';
SEB.addAdaptor([$, classnames]);
SEB.createComponent({
self: 'seb-counter',
els: {
button: 'button',
container: '.container',
box: '.box'
},
state: {
ready: false,
count: 0,
angle: -45,
},
events: {
button: {
click: $state => {
$state.set('count', $state.get('count') + 1);
$state.set('angle', $state.get('angle') + 45);
}
}
},
behaviours: {
button: {
html: count => count < 1 ? 'Start Counting!' : 'Incremenent'
},
box: {
html: count => count,
css: (count, angle) => ({
transform: `rotate(${angle}deg)`,
transition: `0.35s transform`
}),
fadeOut: count => count < 1 && 0,
fadeIn: count => count > 0 && { queue: false, duration: 1000 },
animate: count => ({
width: `${count < 8 && count * 30 + 50}`,
height: `${count < 8 && count * 30 + 50}`
}),
},
counter: {
classes: angle => ({
'wide': angle > 90,
'narrow': angle < 90,
'right-angle': angle === 90
})
}
}
});
```