How do I determine the last (final) layout in the layout chain when developing custom extension for template engine? #3157

monochromer · 2024-01-09T17:16:39Z

monochromer
Jan 9, 2024

I am trying to create an integration of Eleventy and Preact as a template engine

Eleventy passes the rendered template to the parent layouts inside the content property as raw HTML strings.

For example, for the Nunjucks template engine, it looks like this

// index.md

---
layout: article
title: Some title text
---

some text

// article.njk

---
layout: root
---
<article>
  {{ content | safe }}
</article>

// root.njk

<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>

But I want to pass objects, not strings. I don't know yet if these will be virtual nodes or functional components.

For Preact, it will look like this:

// index.md (I will replace default md render to custom method, which return components instead of html string)

---
layout: article
title: Some title text
---

some text

// article.jsx

---
export const data = {
  layout: 'root'
}

export default function ArticleLayout(props) {
  return (
    <article>
      {{ props.children }}
    </article>
  )
}

// root.jsx

export default function RootLayout() {
  const context = useEleventyContext()

  return (
    <html>
      <head>
        <title>{{ context.data.title }}</title>
      </head>
      <body>
        {{ props.children }}
      </body>
    </html>
  )
}

But in the end, you still need to render the result to a string, like this:

'<!DOCTYPE html>' + renderToString(Component)

How do I determine that the layout is the last one and I need to render everything in a string?

I had the idea to write a special property in the layout:

// root.jsx

export default function RootLayout() {}

RootLayout.isFinalLayout = true

Then, in the extension itself, determine the type of render based on this property (pseudocode):

eleventyConfig.addExtension('jsx', {
  read: false,
  outputFileExtension: 'html',
  async compile(inputContent, inputPath) {
    const Component = require(inputPath).default
    return async (data) => {
      if (component.isFinalLayout) {
        return '<!DOCTYPE html>' + renderToString(<Component data={data} />)
      } else {
        return Component
      }
    }
  }
})

But I want it to be transparent for the extension user and he does not need to manually set such flags.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How do I determine the last (final) layout in the layout chain when developing custom extension for template engine? #3157

{{title}}

Replies: 0 comments

Select a reply

How do I determine the last (final) layout in the layout chain when developing custom extension for template engine? #3157

monochromer Jan 9, 2024

Replies: 0 comments

monochromer
Jan 9, 2024