Mustache -> ReactJS loader for Webpack
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
examples
src
test
.babelrc
.gitignore
.npmignore
.travis.yml
README.md
package.json
webpack.config.js
webpack.examples.config.js

README.md

schwartzman Build Status

Webpack loader for Mustache. Compiles jsx.mustache files to ReactJS.

in-browser demo

why?!

Because "built-in" server-side prerender of react components requires JS VM — JSX allows for pretty complex expressions. On the other hand, every language has library for rendering Mustache templates[citation needed]. Plus, Mustache is very simple and basic. So simple, that it's easier to write a Mustache-to-JS compiler than a JSX parser for Python/Perl/PHP/Pascal/P

installation

$ npm install --save-dev schwartzman

And add to your webpack.config.js

  • {test: /\.jsx\.mustache$/, loader: "schwartzman"} to module.loaders
    • ⚠️ if you use partials, you'll need to "wrap" this loader with babel-loader or any other dependency solving loader

      {test: /\.jsx\.mustache$/, loader: "babel-loader!schwartzman"}

  • '.jsx.mustache' to resolve.extensions
module.exports = {
  entry: {
    // ...
  },
  output: {
    // ...
  },
  module: {
    loaders: [
      // ...
      {test: /\.jsx\.mustache$/, loader: "schwartzman"},
    ],
  },
  resolve: {
    extensions: [
      // ...
      '.jsx.mustache',
    ],
    // ...
  }
  // ...
}

supported mustache blocks (with some limitations for attributes):

  • {{ variable }} and {{{ escaped_variables }}}
  • {{# section }} (lambdas are enabled by lambdas query param, see webpack.examples.config.js)
  • {{^ inverted_section }}
  • {{! comment }}
  • {{> partial }}

development

$ npm i
$ npm test // or `npm run examples`