Migrating to Cerebral 5.0

Cerebral 5.0 focuses on four key improvements:

• Simplicity: Streamlined API with fewer concepts to learn
• Consistency: Unified patterns across the entire codebase
• Approachability: Easier for new developers to get started
• Scope reduction: Core functionality with less maintenance overhead

Watch this introduction video to understand the changes:

Key Changes∞ 

One significant change is the removal of all addons. This was done to reduce maintenance burden and encourage a more flexible approach where you can build custom providers exactly the way you need them. For example, you can now create your own router tailored to your application’s needs.

Breaking Changes∞ 

Your application should work with minimal changes, with these exceptions:

1. Compute API∞ 

The Compute API has a new signature. Read more about it here.

2. StateContainer Replaced∞ 

// 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}>
  {/* Your app */}
</Container>

Deprecations∞ 

The following changes will trigger deprecation warnings but won’t break your app:

1. Controller → App∞ 

// DEPRECATED
import { Controller } from 'cerebral'
const controller = Controller(...)

// NEW
import App from 'cerebral'
const app = App(...)

2. UniversalController → UniversalApp∞ 

// DEPRECATED
import { UniversalController } from 'cerebral'
const controller = UniversalController(...)

// NEW
import { UniversalApp } from 'cerebral'
const app = UniversalApp(...)

3. Container prop renamed∞ 

// DEPRECATED
import { Container } from '@cerebral/react'
render(<Container controller={controller}></Container>)

// NEW
import { Container } from '@cerebral/react'
render(<Container app={app}></Container>)

4. Module factory removed∞ 

// DEPRECATED
import { Module } from 'cerebral'
export default Module({})
// or
export default Module(() => {})

// NEW
export default {}
// or
export default () => {}

For TypeScript users:

import { ModuleDefinition } from 'cerebral'
const module: ModuleDefinition = {}
export default module

5. Tag names updated∞ 

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

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

6. Tags → Proxies∞ 

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

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

Learn more about using proxies

7. Operators → Factories∞ 

We’ve renamed “operators” to “factories” to better reflect their purpose:

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

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

Replacing Addons∞ 

Addons have been removed from the core library. Here’s how to replace them:

Forms∞ 

Treat forms as “complex inputs” that manage their own state with integration points to your Cerebral state. Libraries like formsy-react work well with this approach.

HTTP∞ 

Use any HTTP library and expose its methods through a provider. See the HTTP guide for examples.

Routing∞ 

You can choose from several approaches:

• Component-based routing from your view library
• A dedicated routing library
• A “Cerebral-first” routing approach as shown in the routing guide

Local Storage∞ 

Create a simple provider that exposes localStorage methods, or use a more comprehensive solution like local-storage.

Firebase∞ 

Firebase’s API has improved significantly and is now easier to use directly. Create a provider that exposes the Firebase methods you need for your application.