如何使用 EJS 和 110 进行组件组合（包含在包含中）？

Question

I'm using Eleventy , a static site generator to build a website. It supports a lot of templating languages, but EJS looks to be the best in that it's "just JavaScript", except, I cannot figure out how to do component composition, or whether it's at all possible. The EJS docs are, let's say, severely lacking.

What I want to achieve is similar to what you'd do in React or Vue with props.children or <slot> , where you compose components, but it would obviously be done with partials here.

For example, say I had a grid-item partial that accepted sizes it could render at, its tag name and "children", something like:

<%- include('../grid-item', {
  size: '50',
  tag: 'li',
  children: ANOTHER-INCLUDE,
}); %>

However, even the above example is a bit limiting, so what I'd really like to achieve is something like:

<%- include('../grid', {
  tag: 'ul',
}, () => { %>
  <%- include('../grid-item', {
    size: '50',
    tag: 'li',
  }, () => { %>
    <div>ANY MARKUP</div>
  <% }); %>
<% }); %>

Is this possible? Am I approaching this from the wrong angle?

Eleventy supports a workaround for this with Paired Shortcodes for Nunjucks and Liquid, but both of those templating languages seem severely limited, such as you can't even create an object of data.

Answer 1

You can use Javascript Template Functions for this.

I have set up a components.js file that gets imported in my .eleventy.js config file. That components file gets passed the eleventyConfig object, and then defines components like:

eleventyConfig.addJavaScriptFunction("componentName", function(props) { … });

Then you can use that function in your js templates, by accessing it via this :

module.exports = function(data) {
  return `
    <div>
      ${this.componentName(props)}
    </div>
  `;