Rewrite everything using Svelte and the experimental Eleventy addExtension API. What could go wrong?! 🙃
Important ELEVENTY_EXPERIMENTAL=true is required before running any eleventy scripts, otherwise you don't get the new API.
Should really extract all the Svelte stuff from .eleventy.js into a plugin, but it's fine here until it stabilises a bit. Might want to consider using eleventy-assets instead of rolling my own asset manager, but this works for now 🤷
tl;dr for the Svelte integration:
Tell Eleventy to run our custom engine for .svelte files with the new addExtension API.
Tell Eleventy not to read the file contents (Svelte does that for us)
Provide a compile function that returns the HTML for each page
This uses svelte/register to import the .svelte file
Uses the Svelte SSR API to render the component to HTML, CSS and head contents
Adds the CSS and head contents to their respective asset managers (to keep track of them for the final render)
Return the rendered HTML
The final top-level layout must call the getSvelteCssForPage and getSvelteHeadForPage functions (provided as Eleventy JS filters) to get the aggregated Svelte <style> and <svelte:head> stuff to render
Rewrite everything using Svelte and the experimental Eleventy
addExtensionAPI. What could go wrong?! 🙃Important
ELEVENTY_EXPERIMENTAL=trueis required before running anyeleventyscripts, otherwise you don't get the new API.Should really extract all the Svelte stuff from
.eleventy.jsinto a plugin, but it's fine here until it stabilises a bit. Might want to consider usingeleventy-assetsinstead of rolling my own asset manager, but this works for now 🤷tl;dr for the Svelte integration:
.sveltefiles with the newaddExtensionAPI.compilefunction that returns the HTML for each pagesvelte/registerto import the.sveltefilegetSvelteCssForPageandgetSvelteHeadForPagefunctions (provided as Eleventy JS filters) to get the aggregated Svelte<style>and<svelte:head>stuff to render