5.0

There are 4 focus points for this release:

  • Simplicity
  • Consistency
  • Approachability
  • Scope reduction

Watch this video to get an introduction of the new release:

One of the big highlights here is that all the addons are now removed. The reason is two part. One being a maintenance burden, but also that providers can very easily be built exactly how you want them to work. An example being the router, which this guide shows you how to set up.

Please use the following demos for reference on how to write the new Cerebral code:

Your application should work “out of the box” with the new version with a couple of exceptions. Please look at the migration for what breaks your current app and what gives deprecation warnings:

Broken 

1. Compute 

There is a new signature Compute, please read more about it here

2. StateContainer 

// REMOVED
import { StateContainer } from '@cerebral/_view_'

// INSTEAD
import App from 'cerebral'
import { Container } from '@cerebral/_view_'
import main from 'path/to/main/module'

const app = App(main)

<Container app={app}>

</Container>

Deprecations 

1. Rename Controller 

// DEPRECATED
import { Controller } from 'cerebral'

const controller = Controller(...)

// NEW
import App from 'cerebral'

const app = App(...)

2. Rename Universal Controller 

// DEPRECATED
import { UniversalController } from 'cerebral'

const controller = UniversalController(...)

// NEW
import { UniversalApp } from 'cerebral'

const app = UniversalApp(...)

3. Rename Container prop 

Same for the other views as well.

// DEPRECATED
import { Container } from '@cerebral/react'

render(
  <Container controller={controller}>

  </Container>
)

// NEW
import { Container } from '@cerebral/react'

render(
  <Container app={app}>

  </Container>
)

4. Remove Module factory 

// DEPRECATED
import { Module } from 'cerebral'

export default Module({})

export default Module(() => {})

// NEW
export default {}

export default () => {}

If you are using Typescript:

import { ModuleDefinition } from 'cerebral'

const module: ModuleDefinition = {}

export default module

5. Rename tags 

// DEPRECATED
import { signal, signals, module } from 'cerebral/tags'

// NEW
import { sequences, moduleState } from 'cerebral'

Note that sequences grabs a single sequence or module with sequences, so both the previous functionalities of signal and signals.

6. From tags to proxies 

// DEPRECATED
import * as tags from 'cerebral/tags'

// NEW
import {
  string,
  props,
  state,
  sequences,
  moduleState,
  moduleSequences
} from 'cerebral'

Read more about proxies here

7. From operators to factories 

We changed the name of “operators” to “factories”, as that is what they really are.

// DEPRECATED
import { set, push, merge } from 'cerebral/operators'

// NEW
import { set, push, merge } from 'cerebral/factories'

Replace addons 

So we are removing addons from the monorepo in the next major version. This will lift a huge maintenance burder off of Cerebral. Instead we will focus on helping you build your own providers and encourage sharing your providers from your own Github repos.

Forms 

Forms can be treated as “complex inputs”. That means instead of controlling the whole form from within the state store, you rather let the form handle itself and the state store can hook into it. formsy-react is one such solution, though there are many others.

Http 

You can use any http library out there, just expose the methods your are using on a provider. Look at this guide.

Routing 

You can choose component based routing, any routing the framework exposes or you can choose a “Cerebral first” routing solution as seen in this guide.

Local storage 

Local storage is very straight forward to expose through a provider, though you might want something more powerful to expose and that is when you have solutions like local-storage.

Firebase 

Firebase was one of the more comprehensive addons and it was developed early on when Google took over Firebase. Their API has gotten a lot of love and it is easy to now expose methods from the Firebase API as a provider and manage it that way.