Vite Plugin

The Vite plugin handles everything needed to run PraxisJS: decorator support, the JSX transform to @praxisjs/jsx, and optional component-level HMR. It's required for all PraxisJS projects.

npm install -D @praxisjs/vite-plugin

pnpm add -D @praxisjs/vite-plugin

yarn add -D @praxisjs/vite-plugin

bun add -d @praxisjs/vite-plugin

Setup

// vite.config.ts
import { defineConfig } from 'vite'
import { praxisjs } from '@praxisjs/vite-plugin'

export default defineConfig({
  plugins: [praxisjs()],
})

Options

praxisjs({
  hmr: true,         // component-level hot reload (default: false)
  autoImport: true,  // auto-import common decorators (default: false)
})

What the plugin does

• Decorator support — sets esbuild target to ES2022 to enable native TypeScript decorators without Babel transforms
• JSX transform — configures Vite to use @praxisjs/jsx as the JSX import source (equivalent to jsxImportSource in tsconfig)
• HMR — when enabled, patches component classes on save so the instance re-mounts with new logic while preserving existing state where possible

TypeScript configuration

The plugin handles the Vite/esbuild side, but TypeScript still needs its own configuration:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "jsxImportSource": "@praxisjs/jsx",
    "useDefineForClassFields": false,
    "strict": true,
    "noEmit": true
  }
}