Servell

A minimal RPC library inspired by React Server Actions

version	:	v0.0.25
description	:	I created it out of frustration just so that I don't have to deal with the boilerplate of writing routes handlers and fetch requests! It uses decorators and similar classes on both frontend and backend to work its magic!

-- NOTES --

• Only public async methods of the class are modified.
• NextJS as of v14.2.3 does not support stage 3 ecmascript decorators by default, so you'll have to do some node_modules gymnastics to get it working (See this issue from nextjs repo)

Why not Server Actions?

• Server actions are limited to POST requests
• Request/Response cannot be customized
• Not ideal for fetching data
• May not be used like regular functions in a Server Component

Usage

The package is available in npm

1npm i servell

-- NOTE -- I'm using this library in the context of NextJS, however it is designed to work without it, so feel free to experiment.

Following is the client code for fetching some todos!

1// todo-list.tsx
2"use client"
3import { useState, useEffect } from "react"
4import { client, type Result } from "servell"
5
6export default function TodoList() {
7    const [todos, setTodos] =  useState<Todo[]>([])
8    // You can use react query as well
9    // sticking to stinky useEffect for simplicity
10    useEffect(async () => {
11        await getTodos(setTodos)
12    }, [])
13    return (
14        <ul>
15            {todos.map(todo =>
16                <li>
17                    <input
18                        type="checkbox"
19                        checked={todo.completed}
20                    />
21                    <b>{todo.title}</b>
22                    <p>{todo.desc}</p>
23                </li>
24            )}
25        </ul>
26    )
27}
28
29@client
30class TodoActions {
31    async getTodos(setTodos:  any, result?: Result) {
32        if(result!.status == "ok")
33            return setTodos(result!.data as Todo[])
34        console.log("Error: ", result!.data)
35    }
36}
37
38type Todo = {
39    title: string,
40    desc: string,
41    completed: boolean
42}

Now to fetch the data from the database at the server side.
Calling an method on a class marked with @server doesn't make a fetch call unlike a server action in React.

1// page.tsx
2"use server"
3import prisma from "@/lib/db"
4import { server } from "servell"
5import TodoList from "./_components/todo-list"
6
7export default async function TodoPage() {
8    return (
9        <div>
10            <TodoList />
11        </div>
12    )
13    // we could have also fetched the data here in the
14    // server component and passed it down to the `TodoList`
15    /*
16        const res: Result = await new TodoActions().getTodos()
17        const todos = res.status == "ok" ? res.data : []
18        return <div><TodoList todos={todos}/></div>
19    */
20}
21
22@server
23class TodoActions {
24    async getTodos() {
25        const todos = await prisma.todos.findMany({
26            select: {
27                title: true,
28                desc: true,
29                completed: true,
30            }
31        })
32        return todos
33    }
34}

The final thing to do is to set up the rpc endpoints.
By default both @server and @client decorators use /api/rpc as the endpoint.
You can change it by specifying it as an argument to these decorators: @server({ endpoint: "/your-endpoint" })

1// /api/rpc/route.ts or /your-endpoint/route.ts
2import {
3    deleteHandler,
4    getHandler,
5    patchHandler,
6    postHandler,
7    putHandler
8} from "servell"
9
10export const GET = getHandler
11export const POST = postHandler
12export const PUT = putHandler
13export const PATCH = patchHandler
14export const DELETE = deleteHandler

You can customize the method, content, headers, body and cache properties of a Request/Response with the @params decorator.

1import { client, params } from "servell"
2
3@client
4class TodoActions {
5    @params({ method: "PATCH" })
6    async updateTodos(todo: Todo, result?: Result) {
7        if(result!.status == "ok")
8            return console.log("Update succeeded")
9        console.log("Update failed!")
10    }
11}

-- PENDING -- Need to get the body param of non GET requests to point to a function parameter.

Let me know if you enjoy it!

---

peace✌