Define global objects which can be accessed by render tag

[paulrobertlloyd]

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]

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).

[harttle]

Try [email protected], it should be supported by passing globals option.

[paulrobertlloyd]

Thanks @harttle; started working with this, and all seems to work as expected. Will file any bugs/issues if I come across them. Thanks so much for adding this feature so quickly!

[zeroedin]

@harttle is there a way to get globals option to work with Express Liquid integration? https://liquidjs.com/tutorials/use-in-expressjs.html

I feel like i'm going down a rabbit hole here, I understand the express res.render method does not take the same params as the liquid.renderFile method, so trying to work my way around that. Any ideas? Maybe I am I overlooking something but I think i'm at the point where using res.render is out of the question for Liquid global variables.

[zeroedin]

I think I might have found a solution:

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

  app.set('views', path.join(__dirname, 'views'))
  app.set('view engine', 'liquid')
  
  let html = engine.renderFileSync(path.join(__dirname, 'views','index'), {
    data: 'local'
  }, {
    globals: { data: 'global' }
  })

  res.send(html)

To use in an express router I had to set app.local.engine = engine in a app.js middleware and use app.locals.engine.renderFileSync

[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'}
  })

[jsuiker]

the settings object indeed does not work when using express res.render method

[jsuiker]

@harttle please see the following repo for a minimal example of the settings object NOT working when using express res.render()

https://github.com/jsuiker/liquidjs-express-globals

[harttle]

@jsuiker I find expressjs passes a settings variable when calling render engines, and local scope has higher priority than globals. Sadly I don't find any docs from its website. But if you delete that from locals, your demo will work fine:

  var app = express()
  // after `express` is created, delete its `.locals.settings`:
  delete app.locals.settings;