Download the PHP package wp-spaghetti/wp-vite without Composer
On this page you can find all versions of the php package wp-spaghetti/wp-vite. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download wp-spaghetti/wp-vite
More information about wp-spaghetti/wp-vite
Files in wp-spaghetti/wp-vite
Package wp-vite
Short Description A powerful Vite integration service for WordPress with Docker support, obfuscated assets handling, cache busting, and comprehensive logging
License GPL-3.0-or-later
Homepage https://github.com/wp-spaghetti/wp-vite
Informations about the package wp-vite
Wp Vite
A powerful Vite integration service for WordPress with enhanced Docker support, obfuscated assets handling, flexible cache busting, and comprehensive logging.
Features
- Docker Compatibility: Automatic Docker environment detection with flexible server/HMR configuration
- Hot Module Replacement (HMR): Full support for Vite's HMR with configurable hosts and ports
- Obfuscated Assets Support: Built-in handling for obfuscated JavaScript and CSS files (
.obf.js,.min.obf.css) - Smart Asset Detection: Automatic file discovery with priority-based pattern matching
- Cache Busting: Timestamp-based cache busting for production assets
- Development/Production Modes: Seamless switching between Vite dev server and compiled assets
- Multiple File Extensions: Support for JS, TS, JSX, TSX, CSS, SCSS, SASS
- Subdirectory Support: Organize assets in subdirectories with automatic detection
- Extension Auto-Detection: No need to specify file extensions - Wp Vite finds the right file automatically
- Manifest Integration: Full Vite manifest.json support for optimized production builds
- Environment Management: Built-in support for WordPress constants and .env files via WP Env
- Comprehensive Logging system: PSR-3 compatible logging with WP Logger integration and optional Wonolog support
- Zero External Dependencies: Works with or without optional logging libraries, with automatic fallback to native file-based logging
Installation
Install via Composer:
Quick Start
1. Initialize Wp Vite
In your plugin or theme, initialize Wp Vite with your base paths:
2. Enqueue Assets
3. Development Mode Setup
For optimal Hot Module Replacement (HMR), add the Vite client scripts in development:
What does devScripts() do?
- Injects the Vite WebSocket client (
/@vite/client) for real-time HMR communication - Adds React Refresh support (if enabled) for component-level hot reloading
- Without this, you'll only get basic live reload instead of full HMR capabilities
Configuration
Wp Vite supports both WordPress-native define() constants and modern .env files for configuration through the integrated wp-env library. Additionally, it supports component-specific environment variables for multi-plugin/theme environments.
Component-Specific Configuration
Wp Vite automatically detects your plugin or theme name and supports component-specific environment variables, allowing independent configuration for each component.
Component Name Detection
Environment Variable Priority
- Component-specific:
{COMPONENT_NAME}_VITE_{SETTING}(highest priority) - Global:
VITE_{SETTING} - Default values
WordPress Constants (wp-config.php)
Environment File (.env)
For modern setups like Bedrock, you can use .env files:
Priority: WordPress constants take precedence over .env files, and component-specific variables take precedence over global ones.
Multi-Plugin/Theme Development
For complex WordPress installations with multiple plugins/themes:
Docker Configuration
For Docker environments, Wp Vite automatically detects the container and adjusts configuration:
Build Configuration
For advanced component-specific configuration, see Component Configuration Guide.
File Structure
Wp Vite expects the following directory structure:
Subdirectory Support
Wp Vite fully supports organizing your assets in subdirectories:
Why no file extensions? Wp Vite automatically detects the correct source file extension (.js, .ts, .jsx, .scss, etc.) and maps it to the appropriate compiled output. This makes your code cleaner and more flexible.
Asset Priority System
Wp Vite uses different file priority patterns for production and development:
Production Priority
.min.obf.js/css(minified + obfuscated).obf.js/css(obfuscated only).min.js/css(minified only).js/css(standard)
Development Priority
.js/css(standard).min.js/css(minified).obf.js/css(obfuscated).min.obf.js/css(minified + obfuscated)
API Reference
Core Methods
Vite::init(string $basePath, string $baseUrl, string $version = '1.0.0', string $componentName = '')
Initialize Wp Vite with your plugin/theme paths. This also initializes the integrated logger.
Parameters:
$basePath- Base filesystem path (plugin/theme directory)$baseUrl- Base URL (plugin/theme directory URL)$version- Plugin/theme version for cache busting$componentName- Optional component name for environment variables prefix (auto-detected if empty)
Vite::getPluginName(): string
Get the detected or explicitly set component name (plugin/theme name).
Vite::asset(string $entry): string
Get the URL for any asset. Automatically switches between dev server and production URLs.
Vite::enqueueScript(string $handle, string $entry, array $deps = [], bool $inFooter = true, array $attributes = [])
Enqueue JavaScript files with automatic existence checking and logging.
Vite::enqueueStyle(string $handle, string $entry, array $deps = [], string $media = 'all')
Enqueue CSS files with automatic existence checking and logging.
Utility Methods
Vite::isDevServer(): bool
Check if Vite dev server is running using environment-aware detection.
Vite::jsExists(string $entry): bool
Check if JavaScript asset exists with extension auto-detection.
Vite::cssExists(string $entry): bool
Check if CSS asset exists with extension auto-detection.
Vite::devScripts(): void
Output Vite client scripts for HMR (development only).
Vite::getDebugInfo(): array
Get comprehensive debug information including environment details for troubleshooting.
Returns information about:
- Component name and environment prefix
- Dev server status and URLs
- Environment detection (Docker, debug mode, etc.)
- Configuration values (server, HMR, build settings)
- Manifest loading status
Example Usage
Plugin Integration
Traditional WordPress Setup (without Bedrock)
If you're not using Bedrock or modern WordPress setups, you can configure Wp Vite using WordPress constants in wp-config.php:
Then in your plugin or theme:
Theme Integration
Docker Setup
For Docker environments, Wp Vite provides automatic detection and configuration. Your docker-compose.yml might look like:
Set your environment variables:
Logging & Debugging
Wp Vite includes comprehensive logging through the integrated WP Logger library:
Debug Information
Logging Configuration
For detailed information about log levels, log files, and advanced logging configuration, see the WP Logger documentation.
Requirements
- PHP 8.0 or higher
- WordPress 5.0 or higher
- Node.js and Vite for development
- WP Env 2.0+ for environment management
- WP Logger 2.0+ for logging service
- Optional: Wonolog for advanced logging
Changelog
Please see CHANGELOG for a detailed list of changes for each release.
We follow Semantic Versioning and use Conventional Commits to automatically generate our changelog.
Release Process
- Major versions (1.0.0 → 2.0.0): Breaking changes
- Minor versions (1.0.0 → 1.1.0): New features, backward compatible
- Patch versions (1.0.0 → 1.0.1): Bug fixes, backward compatible
All releases are automatically created when changes are pushed to the main branch, based on commit message conventions.
Contributing
For your contributions please use:
See CONTRIBUTING for detailed guidelines.
