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?
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
rendertag, and thatincludehas 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:
The data for both
appandnavigationcomes from global data files. Given the encapsulated nature ofrender, 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:
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
globalswhen configuring LiquidJS (shown within the context of an 11ty configuration), like so:Alternatively, perhaps an object would allow authors to define a name for each global:
Not sure which is the best approach; I have no preference.
Is this a legitimate feature request, or have I missed something?