As of Mithril.js v1.0.0, you can use the react-transform-jsx Babel plugin for JSX.
See Mithril.js' JSX documentation for details.
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 <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>
})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:
<div id="example">
<h1>Test</h1>
<my-element name="test"/>
</div>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.
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:
<form>
{/* Bare component */}
<Uploader/>
{/* Component with attributes */}
<Uploader onchange={ctrl.files}/>
{/* Component with attributes and children */}
<Uploader onchange={ctrl.files}>
{ctrl.files().map(file => <File {...file}/>)}
</Uploader>
<button type="button" onclick={ctrl.save}>Upload</button>
</form>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:
<Field>
<input onchange={m.withAttr('value', ctrl.description)} value={ctrl.description()}/>
</Field>Output:
m.component(Field, {}, [
{tag: "input", attrs: {onchange:m.withAttr('value', ctrl.description), value:ctrl.description()}}
])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
For development and quick prototyping, an in-browser MSX transform is available.
Download or use it directly from cdn.rawgit.com:
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.2.0/mithril.js"></script>
<script src="https://cdn.rawgit.com/insin/msx/master/dist/MSXTransformer.js"></script>
<div id="app"></div>
<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.mount(document.getElementById('app'), Hello)
}()</script>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.
npm install msx
var msx = require('msx')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})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().
- gulp-msx - gulp plugin.
- grunt-msx - grunt plugin.
- mithrilify - browserify transform.
- msx-loader - webpack loader.
- babel-plugin-mjsx - babel transform
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent