Setup & Configuration

Svelte Effect Runtime (SER) requires a specific multi-layered configuration to enable effectful execution within Svelte 5 components. The setup process involves installing core packages, configuring the Svelte compiler for asynchronous rendering, and integrating a dedicated Vite plugin that manages syntax lowering and remote function wrapping.

Proper configuration ensures that SER syntax, such as <script effect> and top-level yield* in markup, is correctly processed before the standard Svelte compiler parses the source. This prevents false positives from standard tooling and enables the runtime's reactive fiber management.

Sources: skills/svelte-effect-runtime/references/setup.md:1-5, skills/svelte-effect-runtime/SKILL.md:10-25

Development Environment Setup

The project uses a monorepo structure managed by pnpm and requires specific Node.js versions.

Prerequisites

• Package Manager: pnpm@11.10.0 (via Corepack).
• Node.js: ^22.12.0 or >=24.0.0.
• Build Tool: Vite+ (Vite plus binary).

Sources: package.json:54-62, CONTRIBUTING.md:7-13

Installation

To set up the workspace for development or contribution:

corepack enable
corepack pnpm install

Sources: CONTRIBUTING.md:10-11

Project Configuration

Svelte Compiler Options

SER components require experimental.async to be set to true to support yield* operations within the component lifecycle. If using SvelteKit features like Query, Command, or Form, remoteFunctions must also be enabled.

// svelte.config.js
const config = {
  compilerOptions: {
    experimental: {
      async: true,
    },
  },
  kit: {
    experimental: {
      remoteFunctions: true,
    },
  },
};

Sources: skills/svelte-effect-runtime/references/setup.md:9-35

Vite Plugin Integration

The effect() plugin from svelte-effect-runtime must be placed before sveltekit() or svelte() in the Vite configuration. This ordering is critical because SER performs a pre-transform on .svelte files to lower its custom syntax before the standard Svelte compiler encounters it.

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import { effect } from "svelte-effect-runtime";

export default defineConfig({
  plugins: [effect(), sveltekit()],
});

Sources: skills/svelte-effect-runtime/references/setup.md:39-48, modules/svelte-effect-runtime/src/compiler.ts:133-145

The Compiler Plugin Architecture

The effect() function returns an array of plugins that handle different aspects of the SER lifecycle, including diagnostics, syntax transformation, and server-side import rewriting.

Plugin Pipeline Flow

The following diagram illustrates how the SER Vite plugins process a source file during the build or development cycle.

The pipeline ensures that identifiers like Dispatcher or Code are not shadowed (Guard), and that SvelteKit remote functions are wrapped in Effect-aware adapters (Remote Wrapper).

Sources: modules/svelte-effect-runtime/src/compiler.ts:63-75, modules/svelte-effect-runtime/src/compiler.ts:241-260

Compiler Options

Sources: modules/svelte-effect-runtime/src/compiler.ts:6-14

Editor & Tooling Configuration

SER-aware tooling (like the VS Code extension) utilizes specific configurations to locate the language server and manage grammar assets.

Language Server Path Policy

The VS Code extension manages the path to the SER language server using a scoped configuration policy. This determines which paths are safe to execute based on whether they are defined globally or within a workspace.

Grammar Assets

The svelte-effect-runtime-grammars package provides TextMate and Tree-sitter data. Tooling should be configured to reference these assets for proper syntax highlighting of <script effect> blocks.

Sources: modules/svelte-effect-runtime-grammars/README.md:1-12

Summary

Setting up Svelte Effect Runtime requires a coordinated configuration across the package manager, the Svelte compiler, and the Vite build pipeline. By ensuring the effect() plugin is prioritized and the Svelte compiler is set to async: true, developers can leverage effectful execution within Svelte components while maintaining compatibility with SvelteKit's remote function architecture.

Sources: skills/svelte-effect-runtime/references/setup.md:1-48, modules/svelte-effect-runtime/src/compiler.ts:63-75