Installation

Npm Package

Rvx is available as an npm package.

npm i rvx

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.

You can find all of these bundles in the npm package's dist/ directory or use one of the CDNs below:

unpkg.comjsdelivr.com

Npm Module	Human Readable	Minified	Types
rvx	rvx.js	rvx.min.js	rvx.d.ts
rvx/async	rvx.async.js	rvx.async.min.js	rvx.async.d.ts
rvx/convert	rvx.convert.js	rvx.convert.min.js	rvx.convert.d.ts
rvx/dom	rvx.dom.js	rvx.dom.min.js	rvx.dom.d.ts
rvx/element	rvx.element.js	rvx.element.min.js	rvx.element.d.ts
rvx/router	rvx.router.js	rvx.router.min.js	rvx.router.d.ts
rvx/store	rvx.store.js	rvx.store.min.js	rvx.store.d.ts
rvx/test	rvx.test.js	rvx.test.min.js	rvx.test.d.ts

Npm Module	Human Readable	Minified	Types
rvx	rvx.js	rvx.min.js	rvx.d.ts
rvx/async	rvx.async.js	rvx.async.min.js	rvx.async.d.ts
rvx/convert	rvx.convert.js	rvx.convert.min.js	rvx.convert.d.ts
rvx/dom	rvx.dom.js	rvx.dom.min.js	rvx.dom.d.ts
rvx/element	rvx.element.js	rvx.element.min.js	rvx.element.d.ts
rvx/router	rvx.router.js	rvx.router.min.js	rvx.router.d.ts
rvx/store	rvx.store.js	rvx.store.min.js	rvx.store.d.ts
rvx/test	rvx.test.js	rvx.test.min.js	rvx.test.d.ts

Note, that the bundles above depend on each other in different ways. Any additional dependencies that may be introduced in the future are considered breaking changes.

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";