Liquid render tag

[renestalder]

11ty uses Liquidjs to render Liquid templates. And the Liquidjs documentations says, the include tag is deprecated and that the render tag should be used. Yet when I try to use the render tag in 11ty, I always get the error that this tag doesn't exist. Based on the liquidjs version that 11ty uses, the render tag should be available.

Is there something missing from 11ty or is this a general problem with Liquidjs?

[pdehaan]

I think it might depend on how you install 11ty (npm vs GitHub).

I found harttle/liquidjs#163 which mentions that LiquidJS support for the render tag was added in v9.2.0.

If I look at the current/latest 11ty package.json (master branch), it appears that the LiquidJS version is ^9.16.1 (yay!). Although, if I look at the 11ty v0.11.x branch, it appears that the LiquidJS version is set to ^6.4.3 (not yay), which might explain why [if you're installing via npm] the included version of LiquidJS isn't aware of the render tag.

---

Actually, here's a little snippet that I dropped in my local .eleventy.js config file to test:

const eleventy = require("@11ty/eleventy/package.json");
const liquidjs = require("liquidjs/package.json");
console.log(`${eleventy.name} v${eleventy.version} includes ${liquidjs.name}@${liquidjs.version}`);

OUTPUT

@11ty/eleventy v0.11.1 includes liquidjs@6.4.3

If I reinstall 11ty bleeding edge from GitHub (which I don't really recommend personally) via npm i github:11ty/eleventy -D, then rebuild my site, my console now reports:

@11ty/eleventy v1.0.0-beta.0 includes liquidjs@9.19.0

https://www.11ty.dev/docs/languages/liquid/#optional-set-your-own-library-instance has some instructions for shimming in your own version of LiquidJS if you want, but I don't remember if that exact code snippet works anymore or if some LiquidJS API changes might require you to do a bit of tweaking (see 11ty/11ty-website#326 for a rough start).

[renestalder]

Thank you @pdehaan. That's probably it. I only checked master, that's where my confusion was coming from. I find it rather weird that the versions on master evolved so much since the last npm publish. Quite a gap between 9.2.0 and 9.16.0, and in fact it seems rather trivial and without much risk to publish minor dependency updates via patches.

I then probably go with initializing my own liquidjs installation. I wanted to do that as a last instance, but that seems the best solution.

Thanks again.

[pdehaan]

OK, had a few minutes to mess around with it tonight and installing via the GitHub repo's latest commit (eleventy v1.0.0-beta.0; via npm i github:11ty/eleventy -D) seems to let me use liquidjs@9 and the {% render %} tag without any additional tricks or workarounds.

https://github.com/pdehaan/11ty-liquid9-render

{% render header.liquid, name:"peter" %}

<p>Powered by {% calaphon poweredBy.eleventy %}, and {% calaphon poweredBy.liquidjs %}</p>

OUTPUT

<header>
  <p>This is a rendered header</p>
  <p>Author: peter</p>
  <p>Rank: </p>
</header>

<p>Powered by @11ty/eleventy@1.0.0-beta.0, and liquidjs@9.19.0</p>

UPDATE: I updated the https://github.com/pdehaan/11ty-liquid9-render repo to use a custom instance of a LiquidJS module (just to confirm it's still possible/easy w/ liquidjs@9). It was a bit hard to prove it was working, but I set the dynamicPartials config option to true which caused my build to fail since now it expects the paths in include/render tags to be quoted, but after changing my code to {% render "header.liquid", name:"peter" %} it worked fine!

TL;DR: if you install @11ty/eleventy via GitHub using npm i github:11ty/eleventy, it should use the latest version of liquidjs@9 and everything should work as expected. If you want to use a slightly different version of LiquidJS that is newer than @11ty/eleventy's "liquidjs": "^9.16.1", (or just want to hack around w/ liquidjs configs), you can still set a custom LiquidJS library by adding this into your .eleventy.js config file:

module.exports = (eleventyConfig) => {
  const { Liquid } = require("liquidjs");
  eleventyConfig.setLibrary(
    "liquid",
    new Liquid({
      dynamicPartials: true,
      strictFilters: true,
    })
  );

  // ...
  return {
    // ...
  };
};