Tyger Plugin Prep

Tyger Plugin Prep is a Vite-specific React plugin designed to dynamically import and integrate React components into other React applications. The wrapper function receives two parameters from the host React app: React and jsxRuntime.

Features

• Built for Vite + React – It may work elsewhere, but it's optimized for Vite projects.
• ES Module Support Only – No CommonJS support at the moment.
• Lightweight & Focused – Currently developed for a specific project, but it can be expanded into a full-fledged plugin if needed.

Installation

Install via npm:

npm i tyger-plugin-prep

Usage

Configure vite.config.js

Modify your vite.config.js to include the plugin:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from 'tailwindcss';
import tygerPrep from 'tyger-plugin-prep';

export default defineConfig({
  plugins: [react(), tailwindcss(), tygerPrep()],
  build: {
    lib: {
      name: "App",
      entry: {
        app: "./src/App.tsx",
        support: "./src/Support.tsx"
      },
      formats: ["es"]
    },
  }
});

Import in the Host Project

In the host project, dynamically import the built component:

import * as  React from "react";
import * as jsxRuntime from "react/jsx-runtime";

import("path/to/app.js").then((module) => {
  setComponent(() => module.default(React, jsxRuntime));
});

This will return the App component dynamically, allowing seamless integration into the host application.

For additional support or new features, feel free to reach out!