Getting Started

Installation

npm install librender

Render is distributed in multiple formats—ES Module, CommonJS, IIFE and UMD.

For JSX support and Render-specific transformations, install the preset as a development dependency.

npm install babel-preset-librender --save-dev

The preset could be used directly with Babel but may require a custom loader plugin and @babel/core if the setup is Vite.

You may use a custom Vite plugin that integrates Babel into your workflow.

import { transform } from "@babel/core";
import { defineConfig, UserConfig, Plugin } from "vite";

function renderLoaderPlugin(): Plugin {
  return {
    name: "librender-jsx-transform",
    transform(code, id) {
      if (!/\.(jsx|tsx)$/.test(id)) return;

      const output = transform(code, {
        filename: id,
        presets: ["babel-preset-librender"],
      });

      return {
        code: output?.code || "",
        map: output?.map || null,
      };
    },
  };
}

Add the loader to the plugin configuration field.

export default defineConfig({
  plugins: [renderLoaderPlugin()],
  // ...
} satisfies UserConfig);

CDN installation

This is not a recommended method but Render can be installed from UNPKG. However, with this approach, there is no JSX support and build-time optimization passes.

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/index.es.js"></script>