tessl/npm-astrojs--svelte

Use Svelte components within Astro with server-side rendering and client-side hydration

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@astrojs/svelte

Name: tessl/npm-astrojs--svelte
Author: tessl

@astrojs/svelte is an Astro integration that enables server-side rendering and client-side hydration for Svelte components. It supports Svelte 3, 4, and 5 with automatic component detection, slot handling (both legacy $$slots and new @render syntax), and TypeScript editor support.

Package Information

Package Name: @astrojs/svelte
Package Type: npm
Language: TypeScript
Installation: npm install @astrojs/svelte svelte

Core Imports

import svelteIntegration, { getContainerRenderer, vitePreprocess } from "@astrojs/svelte";

For editor utilities:

import { toTSX } from "@astrojs/svelte/editor";

Basic Usage

// astro.config.mjs
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [
    svelte({
      // Optional Svelte plugin options
      preprocess: [],
      compilerOptions: {},
    })
  ]
});

Architecture

@astrojs/svelte consists of several key components:

Integration Core: Main integration function that configures Astro to process Svelte components
Server Renderer: Server-side rendering engine that converts Svelte components to HTML
Client Hydrator: Client-side hydration system for interactive components
Context Management: Unique ID generation for component instances during SSR
Editor Support: TypeScript transformation utilities for IDE integration
Slot System: Support for both legacy Svelte slots and new @render syntax

Capabilities

Integration Configuration

Core integration function that configures Astro to use Svelte components with Vite plugin setup and optimization configuration.

function svelteIntegration(options?: Options): AstroIntegration;

interface AstroIntegration {
  name: string;
  hooks: {
    'astro:config:setup': (params: ConfigSetupParams) => Promise<void>;
  };
}

Integration Setup

Server-Side Rendering

Server-side rendering engine that converts Svelte components to static HTML with support for slots, props, and metadata.

interface NamedSSRLoadedRendererValue {
  name: string;
  check: (Component: any) => boolean;
  renderToStaticMarkup: (
    this: RendererContext,
    Component: any,
    props: Record<string, any>,
    slotted: Record<string, any>,
    metadata?: AstroComponentMetadata
  ) => Promise<{ html: string }>;
  supportsAstroStaticSlot: boolean;
}

Server Rendering

Client-Side Hydration

Client-side hydration system for making server-rendered components interactive with state management and event handling.

declare const clientRenderer: (element: HTMLElement) => (
  Component: any,
  props: Record<string, any>,
  slotted: Record<string, any>,
  options: Record<string, string>
) => Promise<void>;

export default clientRenderer;

Client Hydration

Container Rendering

Container renderer for server-side rendering in isolated contexts like Astro's experimental container API.

function getContainerRenderer(): ContainerRenderer;

interface ContainerRenderer {
  name: string;
  serverEntrypoint: string;
}

Editor Support

TypeScript transformation utilities for converting Svelte code to TypeScript JSX for editor tooling and language services.

function toTSX(code: string, className: string): string;

Preprocessor

Re-exported Vite preprocessor for Svelte files, providing build-time transformations.

const vitePreprocess: Preprocessor;

type Preprocessor = import('@sveltejs/vite-plugin-svelte').Preprocessor;

Core Types

interface RendererContext {
  result: SSRResult;
}

interface AstroComponentMetadata {
  hydrate?: string;
  astroStaticSlot?: boolean;
}

interface ConfigSetupParams {
  updateConfig: (config: AstroUserConfig) => void;
  addRenderer: (renderer: AstroRenderer) => void;
}

interface AstroRenderer {
  name: string;
  clientEntrypoint: string;
  serverEntrypoint: string;
}

type Options = import('@sveltejs/vite-plugin-svelte').Options;
type AstroUserConfig = import('astro').AstroUserConfig;
type SSRResult = import('astro').SSRResult;
type Preprocessor = import('@sveltejs/vite-plugin-svelte').Preprocessor;