Skip to content

gobeli/eleventy-plugin-svelte

Repository files navigation

npm npm

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>