Allow Render plugin to access global data via $data

[zachleat]

Render plugin has scoped data: https://www.11ty.dev/docs/plugins/render/#pass-in-data

However, I’d like to add access to global data for all supported template languages for the render plugin (Nunjucks, Liquid, 11ty.js), perhaps re-using the $data convention from WebC https://github.com/11ty/webc/releases/tag/v0.11.0

[hexagoncircle]

I think this is a good change! 🎉 Adding some more context as to why this issue came about.

My original issue

Global data is not available when trying to access it in a webc component via renderTemplate. I've spun up a test repo with a reduced case.

I'm attempting to render a webc component in a nunjucks file:

{% renderTemplate "webc" %}
  <greetings></greetings>
{% endrenderTemplate %}

In the component file, I want to access some global data in a webc:for

<ul>
  <li webc:for="(greeting, index) of greetings" :id="greeting.id">
    <span @text="index"></span>
    <span @text="greeting.text"></span>
  </li>
</ul>

This renders [object Object] on the page and logging greetings data in the component returns undefined. If I pass the data into renderTemplate, it's still not available via greetings but now I can access it in $data._

{% renderTemplate "webc", greetings %}
  <greetings></greetings>
{% endrenderTemplate %}

This data can then be accessed on the component:

<li webc:for="greeting of $data._"></li>

If this index file were a .webc page instead of .njk, there is no issue accessing global data. I expected this to work the same via renderTemplate. I recall us discussing that global $data object. Forgive me for not remember exactly but, in the future, in both a webc layout and renderTemplate, will we grab global data like this?

<li webc:for="(greeting, index) of $data.greetings">

Proposed workaround

After some discussion, Zach had provided this workaround for nunjucks:

const { EleventyRenderPlugin } = require("@11ty/eleventy");
const pluginWebc = require("@11ty/eleventy-plugin-webc");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(EleventyRenderPlugin);
  eleventyConfig.addPlugin(pluginWebc);

  eleventyConfig.addPairedNunjucksAsyncShortcode("renderWebC", async function(content) {
    return eleventyConfig.javascriptFunctions.renderTemplate.call(this, content, "webc", this.ctx);
  });
};

and then in nunjucks template:

---
globalData: hi
---

{% renderWebC %}
  <test :arg="globalData"></test>
{% endrenderWebC %}

Testing

Following this workaround, I've updated my test repo's eleventy.config and added a workaround page. I can confirm that global data can now be passed into an argument like this:

{% renderWebC %}
  <greetings :greetings="greetings"></greetings>
{% endrenderWebC %}

[zachleat]

Related to #3266