Vite Plugin

The @floeorg/vite-plugin package lets Vite transform .fl files during development and production builds.

Installation

npm install -D @floeorg/vite-plugin

Make sure floe is installed and available in your PATH.

Configuration

vite.config.ts

import { defineConfig } from "vite"
import floe from "@floeorg/vite-plugin"

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

Options

floe({
  // Path to the floe binary (default: "floe")
  compiler: "/usr/local/bin/floe",
})

TypeScript Setup

Add allowArbitraryExtensions and rootDirs to your tsconfig.json so TypeScript can resolve .fl imports:

{
  "compilerOptions": {
    "allowArbitraryExtensions": true,
    "rootDirs": ["./src", "./.floe/src"]
  }
}

If you use path aliases (like #/ or @/), also add .floe/ lookups to your paths:

{
  "compilerOptions": {
    "paths": {
      "#/*": ["./src/*", "./.floe/src/*"],
      "@/*": ["./src/*", "./.floe/src/*"]
    }
  }
}

The compiler generates .d.fl.ts type declarations in the .floe/ directory, and rootDirs tells TypeScript to treat src/ and .floe/src/ as a single merged directory. This lets TypeScript resolve types for imports like import { Header } from "./header.fl" automatically, without polluting the source tree with generated files.

How It Works

1. Vite encounters a .fl import
2. The plugin calls floe to compile it to TypeScript
3. The TypeScript output is passed to Vite’s normal pipeline
4. Hot Module Replacement works automatically

With React

vite.config.ts

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import floe from "@floeorg/vite-plugin"

export default defineConfig({
  plugins: [
    floe(),  // must come before React plugin
    react(),
  ],
})

File Structure

my-app/
  src/
    App.fl          # Floe component
    utils.fl        # Floe utilities
    legacy.tsx      # Existing TypeScript (works alongside)
  vite.config.ts
  package.json

Floe files and TypeScript files coexist. Adopt incrementally.