Socket
Socket
Sign inDemoInstall

eleventy-plugin-svelte

Package Overview
Dependencies
4
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

eleventy-plugin-svelte

Use Svelte components in Eleventy.


Version published
Weekly downloads
295
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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>

Keywords

FAQs

Last updated on 17 Dec 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc