How to handle variables and string literals as custom tag parameters

[amit777]

Hi, I have a custom tag where I want to be able to have an optional parameter and I want to be able to pass in either a string or variable name. For eg: {% hello_world "foo" %} (name is string "foo", optional code is empty) or {% assign bar = "bar" %} {% hello_world bar "code1" %} (name is variable bar, optional code is string)

I am able to accomplish the second one using this code:

liquid.registerTag('hello_world', {
  parse: function (tagToken, remainTokens) {
    const tokenizer = new Tokenizer(tagToken.args, this.liquid.options.operatorsTrie);
    this.name = tokenizer.readIdentifier().content;
    this.code = tokenizer.readIdentifier().content;
    if (!this.name) throw new Error('reject tag requires a name parameter');
  },
  render: async function (scope, hash) {
    let name = await this.liquid.evalValue(this.name, scope);
    let code = await this.liquid.evalValue(this.code, scope);
    return `HELLO name=${name},code=${code}`;
  }
});

How would I modify the above custom tag to be able to accept the name or code parameters as either variable names or fixed strings while also making the code parameter optional?

[harttle]

Try make use of Hash object or readHash method in tokenizer. You can refer to the implementation of include tag.

[amit777]

Thank you, I will play around with that. I tried reading the code at https://github.com/harttle/liquidjs/blob/master/src/builtin/tags/include.ts but it's not clear to me how to use the hash methods properly in my case.

[amit777]

Hi @harttle I've tried to do something more simple but I don't seem to understand how to make the tokenizer work correctly. I was wondering if you could help me make the tokenizer read 2 parameters on the custom tag? Each parameter can be either an identifier or a string literal.

Doesn't need to be working code, but just a very barebones example. So if the tag is {% hello_world foo "bar" %}, it would be great if I could get this.foo = 'foo' and this.bar = '"bar"'

I've tried readHashes(), readQuoted(), readTopLevelTokens(), readIdentifier(), readValue()

[harttle]

@amit777 I can make a basic tutorial for this, hopefully we can have a set of tutorials for custom filters and tags eventually.

[amit777]

Thank you! I think I may have figured out a solution and will post the code in the morning. I'm curious to see if you think I've done it correctly.

[amit777]

Here is an example of a basic tag structure with 2 helper functions. Does this look like the correct way to you?

const { Liquid, Tokenizer, evalQuotedToken, TokenKind } = require('liquidjs');
const liquid = new Liquid({jsTruthy: true});

function _getLiquidToken (tokenizer) {
  const wordToken = tokenizer.readIdentifier();
  if (wordToken.content) return wordToken;
  const quotedToken = tokenizer.readQuoted()
  if (quotedToken) return quotedToken;
}

async function _getLiquidTokenValue(token, ctx, scope) {
  let ret;
  if(token?.kind == TokenKind.Quoted) { //1024
    logger.debug(`token is quoted`);
    ret = evalQuotedToken(token);
  }
  else if(token?.kind == TokenKind.Word) { //256
    ret = await ctx.evalValue(token?.content, scope);
  }
  return ret;
}

liquid.registerTag('hello_world', {
  parse: function (tagToken, remainTokens) {
    const tokenizer = new Tokenizer(tagToken.args, this.liquid.options.operatorsTrie);
    this.foo = _getLiquidToken(tokenizer);
    if(!this.foo) throw new Error('reject requires a foo parameter');
    this.bar = _getLiquidToken(tokenizer);
  },
  render: async function (scope, hash) {
    
    let foo = await _getLiquidTokenValue(this.foo, this.liquid, scope);
    let bar = await _getLiquidTokenValue(this.bar, this.liquid, scope);
    return `foo=${foo},bar=${bar}`;
  }
});

[harttle]

Hey @amit777 , I created a tutorial here: https://liquidjs.com/tutorials/parse-parameters.html

Glad to know the above snippet works for your case. Apart from Quoted and Word, Liquid value can also be Number(23) or PropertyAccess(foo.bar), you can make use of tokenizer.readValue() and evalToken() for this.

Hope it helps!

[amit777]

Thanks, this is perfect!

[amit777]

Hi @harttle apologies, I was looking at some of our tests around liquidjs. I'm not sure when they stopped working, but is evalToken() still the correct way to get the value of a tag parameter? It looks like evalToken is now returning an object rather than a string.

[amit777]

Hi, so I've been digging deeper, and a change in 9.42.0 seems to have affected how evalToken() works.. I am digging deeper, but just wanted to note it here in case you are looking at it.