https://github.com/serapath/easy-main-loop

re-render virtual dom every time update(state) is called
https://github.com/serapath/easy-main-loop

Last synced: 1 day ago
JSON representation

re-render virtual dom every time update(state) is called

• Host: GitHub
• URL: https://github.com/serapath/easy-main-loop
• Owner: serapath
• Created: 2015-12-10T00:56:01.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-12-10T01:10:36.000Z (over 10 years ago)
• Last Synced: 2025-03-31T00:03:01.305Z (over 1 year ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# easy-main-loop

re-render virtual dom every time update(state) is called

# usage

```html

 

   

     .test {

       background-color: {color1};

     }

     .test2 {

       background-color: {color2};

     }

     .bla {

      background-color: grey;

     }

   

   


 


```

```js

var start = require('easy-main-loop')

var style = require('easy-jss')

var h     = require('virtual-dom/h')

function app (state, update) {

  var s = style('#style_css', state.theme)

  return h('div', { className: s('.test') }, [

    h('h1', 'clicked ' + state.n + ' times'),

    h('button', { className: s('.test2'), onclick: onclick }, 'click me!'),

    h('button', { className: s('.test2'), onclick: adaptTheme }, 'fontcolor')

  ])

  function adaptTheme () {

    console.log(s.css('.test2', 'background-color', '#ff0'))

  }

  function onclick () {

    state.n +=1

    state.theme.color1 = state.n%3 ? '#00f' : '#f00'

    update(state)

  }

}

var initialState = {

  n: 0,

  theme: {

    color1: '#f00',

    color2: '#0f0'

  }

}

var container = '#content'

start(app, initialState, container)

```