eleventy-plugin-svelte's Introduction

Eleventy Plugin to enable svelte

Heavily inspired by eleventy-plugin-vue.

Installation

npm install eleventy-plugin-svelte

Requires experimental features in Eleventy, specifically: Custom File Extension Handlers feature from Eleventy. Opt in to experimental features on Eleventy by running ELEVENTY_EXPERIMENTAL=true npx @11ty/eleventy.

Features

Builds *.svelte single file components.
Emits client side JavaScript code which can be included on the site to enable hydration of the static HTML.
Data which is defined in the data function (module context) feeds into the data cascade.
Data is supplied via Svelte props, to use the data during runtime you have to define a dataFn which defines what will be provided as props at runtime. (see example)

Not yet available

Svelte components as layouts

Usage

const eleventySvelte = require('eleventy-plugin-svelte')

module.exports = function (eleventyConfig) {
  // Use Defaults
  eleventyConfig.addPlugin(eleventySvelte)
}

Customize with options

const eleventySvelte = require('eleventy-plugin-svelte')

module.exports = function (eleventyConfig) {
  // Use Defaults
  eleventyConfig.addPlugin(eleventySvelte, {
    // Directory to emit client side JS code
    assetDir: 'assets',

    // If false client side bundle is not generated
    outputClient: true,

    // Options for the rollup-plugin-svelte for prerendering
    rollupPluginSvelteSSROptions: {},

    // Options for the rollup-plugin-svelte for the client side code
    rollupPluginSvelteClientOptions: {},

    // Additional rollup plugins for prerendering
    rollupSSRPlugins: [],

    // Additional rollup plugins for the client side code
    rollupClientPlugins: [],
  })
}

Example Configuration

const eleventySvelte = require('eleventy-plugin-svelte')
const postcss = require('rollup-plugin-postcss')
const terser = require('rollup-plugin-terser').terser

const dev = process.env.NODE_ENV === 'development'

// Example with prerendering the styles and omitting them in the client bundle.
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventySvelte, {
    rollupSSRPlugins: [postcss()],
    rollupPluginSvelteClientOptions: {
      emitCss: false,
      compilerOptions: {
        css: false
      }
    },
    rollupClientPlugins: [!dev && terser()],
  })
}

Template Variables and Functions

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!-- Adds content from svelte:head -->
    {{ content.head | safe }}
    
    <!-- Adds prerendered css -->
    <style>
      {{ content.css | safe }}
    </style>
  </head>
  <body>
    ....
    <!-- Adds prerendered html -->
    {{ content | safe }}  
  </body>
  <script>
    // Provides the data used on the client side (dataFn is a function defining the used data)
    {{ dataFn | svelteData | safe }}
  </script>
  <!-- Gets the svelte client side code for browsers which support es modules ("app" is the id of the HTMLElement the app is going to mount on) -->
  {% svelteClient 'app' %}
  <!-- The legacy bundle needs systemjs to be loaded -->
  <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.3.2/s.min.js"></script>
  <!-- Gets the svelte client side code for browsers do not support es modules ("app" is the id of the HTMLElement the app is going to mount on) -->
  {% svelteClientLegacy 'app' %}
</html>

eleventy-plugin-svelte's People

Contributors

Stargazers

Watchers

eleventy-plugin-svelte's Issues

Include Svelte components' CSS in static output

#8 implements support for <svelte:head> in the SSR rendered output.

It would also be nice to have the CSS also included in the static version, either inlined

{% if content.css %}
    <style>
      {{ content.css | safe }}
    </style>
{% endif %}

...or as separate CSS files per route.

What do you think?

Enable use of <svelte:head> without client bundle

Thanks for building this plugin.

Unless I missed something, it currently seems that anything declared in the page-components' (for example index.11ty.svelte) <svelte:head> block doesn't get included in the rendered html.

I think it would be an important improvement, since Eleventy is all about being a static site generator.

Error rendering markdown

Is there some configuration I need to set to keep rendering markdown files with this plugin installed? I'm trying to add this to a project and I keep getting the following for any markdown files:

`Template render error was thrown