custom tag implementation

[jae88]

How can I render and make sure anything within is executed as design
e.g.
{% mycustomtag %}{% for item in items %}

{{ item.property }}

{% endfor %}{% endmycustomtag %}
or is there any documentation for this I missed out?
Thank you!

[harttle]

See this for example: https://github.com/harttle/liquidjs/blob/master/src/tags/capture.ts

[harttle]

It's doable but a little verbose, any thoughts? I'm considering offer a better way to do this in the next major version.

[maichopra]

Is there an updated version that has been included, because the link is dead.

Also how would one go about passing multiple properties into a new tag.

e.g. {% mycustomtag property:value property2:value2 %}

[harttle]

Thanks for reporting, link updated.

[jg-rp]

Here's an example of a custom with tag. It accepts any number of property/value arguments, separated by spaces, and keeps those arguments in scope for the duration of its block.

See also:

• Option to allow Commas in Parse Parameters Tokenizer #724
• https://liquidjs.com/tutorials/parse-parameters.html#Parse-Parameters-as-Values

And, @harttle, I think this page is broken:

• https://liquidjs.com/tutorials/render-tag-content.html

import { evalToken, Liquid, Tag, Tokenizer } from "liquidjs";

// This is specifically for whitespace separated key/value arguments.
// I don't think LiquidJS exports it.
const BLANK = 4;

class WithTag extends Tag {
  /** @type Map<string, ValueToken> */
  arguments;
  /** @type Template[] */
  children;

  constructor(token, remainTokens, liquid) {
    super(token, remainTokens, liquid);
    this.arguments = this._parseArguments(token);
    this.children = [];

    const stream = this.liquid.parser
      .parseStream(remainTokens)
      .on("tag:endwith", () => stream.stop())
      .on("template", (t) => this.children.push(t))
      .on("end", () => {
        throw new Error(`tag ${token.getText()} not closed`);
      });

    stream.start();
  }

  _parseArguments(tagToken) {
    /** @type Map<string, ValueToken> */
    const args = new Map();
    const tokens = new Tokenizer(tagToken.args);

    while (true) {
      tokens.skipBlank();
      if (tokens.end()) break;
      let [key, value] = this._parseArgument(tokens);
      args.set(key, value);
      tokens.assert(
        tokens.peekType() & BLANK || tokens.end(),
        "expected space separated arguments"
      );
    }

    return args;
  }

  _parseArgument(tokens, delimiter = ":") {
    // Read the argument's name or key
    const key = tokens.readIdentifier();
    tokens.assert(key.size(), "expected key/value pairs");
    tokens.skipBlank();

    // Check for key/value delimiter
    tokens.assert(
      tokens.peek() === delimiter,
      `expected key/value arguments delimited with ${delimiter}`
    );
    ++tokens.p;
    tokens.skipBlank();

    // Read the argument's value.
    const value = tokens.readValue();
    tokens.assert(value, "expected key/value pairs");

    return [key.content, value];
  }

  *render(ctx, emitter) {
    const scope = {};
    for (const [k, v] of this.arguments) {
      scope[k] = yield evalToken(v, ctx);
    }

    ctx.push(scope);
    yield this.liquid.renderer.renderTemplates(this.children, ctx, emitter);
    ctx.pop();
  }
}

const liquid = new Liquid();
liquid.registerTag("with", WithTag);

const templateContext = {
  you: "world",
};

const template = `\
Hello, {{ you }}!

{% with you:"Sue" foo:"Liquid" %}
  {% if true %}
    Greetings, {{ you }}!
    Greetings, {{ foo }}!
  {% endif %}
{% endwith %}

Goodbye, {{ you }}!
Goodbye, {{ foo }}!
`;

const result = liquid.parseAndRenderSync(template, templateContext);
console.log(result);

Output

Hello, world!


  
    Greetings, Sue!
    Greetings, Liquid!
  


Goodbye, world!
Goodbye, !

[harttle]

@jg-rp @maichopra this link is fixed: https://liquidjs.com/tutorials/render-tag-content.html

[maichopra]

Thanks you so much @jg-rp and @harttle.
This was exactly what I was looking for.