Pinegrow with Auto Formatting Mustache Code

General
1

I’ve been shamelessly using Pinegrow with Mustache templating and so far have been getting away with it for the most part.

ONE caveat is the IF conditionals {{#xyz}} contitional code {{/xyz}}

When I save them, Pinegrow removes the " / " from the ending curly braces.
I turned off the Auto Format setting in Pinegrow, and this still removes those slashes.

Anyone know any tricks to getting this to save without messing with the handlebars syntax?

Would be happy to see capabilities for templating in the future.

2

Hi @mrSidX,
That is a pretty neat use case! I was wondering if you could provide an example project where you have an IF conditional that is being stripped.
Cheers,
Bob

3

It would ideal if Pinegrow doesn’t auto-correct tags to stay agnostic to frameworks/diff use-cases…

Another thing is the error message displayed in the code editor for tags in camelCase or PascalCase which really is not an error w.r.t HTML spec… Also, for such tags, the tree displays the tag totally in lowercase… would be ideal if Pinegrow can stay agnostic here, so that it could support frameworks where templates allow PascalCase or camelCase tags!

4

Here is a template example of what is happening…

Notice the elements with attributes containing mustache template code being changed:
<input type="checkbox" .... {{#privileges.edit_films}} checked {{ privileges.edit_films}}/>

Should look like this:
<input type="checkbox" .... {{#privileges.edit_films}} checked {{ /privileges.edit_films}}/>

Note that the looping of Arrays in {{#payload}} ~ {{/payload}} works well and saves correctly to file without being changed.

Perhaps if I restructure somehow I might be able to avoid auto formatting…
But this seems to only affect inside the element tags / attributes??

Not sure why, but in the html code editor, I see the code as it should be (after manually adding / to the closing conditional {{/ ... }} … But when I save this to a file, the file gets changed removing the / from the template within the attributes…

Here is a link to an example page made in Pinegrow that exhibits this issue:
https://github.com/mrSidX/pinegrow-demo-templating-scenario-1/blob/main/template.html

1 Like
5

Glad to see PG v6 doesn’t show error message for PascalCase and Camelcase tags in the new editor, probably it’s a monaco thingy… Thanks for this!

6

Would be good to get this also correct (preserve tag casing) in the Tree panel… @matjaz

7

I would like to share my workaround for when Pinegrow saves the files with the autoformatting that breaks the template… It’s basically a regex replace.

I have noticed that the mustache tags are broken more so in the input or more so when used within the tag attributes.

The break mainly happens within the input types being checkbox. In my particular case, I have a condition that checks for the checkbox variable existing, and if it does exist, it will reflect so in the input attribute: ie: <input type="checkbox" name="cb_name" {{#cb_name}} checked {{/checked}}>

Pinegrow will break this line when it saves, and the template/html engine cannot render unless it’s fixed.

My environment is using Node-red, which loads this file, and renders the template for the http response.

I have wrote a function node that will take that file payload and replace the culprit code. It works for me for now, but I’m not confident this is the best solution. Ideally Pinegrow would recognize this syntax in future and not break it hopefully. …
Regardless, It’s working quite well for me after this function script. You might be able to do something similar to the template, before it gets to the render.

Be mindful of where you put your tags, and you should be OK for the most part.

HERE YOU GO:

msg.payload = msg.payload.replace(/{{ /g, "{{/")
msg.payload = msg.payload.replace('{{="" ', "{{/");
msg.payload = msg.payload.replace('}}=""', "}}/");
msg.template = msg.payload;

return msg;

the msg.payload is the loaded HTML template file, as a String.
the msg.template is for the template renderer, in node-red, but perhaps you can make similar code work in your workflow.

1 Like