[BETA]: 🚀 Svetch: End-To-End typesafe Fetch client with auto-generated types & API Docs for your svelte (possibly others) applications!

Currently tested with Svelte, could work with other frameworks.

This package is currently available as a paid module on PrivJS

There is currently no easy solution for generating typesafe fetch clients for sveltekit, currently, existing solutions such as trpc etc... require you to write a lot of boilerplate code.

Why learn a completely new framework when you can use your existing API code? Why write a lot of boilerplate code when you can just use your existing API code?

⏬ Installation

Type the following in your terminal:

$ npm login --registry https://r.privjs.com

Enter your privjs username, password.

Then type the following after login is successful

$ npm install svetch --registry https://r.privjs.com

🌟 Advantages

• 😍 ALMOST no code changes required to your existing API code
• 🚀 Almost no learning curve, Augments a regular FETCH client with data and error along with the rest of the fetch client properties, you can use it just like a regular fetch client.
• 🔎 Intellisense for your api paths.
• ✅ Typesafety for api inputs & outputs.
• 📚 Beautiful API Docs with testing.
• 📃 Can use JSDocs to add more info to the endpoint documentation.
• 🤖 Handles multiple possible responses per http code.

Features

Autogenerated Docs

Autogenerated responses for each HTTP Code

API Testing in the docs (Supports Path Parameters)

🤝 Dependencies

The API Docs need 💨 Tailwind and 🌼 DaisyUI for styling (for now) get it here: DaisyUI & Tailwind

1. iconify/svelte: for the icons in the docs
2. comment-parser: for parsing comments in the API code
3. json-schema-to-zod: for converting json schema to zod
4. readline-sync: for prompting the user to select the correct response type
5. ts-morph: for parsing the typescript code
6. tsx: for parsing the typescript code
7. typescript: for parsing the typescript code
8. typescript-json-schema: for converting typescript to json schema
9. yargs: for parsing the cli arguments
10. zod: for validating the payload & response

⚙ Setup

Type npx svetch init

This will generate a file in your root directory called .svetchrc

{
  "framework": "sveltekit", // currently the only option
  "input": "src/routes/api", // the directory you want the generator to traverse
  "out": "src/lib/api", // the directory to output the types & the client to
  "docs": "src/routes/docs", // where to output docs
  "tsconfig": "tsconfig.json", // your tsconfig directory
  "logLevel": 5, // logging level, 
  "filter": null // only show console alerts of this level ('debug', 'warn', 'success', 'warn')
}

🔎 Detection

1. Svetch will traverse your input directory, will scan for any +server.ts with exported GET/POST/PUT/DELETE functions.
2. For each endpoint it will detect...
   1. path parameters: based on the file name, e.g. user/[user_id].ts will have a path parameter of user_id
   2. query parameters: based on any parameters instantiated like url.searchParams.get('param')
   3. body parameters: based on the type of the payload Must be assigned to a const called payload ⚠ IMPORTANT
   4. response types: will pickup any top-level return statement that is instantiated like json(xxx) or new Response(xxx) along with status code

Usage

Type npx svetch to generate the types & client code

In client code

import { Svetch } from 'svetch'

const svetch = new Svetch({
  baseUrl: '/api', // default is '/api'
  fetch, // default is window.fetch, pass the global fetch to it in node, etc...
  validate: true, // default is false, uses Zod to validate payload + response
})

await svetch.post('user/[user_id]', {
      path: {
        user_id: 1,
      },
			body: {
				text: foodInput,
				journalId: $journal.id,
				today: new Date()
			}})
			.then((response) => {
        if (response.error) throw new Error(response.error)
				food = response.data;
				loading = false;
			})
			.catch((error) => {
				throw new Error(error);
			});

In load functions

import { Svetch } from 'svetch'

const svetch = new Svetch({
  baseUrl: '/api', // default is '/api'
  fetch, // pass the load function's fetch to it
  validate: true, // default is false, uses Zod to validate payload + response
})

export async function load({ fetch, session }) {
  const user = await svetch.get('user').then((response) => {
    if (response.error) throw new Error(response.error)
    return response.data
  })
  return {
    props: {
      user
    }
  }
}

To-Dos

• Add support for sveltekit
• make it platform agnostic