# Obfuscate a Svelte app

@afterpack/svelte wraps @afterpack/vite for Svelte projects: one plugin line in vite.config.ts.

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

Svelte apps compile to JavaScript through [Vite](https://www.afterpack.dev/docs/frameworks/vite), and AfterPack integrates at the **[bundler](https://www.afterpack.dev/docs/frameworks)** level, so `@afterpack/svelte` is a thin wrapper: `afterpackSvelte(options)` *is* [`afterpackVite(options)`](https://www.afterpack.dev/docs/frameworks/vite), named for discoverability in a Svelte project.

Building a full SvelteKit app? Use [`@afterpack/sveltekit`](https://www.afterpack.dev/docs/frameworks/sveltekit). Building a Svelte component library with Rollup? Use [`@afterpack/rollup`](https://www.afterpack.dev/docs/frameworks/rollup).

## Install

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

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { afterpackSvelte } from "@afterpack/svelte";

export default defineConfig({
  plugins: [svelte(), afterpackSvelte()],
});
```

Place it **after** `svelte()`. The named export is `afterpackSvelte`; 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.

## Verify

```ts
afterpackSvelte({ 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 `AfterpackSvelteOptions` is `AfterpackViteOptions`.

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

## Directives

A `/* @afterpack … */` marker inside a `.svelte` file is not captured. Put directives in a plain `.ts`/`.js` module that the component imports instead:

```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.
- [SvelteKit](https://www.afterpack.dev/docs/frameworks/sveltekit): the Kit wrapper package.
- [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.