Vite Class

Vite Helper Class

---

The Vite class is a specialized utility designed to bridge the gap between GeniXCMS and the Vite asset bundling ecosystem. It enables high-performance frontend development workflows, including Hot Module Replacement (HMR) and automated production asset management.

🛠️ Configuration Defaults

Key	Default Value	Description
Dev Server	http://localhost:5173	The default URL where the Vite development server runs.
Main Entry	assets/src/main.js	The primary JavaScript file to be injected.
Style Entry	assets/src/style.scss	The root style file (SCSS/CSS) for the theme.

---

🏗️ Core Methods

static Vite::isDev()

Determines the current operational mode of the asset pipeline.

• Storage: Driven by the vite_dev_mode option in the database.
• States: Returns true if set to on, otherwise false.
• Primary Use: Used internally by client() to switch between HMR and Manifest loading.

---

static Vite::client($entry = 'assets/src/main.js')

The primary injector for your theme's head or footer. It intelligently handles asset loading based on your environment.

🔄 Development Mode (HMR)

When active, it injects the following into your HTML:

1. Vite Client: The @vite/client runtime for real-time updates.
2. Entry Point: Your source file (e.g., main.js) served directly from the dev server.

🚀 Production Mode (Manifest)

When inactive, it follows this sequence:

1. Lookup: Accesses assets/dist/manifest.json.
2. JS Injection: Loads the versioned/hashed JavaScript bundle.
3. CSS Injection: Automatically discovers and injects any associated CSS chunks mapped to that entry point.

---

static Vite::setDevServer($url)

Overrides the default development server address. Use this if you are running Vite on a custom port or within a specific container.

// Example: Custom port configuration
Vite::setDevServer('http://localhost:3000');

---

📂 Implementation in Themes

Integrating Vite into your theme requires only a single call in your header.php or footer.php:

// Load assets dynamically
Vite::client('assets/src/main.js');

---

See Also

• How to Use Vite — Step-by-step guide for setting up your first Vite theme.
• Options Class — Learn how to toggle vite_dev_mode via code.