Use NiralScript with Vite

The @niral/vite plugin lets you import a .nrs file like any other module in a Vite project. It compiles each .nrs source to the standalone ES module that nrs compile emits — exporting createInstance plus your top-level exports — and hands Vite the code and source map. Pair it with @niral/react to render the result.

niralscript (the compiler) is a dependency of the plugin; vite is a peer dependency, so the plugin adds no bundler of its own.

Install

Requires Node.js 22 or newer and Vite 5 or newer.

npm install -D @niral/vite
npm install @niral/react react react-dom

Configure Vite

Register the plugin with enforce: "pre" handled for you. Put it before your framework plugin:

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import niralscript from "@niral/vite";

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

Import a .nrs file

With the plugin registered, import the module and feed it to useNrs:

// src/App.jsx
import * as counter from "./counter.nrs";
import { useNrs } from "@niral/react";

export default function App() {
  const c = useNrs(counter, { initial: 2 });
  return <button onClick={c.increment}>{c.count} / {c.doubled}</button>;
}

Run the dev server:

npm run dev

Hot module replacement

In vite dev, the plugin injects HMR glue so editing a .nrs file swaps the compiled module in place without a full reload. Modules that use top-level await are skipped for HMR (they can't be hot-swapped safely) and trigger a normal reload instead.

Options

niralscript(options) accepts:

strictTypes   boolean   Enable NiralScript strict type checking (default false).
hmr           boolean   Inject HMR glue (default: true during "vite dev").

niralscript({ strictTypes: true });

Diagnostics

Compile errors surface as real Vite build/transform errors with the original .nrs file, line and column — for example a reactive cycle or a type error — so they appear in the terminal and the dev overlay. Fix the .nrs source and the module recompiles.

Use in React | Use in Next.js | NiralScript language