xusify v0.8.0

xūsify

browserify transform for precompiling xūs.

install

npm install xusify

usage

browserify -t xusify main.js > bundle.js

example

given this template, layout.html:

<div>
  <p>You have completed <b>{completedCount}</b> of your tasks. Congratulations!</p>
  <p><b>Click on more tasks to finish them!</b></p>
  <ul>
    {#todos}
        <li class="{#done}finished{/done}" onClick="toggle">{title}</li>
    {/todos}
  </ul>
<div>

and this state definition, in main.js:

var mobxStateTree = require("mobx-state-tree")

var types = mobxStateTree.types

var Todo = types.model("Todo", {
  title: types.string,
  done: true
}, {
  toggle: function() {
    this.done = !this.done
  }
})

var State = types.model("State", {
  todos: types.array(Todo),
  get completedCount() {
    return this.todos.reduce(function(count, todo) {
        return todo.done ? count + 1 : count
    }, 0)
  }
})

create a new state:

var state = State.create({
  todos: [
    { title: "Get coffee", done: false },
    { title: "Wake up", done: true }
  ]
})

then require() template.html and produce a ReactElement with it:

var render = require("./layout.html")

var tree = render(state, {
  createElement: React.createElement,
  observer: mobxReact.observer
})

and render it using ReactDOM:

ReactDOM.render(tree, document.getElementById("main"))

finally, bundle up with browserify:

browserify -t xusify main.js > bundle.js

See the full example code here.

Type npm run build or npm run watch in example folder.

api

See xūs API.