Antonella Framework 1.9.3: React nativo en tus plugins WordPress, sin dolor de build

Antonella Framework acaba de dar un salto que no estaba en el radar de casi nadie: integración nativa de React. La versión 1.9.3 añade un módulo completo para montar React + Vite dentro de cualquier plugin WordPress hecho con el framework, sin salir de la terminal y sin tocar un enqueue a mano.

Y no, no es un parche cosmético. El PR que lo trae mete más de 2.000 líneas nuevas al script antonella. Vamos al grano de qué cambia y por qué importa.

El problema que esto resuelve

Meter React en un plugin de WordPress siempre ha sido más fricción de la que debería. Tienes que decidir un bundler, montar Webpack o Vite a mano, escribir tu propio enqueue de scripts con wp_enqueue_script, gestionar el hot reload en desarrollo, y luego resolver a mano el cambio a build de producción cuando empaquetas el plugin. Nada de esto es difícil por separado, pero es trabajo repetido en cada proyecto que nadie quiere volver a hacer.

Antonella 1.9.3 lo convierte en un comando.

Qué trae exactamente

Instalación con un comando

php antonella add react

Este comando genera todo el scaffolding: configuración de Vite, la clase Core/React.php, helpers globales, un controlador de ejemplo y un componente de ejemplo listo para usar. Instalas dependencias de Node, arrancas npm run dev y ya tienes Hot Module Replacement funcionando dentro del admin de WordPress.

Una API inspirada en Inertia.js

Aquí está la decisión de diseño más interesante: en vez de inventar un sistema propio de paso de props, Antonella copia el patrón de Inertia.js. Renderizas un componente React directamente desde un controlador PHP:

public static function dashboardPage()
{
    echo React::render('Dashboard', [
        'title' => 'Mi Dashboard',
        'stats' => [
            'posts' => wp_count_posts()->publish,
            'users' => count_users()['total_users'],
        ],
    ]);
}

Y del lado de React, el componente recibe esos datos como props normales:

export default function Dashboard({ title, stats }) {
    return (
        <div>
            <h1>{title}</h1>
            <p>Posts: {stats.posts}</p>
        </div>
    );
}

Sin configurar rutas de API, sin JSON manual, sin AJAX de por medio para lo básico. El componente se registra solo con crear el archivo dentro de resources/js/Pages/ — nada de imports manuales ni registros a mano.

Props compartidas y props diferidas

Si varios componentes de un mismo controlador necesitan los mismos datos (usuario actual, nonce, datos del sitio), el método boot() los comparte automáticamente:

public static function boot()
{
    React::share([
        'user' => [
            'name' => wp_get_current_user()->display_name,
        ],
        'nonce' => wp_create_nonce('my_action'),
    ]);
}

Y para datos costosos de calcular que no siempre hacen falta, está React::lazy(), que solo se ejecuta cuando el componente realmente se renderiza.

Multi-root y namespacing por plugin

Este es el detalle que separa un experimento de una herramienta pensada para producción: cada integración React recibe un app_key único de 8 caracteres. Eso significa que varios plugins Antonella con React pueden convivir en la misma instalación de WordPress sin pisarse los handles de script ni los contenedores del DOM. Además hay un MutationObserver que detecta y monta automáticamente contenedores React añadidos dinámicamente al DOM — útil para admin pages con contenido cargado por AJAX.

Producción sin dolor

En desarrollo, Antonella carga el cliente de Vite y el entry point directamente desde el dev server. En producción, lee el manifest.json generado por npm run build y encola los chunks hasheados vía las funciones nativas de WordPress. El cambio entre ambos modos es una línea en Config/React.php:

'app_env' => 'production', // o 'develop'

Desinstalar limpio

Si un proyecto termina no necesitando React, php antonella remove react quita todo el scaffolding: configuración, helpers, carpeta de JS, vite.config.js, node_modules y el build de producción. Los controladores y entradas en Config.php hay que limpiarlos a mano, eso sí.

Un dato que vale la pena mencionar

Esta funcionalidad no salió de nuestro propio roadmap interno: llegó como contribución externa vía pull request. Es la primera señal seria de que Antonella Framework está empezando a atraer colaboración de comunidad más allá del uso interno en CH Consulting — que es, al final, el objetivo de haberlo abierto.

Stack técnico

Para quién es esto

Si construyes plugins WordPress con interfaces de admin complejas — dashboards con estado, formularios dinámicos, widgets interactivos en frontend — esto te ahorra la parte más tediosa de meter React en el stack: todo el andamiaje de build y carga de assets. Si tu plugin es simple y no necesita interactividad real, esto no te aporta nada; sigue con Blade o PHP plano.

Cómo probarlo

composer global require cehojac/antonella-installer
antonella new mi-plugin
cd mi-plugin
php antonella add react
npm install
npm run dev

La documentación completa está en antonellaframework.com/documentacion, y el código en el repositorio de GitHub.