chore(example): Add SvelteKit app (#738)

I've gotten this working, finally. This time I looked into the `withRules` and used that in this implementations.

I still need to finish the "how it's done" part of the README, but I'd love a review and feedback on the code and install guide, make sure I'm not missing anything.

.github/dependabot.yml

@@ -392,3 +392,20 @@ updates:
       dependencies:
         patterns:
           - "*"
+
+  - package-ecosystem: npm
+    directory: /examples/sveltekit
+    schedule:
+      # Our dependencies should be checked daily
+      interval: daily
+    assignees:
+      - blaine-arcjet
+    reviewers:
+      - blaine-arcjet
+    commit-message:
+      prefix: deps(example)
+      prefix-development: deps(example)
+    groups:
+      dependencies:
+        patterns:
+          - "*"

.github/workflows/reusable-examples.yml

@@ -458,3 +458,43 @@ jobs:
       - name: Build
         working-directory: examples/nodejs-hono-rl
         run: npm run build
+
+  sveltekit:
+    name: SvelteKit
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      # Environment security
+      - name: Harden Runner
+        uses: step-security/harden-runner@63c24ba6bd7ba022e95695ff85de572c04a18142 # v2.7.0
+        with:
+          disable-sudo: true
+          egress-policy: block
+          allowed-endpoints: >
+            github.com:443
+            registry.npmjs.org:443
+
+      # Checkout
+      # Most toolchains require checkout first
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # Language toolchains
+      - name: Install Node
+        uses: actions/[email protected]
+        with:
+          node-version: 20
+
+      # Workflow
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install example dependencies
+        working-directory: examples/sveltekit
+        run: npm ci
+
+      - name: Build
+        working-directory: examples/sveltekit
+        run: npm run build

.trunk/trunk.yaml

@@ -68,3 +68,4 @@ merge:
     - Build examples / Next.js 14 + OpenAI
     - Build examples / Next.js 14 + Page Router + withArcjet
     - Build examples / Node.js + Hono + Rate Limit
+    - Build examples / SvelteKit

examples/sveltekit/.env.example

@@ -0,0 +1 @@
+ARCJET_KEY=

examples/sveltekit/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/sveltekit/.eslintrc.cjs

@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.Config } */
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

examples/sveltekit/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/sveltekit/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/sveltekit/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/sveltekit/.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

examples/sveltekit/README.md

@@ -0,0 +1,53 @@
+<a href="https://arcjet.com" target="_arcjet-home">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://arcjet.com/arcjet-logo-minimal-dark-mark-all.svg">
+    <img src="https://arcjet.com/arcjet-logo-minimal-light-mark-all.svg" alt="Arcjet Logo" height="128" width="auto">
+  </picture>
+</a>
+
+# Arcjet Protection with Svelte
+
+This example shows how to use Arcjet to protect [SvelteKit](https://kit.svelte.dev/) apps.
+
+## How to use
+
+1. From the root of the project, install the SDK dependencies.
+
+   ```bash
+   npm ci
+   ```
+
+2. Enter this directory and install the example's dependencies.
+
+   ```bash
+   cd examples/svelte
+   npm ci
+   ```
+
+3. Rename `.env.example` to `.env` and add your Arcjet key.
+
+4. Start the server.
+
+   ```bash
+   npm run dev
+   ```
+
+5. Visit `http://localhost:5173/` in a browser and follow the links to test the various examples.
+
+7. Test shield by making this request:
+
+    ```bash
+    curl -v -H "x-arcjet-suspicious: true" http://localhost:5173
+    ```
+
+## How it works
+
+This example uses the generic [`arcjet`](https://www.npmjs.com/package/arcjet) package.
+
+The `arcjet` instance is created in `/src/lib/server/arcjet.ts` and is configured to enable [Shield](https://docs.arcjet.com/shield) by default. This server-only module also provides a `transformEvent()` method that takes a Svelte event and transforms it into the format required by the `arcjet` package.
+
+`/src/hooks.server.ts` imports the `arcjet` instance and runs the `protect()` method on all requests. The only exception is any requests who's pathanme is listed in `filteredRoutes`, in which case protection is left to that route's server code.
+
+The rate-limited page has a server-side script file at `/src/routes/rate-limited/+page.server.ts`, which retrieves the `arcjet` instance, and then applies extra rate-limiting rules before calling the `protect()` method.
+
+Finally, the rate-limited API end-point performs the same augmentation of the rules as the rate-limted web page, as can be seen in `/src/routes/api/rate-limited/+server.ts`.