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

Integration Setup

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

Core integration configuration for enabling Svelte components in Astro with Vite plugin setup and build optimization.

Capabilities

Svelte Integration

Creates and configures the main Svelte integration for Astro projects.

/**
 * Creates the main Svelte integration for Astro
 * @param options - Optional Svelte plugin configuration from @sveltejs/vite-plugin-svelte
 * @returns Configured AstroIntegration instance
 */
function svelteIntegration(options?: Options): AstroIntegration;

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

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

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

Usage Examples:

// Basic usage
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte()]
});

// With options
import svelte from '@astrojs/svelte';
import { vitePreprocess } from '@astrojs/svelte';

export default defineConfig({
  integrations: [
    svelte({
      preprocess: [vitePreprocess()],
      compilerOptions: {
        dev: process.env.NODE_ENV === 'development',
        hydratable: true
      },
      emitCss: true,
      hot: true
    })
  ]
});

Container Renderer

Provides a container renderer for server-side rendering in isolated contexts.

/**
 * Creates a container renderer for isolated SSR contexts
 * @returns ContainerRenderer configuration
 */
function getContainerRenderer(): ContainerRenderer;

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

Internal Renderer Configuration

Internal function that creates the renderer configuration for Astro.

function getRenderer(): AstroRenderer;

This function is used internally by the integration and sets up:

Client entrypoint: @astrojs/svelte/client.js
Server entrypoint: @astrojs/svelte/server.js
Renderer name: @astrojs/svelte

Vite Configuration

The integration automatically configures Vite with:

Optimization Dependencies: Includes client.js, excludes server.js
Svelte Plugin: Configures @sveltejs/vite-plugin-svelte with provided options
Build Settings: Sets up proper bundling for both client and server

Configuration Options

The integration accepts all options from @sveltejs/vite-plugin-svelte:

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

// Key configuration options from @sveltejs/vite-plugin-svelte
interface ViteSvelteOptions {
  preprocess?: Preprocessor | Preprocessor[];
  compilerOptions?: CompileOptions;
  emitCss?: boolean;
  hot?: boolean;
  inspector?: boolean;
  disableDependencyReinclusion?: string[];
  vitePlugin?: {
    exclude?: string[];
    include?: string[];
  };
}

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