Using the new EleventyRenderPlugin

[pdehaan]

Playing around w/ the new Render plugin today in 1.0.0-beta.8 (npm i @11ty/eleventy@beta):

---
# index.njk
myData:
  title: book club
  text: "What is **bold** or _italics_?"
---

<h1>{{ myData.title }}</h1>
<pre>{{ myData.text | safe }}</pre>

<!--
  This tripped me up a bit since I wanted my markdown snippet to also process Nunjucks variables, so I had to specify "md,njk".  
  Also note that you need to specify the variables/context in your rendered block as an object.
-->
{% renderTemplate "md,njk", myData %}
  # {{ title }}

  {{ text }}

  1. I am a list
  1. I am a list

  > Oh snap!

  ```js
  const codeFence = true;
  ```
{% endrenderTemplate %}

// .eleventy.js
const { EleventyRenderPlugin } = require("@11ty/eleventy");

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

  eleventyConfig.addFilter("inspect", require("util").inspect);

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

OUTPUT

<h1>book club</h1>
<pre>What is **bold** or _italics_?</pre>

<h1>book club</h1>
<p>What is <strong>bold</strong> or <em>italics</em>?</p>

<ol>
  <li>I am a list</li>
  <li>I am a list</li>
</ol>

<blockquote>
  <p>Oh snap!</p>
</blockquote>

<pre><code class="language-js">const codeFence = true;
</code></pre>

---

This felt a bit strange, but I didn't want to figure out how to construct objects to pass to the {% renderTemplate %} tag, so I abused the eleventyComputed a little to return the raw data:

---
# test.njk
# see test.11tydata.js (template data file)
title: Hello?
---

<h1>{{ title }}</h1>

{% renderTemplate "njk,md", rawData %}
  ```
  {{ rawData | inspect | safe }}
  ```

  {{ pkg.name }}@{{ pkg.version }}

  {% for p in collections.all %}
  1. {{ p.url }}
  {%- endfor %}
{% endrenderTemplate %}

// test.11tydata.js (template data file)
module.exports = {
  eleventyComputed: {
    rawData: (data) => data,
  }
};

OUTPUT

<h1>Hello?</h1>

<pre><code>&lt;ref *1&gt; {
eleventy: {
  env: {
    config: '/private/tmp/11ty-render-tmpl/.eleventy.js',
    root: '/private/tmp/11ty-render-tmpl',
    source: 'cli'
  }
},
pkg: {
  name: '11ty-render-tmpl',
  version: '1.0.0',
  description: '',
  main: 'index.js',
  scripts: {
    build: 'eleventy',
    test: 'echo &quot;Error: no test specified&quot; &amp;&amp; exit 1'
  },
  keywords: [],
  author: '',
  license: 'ISC',
  dependencies: { '@11ty/eleventy': '^1.0.0-beta.8' }
},
eleventyComputed: { rawData: [Function: rawData] },
title: 'Hello?',
page: {
  date: 2021-11-18T04:27:08.659Z,
  inputPath: './src/test.njk',
  fileSlug: 'test',
  filePathStem: '/test',
  url: '/test/',
  outputPath: 'www/test/index.html'
},
collections: { all: [ [Object], [Object] ] },
rawData: [Circular *1]
}
</code></pre>

<p>[email protected]</p>

<ol>
  <li>/</li>
  <li>/test/</li>
</ol>