https://github.com/lovasoa/musreact

Mustache template to react component compiler
https://github.com/lovasoa/musreact

Last synced: 10 months ago
JSON representation

Mustache template to react component compiler

• Host: GitHub
• URL: https://github.com/lovasoa/musreact
• Owner: lovasoa
• License: gpl-2.0
• Created: 2014-12-12T02:51:40.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2016-03-24T09:57:15.000Z (almost 10 years ago)
• Last Synced: 2025-03-19T02:03:09.499Z (10 months ago)
• Language: JavaScript
• Homepage: http://lovasoa.github.io/musreact/
• Size: 263 KB
• Stars: 13
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
musreact

========

Mustache template to react component compiler

## Demo

http://lovasoa.github.io/musreact/

## How to use

### Directly in html

Compile the mustache template on the client.

```html



var mustacheStr = "<p>Your name is <em>{{name}}</em></p>";

var jsondata    = {name: "Gérard Bouchard"};

var source = parser.parse(mustacheStr);

// Create a react component

var reactComponent = eval(source);

// Use it

React.render(

    React.createElement(reactComponent, jsondata),

    document.getElementById("mountpoint")

);

```

### Server compiling

Just save the output of `parser.parse(mustacheString)`, and serve it as a normal js file.

An simple script could be:

```js

var fs = require("fs");

var parse = require("musreact").parse;

var jsSource = parse(fs.readFileSync("react-component.mustache", "utf-8"));

fs.writeFileSync("react-component.js", "MyComponent = " + jsSource);

```

It reads the template from `react-component.mustache` and saves the compiled

react component to `react-component.js`. The component will then be accessible through

the global variable `MyComponent`.