Client Types — vantris/client

vantris/client is an ambient type declaration for your client code. Reference it once and TypeScript understands everything Vantris injects or handles: import.meta.env, import.meta.hot, and the asset/CSS module imports. No hand-written .d.ts needed.

Referencing it

Either add it to your tsconfig.json types (recommended — applies project-wide):

{
  "compilerOptions": {
    "types": ["vantris/client"]
  }
}

or with a triple-slash directive in a single source file:

/// <reference types="vantris/client" />

What it declares

import.meta.env

Types the environment object, including the built-ins and any VANTRIS_-prefixed key. See Env Variables & Modes.

interface ImportMetaEnv {
  readonly MODE: string;      // active mode
  readonly DEV: boolean;      // true when mode is not "production"
  readonly PROD: boolean;     // true when mode is "production"
  readonly BASE_URL: string;  // configured public base path
  readonly [key: `VANTRIS_${string}`]: string | undefined;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
  readonly hot?: VantrisHotContext;
}

import.meta.env.MODE;          // string
import.meta.env.PROD;          // boolean
import.meta.env.VANTRIS_API;   // string | undefined

import.meta.hot

Types the HMR API as VantrisHotContext | undefined — undefined in production, so guarding with if (import.meta.hot) narrows it correctly.

if (import.meta.hot) {
  import.meta.hot.accept(); // fully typed
}

Asset imports

Declares the file types Vantris resolves, so importing one is typed instead of an error. Assets resolve to their URL (a string); JSON to its data.

// images / fonts / media / wasm / txt → string (URL)
declare module "*.svg" { const src: string; export default src; }
declare module "*.png" { const src: string; export default src; }
// … jpg, jpeg, gif, webp, avif, ico, bmp, woff, woff2, ttf, otf, eot,
//    mp4, webm, mp3, wav, wasm, txt, …

import logo from "./logo.svg";   // logo: string
import doc from "./readme.txt";  // doc: string (URL)

CSS & CSS Modules

Plain CSS imports are declared as side-effecting; *.module.css (and .scss/ .less variants) import a class-name map:

import "./app.css";                 // side effect only
import styles from "./x.module.css"; // styles: Record<string, string>
styles.primary;                      // string

Why you want it

Without vantris/client, TypeScript flags import.meta.env.VANTRIS_API, import.meta.hot, and import logo from "./logo.svg" as errors, because it doesn't know Vantris handles them. Adding the reference makes all of it type-check and autocomplete — it's a one-line setup with a big payoff.

Recommended tsconfig

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["vantris/client"],
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  },
  "include": ["src"]
}

See TypeScript for the full story on how Vantris uses your tsconfig.json.