Unparse liquid object tree to liquid string

[t-kelly]

Would love to be able to parse a liquid template, modify the object tree, and then reassemble to a modified template. Willing to help you if you want!

Thanks for your great work @harttle! 👏

Example

1. Template before:

{% include 'some-snippet' %}

2. Search for tag and change value:

const fs = require('fs');
const Liquid = require('liquidjs');

const engine = new Liquid();
const content = fs.readFileSync('./template.liquid', 'utf8');
const results = engine.parse(content);

results.template.forEach(template => {
  if (template.type === 'tag' && name === 'include') {
    template.tagImpl.value = 'other-snippet'
  }
} 

const modifiedContent = engine.reverseRender(results);
fs.writeFileSync('./modified.liquid', modifiedContent);

3. Template after modification

{% include 'other-snippet' %}

[harttle]

The object tree representing parsed templates are available via .parse(). Is this structure sufficient for your use?

It can be very tricky to understand and modify the template tree, as they're implement-dependent and the order may be important for some tags like {%for%} and `{%endfor%}·

[t-kelly]

I would definitely agree that modifying the object is something that would be done on a case by case basis and can be done outside the scope of this library.

To clarify, the focus of this issue would be create a function, lets call it .reverseRender(), that makes the following test pass:

const originalTemplateString = fs.readFileSync('./template.liquid', 'utf8');
const templateObject = engine.parse(originalTemplateString);
const newTemplateString = engine.reverseRender(templateObject);

expect(newTemplateString).toEqual(originalTemplateString);

[harttle]

It's great to have this feature, provided that it doesn't introduce much complexity into tags. To do this, both templates -> tokens, and tokens -> html need to be implemented.

• tokens->html can be easily done, just serialize every token and join the results
• tags->tokens is non trivial. A tag in liquidjs can define a custom parser, which consumes a list of tokens defined by that parser. In order to not introduce complexity in tag implementations, you may need keep track of tokens each tag consumed.

[t-kelly]

Talked this over with some colleagues, instead of ‘reverseRender’, maybe ‘unparse’ works better?

I can see each tag defines their own ‘parse’ and ‘render’ methods to handle their own unique data structure. How about introducing an additional method, ‘unparse()’ for each tag, which essentially does the reverse of each parse method.

[harttle]

I agree unparse is better. The additional method is also reasonable.

liquidjs also provides a browser-side version, so hope it won't take much code 😄

[harttle]

Since unparse is not a typical use case, I'd rather not integrate it into liquidjs. Instead there's a plugin API for similliar cases and if that interface is not sufficient we should open a new issue.

[thibautvdu]

@t-kelly

I know it's been a while, but did you ever manage to unparse a template tree easily ? Is there any solution around ?
I also need to parse a .liquid file, modify a few elements and save the modified .liquid template without rendering it.