Vite Plugin React KotlinJS

A Vite plugin that enables Fast Refresh support for Kotlin/JS React applications by post-processing generated JS files.

Installation

Add the following dependency to your build.gradle.kts:

dependencies {
  jsMainImplementation(devNpm("@porotkin/vite-plugin-react-kotlinjs", "^1.0.6"))
}

Source set can be changed to suit your needs (e.g. webMainImplementation instead)

Usage

Add the plugin and official Vite React plugin to your vite.config.js:

import reactRefresh from '@porotkin/vite-plugin-react-kotlinjs'
import react from '@vitejs/plugin-react'

export default defineConfig(() => {
    return {
        plugins: [
            reactRefresh(),
            react(),
        ],
    }
})

Options

The plugin accepts the following options:

isReactFC

• Type: (code: string) => boolean

Custom function to check if the code is a React functional component.

getComponentName

• Type: (code: string) => string | undefined

Custom function to extract React component names from the code. Useful if your Kotlin/JS compiler generates different patterns.

debug

• Type: boolean

Output debug information about the transformed files.

How it works

Plugin post-processes generated Kotlin/JS files, so the official Vite React plugin can handle them.

Why @vitejs/plugin-react is not enough?

• Kotlin/JS generates named exports for components, which makes it impossible to use the default export.
• Standard React Refresh Babel plugin does not recognize the generated component variable that actually returns the React node.
• Your FC lambdas must return a React node!