import { bindToDOM } from 'simple-dom-bindings'

const App = bindToDOM([
  {
    accessor: 'version',
    query: '#version',
    initialValue: '1.0.0',
  },
  {
    accessor: 'firstName',
    query: '.firstName',
    initialValue: 'John',
  },
  {
    accessor: 'firstNameClass',
    attribute: 'class', // can bind to dom attributes
    query: '.firstName',
    initialValue: 'primary-text',
  },
  {
    accessor: 'lastName',
    query: 'input#lastName', // handle text inputs
    initialValue: 'Doe',
  }
])

// at this point your App object has established a two way
// binding with the corresponding DOM nodes

console.log(App)
// { version: '1.0.0', firstName: 'John', firstNameClass: 'primary-text' , lastName: 'Doe' }

// will update the corresponding DOM node value to `Peter`
App.firstName = 'Peter'

// will not update the corresponding DOM node value to `Peter`
// as it is already the same value
App.firstName = 'Peter'

// will update the corresponding DOM node value to `Elon`
App.firstName = 'Elon'