{"id":21954174,"url":"https://github.com/cssobj/cssobj-mithril","last_synced_at":"2025-04-23T10:24:10.560Z","repository":{"id":58219581,"uuid":"64277291","full_name":"cssobj/cssobj-mithril","owner":"cssobj","description":"Helper lib to apply cssobj local class names into mithril.","archived":false,"fork":false,"pushed_at":"2018-04-18T12:06:27.000Z","size":313,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T10:23:53.964Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cssobj.github.io/cssobj-mithril/test/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cssobj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-27T04:33:27.000Z","updated_at":"2018-04-18T12:06:28.000Z","dependencies_parsed_at":"2022-08-31T16:25:53.203Z","dependency_job_id":null,"html_url":"https://github.com/cssobj/cssobj-mithril","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssobj%2Fcssobj-mithril","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssobj%2Fcssobj-mithril/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssobj%2Fcssobj-mithril/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssobj%2Fcssobj-mithril/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cssobj","download_url":"https://codeload.github.com/cssobj/cssobj-mithril/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250413577,"owners_count":21426411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T07:16:54.333Z","updated_at":"2025-04-23T10:24:10.537Z","avatar_url":"https://github.com/cssobj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cssobj-mithril\n\n[![Join the chat at https://gitter.im/css-in-js/cssobj](https://badges.gitter.im/css-in-js/cssobj.svg)](https://gitter.im/css-in-js/cssobj)\n[![Build Status](https://travis-ci.org/cssobj/cssobj-mithril.svg?branch=master)](https://travis-ci.org/cssobj/cssobj-mithril)\n\n[![JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n\n\nApply cssobj local class names into mithril.\n\n[SEE DEMO](https://cssobj.github.io/cssobj-mithril/test/)\n\n## Why?\n\n[cssobj](https://github.com/cssobj/cssobj) already have API for using with mithril as below:\n\n``` javascript\nvar result = cssobj(obj)\n... ...\nview: function(){\n  return m( result.mapSel('li.item'), {class: result.mapClass('active news')} )\n}\n```\n\nBut if you don't like the long `result.mapSel`, `result.mapClass` function, you can try this lib to simplify.\n\nThis lib is just syntax sugar for the above code.\n\nTo do this, we have to replace the `m` function with new `m`, see below.\n\n## Install\n\n**NPM**\n\n```bash\nnpm install cssobj-mithril\n```\n\n**BOWER**\n\n```bash\nbower install cssobj-mithril\n```\n\n\n## Usage\n\nUsed with cssobj as below:\n\n```javascript\n// init mithril\nvar mithril = require('mithril')\n\n// get a factory function from old mithril\nvar M = require('cssobj-mithril')(mithril)\n\n// get cssobj result\nvar result = require('cssobj')(obj)\n\n// **** replace m!! ****\nvar m = M(result)\n\n// consume `m` as original way, don't change anything!\n// except `selector` and `class` will accept `:global` and `!`\nvar component = {\n  view: function(){\n\n    return m('li.item', {class:'news !active'}, 'hello')\n\n    // rendered DOM result:\n    // \u003cli class=\"_4vsdei1_item _4vsdei1_news active\"\u003ehello\u003c/li\u003e\n\n  }\n}\n```\n\nUse `m` in all cases as usual, with the benefit fo local class names.\n\nPlease see **test/** folder for more info.\n\n## API\n\n### **STEP ONE**\n\n### `CommonJS: var mFactory = require('cssobj-mithril')( M? )`\n### `Global:   var mFactory = cssobj_mithril( M? )`\n\n#### `M` (optional)\n\nWhich **mithril m** function to inject, can be omitted if `m` already in global space.\n\n`mFactory.m` can be used as original `mithril m` function.\n\n#### *RETURN*\n\n`mFactory` can be used to produce different `m` with each bound to an cssobj result instance.\n\n### **STEP TWO**\n\n### `var m = mFactory( cssobjResult )`\n\n#### `cssobjResult`\n\n**cssobj() result** Object instance, with `local=true`, or `local=false`.\n\n#### *RETURN*\n\n#### `m`\n\n**mithril m** pre processor Function(`m`), will lookup the cssobj result object for local class names.\n\n - `m`: [Function] The signature is same as [m](http://mithril.js.org/mithril.html#signature)\n - `m.result`: [Object] Just a shortcut reference to `result` param passed in. `mc.result === result`\n - `m.old`: [Function] The old `mithril m` reference\n\n## Usage\n\nThe below 2 codes are equivalent:\n\n```javascript\nconst M = require('mithril')\nconst m = require('cssobj-mithril')( M )( result )\n...\nview: function(){\n  return m('li.item', {class:'active news'})\n}\n```\n\n```javascript\n// m.old === M\nview: function(){\n  return m.old( result.mapSel('li.item'), {class: result.mapClass('active news')} )\n}\n```\n\nSee, it's simplify the usage for cssobj with mithril.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssobj%2Fcssobj-mithril","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcssobj%2Fcssobj-mithril","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssobj%2Fcssobj-mithril/lists"}