Liquid.js

General

This is a complete port of Liquid from Ruby to JavaScript. Any template that Ruby Liquid can compile and render, Liquid.js should too.

Liquid.js does not use eval or with, so it’s pretty clean and really safe.

Differences

1. Ranges. JavaScript doesn’t really have Ranges like Ruby does. So when Liquid.js comes across a range “(1..5)”, it creates an Array with the values 1 through 5. NOTE: It uses Prototype’s Range support, so (a..z) should work.
2. ‘replace’ and ‘replace_first’ filters build RegExps from the input, so you can actually define a regexp to use in your replacement.
3. ‘include’ tag. By default, this will return a Liquid error (but not an exception). To use the ‘include’ tag, you’ll need to implement your own ‘filesystem’ support. Which, in Liquid.js, just means you override the Liquid.readTemplateFile function to suit your own needs. Here’s an example:

<script>
  
  Liquid.readTemplateFile = function(path) {
    var elem = $(path);
    if(elem) {
      return elem.innerHTML;
    } else {
      return path +" can't be found."; 
      // Or throw and error, or whatever you want...
    }
  }
  
  var src = "{% include 'myOtherTemplate' with current_user %}";

  var tmpl = Liquid.parse( src );
  
  alert( tmpl.render({ current_user:'M@' }));
  
</script>
<!-- Browsers ignore script blocks with an unrecognized type.  -->
<!-- Makes for pretty good inline template storage.  -->
<script type="text/liquid" id="myOtherTemplate">
  Hello, {{ current_user }}!
</script>

Known Issues

1. Known to work in Safari 3.1+ and FireFox 3+.
2. IE 7: passes tests but needs more actual usage testing

References:

• http://wiki.shopify.com/UsingLiquid

Todo

• Add Rhino support for console-based testing?