How to render dynamic template-string within custom tag render function

[amit777]

If I have a custom_tag. I want the render function to select a template based on the custom_tag parameters and render the template using the custom_tag context. I would also like to add some more keys to the context if possible

Example that does not work (with notes and questions in the render function comments:

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

liquid.registerTag('custom_tag', {
  parse: function (tagToken, remainTokens) {
    const tokenizer = new Tokenizer(tagToken.args, this.liquid.options.operatorsTrie);
    this.item = _getLiquidToken(tokenizer);
    if(!this.item) throw new Error('custom_tag requires item parameter');
  },
  render: async function (ctx) {
    let item = await _getLiquidTokenValue(this.item, this.liquid, ctx);
    // item_template can be conditional based on the value of item. I've just hard coded it here
    let item_template = `[subtemplate foo={{foo}}]`;
    let tpl = this.liquid.parser.parse(item_template);
   // how to add keys to the ctx correctly?
    let html = await this.liquid.renderer.renderTemplates([tpl], ctx);
   // html seems to be an object, not a string
    return html;
  }
});

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
    ret = evalQuotedToken(token);
  }
  else if(token?.kind == TokenKind.Word) { //256
    ret = await ctx.evalValue(token?.content, scope);
  }
  return ret;
}

[amit777]

I guess I could just do this within the render(ctx) function:

let html = this.liquid.parseAndRenderSync(item_template, ctx.environments); 

Would this be the incorrect way to do it? We would need to beware of circular references I guess..

[harttle]

That line should be yield instead of await, and change the await render() to *render(), please check out https://liquidjs.com/tutorials/sync-and-async.html for details.

let html = yield this.liquid.renderer.renderTemplates(tpl, ctx);

And parser.parse() already returns a template array, should be passed to renderTemplate() directly as tpl instead of [tpl].

how to add keys to the ctx correctly?

I created a tutorial for this, see https://liquidjs.com/tutorials/render-tag-content.html

html seems to be an object, not a string

You can directly pass emitter to renderTemplate() and it'll send content into the emitter.