Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
JSX for Mithril: MSX
branch: master

README.md

MSX Build Status

The current version of MSX is based on version 0.12.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 templates, like this:

var todos = ctrl.list.map(function(task, index) {
  return <li className={task.completed() && 'completed'}>
    <div className="view">
      <input
        className="toggle"
        type="checkbox"
        onclick={m.withAttr('checked', task.completed)}
        checked={task.completed()}
      />
      <label>{task.title()}</label>
      <button className="destroy" onclick={ctrl.remove.bind(ctrl, index)}/>
    </div>
    <input className="edit"/>
  </li>
})

By default, raw virtual DOM objects - matching the VirtualElement signature accepted by m.render() - will be generated for known tag names. This effectively precompiles your templates for a slight performance tweak.

For unknown tag names, an m() call will always be generated. This should allow you to use MSX if you're also using Mithril.Elements to implement custom types.

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:

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:

Simply include a <script type="text/msx"> tag to engage the MSX transformer.

To enable ES6 transforms, use <script type="text/msx;harmony=true">. Check out the source of the live example of using in-browser JSX + ES6 transforms.

Here's a handy template you can use:

<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.30/mithril.js"></script>
<script src="https://cdn.rawgit.com/insin/msx/master/dist/MSXTransformer.js"></script>
<script type="text/msx;harmony=true">void function() { 'use strict';

var Hello = {
  controller() {
    this.who = m.prop('World')
  },

  view(ctrl) {
    return <h1>Hello {ctrl.who()}!</h1>
  }
}

m.module(document.body, Hello)

}()</script>

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.

To enable ES6 transforms supported by JSX Transformer, pass a harmony option:

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

MIT Licensed

Something went wrong with that request. Please try again.