Sveltekit Islands

Overview

The sveltekit-islands plugin is a Vite plugin and Svelte preprocessor designed to seamlessly integrate the Islands architecture into SvelteKit applications. Islands is a rendering pattern that encourages small, focused chunks of interactivity within server-rendered web pages. This plugin allows for the creation of islands, which are small elements of interactivity, within otherwise static HTML pages.

Features

• Seamless Integration: The plugin seamlessly integrates the Islands architecture into SvelteKit applications, allowing for easy creation of islands within static HTML pages.
• Progressive Enhancement: The islands output progressively enhanced HTML, with more specificity around how the enhancement occurs.
• Multiple Entry Points: Instead of a single application being in control of full-page rendering, there are multiple entry points with islands, allowing for independent delivery and hydration of the islands’ interactivity.

Installation

To install the sveltekit-islands plugin, follow these steps:

1. Enable prerender and disable csr globally by adding the following lines to your global layout:

// Global layout
// Enable prerender
prerender: true
// Disable csr
csr: false

2. Add the Vite plugin to your Vite config and the Svelte preprocessor to your Svelte config:

// Vite config
import { islandsVitePlugin } from 'sveltekit-islands'
plugins: [
  islandsVitePlugin()
]

// Svelte config
import { islandsSveltePreprocessor } from 'sveltekit-islands'
preprocess: [
  islandsSveltePreprocessor()
]

Note: Currently, only the static adapter is officially supported and known to be working. If your adapter of choice doesn’t work, you can open an issue.

3. You’re now ready to go! Create islands using the Island component:

// Svelte component
<script>
  import { Island } from 'sveltekit-islands'
</script>

<Island>
  <!-- Island content -->
</Island>

For more information on the props you can pass to the Island component, refer to the plugin’s documentation.

Summary

The sveltekit-islands plugin is a powerful tool for seamlessly integrating the Islands architecture into SvelteKit applications. It enables the creation of islands, small elements of interactivity, within static HTML pages. With features like progressive enhancement and multiple entry points, this plugin is particularly useful for content-heavy websites that require little interactivity sprinkled in, such as landing pages and blogs. It offers a better experience by allowing the use of Svelte components for interactivity instead of plain old vanilla JavaScript. This plugin is heavily inspired by @11ty/is-land and Geoff Rich’s blog post on the topic, taking the idea of islands to a new level of seamless integration.