search

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
17.17k stars 494 forks source link

Add support for 11ty.js Virtual Templates #3347

Closed zachleat closed 4 months ago

zachleat commented 4 months ago

Related: #1612

zachleat commented 4 months ago

Shipping with 3.0.0-alpha.15. Pass in the raw JavaScript as the virtual template content, like so:

eleventyConfig.addTemplate("virtual.11ty.js", function(data) {
    return `this is a test ${data.page.url}.`;
});

eleventyConfig.addTemplate("virtual.11ty.js", {
  data: () => ({ var: 2 }),
  render: function(data) {
    return `this is a test ${data.var}.`;
  }
});
VividVisions commented 4 months ago

Awesome! So, I guess using JS classes as templates (with data and render methods) will also be as easy as this:

import MyTemplateClass from 'mytemplate.js';

const template = new MyTemplateClass({ options: { /* ... */}});
eleventyConfig.addTemplate('virtual.11ty.js', template);
zachleat commented 4 months ago

@VividVisions any of the 11ty.js types would work there: https://www.11ty.dev/docs/languages/javascript/

zachleat commented 1 month ago

Temporary docs preview URL building here: https://11ty-website-git-v3-11ty.vercel.app/docs/virtual-templates/#javascript