Registry / devops / vite-plugin-react-control-statements

vite-plugin-react-control-statements

library1.0.2jsnpmunverified

A Vite plugin (v1.0.2) that transforms `<If>`, `<Choose>`, `<When>`, and `<Otherwise>` JSX components into native JavaScript ternary/conditional expressions at build time, avoiding runtime overhead. Inspired by jsx-control-statements and Svelte logic blocks. Provides type definitions via `vite-plugin-react-control-statements` and optional global types via `@types/vite-plugin-react-control-statements`. Uses regex-based transformation, which is imperfect for complex nested cases. Compatible with React, Vue, and any JSX/TSX setup in Vite. Active development with no recent updates; known issues with regex parsing.

devops

npm install vite-plugin-react-control-statements

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-REACT-

vite-plugin-react-control-statements

devopsjavascriptv1.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

✓ import { If } from 'vite-plugin-react-control-statements'

✗ import If from 'vite-plugin-react-control-statements'

Named export, not default.

Choose, When, Otherwise

✓ import { Choose, When, Otherwise } from 'vite-plugin-react-control-statements'

✗ const Choose = require('vite-plugin-react-control-statements').Choose

ESM only; no CJS support. Use named imports.

reactControlStatements (plugin function)

✓ import reactControlStatements from 'vite-plugin-react-control-statements'

✗ import { reactControlStatements } from 'vite-plugin-react-control-statements'

Default export for the plugin function. Use `import reactControlStatements from ...`.

Shows plugin setup in vite.config.ts and usage of If/Choose/When/Otherwise in a React component.

// vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import reactControlStatements from 'vite-plugin-react-control-statements'; export default defineConfig({ plugins: [react(), reactControlStatements()], }); // App.tsx import { If, Choose, When, Otherwise } from 'vite-plugin-react-control-statements'; function App() { const value = 1; return ( <div> <If condition={value > 0}> <p>Positive</p> </If> <Choose> <When condition={value === 1}><p>One</p></When> <When condition={value === 2}><p>Two</p></When> <Otherwise><p>Other</p></Otherwise> </Choose> </div> ); }

Debug

Known issues

gotchaPlugin uses regex transformation; nested JSX with same components may break.

fix

Avoid deeply nested <If> inside <If> or <When> inside <When>. Consider manual ternary for complex logic.

affects: <=1.0.2

deprecatedThe @types/vite-plugin-react-control-statements package may be needed for global type declarations.

fix

Install with `npm i -D @types/vite-plugin-react-control-statements` if you want global types without explicit imports.

affects: >=1.0.0

gotchaThe components (If, Choose, etc.) are not actual React components; they are transformed at build time. Do not expect runtime behavior like dynamic condition changes.

fix

Use real JSX conditional logic if you need dynamic condition re-evaluation.

affects: >=1.0.0

gotchaThe plugin only works with Vite; not compatible with Webpack or other bundlers.

fix

Use jsx-control-statements for Webpack projects.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'vite-plugin-react-control-statements' or its corresponding type declarations.

Missing Node.js types or incorrect module resolution.

fix

Ensure package is installed: `npm i vite-plugin-react-control-statements` and add to tsconfig.json: `"types": ["vite-plugin-react-control-statements"]`

Uncaught Error: If is not a component. It's a control statement that should be transformed by the plugin.

Using <If> without the Vite plugin active.

fix

Ensure plugin is added to vite.config.ts: `import reactControlStatements from 'vite-plugin-react-control-statements'; plugins: [react(), reactControlStatements()]`

Property 'condition' does not exist on type 'IntrinsicAttributes & ...'

TypeScript cannot find type declarations for the control statement components.

fix

Install type declarations: `npm i -D @types/vite-plugin-react-control-statements` and add `/// <reference types="vite-plugin-react-control-statements" />` in a global.d.ts file.

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/kirankunigiri/vite-plugin-react-control-statements ↗

packagevite-plugin-react-control-statements ↗

homepagehttps://github.com/kirankunigiri/vite-plugin-react-control-statements#readme ↗