vite-plugin-flexium

Official Vite plugin for Flexium - a fine-grained reactive UI framework.

Features

• JSX Transform - Automatic configuration for Flexium's JSX
• Hot Module Replacement - Component-level HMR for fast development
• DevTools Integration - Development tools support
• Auto Imports - Optionally auto-import common primitives

Installation

npm install vite-plugin-flexium -D

Usage

// vite.config.ts
import { defineConfig } from 'vite';
import flexium from 'vite-plugin-flexium';

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

Options

interface FlexiumPluginOptions {
  // Enable JSX transform (default: true)
  jsx?: boolean;

  // Enable HMR (default: true)
  hmr?: boolean;

  // Enable DevTools (default: true in development)
  devtools?: boolean;

  // Include patterns (default: [/\.[jt]sx?$/])
  include?: (string | RegExp)[];

  // Exclude patterns (default: [/node_modules/])
  exclude?: (string | RegExp)[];

  // Auto-import Flexium primitives (default: false)
  autoImport?: boolean;
}

Examples

Basic Setup

// vite.config.ts
import { defineConfig } from 'vite';
import flexium from 'vite-plugin-flexium';

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

With Auto Imports

// vite.config.ts
import { defineConfig } from 'vite';
import flexium from 'vite-plugin-flexium';

export default defineConfig({
  plugins: [
    flexium({
      autoImport: true, // Auto-import state, effect, computed, etc.
    }),
  ],
});

TypeScript Configuration

Add to your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "flexium"
  }
}

Or use pragma comments:

/** @jsxImportSource flexium */
import { state } from 'flexium/core';

function App() {
  const [count, setCount] = state(0);
  return <button onclick={() => setCount(c => c + 1)}>{count}</button>;
}

HMR

The plugin enables HMR for Flexium components. When you save a file:

1. The module is hot-replaced
2. Signals maintain their state
3. Components re-render with updated logic

DevTools

In development mode, the plugin adds window.__FLEXIUM_DEVTOOLS__ for debugging:

// Access devtools in browser console
window.__FLEXIUM_DEVTOOLS__.signals; // Map of all signals
window.__FLEXIUM_DEVTOOLS__.effects; // Map of all effects
window.__FLEXIUM_DEVTOOLS__.components; // Map of all components

License

MIT