Online Mustache playground, based on Wontache

[jgonggrijp]

Wontache is my Mustache engine for JavaScript, which I'll make a "show and tell" about another time.

I felt rather limited by the old "demo" feature on https://mustache.github.io/. You can no longer see it now, but it had one text box for the input data, which only allowed JSON, and one text box for a template. As a result, it was impossible to try out lambdas or partials. It also had a few other limitations, such as inaccurate whitespace handling.

Given that I was writing my own Mustache engine that needed a website anyway, I wrote a more capable playground. The input data textbox accepts JavaScript, so you can test lambdas, and you can enter multiple templates with names, so you can test partials. It also fully implements the current spec, so you can also do inheritance and dynamic partials, and its whitespace handling is accurate. Last but not least, you can share your playground with other people by copy-pasting a savestate.

https://jgonggrijp.gitlab.io/wontache/playground.html

My playground has been around for more than a year and I already used it in a few discussions within the spec project. The reason for sharing it now, is that we now have "show and tell" and that it just displaced the old "demo" on the website!

That is, instead of the old on-page demo, there is now a link to the playground on the Wontache website. I hope this will help the community with a better tool for trying and sharing examples and that it will give people a better impression of how standard Mustache is supposed to work. Feedback welcome.

[agentgt]

My only feature request for the playground is if there were a mode to turn on showing whitespace. In the meantime I use the jquery like object that is bound and call textContent on the webdev console.

I use wontache a lot on consensus because it is obviously very easy to test and whitespace handling IMO is actually one of the tricker parts of Mustache
(it isn't so much that the logic is complicated it is that people wait to the last minute to implement it and whitespace diffing is hard... or maybe it is just hard for me).

An example of the consensus part is I'm modernizing a mustache implementation called JMustache. I now have two implementations (JStachio, and Wontache) I can go check easily on consensus (in this case whitespace).

[jgonggrijp]

Glad to hear it is so useful to you!

By "showing whitespace", do you mean something like highlighting? Or is whitespace stripped when you use it? The latter would not be as intended.

[agentgt]

By "showing whitespace", do you mean something like highlighting?

Perhaps replacing ' ', '\t', '\n', '\r\n' with some special characters or images since you output to HTML.

This is what I'm doing in JMustache:

    private static String showWhitespace(String s) {
       s = s.replace("\r\n", "\u240D");
       s = s.replace('\t', '\u21E5');
       s = s.replace("\n", "\u21B5\n");
       s = s.replace("\u240D", "\u240D\n");

       return s;
    }

I didn't replace space because in my case space was/is easier to see but in your UI I think you should show it if its the only thing on the line EDIT or if its trailing.

[jgonggrijp]

Noted over here: https://gitlab.com/jgonggrijp/wontache/-/issues/75.