const veact = require('veact')
const OtherComponent = require('./other-component')
const view = veact()
// Extract React.DOM wrapped elements and React component class/functions for a nice DOM building API
const { div, h1, othercomponent } = view.els({
  othercomponent: OtherComponent
})
// Get these things out of the way (to be implemented)
view.use(SomeDecorator, OrMixin, OrSomething)
// Lifecycle methods (turns into stateful class-based component)
view.on('componentDidUpdate', (component) => {
  console.log(component.refs.txt)
})
// Declare an inline styles object (note `h1('.header')` below)
view.styles({
  header: {
    fontSize: '24px',
    color: 'magenta'
  }
})
// Add a render function
view.render((props, ctx) =>
  div(                      // Flexible API for omitting props
    h1('.header'),          // Dot notation access to styles object for a convenient way to inline style
    div('Some body text'),  // Strings without leading dots are inner text
    div(
      othercomponent(),     // Wow. Much consistent. JS syntax highlighted functions
      div({ some: 'props', ref: 'txt' }, 'some text')))
)
// Finally export the component class (or stateless function
// if no stateful APIs were used to build the view)
const MyComponent = view()