Skip to content

Installation

Buildless Options

Rvx can be used without any build system by directly using one of the es module bundles listed below. Note, that these bundles don't include any JSX related code.

Modules Human Readable Minified Types
Core + Builder API rvx.js rvx.min.js rvx.d.ts
All rvx.all.js rvx.all.min.js rvx.all.d.ts

If none of these fit your needs, you can create a custom bundle.

Npm Package

Rvx is available as an npm package. 

npm i rvx

JSX

Rvx provides a react 17 and a legacy JSX runtime.

TypeScript

To use JSX with typescript, add the following options to your tsconfig: 

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

Babel

When using TypeScript, it is recommended to use the compiler options specified abvove instead.

If you are using Babel with plain JavaScript, you can use the @babel/plugin-transform-react-jsx plugin with the following babel options: 

{
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            {
                "runtime": "automatic",
                "importSource": "rvx"
            }
        ]
    ]
}

esbuild & Vite

When using TypeScript, it is recommended to use the compiler options specified abvove instead.

If you are using esbuild or vite with plain JavaScript, you can add the options below: 

// esbuild.config.mjs
import * as esbuild from "esbuild";

await esbuild.build({
    jsx: "automatic",
    jsxImportSource: "rvx",
});

// vite.config.mjs
import { defineConfig } from "vite";

export default defineConfig({
    esbuild: {
        jsx: "automatic",
        jsxImportSource: "rvx",
    },
});

Other Build Systems

Although not documented here, you can also use any other build system that supports JSX.

To use the react 17 runtime (also called "automatic runtime"), use rvx as the import source.

To use the legacy runtime, you can manually import the jsx factory and the Fragment factory or automatically inject it using your build tool: 

import { jsx, Fragment } from "rvx/jsx";

Custom Bundles

If the bundles above don't fit your needs, you can build a custom bundle that only includes the modules you need: 

git clone https://github.com/mxjp/rvx
cd rvx

npm ci
node scripts/bundle.js [...args]

# Bundle "core" and "async" into "./custom.js", "./custom.min.js" and "./custom.d.ts":
node scripts/bundle.js -m core async -o ./custom

  • --modules | -m <...modules>
    • Specify what modules to include.
    • This can be any directory or filename that exists in the src directory without file extension.
    • Default is core
  • --output | -o <path>
    • Specify the output path of the bundle without extension.
    • Default is ./dist/rvx.custom