How to use inferno-mobx - 10 common examples

it('does not views alive when using static rendering', () => {
    useStaticRendering(true);

    let renderCount = 0;
    const data = mobx.observable({
      z: 'hi'
    });

    const TestComponent = observer(function testComponent() {
      renderCount++;
      return <div>{data.z}</div>;
    });

    render(, container);

    expect(renderCount).toBe(1);
    expect(container.querySelector('div').textContent).toBe('hi');

    data.z = 'hello';
    // no re-rendering on static rendering

    expect(renderCount).toBe(1);

    expect(container.querySelector('div').textContent).toBe('hi');
    expect(renderCount).toBe(1);

it('using a custom injector is reactive', done => {
    const user = mobx.observable({ name: 'Noa' });
    const mapper = stores => ({ name: stores.user.name });
    const DisplayName = props =&gt; <h1>{props.name}</h1>;
    const User = inject(mapper)(DisplayName);
    const App = () =&gt; (
      
        
      
    );
    render(, container);

    expect(container.querySelector('h1').textContent).toBe('Noa');

    user.name = 'Veria';
    expect(container.querySelector('h1').textContent).toBe('Veria');
    done();
  });
  // TODO: fix this!

*/
    class TodoView extends Component {
      render() {
        const { foo } = nullthrows(this.props.apiService);
        const { baz } = nullthrows(this.props.todoService);

        return (
          <p>
            {foo}
            {baz}
          </p>
        );
      }
    }

    let Todo = inject('apiService', 'todoService')(observer(TodoView));

    // Legacy.
    Todo = observer(['apiService', 'todoService'])(TodoView);
    Todo = observer(['apiService', 'todoService'], TodoView);

    const services = {
      apiService: new ApiService(),
      todoService: new TodoService()
    };

    const A = () =&gt; (
      
        
      
    );

render(, container);

    expect(renderCount).toBe(1);
    expect(container.querySelector('div').textContent).toBe('hi');

    data.z = 'hello';
    // no re-rendering on static rendering

    expect(renderCount).toBe(1);

    expect(container.querySelector('div').textContent).toBe('hi');
    expect(renderCount).toBe(1);

    expect(getDNode(data, 'z').observers.length).toBe(0);

    useStaticRendering(false);
  });

render({ todos }) {
        return <main>
            <h1>todos</h1>
            <div>
                
                <section>
                    
                </section>
            </div>
        </main>
    }
}

// Render each item
const TodoItemWrapper = connect(props =&gt; (
    <ul>
        {props.todos.map(item =&gt; )}
    </ul>
))

export default Todos

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import Loading from '../components/common/Loading'

@connect(['store'])
class Logout extends Component {

  // When route is loaded (isomorphic)
  static onEnter({ state }) {
    state.common.title = 'Logout'
  }

  state = {
    loading: false
  }

  handleLogout = () => {
    const { store } = this.props
    const { router } = this.context

    this.setState({

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import Loading from '../components/common/Loading'
import Error from '../components/common/Error'

@connect(['state', 'store'])
class Login extends Component {

  // When route is loaded (isomorphic)
  static onEnter({ state }) {
    state.common.title = 'Login'
  }

  state = {
    username: '',
    password: '',
    loading: false,
    error: null
  }

  handleChange = (e) => {
    this.setState({

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import AddTodo from '../components/home/AddTodo'
import Todo from '../components/home/Todo'

@connect(['state', 'store'])
class Home extends Component {

  // When route is loaded (isomorphic)
  static async onEnter({ state, store }, params) {
    state.common.title = 'Home'
    await store.todos.browse()
  }

  render({ state }) {
    return (
      <main>
        <h1>todos</h1>
        <div>
          
          <section>
            <ul></ul></section></div></main>

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import Error from '../components/common/Error'

@connect(['state', 'store'])
class Register extends Component {

  // When route is loaded (isomorphic)
  static onEnter({ state }) {
    state.common.title = 'Register'
  }

  state = {
    username: '',
    password: '',
    errorMsg: null,
    loading: false
  }

  handleChange = (key) => (e) => {
    this.setState({ [key]: e.target.value })

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import TodoAdd from '../components/todos/TodoAdd'
import TodoItem from '../components/todos/TodoItem'

@connect(['todos'])
class Todos extends Component {

    // When route is loaded (isomorphic)
    static onEnter({ todos, common, params }) {
        common.title = 'Home'
        return todos.browse()
    }

    render({ todos }) {
        return <main>
            <h1>todos</h1>
            <div>
                
                <section>
                    
                </section></div></main>