cerebral-snabbdom v0.1.3
Cerebral Snabbdom
Cerebral Snabbdom makes Cerebral a first class citizen of components. That means you have to do a lot less wiring to build components and Snabbdom is faster than React. Read more about the JSX syntax over at snabbdom-jsx, it differs from React.
Install
npm install cerebral-snabbdom
To use JSX syntax you also need Babel with the transform-react-jsx
package.
npm install babel-plugin-transform-react-jsx
{
"presets": ["es2015"],
"plugins": [
["transform-react-jsx", { "pragma": "Component.DOM" }]
]
}
Render
import {Component, render} from 'cerebral-snabbdom';
import App from './App';
import controller from './controller';
render(() => <App/>, document.querySelector('#app'), controller);
Note that you have to pass a callback to render the initial component, returning it. And you also have to pass the controller.
Note! () => <App/>
is the same as () => { return <App/> }
.
Component
import {Component} from 'cerebral-snabbdom';
export default Component(() => (
<h1>Hello world!</h1>
));
Use state from state store
By default you have access to all the state from your state tree on the state
property passed into each components.
import {Component} from 'cerebral-snabbdom';
export default Component(({state}) => (
<h1>{state.title}</h1>
));
You can optionally extract specific state and customize its property name:
import {Component} from 'cerebral-snabbdom';
export default Component({
title: ['title'],
rows: ['admin', 'users']
}, ({state}) => (
<div>
<h1>{state.title}</h1>
<ul>
{state.rows.map(row => <li>{row.name}</li>)}
</ul>
</div>
));
In this case only title and rows are available in the component, via the state property.
Use props passed to component
MyComponent.js
import {Component} from 'cerebral-snabbdom';
export default Component(({props}) => (
<h1>{props.title}</h1>
));
import MyComponent from './MyComponent';
<MyComponent title="whatup!"/>
Use signals
MyComponent.js
import {Component} from 'cerebral-snabbdom';
export default Component(({state, signals}) => (
<div>
<h1 style={{color: state.color}}>{props.title}</h1>
<button on-click={() => signals.colorChanged({color: 'blue'})}>Change color</button>
</div>
));
Access modules
Modules access is primarily necessary for components related to specific modules. The need to expose modules i yet to be discussed.
MyComponent.js
import {Component} from 'cerebral-snabbdom';
export default Component(({modules}) => (
<h1>{modules.myModule.foo}</h1>
));
Optimize
Any component you give a key
will be optimized under the hood. It will shallow check its properties to decide if a render is necessary.
MyComponent.js
import {Component} from 'cerebral-snabbdom';
const MyComponent = Component(({props}) => (
<h1>{props.title}</h1>
));
<MyComponent key="main-title" title="test"/>
The key has to be unique. The component will only render when title actually changes. If you want to also optimize on the state used from the state store you can define the state used by the component.
MyComponent.js
import {Component} from 'cerebral-snabbdom';
const MyComponent = Component({
version: ['version']
}, ({props, state}) => (
<h1>{props.title} ({state.version})</h1>
));
Now the component will only update if either title from props or version from the state has changed.
eslint
When using eslint, it may complain about Component
being unused. You can configure eslint to allow Component
:
"no-unused-vars": [2, {
"vars": "local",
"args": "after-used",
"varsIgnorePattern": "Component"
}],
A complete .eslint sample config for cerebral-snabbdom.