@cerebral/inferno

Inferno view for Cerebral.

Install∞ 

npm install @cerebral/inferno inferno babel-plugin-inferno

Container∞ 

import { render } from 'inferno'
import App from 'cerebral'
import { Container } from '@cerebral/inferno'
import AppComponent from './components/AppComponent'
import main from './main'

const app = App(main)

render(
  <Container app={app}>
    <AppComponent />
  </Container>,
  document.querySelector('#app')
)

connect∞ 

Function Component (Recommended)∞ 

import { connect } from '@cerebral/inferno'
import { state, sequences } from 'cerebral'

export default connect(
  {
    foo: state`foo`,
    onClick: sequences`onClick`
  },
  function MyComponent({ foo, onClick }) {
    return <div onClick={() => onClick()}>{foo}</div>
  }
)

Class Component∞ 

import { Component } from 'inferno'
import { connect } from '@cerebral/inferno'
import { state, sequences } from 'cerebral'

export default connect(
  {
    foo: state`foo`,
    onClick: sequences`onClick`
  },
  class MyComponent extends Component {
    render() {
      const { foo, onClick } = this.props
      return <div onClick={() => onClick()}>{foo}</div>
    }
  }
)

With Tag Properties∞ 

import { connect } from '@cerebral/inferno'
import { state, sequences } from 'cerebral'

export default connect(
  {
    foo: state`some.path.${state`someOtherPath`}`,
    bar: state`some.path.${props`propKey`}`,
    onClick: sequences`onClick`
  },
  function MyComponent({ foo, bar, onClick }) {
    return (
      <div onClick={() => onClick()}>
        {foo} - {bar}
      </div>
    )
  }
)