Method to get an array of variable names used in a parsed template

[amit777]

Hi, we need to do some validation in our code regarding the names of parameters within a liquid template. Ideally I would like to do something like

const { Liquid } = require('liquidjs');
async function main() {
    const engine = new Liquid();
    const template = `
        Hello, {{ name }}!  You like {{ pet }}
    `;

    const parsedTemplate = engine.parse(template);
    const variables = parsedTemplate.extractVariables(parsedTemplate);
// variables should be ['name', 'pet']
}

Is there an easy way to do this?

[harttle]

AFAIK, no. I assume you need top level names. But names can be nested in scopes and builtin drops like in for tag. And can be dynamic.

I would like to implement one if it can be clearly defined and still useful.

[amit777]

yes, just top level static variable names would be sufficient for my use case. I see your point about dynamic variables though. I wrote this very hacky method:

const _extractTemplateVars = function (parsedTemplate) {
  const variables = new Set();

  function traverseTokens (tokens) {
      for (const token of tokens) {
            if (token.token.constructor.name === 'OutputToken') {
        for (let p of token.value?.initial?.postfix) {
          let prop = p.props[0];
          if (prop.constructor.name === 'IdentifierToken') {
            variables.add(prop.content);
          }
        }
      }
      else if (token.token.constructor.name === 'TagToken') {
        for (let branch of token.branches) {
          traverseTokens(branch.templates);
        }
      }
    }
  }

  traverseTokens(parsedTemplate);
  return variables ;
}

[chaitanyapilaka]

Seems like there is something like this being worked on in the ruby version?

Shopify/liquid#685

[Sushant-Rana]

HI @amit777 , any leads on this, i am also facing the same requirement. @harttle can we have functionality from liquid which gives list of all the tags being used in the template ? All the variables be it dynamic ones or in nested scopes.Will really appreciate this functionality if released . Thanks

[jimmyfortinx]

On our side we would also need something like this because we want to be able to call our backend to fetch only the data that was really used in the template, so we don't have to pull on all of our micro-services when the template only requires the first name of an account.

One example:
test {% if entity.firstName == "FOO" %} true {{ entity.lastName }}{% else %}false{{ entity.billingAddress.line1 }}{% endif %} one with a filter {{ entity.commercialName | uppercase }}

I would like to be able to retrieve either an list with all variable

[ 'entity.firstName', 'entity.lastName', 'entity.billingAddress.line1', 'entity.commercialName' ]

or an object like this:

{
  entity: {
     firstName: true,
     lastName: true,
     commercialName: true,
     billingAddress: {
       line1: true
     }
  }
}

[jg-rp]

Since version 10.20.0, LiquidJS includes experimental support for retrieving variables from a template (docs).

Using @jimmyfortinx's example, we can get variables as an array of strings, where each string is the path to the variable.

import { Liquid } from "liquidjs";

const liquid = new Liquid();

const source = `
test
{% if entity.firstName == "FOO" %}
  true {{ entity.lastName }}
{% else %}
  false
  {{ entity.billingAddress.line1 }}
{% endif %}

one with a filter
{{ entity.commercialName | uppercase }}`;

const template = liquid.parse(source);
console.log(liquid.fullVariablesSync(template));

Output

[
  'entity.firstName',
  'entity.lastName',
  'entity.billingAddress.line1',
  'entity.commercialName'
]

Or an array of segments, where each path is represented as an array of property names or array indexes.

// continued from above
console.log(liquid.variableSegmentsSync(template));

Output

[
  [ 'entity', 'firstName' ],
  [ 'entity', 'lastName' ],
  [ 'entity', 'billingAddress', 'line1' ],
  [ 'entity', 'commercialName' ]
]

If we change the example to include a for tag, we'll see the loop variable too.

import { Liquid } from "liquidjs";

const liquid = new Liquid();

const source = `
test
{% if entity.firstName == "FOO" %}
  true {{ entity.lastName }}
{% else %}
  false
  {{ entity.billingAddress.line1 }}
  {% for line in entity.billingAddress %}
    {{ line }}
  {% endfor %}
{% endif %}

one with a filter
{{ entity.commercialName | uppercase }}`;

const template = liquid.parse(source);
console.log(liquid.fullVariablesSync(template));

Output

[
  'entity.firstName',
  'entity.lastName',
  'entity.billingAddress.line1',
  'entity.billingAddress',
  'entity.commercialName',
  'line'
]

To get paths for variables that aren't local to the template (like from for loops or assign tags), we can ask for just the "global" variables.

// continued from above
console.log(liquid.globalFullVariablesSync(template));

Output

[
  'entity.firstName',
  'entity.lastName',
  'entity.billingAddress.line1',
  'entity.billingAddress',
  'entity.commercialName'
]