PRNext 0.1.17: herramientas de desarrollo y almacenamiento en caché persistente

#Herramientas de desarrollo dentro de tu página

El menú en el logotipo flotante PRNext le brinda acceso a la consola y a las herramientas de inspección. Los mensajes del cliente y del servidor comparten una vista que puede filtrar por fuente y nivel. Las solicitudes, rutas y mediciones de compilación lo ayudan a investigar una actualización lenta o una página que falla.

Las vistas previas de teléfonos y tabletas le dan a la aplicación las dimensiones de ventana gráfica correspondientes. Sus propias consultas de medios determinan el diseño. Puede cambiar la orientación sin recrear la sesión mostrada y desplazarse por el contenido compatible arrastrando el puntero.

Los paneles se cargan según demanda, mientras que la captura de mensajes comienza con suficiente antelación para conservar los registros de inicio. Puede mover el indicador a otra esquina o abrir las vistas previas de la consola y del dispositivo en una ventana separada.

#Dale a tu asistente el contexto del componente.

Elija Seleccionar elemento para IA y luego seleccione un elemento en la página. El inspector encuentra su ubicación en el código y puede adjuntar el archivo, la línea, el código relevante, los estilos calculados y una captura de pantalla a su solicitud. Su asistente tiene un componente identificado para ayudarlo a comprender el cambio que desea.

Conecte Codex, Cursor, Claude u otro cliente compatible utilizando la configuración MCP proporcionada por las herramientas. Una vez enviado desde el panel, el contexto está disponible para que el asistente lo recupere de su sesión de desarrollo. Copiar la configuración prepara la conexión; intercambiar contexto y verificar cambios requiere una conexión activa.

Después de realizar un cambio, el asistente puede comprobar que el navegador realmente muestra una nueva compilación. El resultado distingue una corrección observada de una verificación fallida o no concluyente. Los permisos del proyecto continúan aplicándose a lo largo de este trabajo.

#Recopila las rutas que abres

Un proyecto grande puede contener muchas páginas cuando solo usas unas pocas. PRNext compila rutas solicitadas con sus diseños, componentes de error y dependencias. Un índice inverso en Rust conecta archivos modificados a las rutas abiertas que dependen de ellos.

Si dos páginas abiertas comparten un encabezado, al editar ese encabezado se vuelven a compilar las partes afectadas de ambas páginas. Una página que no ha sido abierta puede esperar hasta su primera visita. El middleware, los controladores personalizados y las dependencias inciertas todavía utilizan una compilación completa.

Las transformaciones persistentes también evitan repetir el trabajo válido después de un reinicio. Las compilaciones de desarrollo y producción mantienen cachés separados. La reutilización depende del contenido y la configuración de compilación; una entrada faltante o no válida simplemente se vuelve a compilar. Estos cachés almacenan el trabajo del compilador, no respuestas personalizadas de la aplicación.

#Ajuste sus estilos manteniendo el estado de la página

Puede ajustar el espaciado, los colores o la tipografía alrededor de un formulario que ya haya completado. Un cambio de CSS compatible publica nuevos estilos sin reconstruir JavaScript ni reiniciar el trabajador de la aplicación. El navegador mantiene su documento y su estado React mientras los aplica.

Los archivos de hojas de estilo de cada generación permanecen inmutables, por lo que una pestaña puede terminar de cargar sus recursos sin que su contenido cambie en el camino. Un cambio en las exportaciones de los módulos CSS, Sass o el procesamiento personalizado puede afectar más dependencias y retornos al compilador completo.

#Trabajo menos repetido en el motor Rust

El enrutamiento dinámico indexado y el proxy pstart reducen el trabajo relacionado con el trabajador de la aplicación. Las conexiones HTTP aceptadas desactivan el retraso para paquetes pequeños. Las conexiones persistentes continúan admitiendo la transmisión y permiten que finalicen las solicitudes en curso.

Los activos reutilizan sus archivos gzip y Brotli validados. El índice de caché de compresión evita volver a escanear todo el directorio cada vez que se publican archivos, y el análisis de paquetes puede reutilizar tamaños comprimidos que ya se conocen.

La prerenderización de rutas de producción independientes utiliza un número limitado de trabajadores. Esto prepara varias rutas sin crear un proceso para cada página, al tiempo que preserva el aislamiento de las solicitudes, la salida determinista y el orden requerido por las páginas de error.

#Preparar al siguiente trabajador durante la compilación.

El próximo trabajador de desarrollo puede comenzar a prepararse mientras se realiza la compilación. Toma el control una vez que esté listo, después de verificaciones de preparación y una transferencia autenticada. El trabajador anterior tiene tiempo para terminar el trabajo en curso.

El reciclaje del compilador responde a la presión de la memoria, el crecimiento sostenido y un límite de sesión. Reemplaza el reinicio automático cada 24 compilaciones. Cuando la preparación temprana de los trabajadores no está disponible, se utiliza la ruta de inicio normal.

#Compatibilidad y diagnóstico.

Utilice .ts o .tsx para los módulos TypeScript que llevan una directiva de cliente o servidor React. Los límites .mts y .cts no admitidos se rechazan antes de que se active la compilación, tanto en el código fuente como después de la transformación mediante un cargador. Los ayudantes ordinarios TypeScript siguen siendo apoyados.

Para investigar un problema de actualización, prnext dev --safe utiliza compilaciones completas con compiladores nuevos. Deshabilita las transformaciones persistentes y la preparación temprana de los trabajadores mientras conserva la actualización rápida compatible. Los diagnósticos identifican qué desencadenó el trabajo: abrir una ruta, editar código, cambiar la configuración o actualizar CSS.

La compatibilidad Next.js sigue siendo parcial. Verifique las páginas, formularios, acciones del servidor e integraciones específicas de su aplicación en la compilación de producción.

#Actualiza y prueba las nuevas herramientas.

La versión 0.1.17-alpha está disponible en npm. Desde el directorio de su proyecto PRNext, actualice el paquete y reinicie el servidor de desarrollo.

npm install @thomas.f/prnext
npx --no-install prnext dev .

Abra la dirección que se muestra en la terminal, luego abra el menú en el logotipo flotante PRNext. Elija Consola del cliente para examinar los mensajes, Inspeccionar para obtener información de la página o una vista previa del teléfono o tableta para probar su diseño.

Para trabajar con su asistente, elija Seleccionar elemento para IA, seleccione un componente y abra la configuración para su cliente. Copie la configuración MCP proporcionada en su cliente, mantenga el servidor de desarrollo en ejecución y espere a que las herramientas confirmen la conexión. Describe el cambio en el panel y elige Enviar contexto a AI, luego pídele a tu asistente que use ese contexto PRNext.