What is @apie and @apie/kit?

An eco-system for infrastructure around REST API. @apie/kit is made for   SvelteKit  as a typed bridge between the frontend and your backend REST API.

• Endpoints that validate JSON and URLSearchParams (query) via Zod
• Easy to read Responses
• Accessible frontend API with generated types

Get started

[!NOTE]
Documentation incomplete.

bun add -D @apie/kit @apie/responses @apie/pipe

Add the plugin that generates your API type

vite.config.ts

import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import { watchAPI } from '@apie/kit'

export default defineConfig({
	plugins: [sveltekit(), watchAPI()]
})

Add a shortcut to the api

svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		alias: {
			api: './src/api.ts',

Define your endpoint

src/routes/api/users

import z from 'zod'
import { OK, BadRequest } from '@apie/responses'
import { endpoint } from '@apie/kit'

import getUsers from '...'

const query = z.object({
	limit: z.number()
})

export const GET = endpoint({ /* body, */ query }, pipe => pipe(
	async e => {
		const users = await getUsers({ limit: e.query.limit })
		if(!users) {
			return BadRequest({
				error: 'Too many users!... :D'
			})
		}
		
		return OK({ users })
	}
))

Use your API in your svelte file!

src/routes/+page.svelte

<script>
	import api from '$api'

	const result = api.users.GET({ query: { limit: 5 } })
		.any(res => console.log(res))
		.$ // return the output of the following functions in order:
		.OK(res => res.json()) // result = [this, ...]
		.BadRequest(async res => (await res.json()).error) // result = [..., this]

</script>

{#await result}
	loading users...
{:then [userList, error]}
	...
{/await}

@apie/pipe

Make your life easier, and learn how to utilize @apie/pipe. This enables code-splitting patterns, inspired by the functional programming paradigm.

This is optional, but a powerful one at that.