TypeScript Types

The ronin package on npm provides the programmatic interface for querying RONIN.

After defining your database schema in your repository, the ronin used within that same repository will automatically adapt its types to the schema you defined.

However, if you have multiple repositories that interact with the same RONIN space, you may want to share the types between them. For all repositories that do not contain your database schema in code (there should only be one repository that contains it), RONIN offers an automatically generated types package that can be installed on those other repositories.

CLI

To let the RONIN CLI initialize the types of your repository, first make sure you are logged in:

ronin login

Afterward, you can continue. The RONIN CLI automatically detects your package manager and configures your project’s tsconfig.json for you if you run the following command:

ronin init [space]

And voilà! Now all the queries you run from the ronin TypeScript client will be typed automatically.

Manual Setup

If you’d like to configure the types manually or just want to get an idea how the RONIN CLI does this up under the hood, you can take a look at configuring the types package manually below.

1. Logging In

Before you are able to install RONIN’s type package, you need to log into a package registry that was created by RONIN for this specific purpose:

npm login --scope @ronin-types --registry https://ronin.supply

When using Bun for installing dependencies, make sure to also create .bunfig.toml file in your home directory with the following contents:

[install.scopes]
ronin = { url = "https://ronin.supply", token = "TOKEN" }

Afterward, make sure to replace TOKEN with the auth token available after //ronin.supply/:_authToken= in the .npmrc file in your home directory. This is currently necessary because Bun, unlike npm, does not yet offer a bun login command for automating this.

2. Installing Package

Next, you can add the type package to your dependencies:

npm install -D @ronin-types/YOUR_SPACE_HANDLE

3. Adding TypeScript config

Lastly, you only need to add the type package to your tsconfig.json file:

"compilerOptions": {
    "types": ["@ronin-types/YOUR_SPACE_HANDLE"]
}

That’s it!

Once you’ve completed the steps above, your queries will be auto-completed based on the schemas defined for your space on the dashboard.

Additionally, you may then also import the types and pass them around in your app:

import type { Post, Comments } from '@ronin-types/YOUR_SPACE_HANDLE';

Updating Types

Once you have updated one or more schemas, you can update the types package like so:

npm install -D @ronin-types/YOUR_SPACE_HANDLE@latest

CI / CD

When running automated CI (Continuous Integration) systems such as GitHub Actions, you must provide a .npmrc file, which npm will load automatically.

That’s also the file where npm places your credentials locally (usually, it can be found in your home directory, meaning ~/).

Locally, the file will contain a session token associated with your personal RONIN account, which allows you to install type packages for as many spaces as you want (depending on which spaces your account has access to on the dashboard).

For CI, you can instead create a new App Token in the “Apps” section of your space and give it a name such as “GitHub Actions” (you may also include the name of your repository), after which you can add the following .npmrc file to your CI:

@ronin:registry=https://ronin.supply/
//ronin.supply/:\_authToken=${RONIN_TOKEN}

The RONIN_TOKEN above would be the name of the environment variable that contains the token.

Vercel (Recommended)

If you’re using Vercel, you only need to add the contents shown above to an environment variable named NPM_RC. Vercel will then automatically provide the config to npm for you.

Also, don’t forget to add the RONIN_TOKEN environment variable, which allows the ronin package to access the data within your space.