Devtools

Vite Configuration

How to configure the mion Vite plugin for server and client packages.

The mionPlugin from @mionkit/devtools/vite-plugin is the single Vite plugin that handles all mion build-time features: deepkit type reflection, pure function extraction, and AOT cache generation.

Plugin Options

import {mionPlugin} from '@mionkit/devtools/vite-plugin';

mionPlugin({
    //  type metadata for RunTypes (omit to disable)
    runTypes?: {
        tsConfig?: string;              // Path to tsconfig.json
        include?: string | string[];    // Glob patterns (default: ['**/*.tsx', '**/*.ts'])
        exclude?: string | string[];    // Glob patterns (default: 'node_modules/**')
        reflection?: 'default' | 'explicit' | 'never';
        compilerOptions?: CompilerOptions;
    },

    // Pure function extraction from client code (omit to disable)
    serverPureFunctions?: {
        clientSrcPath: string;          // Path to client package source directory
        include?: string[];             // Glob patterns (default: ['**/*.ts', '**/*.tsx'])
        exclude?: string[];             // Glob patterns (default: ['**/node_modules/**', '**/.dist/**', '**/dist/**'])
    },

    // AOT cache generation (omit to disable)
    aotCaches?: {
        startServerScript?: string;     // Server start script for full route compilation
        serverViteConfig?: string;      // Server's vite.config.ts for vite-node
        excludedFns?: string[];         // JIT function IDs to exclude
        excludedPureFns?: string[];     // Pure function names to exclude
        cache?: boolean | string;       // Disk cache: true (default), false, or custom path
    },
});

Server Configuration

The server package needs runTypes for type reflection and serverPureFunctions to receive pure functions defined in client code.

server/vite.config.ts
import {defineConfig} from 'vite';
import {resolve} from 'path';
import {mionPlugin} from '@mionkit/devtools/vite-plugin';

export default defineConfig({
    plugins: [
        mionPlugin({
            runTypes: {
                tsConfig: resolve(__dirname, 'tsconfig.json'),
            },
            // Scan client source for pureServerFn() and mapFrom() calls
            serverPureFunctions: {
                clientSrcPath: resolve(__dirname, '../client/src'),
            },
        }),
    ],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/init.ts'),
            formats: ['es'],
        },
        rollupOptions: {
            external: [/^[^./]/],
        },
    },
});

runTypes

The runTypes option enables deepkit's type compiler, which preserves TypeScript type metadata at runtime. This is required for mion's validation and serialization to work.

OptionDefaultDescription
tsConfigauto-discoveredPath to tsconfig.json
include['**/*.tsx', '**/*.ts']Files to transform
exclude'node_modules/**'Files to skip
reflectionfrom tsconfigOverride reflection mode ('default' enables for all files)
compilerOptionsfrom tsconfigAdditional TypeScript compiler options

serverPureFunctions

The serverPureFunctions option tells the plugin where to find client source code containing pureServerFn(), registerPureFnFactory(), and mapFrom() calls. The plugin scans these files, extracts the pure functions, and bundles them into a virtual module that the server imports automatically.

OptionDefaultDescription
clientSrcPathrequiredPath to the client package source directory
include['**/*.ts', '**/*.tsx']File patterns to scan
exclude['**/node_modules/**', '**/.dist/**', '**/dist/**']File patterns to skip

Client Configuration

The client package needs runTypes for type reflection and aotCaches to pre-compile JIT functions.

client/vite.config.ts
import {defineConfig} from 'vite';
import {resolve} from 'path';
import {mionPlugin} from '@mionkit/devtools/vite-plugin';

export default defineConfig({
    plugins: [
        mionPlugin({
            runTypes: {
                tsConfig: resolve(__dirname, 'tsconfig.json'),
            },
            aotCaches: {
                // Point to the server's start script for full route compilation
                startServerScript: resolve(__dirname, '../server/src/init.ts'),
                serverViteConfig: resolve(__dirname, '../server/vite.config.ts'),
            },
        }),
    ],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            formats: ['es', 'cjs'],
        },
        rollupOptions: {
            external: [/^[^./]/],
        },
    },
});

aotCaches

The aotCaches option enables AOT cache generation. The plugin runs your server start script via vite-node to capture all compiled JIT functions, pure functions, and router metadata.

OptionDefaultDescription
startServerScriptinternal default routesServer script that initializes the router
serverViteConfigauto-discoveredServer's vite.config.ts for proper transforms
excludedFns[]JIT function IDs to exclude from cache
excludedPureFns[]Pure function names to exclude from cache
cachetrueDisk cache: true uses Vite's cache dir, string for custom path, false to disable

If startServerScript is not provided, the plugin generates caches for mion's internal routes only. Your custom routes will be fetched at runtime via fetchRemoteMethodsMetadata(). For best performance, provide your server's start script to pre-cache all routes.

Set MION_AOT_FORCE=true environment variable to force AOT regeneration regardless of the disk cache.

Full Example: Monorepo Setup

A typical mion project has a server and client package:

my-app/
├── server/
│   ├── src/
│   │   ├── init.ts          # Server entry point
│   │   └── routes.ts        # Route definitions
│   ├── vite.config.ts
│   └── tsconfig.json
├── client/
│   ├── src/
│   │   └── index.ts         # Client code with pureServerFn, mapFrom
│   ├── vite.config.ts
│   └── tsconfig.json
└── package.json
import {defineConfig} from 'vite';
import {resolve} from 'path';
import {mionPlugin} from '@mionkit/devtools/vite-plugin';

export default defineConfig({
    plugins: [
        mionPlugin({
            runTypes: {
                tsConfig: resolve(__dirname, 'tsconfig.json'),
                compilerOptions: {sourceMap: true},
            },
            serverPureFunctions: {
                clientSrcPath: resolve(__dirname, '../client/src'),
            },
        }),
    ],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/init.ts'),
            formats: ['es'],
        },
        outDir: 'dist',
        rollupOptions: {
            external: [/^[^./]/],
        },
    },
});

Virtual Module Types

To get TypeScript support for virtual module imports, add the type definitions to your tsconfig.json:

tsconfig.json
{
  "compilerOptions": {
    "types": ["@mionkit/devtools/virtual-modules"]
  }
}

This provides types for all virtual modules:

// AOT caches — combined module that auto-registers all caches
import 'virtual:mion-aot/caches';

// Or import individual cache modules
import {jitFnsCache} from 'virtual:mion-aot/jit-fns';
import {pureFnsCache} from 'virtual:mion-aot/pure-fns';
import {routerCache} from 'virtual:mion-aot/router-cache';

// Server pure functions — extracted from client code
import {serverPureFnsCache} from 'virtual:mion-server-pure-fns';

HMR Support

During development, the plugin supports hot module replacement:

  • Client source changes: When files in clientSrcPath change, the plugin re-scans for pure functions and invalidates the virtual:mion-server-pure-fns module
  • Server source changes: When files near startServerScript change, the plugin regenerates AOT caches and invalidates all AOT virtual modules