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

cerebral-mobx

Declarative state and side effects management for popular JavaScript frameworks

1.1.0

1,995

MIT

JavaScript

1.96 kB

1,067 2.9

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

5

Total

976

Closed

137

Merged

834

Issues

Open

6

Total

466

Closed

460

Releases

122

Release v2025-02-27_0058

v2025-02-27_0058

Updated on Feb 27, 2025

release_2020-03-21_1721

Updated on Mar 21, 2020

release_2019-10-10_1642

Updated on Oct 10, 2019

release_2019-05-18_1030

Updated on May 18, 2019

release_2019-02-24_1519

Updated on Feb 24, 2019

release_2019-02-24_1445

Updated on Feb 24, 2019

View All 122 releases

Contributors

Unable to fetch Contributors

View All 78 Contributors

Languages

JavaScript

CSS

HTML

Shell

JavaScript (73.08%)

CSS (24.6%)

HTML (2.03%)

Shell (0.29%)

validate.email 🚀

Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.

Developer

cerebral

Download Statistics

Total Downloads

1,067

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,995 Stars

2,251 Commits

125 Forks

44 Watchers

18 Branches

78 Contributors

Updated on Mar 03, 2025

Bundle Size

5.38 kB

Minified

1.96 kB

Minified + Gzipped

Bundlephobia

Maintainers

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

1,067

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

Maintained

Determines if the project is "actively maintained".

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.

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

2

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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

SAST

Determines if the project uses static code analysis.

0

Code-Review

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

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.

Score

2.9

/10

Last Scanned on 2025-03-10

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