Cerebral + mobx-state-tree + TypeScript example

cerebral-mst-ts-example.ts

import { Controller, Module } from '@cerebral/mobx-state-tree'
import { inject, observer, Provider } from 'mobx-react'
import { types } from 'mobx-state-tree'
import * as React from 'react'
import { render } from 'react-dom'

// src/store/app/actions.ts

const actions = {
  changeName ({ props, state }) {
    state.set('name', props.value)
  },
}

// src/components/App.tsx

interface Props {
  welcome: string
}

interface InjectedProps extends Props {
  store: any
  signals: any
}

@inject('store', 'signals')
@observer
class App extends React.Component<Props> {
  get injected () {
    return this.props as InjectedProps
  }

  onChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    this.injected.signals.changedMessage({ value })
  }

  render () {
    const { welcome } = this.props
    const { store } = this.injected
    console.log('STORE:', store.bye)
    return (
      <div>
        <h1>{welcome} {store.name}!</h1>
        <h2>{store.bye}</h2>
        <input type="text" value={store.name} onChange={this.onChanged}/>
      </div>
    )
  }
}

// src/store/app/index.ts

const mainModule = Module(
  {
    model: {
      name: types.string,
    },
    getters: {
      bye () {
        return `Bye ${this.name}!`
      },
    },
    state: {
      name: 'Jarek',
    },
    signals: {
      changedMessage: [
        actions.changeName,
      ],
    },
  },
)

// src/index.ts

const controller = Controller(mainModule)

render(
  <Provider {...controller.provide()}>
    <App welcome="Hello"/>
  </Provider>,
  document.querySelector('#embed-react'))