Define global objects which can be accessed by render tag

Having experienced a few cases where variables have unintentionally leaked into included template partials, it was interested to note that Liquid (and LiquidJS) now support the stricter render tag, and that include has been deprecated.

I tried to update my 11ty-generated site to use render, but in doing so, soon came across a limitation; global data objects are not available to rendered partials.

For example, I have the following partial:

<header class="banner">
  <div class="banner__container">
    <div class="banner__title">
      <a rel="home" href="/">{{ app.title }}</a>
    </div>
    <nav class="banner__navigation" aria-label="site">
      {%- render 'navigation' with navigation.primary -%}
      {%- render 'navigation' with navigation.secondary -%}
    </nav>
  </div>
</header>

The data for both app and navigation comes from global data files. Given the encapsulated nature of render, I have to declare these each time I wish to render this partial on a page, which is not always easy or possible within the confines of a Liquid template.

Looking at the relevant Shopify theme docs, I note that:

Global objects don’t need to be passed down. They are accessible from all files.

Shopify define their own global objects, but there’s no way for an author using LiquidJS to do the same, as far as I can see.

I imagine being able to define an array of globals when configuring LiquidJS (shown within the context of an 11ty configuration), like so:

const {Liquid} = require('liquidjs');
const app = require('./src/_data/app.json');
const navigation = require('./src/_data/navigation.json');

module.exports = function(eleventyConfig) {
  let options = {
    extname: '.liquid',
    strict_filters: true,
    root: [
      './src/_includes',
      './src/_layouts'
    ],
    globals: [
      app,
      navigation
    ]
  };

  eleventyConfig.setLibrary('liquid', new Liquid(options));
};

Alternatively, perhaps an object would allow authors to define a name for each global:

globals: {
  foo: app,
  bar: navigation
}

Not sure which is the best approach; I have no preference.

Is this a legitimate feature request, or have I missed something?

[harttle]

The globals can be set when creating anengine object.

let engine = new Liquid({
    root: path.join(__dirname, 'views'),
    extname: '.liquid'  // used for layouts/includes, defaults "",
    globals: {data: 'global'}
  })

[harttle]

At first glance it seems something contradictory: we need to make the variables passed down explicit, and we need globals at the same time. But I’ll try to be compatible with the shopify liquid and dig into that behaviour to make sure it’s intended. And I prefer to the second way (in which you can define a object literal to specify the globals).