svelte-effect-runtime

svelte-effect-runtime is a Vite plugin for SvelteKit allowing native Effect code execution.

Installing

Get started by downloading the NPM package.

deno add jsr:svelte-effect-runtime

deno add npm:svelte-effect-runtime

bun add svelte-effect-runtime

pnpm add svelte-effect-runtime

LSP and VSIX extension

You can optionally install the LSP and the VSIX extension to help your text editor understand the extended syntax.

Adding it to your project

In your vite.config.ts file, add the following:

+ import { effect } from "svelte-effect-runtime";

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

It is important that effect() comes first and before sveltekit() as it does heavy transformations to the codebase.

Enabling SvelteKit's remote functions

This step is optional unless you are planning on using Remote Functions.

In your svelte.config.js, also enable kit.experimental.remoteFunctions. Without this, Remote Functions will not work.

  /** @type {import("@sveltejs/kit").Config} */
  const config = {
    kit: {
      adapter: adapter(),
+     experimental: {
+       remoteFunctions: true,
+     },
    },
  };

Client

svelte-effect-runtime allows Effect code execution in clients natively. To work nicely with libaries, Enabling Effect is opt-in per file via the effect tag in a <script> block. See the example below:

<script lang="ts" effect>
    const rng = Effect.succeed(Math.random());
</script>

{yield* rng}

Server

On the server, svelte-effect-runtime gives you wrappers around Query, Form, Command, and Prerender functions.

Effect version 3 and 4

svelte-effect-runtime currently defaults to Effect v3.

If you want to use Effect v4, import from the /v4 entrypoint instead:

import { ... } from "svelte-effect-runtime/v4";

Effect v4 is fully supported while it remains in beta.

Once Effect v4 becomes the default, svelte-effect-runtime will resolve to v4, and the current v3 entrypoint will remain available at:

import { ... } from "svelte-effect-runtime/v3";

You can also use the /v3 suffix today.

Runtime

If you are familiar with Effect, you might be wondering how to fufill various requirements for your application. Luckily, we give you two handy helpers for crafting both a client and server runtime.

Registering a runtime in src/hooks.client.ts or src/hooks.server.ts is optional. A default empty-layer runtime is created lazily when nothing has been registered yet.

Creating the client Runtime

For the client, create your runtime in src/hooks.client.ts:

import { ClientRuntime } from "svelte-effect-runtime";

export const init = () => {
  ClientRuntime.make(
    Layer.provide(...)
  );
}

Creating the server runtime

For the server, create your runtime in src/hooks.server.ts:

import { ServerRuntime } from "svelte-effect-runtime";

export const init = () => {
  ServerRuntime.make(
    Layer.provide(...)
  );
}