# Obfuscate a SvelteKit app

@afterpack/sveltekit: one plugin line after sveltekit() in vite.config.ts.

Source: https://www.afterpack.dev/docs/frameworks/sveltekit

SvelteKit builds with [Vite](https://www.afterpack.dev/docs/frameworks/vite), and AfterPack integrates at the **[bundler](https://www.afterpack.dev/docs/frameworks)** level, so `@afterpack/sveltekit` is a thin wrapper: `afterpackSveltekit(options)` *is* [`afterpackVite(options)`](https://www.afterpack.dev/docs/frameworks/vite), named for discoverability in a Kit project.

## Install

```bash
npm install -D @afterpack/sveltekit
```

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { afterpackSveltekit } from "@afterpack/sveltekit";

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

Place it **after** `sveltekit()`. The named export is `afterpackSveltekit`; the package also re-exports `afterpackVite` and the `AfterpackViteOptions` type.

## Build

`vite build` now emits obfuscated output. `vite dev` is untouched, because the plugin only runs on the build's `generateBundle`, before Vite writes the bundle.

Whatever your adapter emits as JavaScript is obfuscated. Kit runs Vite once for the client and once for the server, and the plugin obfuscates each bundle as it is produced, so `adapter-static`'s prerendered client bundle and a Node or serverless server bundle are both covered. With `adapter-static` and `adapter-node` the adapter writes to `build/`; other adapters write elsewhere.

Pin a [`seed`](https://www.afterpack.dev/docs/config#seed) when the client and server output ship as one release and you want both legs built from the same seed. `seed: "git"` is the simplest way to guarantee it. [Builds & CI](https://www.afterpack.dev/docs/builds) covers when pinning is worth it and when a fresh seed per build is the stronger choice.

## Verify

```ts
afterpackSveltekit({ protectionMap: { enabled: true } });
```

Writes the combined [Protection Map](https://www.afterpack.dev/docs/protection-map) to the gitignored `.afterpack/protectionMap.html`. The source-map side effect and the handling rules are [`@afterpack/vite`](https://www.afterpack.dev/docs/frameworks/vite#verify)'s.

*(live Protection Map demo embed — see https://www.afterpack.dev/protection-map-demo.html)*

## Options

Every [configuration key](https://www.afterpack.dev/docs/config) can be passed here as the options object, forwarded verbatim to [`@afterpack/vite`](https://www.afterpack.dev/docs/frameworks/vite#options). The type alias `AfterpackSveltekitOptions` is `AfterpackViteOptions`.

```ts
afterpackSveltekit({ seed: "git", preset: "medium" });
```

## Directives

A `/* @afterpack … */` marker inside a `.svelte` file is not captured. Put the directive in a plain `.ts`/`.js` module the route imports instead. `src/lib/` is the natural home:

```ts
// src/lib/license.ts
/* @afterpack preset=hard */
export function verify(token: string) {
  // ...
}
/* @afterpack end */
```

Every emitted chunk is obfuscated either way; only the directive needs the plain module.

## Next

- [Frameworks](https://www.afterpack.dev/docs/frameworks): the full matrix.
- [Vite](https://www.afterpack.dev/docs/frameworks/vite): the plugin doing the actual work.
- [Svelte](https://www.afterpack.dev/docs/frameworks/svelte): plain (non-Kit) Svelte apps.
- [Protection Map](https://www.afterpack.dev/docs/protection-map): reading the report.
- [Builds & CI](https://www.afterpack.dev/docs/builds): seeds, dev-vs-prod, promoting the same bytes.