Svelte Themes Logo Svelte Themes
Sveltekit Document screenshot

Sveltekit Document

Author Avatar Theme by Barvian
Updated: 22 Jul 2023
56 Stars

The missing document manager for SvelteKit

Github

Categories

Vite

Overview

The missing document manager for SvelteKit is a tiny utility that allows users to change the <html>, <head>, and <body> tags from any page or layout in SvelteKit. It comes with full SSR support, making it a convenient tool for developers working with SvelteKit.

Features

  • Expands <svelte:body> to work with attributes: This feature allows the <svelte:body> tag to work with attributes, not just event listeners. It is accessible in SSR via %ska.body.attributes% in app.html, addressing a long-standing feature request.
  • Adds <ska:html> (ska = SvelteKit Addons): This utility adds the <ska:html> tag, which forwards attributes and event listeners to the <html> element. It is accessible in SSR via %ska.html.attributes% in app.html.
  • Supports SSR placeholders: The utility provides SSR placeholders that can be added to src/app.html manually or by using the provided app.html template.

Installation

To install the missing document manager for SvelteKit, follow these steps:

  1. Grab the package from NPM.
  2. Include the preprocessor in your svelte.config.js file.
  3. Add the handle to your src/hooks.server.js file. Create the file if it doesn’t exist.
  4. If you don’t have any other handles, use the following code snippet:
    import { handles } from "@sveltejs/kit";
import { preprocessor } from "missing-document-manager";

handles.push({
  page: ({ request }) => {
    return { props: {} };
  },
  serverRequest: async ({ request }) => {
    preprocessor.update({ request });
  },
});
  5. If you have a handle export already, add the following code snippet to it:
    export function handle({ request }) {
  preprocessor.update({ request });
}
  6. Add the SSR placeholders to your src/app.html manually or delete your existing app.html and use the provided template.

Summary

The missing document manager for SvelteKit is a useful utility for SvelteKit developers who need to modify the <html>, <head>, and <body> tags. With features like attribute support for <svelte:body>, the addition of <ska:html>, and SSR placeholders, this utility simplifies the management of document structure in SvelteKit projects. Its easy installation process makes it accessible to developers looking to enhance their SvelteKit applications.