mithril ajax,GitHub - insin/msx: JSX for Mithril.js 0.x

DEPRECATED

As of Mithril.js v1.0.0, you can use the react-transform-jsx Babel plugin for JSX.

MSX

MSX is based on version 0.13.2 of React's JSX Transformer

MSX tweaks React's JSX Transformer to output

contents compatible with Mithril's

m.render() function, allowing you to use HTML-like syntax in your Mithril

view code, like this:

var todos = ctrl.list.map(function(task, index) {

return

className="toggle"

type="checkbox"

οnclick={m.withAttr('checked', task.completed)}

checked={task.completed()}

/>

{task.title()}

})

HTML tags and custom elements

For tag names which look like HTML elements or custom elements (lowercase,

optionally containing hyphens), raw virtual DOM objects - matching the

VirtualElement signature

accepted by m.render() - will be generated by default.

Input:

Test

Output:

{tag: "div", attrs: {id:"example"}, children: [

{tag: "h1", attrs: {}, children: ["Test"]},

{tag: "my-element", attrs: {name:"test"}}

]}

This effectively precompiles

your view code for a slight performance tweak.

Mithril components

Otherwise, it's assumed a tag name is a reference to an in-scope variable which

is a Mithril component.

Passing attributes or children to a component will generate a call to Mithril's

m.component()

function, with children always being passed as an Array:

Input:

{/* Bare component */}

{/* Component with attributes */}

{/* Component with attributes and children */}

{ctrl.files().map(file => )}

Upload

Output:

{tag: "form", attrs: {}, children: [

/* Bare component */

Uploader,

/* Component with attributes */

m.component(Uploader, {onchange:ctrl.files}),

/* Component with attributes and children */

m.component(Uploader, {onchange:ctrl.files}, [

ctrl.files().map(function(file) {return m.component(File, Object.assign({}, file));})

]),

{tag: "button", attrs: {type:"button", onclick:ctrl.save}, children: ["Upload"]}

]}

MSX assumes your component's (optional) controller() and (required) view()

functions have the following signatures, where attributes is an Object and

children is an Array:

controller([attributes[, children]])

view(ctrl[, attributes[, children]])

As such, if a component has children but no attributes, an empty attributes

object will still be passed:

Input:

Output:

m.component(Field, {}, [

{tag: "input", attrs: {onchange:m.withAttr('value', ctrl.description), value:ctrl.description()}}

])

JSX spread attributes and Object.assign()

If you make use of JSX Spread Attributes,

the resulting code will make use of Object.assign() to merge attributes - if

your code needs to run in environments which don't implement Object.assign()

natively, you're responsible for ensuring it's available via a

shim, or otherwise.

Other than that, the rest of React's JSX documentation should still apply:

JSX Gotchas - with

the exception of dangerouslySetInnerHTML: use

m.trust() on contents

instead.

In-browser JSX Transform

For development and quick prototyping, an in-browser MSX transform is available.

Download or use it directly from cdn.rawgit.com:

Include a

To enable ES6 transforms, use

the source of the

live example of using in-browser JSX + ES6 transforms.

Here's a handy template you can use:

var Hello = {

controller() {

this.who = m.prop('World')

},

view(ctrl) {

return

Hello {ctrl.who()}!

}

}

m.mount(document.getElementById('app'), Hello)

}()

Command Line Usage

npm install -g msx

msx --watch src/ build/

To disable precompilation from the command line, pass a --no-precompile flag.

Run msx --help for more information.

Module Usage

npm install msx

var msx = require('msx')

Module API

msx.transform(source: String[, options: Object])

Transforms XML-like syntax in the given source into object literals compatible

with Mithril's m.render() function, or to function calls using Mithril's

m() function, returning the transformed source.

msx.transform(source, {harmony: true})

To disable default precompilation and always output m() calls, pass a

precompile option:

msx.transform(source, {precompile: false})

Examples

Example inputs (using some ES6 features) and outputs are in

test/jsx and

test/js, respectively.

An example gulpfile.js

is provided, which implements an msxTransform() step using msx.transform().

Related Modules

gulp-msx - gulp plugin.

grunt-msx - grunt plugin.

mithrilify - browserify transform.

msx-loader - webpack loader.

babel-plugin-mjsx - babel transform

MIT Licensed