Access context in custom filter

[Nowaker]

I need to re-create a custom Jekyll filter liquify (https://github.com/gemfarmer/jekyll-liquify/blob/master/lib/jekyll-liquify.rb):

module LiquidFilter
  def liquify(input)
    Liquid::Template.parse(input).render(@context)
  end
end

Liquid::Template.register_filter(LiquidFilter)

This is an equivalent of eval in Liquid:

---
key: val
---
{{ '{{ page.key }}' | liquify }} will say val

I am not sure if this is even possible because the documentation doesn't specify how to access the context. https://liquidjs.com/tutorials/register-filters-tags.html#Register-Filters

If it's possible to access the context within a filter, please explain how in the docs. Otherwise, please consider making it possible to access the context within a filter - just like in tags (https://liquidjs.com/tutorials/register-filters-tags.html#Register-Tags).

CC @harttle

[Nowaker]

Based on https://github.com/harttle/liquidjs/blob/master/src/builtin/filters/date.ts#L8 I can see this.context being accessed. However, when I try accessing this.context or simply this, it's undefined:

  engine.registerFilter('liquify', (...args) => {
     return `ctx:${this.context}`
  })

Because the source is in TypeScript, and I use Liquidjs in JS, I don't really know how one converts to the other. There's this FilterImpl that appears to have what I want but I've no idea how to access it in filters the way it's currently documented (pure JS code).

Another thing worth documenting is how to use asynchronous calls in filters. It took me a while to figure it out:

  engine.registerFilter('liquify', async (...args) => {
    context = {key: 'val'} // TODO: Pass context. https://github.com/harttle/liquidjs/issues/444
    const html = await engine.parseAndRender(args[0], context).then((results) => {
      return results
    })
    return html;
  })

[harttle]

The filter need to be declared by function instead of arrow function to access this.

  engine.registerFilter('liquify', function(...args) {
     return `ctx:${this.context}`
  })

We should highlight this caveat in filter docs.

Update: create a tutorial to highlight this part, https://liquidjs.com/tutorials/access-scope-in-filters.html

[Nowaker]

@harttle Thank you! This works perfectly:

  engine.registerFilter('liquify', async function(...args) {
    const syntax = args[0]
    const template = this.liquid.parse(syntax)
    const result = this.liquid.renderer.renderTemplates(template, this.context)
    const html = await toPromise(result)
    return html
  })

BTW, I had to use this, and not parseAndRender because these functions want a scope hash, not the full context. Moreover, the same thing implemented as a tag requires the same because scope in render: async function (context, emitter, scope) does not include all variables - only the top-level ones, not local ones, specific to a for-each array, for example.

{% assign tldarray = "club|io|online|org|xyz|com" | split: "|" %}
  {% for tld in tldarray %}
    {% tag /domains/{{tld}}/ %}

scope will not have tld variable when processing tag. context must be used instead.

[harttle]

I see. Calling low-level renderTemplate() in filters/tags yield better performance.

Raw scope hash doesn't contain hierarchy infomation and need additional serialization overhead from current context: this.context.getAll() should return a serialized version containing variables from all scopes.

So parseAndRender() is for end users and those who don't care about performance.

[Nowaker]

Update: create a tutorial to highlight this part, https://liquidjs.com/tutorials/access-scope-in-filters.html

@harttle Great, this.context + function() { } syntax is a good example. I would suggest mentioning the existence of this.liquid as well.