npmpackage.info

Gathering detailed insights and metrics for cerebral-mobx

Other packages similar to cerebral-mobx

@cerebral/mobx-state-tree

3.2.2

Combine Cerebral with Mobx state tree

Gathering detailed insights and metrics for cerebral-mobx

cerebral-mobx - 1.1.0 | npmpackage.info

cerebral-mobx

Declarative state and side effects management for popular JavaScript frameworks

1.1.0

1,995

MIT

JavaScript

2.6

Installations

npm install cerebral-mobx

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

6.11.2

NPM Version

3.10.10 Pull Requests

Open

0

Total

978

Closed

142

Merged

836

Issues

Open

1

Total

468

Closed

467

Releases

126

v2025-06-06_0918

Updated on Jun 06, 2025

v2025-03-25_2048

Updated on Mar 25, 2025

v2025-03-20_1818

Updated on Mar 20, 2025

v2025-03-20_1156

Updated on Mar 20, 2025

Release v2025-02-27_0058

v2025-02-27_0058

Updated on Feb 27, 2025

release_2020-03-21_1721

Updated on Mar 21, 2020

View All 126 releases

Languages

JavaScript

CSS

HTML

Shell

JavaScript (74.05%)

CSS (23.59%)

HTML (2.21%)

Shell (0.15%)

Developer

cerebral

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,995 Stars

2,297 Commits

126 Forks

43 Watchers

16 Branches

78 Contributors

Updated on Jul 03, 2025

Maintainers

View All 78 Contributors

Package Meta Information

Latest Version

1.1.0

Package Id

cerebral-mobx@1.1.0

Size

20.97 kB

NPM Version

3.10.10

Node Version

6.11.2

Total Downloads

Cumulative downloads

Total Downloads

NaN

Peer Dependencies

cerebral mobx mobx-state-tree

Dev Dependencies

prop-types

cerebral-mobx

Combine Cerebral with Mobx state-tree.

State and model

With Mobx state tree you also define models, in addition to state. You do this directly in your modules:

modules/app.js

1import { types } from 'mobx-state-tree'
2import {set} from 'cerebral/operators'
3import {state, props} from 'cerebral/tags'
4
5const Box = types.model('Box', {
6  id: types.identifier(),
7  name: '',
8  x: 0,
9  y: 0,
10  get width() {
11    return this.name.length * 15
12  }
13})
14
15export default {
16  model: {
17    boxes: types.map(Box),
18    selection: types.reference(Box)    
19  },
20  state: {
21    boxes: {},
22    selection: null
23  },
24  signals: {
25    boxSelected: set(state`app.selection`, state`app.boxes.${props`boxKey`}`)
26  }
27}

Instantiate

Instead of creating the controller from cerebral, you create it from this package:

1import {Controller} from 'cerebral-mobx'
2import app from './modules/app'
3
4export default Controller({
5  modules: {app}
6  // Other config options are the same
7})

Accessing state and props in components

For example using React you will need the package mobx-react and use the provide() method of the controller:

main.js

1import React from 'react'
2import {render} from 'react-dom'
3import controller from './controller'
4import {Provider} from 'mobx-react'
5import App from './components/App'
6
7render((
8  <Provider {...controller.provide()}>
9    <App />
10  </Provider>
11))

App.js

1import React from 'react'
2import {observer, inject} from 'mobx-react'
3
4@observer
5@inject('store', 'signals')
6class App extends React.Component {
7  renderBoxes () {
8    const {store, signals} = this.props
9
10    return Object.keys(store.app.boxes).map((boxKey) => {
11      return (
12        <li onClick={() => signals.app.boxSelected({boxKey})}>
13          {store.app.boxes[boxKey].name}
14        </li>
15      )
16    })
17  }
18  render () {
19    const {store} = this.props
20
21    return (
22      <div>
23        <h1>{store.app.selection && store.app.selection.name}</h1>
24        <ul>
25          {this.renderBoxes()}
26        </ul>
27      </div>
28    )
29  }
30}
31
32export default App

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

4

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 4

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/release.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/release.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/release.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/test.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/test.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/website.yml/next?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/website.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/website.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/website.yml/next?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/website.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/cerebral/cerebral/website.yml/next?enable=pin
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

3

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

2.6

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to cerebral-mobx

Other packages similar to cerebral-mobx

cerebral-mobx

Installations

Developer Guide

No

CommonJS

6.11.2

3.10.10

Pull Requests

0

978

142

836

Issues

1

468

467

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Peer Dependencies

Dev Dependencies

cerebral-mobx

State and model

Instantiate

Accessing state and props in components

10

10

6

4

3

0

0

0

0

0

0

0

2.6

/10

Weekly Downloads

Monthly Downloads

Yearly Downloads