Obfuscate a Svelte app

Svelte apps compile to JavaScript through Vite, and AfterPack integrates at the bundler level, so @afterpack/svelte is a thin wrapper: afterpackSvelte(options) is afterpackVite(options), named for discoverability in a Svelte project.

Building a full SvelteKit app? Use @afterpack/sveltekit. Building a Svelte component library with Rollup? Use @afterpack/rollup.

Install

$ npm install -D @afterpack/svelte

// 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

afterpackSvelte({ protectionMap: { enabled: true } });

Writes the combined Protection Map to the gitignored .afterpack/protectionMap.html. The source-map side effect and the handling rules are @afterpack/vite's.

Options

Every configuration key can be passed here as the options object, forwarded verbatim to @afterpack/vite. The type alias AfterpackSvelteOptions is AfterpackViteOptions.

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:

// 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: the full matrix.
• Vite: the plugin doing the actual work.
• SvelteKit: the Kit wrapper package.
• Protection Map: reading the report.
• Builds & CI: seeds, dev-vs-prod, promoting the same bytes.