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:
- Grab the package from NPM.
- Include the preprocessor in your svelte.config.js file.
- Add the handle to your src/hooks.server.js file. Create the file if it doesn’t exist.
- 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 }); }, }); - If you have a handle export already, add the following code snippet to it:
export function handle({ request }) { preprocessor.update({ request }); } - 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.