PHP code example of wp-spaghetti / wp-vite

1. Go to this page and download the library: Download wp-spaghetti/wp-vite library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

wp-spaghetti / wp-vite example snippets



use WpSpaghetti\WpVite\Vite;

// For plugins
Vite::init(
    plugin_dir_path(__FILE__), // Base path
    plugin_dir_url(__FILE__),  // Base URL
    '1.0.0'                    // Version
);

// For themes
Vite::init(
    get_template_directory() . '/',
    get_template_directory_uri() . '/',
    wp_get_theme()->get('Version')
);

// Enqueue JavaScript
Vite::enqueueScript('my-app', 'js/app', ['jquery'], true);

// Enqueue CSS
Vite::enqueueStyle('my-styles', 'css/main');

// Check if assets exist
if (Vite::jsExists('js/admin')) {
    Vite::enqueueScript('admin-script', 'js/admin');
}

// In your theme's header.php or via wp_head hook
add_action('wp_head', function() {
    if (WP_DEBUG) {
        Vite::devScripts();
    }
});

// Auto-detected from path: "my-awesome-plugin"
Vite::init(
    plugin_dir_path(__FILE__), // /wp-content/plugins/my-awesome-plugin/
    plugin_dir_url(__FILE__),
    '1.0.0'
);

// Explicit component name
Vite::init(
    plugin_dir_path(__FILE__),
    plugin_dir_url(__FILE__),
    '1.0.0',
    'custom-component-name'  // Override auto-detection
);

// Global server configuration
define('VITE_SERVER_HOST', 'localhost');
define('VITE_SERVER_PORT', 3000);
define('VITE_SERVER_HTTPS', false);

// Component-specific (for plugin "my-plugin")
define('MY_PLUGIN_VITE_SERVER_PORT', 3001);
define('MY_PLUGIN_VITE_OUT_DIR', 'custom-assets');

// HMR configuration
define('VITE_HMR_HOST', 'localhost');
define('VITE_HMR_PORT', 3000);
define('VITE_HMR_CLIENT_PORT', 3000);
define('VITE_HMR_HTTPS', false);

// Feature toggles
define('VITE_DEV_SERVER_ENABLED', true);
define('VITE_CACHE_BUSTING_ENABLED', true);

// React Refresh support
define('VITE_REACT_REFRESH', true);

// These all work automatically:
Vite::enqueueScript('modal', 'js/components/modal');  // No .jsx extension needed
Vite::enqueueStyle('admin', 'css/admin/dashboard');   // Finds .scss, .sass, or .css
Vite::enqueueScript('utils', 'js/utils/helpers');     // Auto-detects .ts or .js

// Auto-detect component name from path
Vite::init(
    plugin_dir_path(__FILE__),
    plugin_dir_url(__FILE__),
    '1.0.0'
);

// Explicit component name
Vite::init(
    plugin_dir_path(__FILE__),
    plugin_dir_url(__FILE__),
    '1.0.0',
    'my-custom-plugin'
);

$componentName = Vite::getPluginName(); // Returns: "my-plugin"

$debugInfo = Vite::getDebugInfo();

// Component information
echo $debugInfo['component_name'];        // "my-plugin"
echo $debugInfo['component_env_prefix'];  // "MY_PLUGIN_VITE_"

// Environment detection
var_dump($debugInfo['is_docker']);        // true/false
var_dump($debugInfo['is_debug']);         // true/false
var_dump($debugInfo['environment_type']); // "development", "production", etc.

// Server configuration  
echo $debugInfo['server_url'];            // "http://localhost:3000"
echo $debugInfo['hmr_url'];              // "http://localhost:3000"

// Asset information
var_dump($debugInfo['dev_server_running']); // true/false
var_dump($debugInfo['manifest_loaded']);    // true/false


/*
Plugin Name: My Awesome Plugin
*/

use WpSpaghetti\WpVite\Vite;

// Initialize on plugin load
add_action('init', function() {
    Vite::init(
        plugin_dir_path(__FILE__),
        plugin_dir_url(__FILE__),
        '1.2.3'
    );
});

// Enqueue frontend assets
add_action('wp_enqueue_scripts', function() {
    Vite::enqueueScript('my-plugin-app', 'js/app', ['jquery']);
    Vite::enqueueStyle('my-plugin-styles', 'css/main');
});

// Enqueue admin assets
add_action('admin_enqueue_scripts', function() {
    if (Vite::jsExists('js/admin')) {
        Vite::enqueueScript('my-plugin-admin', 'js/admin');
    }
});

// Add dev scripts in development
add_action('wp_head', function() {
    if (WP_DEBUG) {
        Vite::devScripts();
    }
});


// In wp-config.php

// Basic Vite configuration
define('VITE_DEV_SERVER_ENABLED', true);
define('VITE_SERVER_HOST', 'localhost');
define('VITE_SERVER_PORT', 3000);

// For Docker users
define('VITE_SERVER_HOST', 'node'); // Your Docker container name
define('VITE_HMR_HOST', 'localhost'); // Public-facing host

// Enable cache busting in production
define('VITE_CACHE_BUSTING_ENABLED', true);


use WpSpaghetti\WpVite\Vite;

// Initialize
Vite::init(
    plugin_dir_path(__FILE__),
    plugin_dir_url(__FILE__),
    '1.0.0'
);

// Your assets will work automatically!
add_action('wp_enqueue_scripts', function() {
    Vite::enqueueScript('my-app', 'js/app');
    Vite::enqueueStyle('my-styles', 'css/main');
});


// In functions.php

use WpSpaghetti\WpVite\Vite;

// Initialize
Vite::init(
    get_template_directory() . '/',
    get_template_directory_uri() . '/',
    wp_get_theme()->get('Version')
);

// Enqueue theme assets
add_action('wp_enqueue_scripts', function() {
    Vite::enqueueScript('theme-main', 'js/main');
    Vite::enqueueStyle('theme-style', 'css/style');
});

// Add HMR support in development
add_action('wp_head', function() {
    if (WP_DEBUG) {
        Vite::devScripts();
    }
});

// Get detailed debug information
$debugInfo = Vite::getDebugInfo();

// Information anifest loading status
// - Docker detection
// - Asset paths and URLs