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

Server Rendering

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

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

Capabilities

Server Renderer

The main server renderer that handles component validation and HTML generation.

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;
}

interface RendererContext {
  result: SSRResult;
}

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

The renderer provides:

Component validation via check function
Static markup generation via renderToStaticMarkup
Support for Astro's static slot optimization

Component Validation

Validates whether a component is a valid Svelte 5 component.

/**
 * Checks if a component is a valid Svelte 5 component
 * @param Component - Component to validate
 * @returns Boolean indicating if it's a valid Svelte component
 */
function check(Component: any): boolean;

The validation checks for the presence of $$payload in the component's string representation, which is a Svelte 5 signature.

Static Markup Rendering

Renders Svelte components to static HTML markup on the server.

/**
 * Renders Svelte component to static HTML markup
 * @param Component - Svelte component to render
 * @param props - Component properties
 * @param slotted - Slotted content from Astro
 * @param metadata - Optional component metadata
 * @returns Promise resolving to object with html string
 */
async function renderToStaticMarkup(
  this: RendererContext,
  Component: any,
  props: Record<string, any>,
  slotted: Record<string, any>,
  metadata?: AstroComponentMetadata
): Promise<{ html: string }>;

Slot Handling:

The renderer supports both legacy Svelte slots and new @render syntax:

// Legacy slot support ($$slots)
$$slots = {
  default: true,
  header: createRawSnippet(() => ({
    render: () => `<astro-slot name="header">${content}</astro-slot>`
  }))
};

// New @render syntax support
renderProps = {
  children: createRawSnippet(() => ({
    render: () => `<astro-slot>${content}</astro-slot>`
  })),
  header: createRawSnippet(() => ({
    render: () => `<astro-slot name="header">${content}</astro-slot>`
  }))
};

Hydration Detection

Determines whether a component needs client-side hydration.

/**
 * Determines if component needs client-side hydration
 * @param metadata - Optional component metadata
 * @returns Boolean indicating if hydration is needed
 */
function needsHydration(metadata?: AstroComponentMetadata): boolean;

Logic:

If metadata.astroStaticSlot exists, uses !!metadata.hydrate
Otherwise defaults to true for backward compatibility

Context Management

Manages unique ID generation for component instances during server-side rendering.

/**
 * Generates unique ID for component instance during SSR
 * @param rendererContextResult - SSR result context
 * @returns Unique ID string with 's' prefix
 */
function incrementId(rendererContextResult: SSRResult): string;

Context Storage:

interface ContextData {
  currentIndex: number;
  readonly id: string;
}

const contexts: WeakMap<SSRResult, ContextData>;

Context data is stored in a WeakMap keyed by SSRResult, ensuring proper cleanup and isolation between renders. The ID is generated with a prefix 's' followed by the current index (e.g., 's0', 's1', 's2').

Usage Examples

Basic Component Rendering:

// Component will be validated and rendered
const result = await renderToStaticMarkup.call(
  { result: ssrResult },
  SvelteComponent,
  { title: "Hello World", count: 42 },
  { default: "<p>Default slot content</p>" }
);
// result.html contains the rendered HTML

With Named Slots:

const result = await renderToStaticMarkup.call(
  { result: ssrResult },
  SvelteComponent,
  { title: "Page Title" },
  {
    default: "<p>Main content</p>",
    header: "<h1>Header content</h1>",
    footer: "<footer>Footer content</footer>"
  }
);

Static Slot Optimization:

const result = await renderToStaticMarkup.call(
  { result: ssrResult },
  SvelteComponent,
  props,
  slotted,
  { astroStaticSlot: true } // Uses astro-static-slot tags
);