How to create template specific globals

[cyberwombat]

The scenario is that each partial/template is loaded from a DB with a preset set of variables that are automatically available only for that partial/template. Do you have a suggestion as to what I can override to achieve this?

[harttle]

Do these templates include each other? Or they're all independent?

[cyberwombat]

They would include each other. The idea is to have each be attached to its custom data source and that template could be placed inside of numerous other templates without concern about passing variables around. A bit like a dashboard where each template is a widget with its data source. User could still pass variables etc of course. So I could either override the render and other similar tag to auto include this global data or have some kind of hook that is called on variable search (which would need to provide the template name so I know what variables to pass it as "globals"

[harttle]

There's a liquidmethodmissing method you can define how to retrieve data but now it's limited to a synchronous way. I can help expose current template if that works for you.

Maybe extend render tag is easier, it'll be clearer thus worth trying.

[cyberwombat]

Yes the render tag extend is probably easier so I will try that. if I create a new render tag will it override the existing one?

[harttle]

Register a tag with the same name should replace the previous one. If not feel free to file a bug. Except for templates already parsed before replacing. You'll need register all tags before any parse or render.

[cyberwombat]

Oh ya silly me! But yes the other one doesn't work either. I even tried calling next() without success. I'll keep trying.

[cyberwombat]

Ok. Issue was the context of this making the hash empty. I had to bind this.

const renderTag = {
    ...legacyRenderTag,
    render: function* (ctx: Context, emitter: Emitter): any {
      const renderer = legacyRenderTag.render.bind<any>(this)
      yield renderer(ctx, emitter)
    }
  } as TagImplOptions

Tried to do bind<TagImpl> but could not resolve a TS error about overloads not matching but whatever...

[harttle]

I'm considering to support class based filter/tags, which is more ES6/TypeScript friendly. For now, your approach is correct. Another way is to bind when calling:

yield legacyRenderTag.render.call(this, ctx, emitter);

[TimGeudens]

I'm trying to get this to work too, but I can't seem to get it to work.
Doing the following:

const renderTag = {
    ...legacyRenderTag,
    *render(ctx, emitter) {
      console.log('render');
      yield legacyRenderTag.render.call(
        this,
        {
          ...ctx,
          environments: {
            ...ctx.environments,
            data: {some: "data"},
          },
        },
        emitter,
      );
    },
  };

However the environment context seems to be empty when the template is generated (logging data in a custom tag).
Also, making the render generator function async throws a maximum call stack size exceeded error.
Any idea what I am doing wrong or am missing?

[harttle]

You need yield * legacyRenderTag... to iterate into legcy render process, note the *. Try this snippet with a newer version of LiquidJS:

const { Liquid } = require('liquidjs')
const engine = new Liquid({
  // I'm using this option to mock local files
  fs: {
    exists() { return Promise.resolve(true) },
    async readFile(file) {
      if (file === "/main.liquid") {
        return '{% render "/foo.liquid" %}' +
          '{% render "/bar.liquid" %}'
      }
      if (file === "/foo.liquid") {
        return "foo.liquid var:{{var}}\n"
      }
      if (file === "/bar.liquid") {
        return "bar.liquid var:{{var}}\n"
      }
      return "NOT_FOUND:" + file
    },
    dirname(file) { return "/" },
    sep: "/",
    resolve(dir, file) { return file }
  }
})

const originalRender = engine.tags.get("render")
engine.registerTag('render', {
  ...originalRender,
  parse: function (token) {
    originalRender.parse.call(this, ...arguments)
  },
  render: function* (ctx, emitter) {
    // set globals for different files
    // - if file name is a varialbe, you'll need to `evalValue` (see original implementation)
    // - for older versions of LiquidJS, you'll need to set `ctx.opts.globals`
    if (this.file === '/foo.liquid') {
     ctx.globals = { var: "FOO" }
    }
    if (this.file === '/bar.liquid') {
     ctx.globals = { var: "BAR" }
    }

    yield* originalRender.render.call(this, ctx, emitter)
  }
})

engine.renderFile('/main.liquid').then(console.log)

I'm using fs option to simplify this scenario to one single file, it's not required to use fs. Will get following output:

foo.liquid var:FOO
bar.liquid var:BAR