# msx-optimized

> JSX for Mithril optimized

Latest version **0.3.0** (published 2015-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install msx-optimized
pnpm add msx-optimized
yarn add msx-optimized
bun add msx-optimized
```

Provides the command `msx-optimized`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2015-04-17 |
| First published | 2015-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Marko Biskup |
| Maintainers | helidium |
| Keywords | jsx, mithril, mithril optimized |

## Links

- npm: https://www.npmjs.com/package/msx-optimized
- Repository: https://github.com/helidium/msx-optimized
- Issues: https://github.com/helidium/msx-optimized/issues
- npm.io page: https://npm.io/package/msx-optimized

## Dependencies (2)

- [commoner](https://npm.io/package/commoner.md) ^0.10.0
- [jstransform](https://npm.io/package/jstransform.md) ^8.2.0

## Recent versions

- 0.3.0 (latest) — 2015-04-17

## README

# MSX Optimized

*The current version of MSX Optimized is based on version 0.12.2 of React's JSX Transformer.*

MSX tweaks [React](http://facebook.github.io/react/)'s JSX Transformer to output
contents compatible with [Mithril](http://lhorie.github.io/mithril/)'s
`m.render()` function, allowing you to use HTML-like syntax in your Mithril
templates, like this:

```html
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](http://lhorie.github.io/mithril/mithril.render.html#signature)
accepted by `m.render()` - will be generated for known tag names. This
effectively [precompiles](http://lhorie.github.io/mithril/optimizing-performance.html)
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](https://github.com/philtoms/mithril.elements) to implement
custom types.

If you make use of [JSX Spread Attributes](http://facebook.github.io/react/docs/jsx-spread.html),
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](https://github.com/ljharb/object.assign), or otherwise.

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

* [JSX in Depth](http://facebook.github.io/react/docs/jsx-in-depth.html)
* [JSX Spread Attributes](http://facebook.github.io/react/docs/jsx-spread.html)
* [JSX Gotchas](http://facebook.github.io/react/docs/jsx-gotchas.html) - with
  the exception of `dangerouslySetInnerHTML`: use
  [`m.trust()`](http://lhorie.github.io/mithril/mithril.trust.html) on contents
  instead.
* [If-Else in JSX](http://facebook.github.io/react/tips/if-else-in-JSX.html)

### 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](https://github.com/insin/msx/blob/master/demo/index.html) of the
[live example of using in-browser JSX + ES6 transforms](http://insin.github.io/msx/).

Here's a handy template you can use:

```html
<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
```

```javascript
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](http://kangax.github.io/compat-table/es6/#jsx),
pass a `harmony` option:

```javascript
msx-optimized.transform(source, {harmony: true})
```

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

```javascript
msx-optimized.transform(source, {precompile: false})
```

### Examples

Example inputs (using some ES6 features) and outputs are in
[test/jsx](https://github.com/helidium/msx-optimized/tree/master/test/jsx) and
[test/js](https://github.com/helidium/msx-optimized/tree/master/test/js), respectively.

An example [gulpfile.js](https://github.com/helidium/msx-optimized/blob/master/gulpfile.js)
is provided, which implements an `msxTransform()` step using `msx-optimized.transform()`.

## Related Modules

* [msx](https://github.com/insin/msx) - forked plugin.
* [gulp-msx](https://github.com/insin/gulp-msx) - gulp plugin.
* [grunt-msx](https://github.com/hung-phan/grunt-msx) - grunt plugin.
* [mithrilify](https://github.com/sectore/mithrilify) - browserify transform.
* [msx-loader](https://github.com/sdemjanenko/msx-loader) - webpack loader.

## MIT Licensed

---
_Source: https://npm.io/package/msx-optimized · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._