Skip to content

TypeScript

Configure path aliases, strict mode, and the React version for @diffgazer/ui.

@diffgazer/ui components are written in TypeScript and require path alias configuration.

Path aliases

Components import through the source alias recorded by dgadd init. Configure a root source alias such as @/* or ~/* in tsconfig.json:

json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

And mirror it in vite.config.ts:

ts
import { resolve } from "node:path"
import { defineConfig } from "vite"

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
})

dgadd init writes the aliases it will use into diffgazer.json, but it does not mutate tsconfig.json, jsconfig.json, Vite, Next.js, or other bundler config. Add the app-level source alias yourself before building copied components.

For Next App Router, configure the same source alias path in tsconfig.json or jsconfig.json. Keep global CSS imports in app/layout.tsx through your app CSS entrypoint; copied component files must not import global CSS directly.

Strict mode

Components are written with strict: true. We recommend enabling it:

json
{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "bundler",
    "target": "es2022"
  }
}

React

@diffgazer/ui targets React >=19.2.0. Ensure your project uses a compatible version:

json
{
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  }
}

Components follow React >=19.2.0 hook semantics and use memoization hooks only where stable callback identity is part of the component contract.

Where to go next