More Premium Hugo Themes Premium Svelte Themes

Sveltekit Document

The missing document manager for SvelteKit

Sveltekit Document

The missing document manager for SvelteKit

Author Avatar Theme by barvian
Github Stars Github Stars: 56
Last Commit Last Commit: Jul 22, 2023 -
First Commit Created: Dec 18, 2023 -
Sveltekit Document screenshot

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.