https://github.com/gobeli/eleventy-plugin-svelte

Eleventy plugin to support svelte templates
https://github.com/gobeli/eleventy-plugin-svelte

11ty eleventy eleventy-plugin svelte

Last synced: 3 days ago
JSON representation

Eleventy plugin to support svelte templates

• Host: GitHub
• URL: https://github.com/gobeli/eleventy-plugin-svelte
• Owner: gobeli
• Created: 2020-06-16T15:26:54.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-27T01:32:29.000Z (over 1 year ago)
• Last Synced: 2024-09-25T20:27:22.618Z (8 days ago)
• Topics: 11ty, eleventy, eleventy-plugin, svelte
• Language: JavaScript
• Homepage:
• Size: 813 KB
• Stars: 44
• Watchers: 4
• Forks: 3
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/dw/eleventy-plugin-svelte)](https://www.npmjs.com/package/eleventy-plugin-svelte)

[![npm](https://img.shields.io/npm/v/eleventy-plugin-svelte)](https://www.npmjs.com/package/eleventy-plugin-svelte)

# Eleventy Plugin to enable svelte

Heavily inspired by [eleventy-plugin-vue](https://github.com/11ty/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](example))

### Not yet available

- Svelte components as layouts

## Usage

```js

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

module.exports = function (eleventyConfig) {

  // Use Defaults

  eleventyConfig.addPlugin(eleventySvelte)

}

```

### Customize with options

```js

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

```js

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

```html

  

    ...

    

    {{ content.head | safe }}

    

    

    

      {{ content.css | safe }}

    

  

  

    ....

    

    {{ content | safe }}  

  

  

    // Provides the data used on the client side (dataFn is a function defining the used data)

    {{ dataFn | svelteData | safe }}

  

  

  {% svelteClient 'app' %}

  

  

  

  {% svelteClientLegacy 'app' %}

```