https://github.com/djgrant/seb

Create stateful components in sites without the luxury of a virtual DOM
https://github.com/djgrant/seb

Last synced: 6 days 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 (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-14T01:01:27.000Z (almost 9 years ago)
• Last Synced: 2024-10-11T00:37:42.616Z (28 days 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

      })

    }

  }

});

```