Usage

Detailed guide for registering and managing scripts and styles.

Registering Scripts

$assets = $app->make(AssetManager::class);

// Basic script
$assets->script('app')
    ->src('dist/js/app.js')
    ->dependencies(['jquery']);

// Admin-only with defer
$assets->script('admin-app')
    ->src('dist/js/admin.js')
    ->dependencies(['jquery', 'wp-api'])
    ->admin()
    ->defer();

// ES Module
$assets->script('modern-app')
    ->src('dist/js/modern.js')
    ->module()
    ->inFooter();

Registering Styles

// Frontend stylesheet
$assets->style('frontend')
    ->src('dist/css/app.css')
    ->front();

// Print-only stylesheet
$assets->style('print')
    ->src('dist/css/print.css')
    ->media('print');

// Preloaded critical CSS
$assets->style('critical')
    ->src('dist/css/critical.css')
    ->preload();

Localizing Script Data

Pass PHP data to JavaScript:

$assets->script('admin-app')
    ->src('dist/js/admin.js')
    ->admin()
    ->localize('MyPluginConfig', [
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('my_nonce'),
        'restUrl' => rest_url('my-plugin/v1/'),
        'locale' => get_locale(),
    ]);

Access in JavaScript:

console.log(MyPluginConfig.ajaxUrl);
console.log(MyPluginConfig.nonce);

Inline Code

// Inline JavaScript
$assets->script('app')
    ->src('dist/js/app.js')
    ->inline('window.APP_CONFIG = ' . json_encode($config) . ';');

// Inline CSS (custom properties)
$assets->style('theme')
    ->src('dist/css/theme.css')
    ->inline(':root { --primary: ' . esc_attr($primaryColor) . '; }');

Conditional Loading

// Only load on a specific admin page
$assets->script('settings')
    ->src('dist/js/settings.js')
    ->onPage('settings_page_my-plugin');

// Only when WooCommerce is active
$assets->style('woo-integration')
    ->src('dist/css/woo.css')
    ->condition(fn() => class_exists('WooCommerce'));

// Only for logged-in users
$assets->script('dashboard')
    ->src('dist/js/dashboard.js')
    ->condition(fn() => is_user_logged_in());

Vite Integration

Development Mode (HMR)

$vite = $app->make(ViteAssetResolver::class);

// Auto-detects dev server via hot file or HTTP probe
if ($vite->isDev()) {
    // Loads from http://localhost:5173 with HMR
    $vite->enqueueEntry('src/main.js', 'my-app');
}

Production Mode

// Reads dist/.vite/manifest.json
// Enqueues hashed JS + extracted CSS + modulepreload hints
$vite->enqueueEntry('src/main.js', 'my-app', ['wp-element']);

Resolving Individual Assets

$resolved = $vite->resolve('src/main.js');
// Returns: ['url' => '...', 'css' => [...], 'imports' => [...]]

Absolute URLs

For CDN or external assets:

$assets->script('analytics')
    ->url('https://www.googletagmanager.com/gtag/js?id=GA_ID')
    ->async();