https://github.com/cssobj/cssobj-mithril
Helper lib to apply cssobj local class names into mithril.
https://github.com/cssobj/cssobj-mithril
Last synced: about 1 year ago
JSON representation
Helper lib to apply cssobj local class names into mithril.
- Host: GitHub
- URL: https://github.com/cssobj/cssobj-mithril
- Owner: cssobj
- Created: 2016-07-27T04:33:27.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-18T12:06:27.000Z (about 8 years ago)
- Last Synced: 2025-04-23T10:23:53.964Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://cssobj.github.io/cssobj-mithril/test/
- Size: 306 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# cssobj-mithril
[](https://gitter.im/css-in-js/cssobj)
[](https://travis-ci.org/cssobj/cssobj-mithril)
[](https://github.com/feross/standard)
Apply cssobj local class names into mithril.
[SEE DEMO](https://cssobj.github.io/cssobj-mithril/test/)
## Why?
[cssobj](https://github.com/cssobj/cssobj) already have API for using with mithril as below:
``` javascript
var result = cssobj(obj)
... ...
view: function(){
return m( result.mapSel('li.item'), {class: result.mapClass('active news')} )
}
```
But if you don't like the long `result.mapSel`, `result.mapClass` function, you can try this lib to simplify.
This lib is just syntax sugar for the above code.
To do this, we have to replace the `m` function with new `m`, see below.
## Install
**NPM**
```bash
npm install cssobj-mithril
```
**BOWER**
```bash
bower install cssobj-mithril
```
## Usage
Used with cssobj as below:
```javascript
// init mithril
var mithril = require('mithril')
// get a factory function from old mithril
var M = require('cssobj-mithril')(mithril)
// get cssobj result
var result = require('cssobj')(obj)
// **** replace m!! ****
var m = M(result)
// consume `m` as original way, don't change anything!
// except `selector` and `class` will accept `:global` and `!`
var component = {
view: function(){
return m('li.item', {class:'news !active'}, 'hello')
// rendered DOM result:
//
}
}
```
Use `m` in all cases as usual, with the benefit fo local class names.
Please see **test/** folder for more info.
## API
### **STEP ONE**
### `CommonJS: var mFactory = require('cssobj-mithril')( M? )`
### `Global: var mFactory = cssobj_mithril( M? )`
#### `M` (optional)
Which **mithril m** function to inject, can be omitted if `m` already in global space.
`mFactory.m` can be used as original `mithril m` function.
#### *RETURN*
`mFactory` can be used to produce different `m` with each bound to an cssobj result instance.
### **STEP TWO**
### `var m = mFactory( cssobjResult )`
#### `cssobjResult`
**cssobj() result** Object instance, with `local=true`, or `local=false`.
#### *RETURN*
#### `m`
**mithril m** pre processor Function(`m`), will lookup the cssobj result object for local class names.
- `m`: [Function] The signature is same as [m](http://mithril.js.org/mithril.html#signature)
- `m.result`: [Object] Just a shortcut reference to `result` param passed in. `mc.result === result`
- `m.old`: [Function] The old `mithril m` reference
## Usage
The below 2 codes are equivalent:
```javascript
const M = require('mithril')
const m = require('cssobj-mithril')( M )( result )
...
view: function(){
return m('li.item', {class:'active news'})
}
```
```javascript
// m.old === M
view: function(){
return m.old( result.mapSel('li.item'), {class: result.mapClass('active news')} )
}
```
See, it's simplify the usage for cssobj with mithril.