Vite

Use the Vite plugin when your app is built with Vite. This is the recommended path because it runs the use-legend Babel transform before React compiles JSX.

Install

npm

npm add -D @usels/vite-plugin @usels/babel-plugin @babel/core

yarn

yarn add -D @usels/vite-plugin @usels/babel-plugin @babel/core

pnpm

pnpm add -D @usels/vite-plugin @usels/babel-plugin @babel/core

bun

bun add -D @usels/vite-plugin @usels/babel-plugin @babel/core

Configuration

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import useLegend from "@usels/vite-plugin";

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

Place useLegend() before react().

What It Does

The plugin runs two transforms in one pass:

Transform	Effect
autoWrap	Wraps JSX observable .get() reads with Memo boundaries
autoScope	Transforms "use scope" into useScope(...)

Write component code naturally:

function Counter() {
  "use scope";

  const count$ = observable(0);

  return <button>{count$.get()}</button>;
}

The plugin handles the scope and render boundary boilerplate.

Options

Pass options through useLegend() when you need custom transform behavior:

useLegend({
  autoWrap: {
    importSource: "@usels/core",
  },
  autoScope: {
    importSource: "@usels/core",
  },
});

Use the defaults unless your app has a custom wrapper component or import path.

For non-Vite pipelines, use Babel / Next.js.