SvelteKit

Quick guide to integrate Vla with SvelteKit.

View Example App

Install

npm install vla

Create Kernel

Create src/data/kernel.ts:

import { Kernel } from 'vla'

export const kernel = new Kernel()

Set Up Hook

Create or update src/hooks.server.ts:

import { Vla } from 'vla'
import type { Handle } from '@sveltejs/kit'
import { kernel } from './data/kernel'

export const handle: Handle = async ({ event, resolve }) => {
  return Vla.withKernel(kernel.scoped(), () => resolve(event))
}

This creates a scoped kernel for each request.

Use in Load Functions

src/data/users.actions.ts

import { Vla } from 'vla'

class GetUser extends Vla.Action {
  async handle(id: string) {
    // Your logic here
    return { id, name: 'User' }
  }
}

// src/routes/users/[id]/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ params }) => {
  const user = await GetUser.invoke(params.id)

  return { user }
}

Access Request Context (Optional)

To access the SvelteKit event (cookies, headers, etc.), create a context:

src/data/context.ts

import { Vla } from 'vla'
import type { RequestEvent } from '@sveltejs/kit'

export const AppContext = Vla.createContext<{
  event: RequestEvent
}>()

Update your hook:

src/hooks.server.ts

import { Vla } from 'vla'
import type { Handle } from '@sveltejs/kit'
import { kernel } from './data/kernel'
import { AppContext } from './data/context'

export const handle: Handle = async ({ event, resolve }) => {
  return Vla.withKernel(
    kernel.scoped().context(AppContext, { event }),
    () => resolve(event)
  )
}

Use in your classes:

class GetCurrentUser extends Vla.Action {
  ctx = this.inject(AppContext)

  async handle() {
    const sessionId = this.ctx.event.cookies.get('session_id')
    // Use session data
  }
}

That’s It

You’re ready to use Vla in your SvelteKit app. Check out the guides to learn how to structure your code with Actions, Services, and Repos.