https://github.com/shalomscott/eleventy-plugin-embed-svelte

An Eleventy plugin that makes embedding Svelte components in your static pages painfully easy.
https://github.com/shalomscott/eleventy-plugin-embed-svelte

eleventy eleventy-plugin plugin svelte

Last synced: 3 months ago
JSON representation

An Eleventy plugin that makes embedding Svelte components in your static pages painfully easy.

• Host: GitHub
• URL: https://github.com/shalomscott/eleventy-plugin-embed-svelte
• Owner: shalomscott
• License: mit
• Created: 2020-06-22T16:08:36.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T14:11:45.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T17:20:07.743Z (3 months ago)
• Topics: eleventy, eleventy-plugin, plugin, svelte
• Language: TypeScript
• Homepage: https://shalomscott.github.io/eleventy-plugin-embed-svelte/
• Size: 483 KB
• Stars: 40
• Watchers: 3
• Forks: 4
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Eleventy Plugin Embed Svelte

> 🎉 Embed Svelte Components in Your 11ty Site! 🎉

## Example Usage

See the `example` directory for a complete example usage of this plugin.

**Check out the example live [here](https://shalomscott.github.io/eleventy-plugin-embed-svelte/) 👈**

## Installation

[Install the plugin](https://www.11ty.dev/docs/plugins/#adding-a-plugin) through npm:

```sh

npm install eleventy-plugin-embed-svelte

```

Then add it to your [Eleventy config](https://www.11ty.dev/docs/config/) file, like this:

```javascript

const embedSvelte = require('eleventy-plugin-embed-svelte');

module.exports = function (eleventyConfig) {

    eleventyConfig.addPlugin(embedSvelte, {

        // Directory that hosts your *.svelte component files (Optional)

        svelteDir: './svelte',

        // Pass options to rollup-plugin-svelte. (Optional)

        rollupPluginSvelteOptions: { preprocess: sveltePreprocess() },

        // Array of Rollup input plugins. (Optional)

        rollupInputPlugins: [],

        // Array of Rollup output plugins. (Optional)

        rollupOutputPlugins: [terser()]

    });

    // Rest of config file...

};

```

## Usage

To embed Svelte components, all you need to do is use the shortcode `embedSvelte`.

### Example

#### `Greeter.svelte`

```svelte

    export let user;

Hello there {user}!

```


#### `index.md`

```nunjucks

Here is our Greeter Svelte component, embedded right into this doc!

{% embedSvelte 'Greeter.svelte', { user: 'Zach Harris' } %}

```

**_It's as simple as that!_**

## Features

- A simple shortcode: `{% embedSvelte ... %}`, that allows you to easily embed any Svelte component and pass in `props`.

- An [Eleventy Transform](https://www.11ty.dev/docs/config/#transforms) that works behind the scenes to perform a Rollup build for each page with embedded Svelte components, and efficiently add the code to the output HTML.

- Adds the `svelteDir` (see plugin's options above) to Eleventy's list of [watch targets](https://www.11ty.dev/docs/config/#add-your-own-watch-targets).