msx-optimized v0.3.0

MSX Optimized

The current version of MSX Optimized 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:

• JSX in Depth
• JSX Spread Attributes
• JSX Gotchas - with the exception of dangerouslySetInnerHTML: use m.trust() on contents instead.
• If-Else in JSX

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:

• https://cdn.rawgit.com/helidium/msx-optimized/master/dist/MSXTransformer.js

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/helidium/msx-optimized/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-optimized

msx-optimized --watch src/ build/

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

Run msx-optimized --help for more information.

Module Usage

npm install msx-optimized

var msx = require('msx-optimized')

Module API

msx-optimized.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-optimized.transform(source, {harmony: true})

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

msx-optimized.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-optimized.transform().

Related Modules

• msx - forked plugin.
• gulp-msx - gulp plugin.
• grunt-msx - grunt plugin.
• mithrilify - browserify transform.
• msx-loader - webpack loader.

MIT Licensed