msx-optimized
v0.3.0
Published
JSX for Mithril optimized
Downloads
3
Maintainers
Readme
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
: usem.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.