Giter VIP home page Giter VIP logo

xtrpc's Introduction

๐•tRPC

npm (scoped)

A CLI tool that helps you cleanly e๐•port your tRPC router to

  • ๐Ÿ”ฅ๐Ÿš€ massively boost your language server performance
  • ๐Ÿ’ป๐Ÿ˜Š give your users a typed SDK so they can consume your API without hassle
  • ๐Ÿซ—โŒ ensure you don't leak any implementation details via ctx
  • โœ‚๏ธ๐ŸŒณ prune your router to expose only the routes you (or your users) care about

๐•tRPC leverages the awesome ts-morph API to load, transform & emit the Typescript AST containing your tRPC definitions. Basically, it

  1. (in-memory) redefines your Context type as any
  2. (in-memory) "unimplements" your middlewares by transforming them into ({ ctx, next }) => next({ ctx })
  3. (in-memory) prunes your router based on your needs
  4. emits a minimal .d.ts file that declares your API

With the help of a type assertion, your app stays fully typesafe while you enjoy the performance benefits in your editor!

Demo

Performance

Compare how long it takes to write the same tRPC query with the help of Intellisense before and after compiling your API with ๐•tRPC:

Before (45s) After (10s)

Typed SDK

See algora-io/sdk as an example of how we published our own API

Table of Contents

Quickstart

Setup

Install the package

Navigate to the project containing your tRPC router and run

pnpm add -D @algora/xtrpc

Generate your API

pnpm xtrpc

Include your types in tsconfig.json

{
  "include": ["index.ts", "src", "types"]
}

Export your API & inference helpers

export { type API } from "./types/api";
export type RouterInputs = inferRouterInputs<API>;
export type RouterOutputs = inferRouterOutputs<API>;

(Recommended) Add a type assertion to maintain type safety

type Expect<T extends true> = T;
type _Assertion = Expect<AppRouter extends API ? true : false>;

Use API instead of AppRouter in your tRPC client

export const trpc = createTRPCNext<API>({...})

Usage

Once you've set up your client to use the API, just rerun the tool to regenerate it whenever your type assertion fails

pnpm xtrpc

Configuration

Add a xtrpc.config.json file in your project to configure ๐•tRPC. Below is the default configuration.

{
  // path to the project that contains your tRPC definitions
  "srcProject": ".",

  // path to the project that your API will be exported to
  "dstProject": ".",
  
  // name of the directory your API will be exported to
  "outDir": "types",
  
  // name of the file your API will be exported to
  "outName": "api.d.ts",
  
  // whether your API should be overwritten if it already exists
  "overwrite": false,
  
  // an optional Record<string, string[]> if you'd like to prune your router before exporting
  // keys are subrouters (i.e. the exported name of your subrouter)
  // values are procedures (i.e. the keys of your subrouter)
  "include": {}

  "parserOptions": {
    // type alias of your app router
    "appRouterAlias": "AppRouter"
  }
}

Caveats

  • ๐•tRPC may not work properly if your procedure outputs are not explicitly declared. For best results, add .output to all of your procedures (which is a good practice to not leak sensitive info anyways) and enable explicitOutputs in your xtrpc.config.json
  • "Go to definition" jumps to the emitted .d.ts file instead of your source code. This can potentially be fixed by emitting declaration map(s) alongside your API.

xtrpc's People

Contributors

zcesur avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.