PRNext 0.1.17 : outils de développement et caches persistants

#Vos outils de développement dans la page

Le menu du logo PRNext flottant donne accès à la console et aux outils d’inspection. Les messages du client et du serveur partagent une vue filtrable par source et par niveau. Les requêtes, les routes et les mesures de compilation aident à comprendre une actualisation lente ou une page qui échoue.

Les aperçus téléphone et tablette donnent à l’application les dimensions du viewport correspondant. Ses propres media queries déterminent le rendu. Vous pouvez changer l’orientation sans recréer la session affichée et faire défiler les contenus compatibles par glissement du pointeur.

Les panneaux se chargent à la demande, tandis que la capture des messages démarre assez tôt pour conserver les logs de lancement. Vous pouvez déplacer l’indicateur dans un autre coin ou ouvrir la console et les aperçus d’appareils dans une fenêtre séparée.

#Donnez à votre assistant le contexte du composant

Choisissez Select element for AI, puis sélectionnez un élément dans la page. L’inspecteur retrouve son emplacement dans le code et peut associer le fichier, la ligne, le code pertinent, les styles calculés et une capture d’écran à votre demande. Votre assistant dispose ainsi d’un composant identifié pour comprendre la modification souhaitée.

Connectez Codex, Cursor, Claude ou un autre client compatible avec la configuration MCP proposée par les outils. Après l’envoi depuis le panneau, l’assistant peut récupérer le contexte dans votre session de développement. Copier la configuration prépare ce lien ; l’échange de contexte et la vérification attendent une connexion effective.

Après une modification, l’assistant peut vérifier qu’une nouvelle compilation est réellement affichée dans le navigateur. Le résultat distingue une correction observée d’un contrôle en échec ou non concluant. Les permissions du projet restent applicables pendant ce travail.

#Compilez les routes que vous ouvrez

Un grand projet peut contenir beaucoup de pages alors que vous n’en utilisez que quelques-unes. PRNext compile les routes demandées avec leurs layouts, leurs composants d’erreur et leurs dépendances. Un index inverse en Rust relie les fichiers modifiés aux routes ouvertes qui en dépendent.

Si deux pages ouvertes partagent un en-tête, modifier cet en-tête actualise le travail concerné pour les deux pages. Une page qui n’a pas été ouverte peut attendre sa première consultation. Les middlewares, les handlers personnalisés et les dépendances incertaines conservent une compilation complète.

Les transformations persistantes évitent également de refaire du travail valide après un redémarrage. Le développement et le build de production gardent leurs caches distincts. La réutilisation dépend du contenu et des réglages de compilation ; une entrée absente ou invalide est simplement recompilée. Ces caches concernent le travail du compilateur, pas les réponses personnalisées de l’application.

#Ajustez vos styles en gardant l’état de la page

Vous pouvez ajuster les espacements, les couleurs ou la typographie autour d’un formulaire déjà rempli. Une modification CSS compatible publie de nouveaux styles sans reconstruire le JavaScript ni redémarrer le worker applicatif. Le navigateur conserve son document et l’état React pendant leur application.

Les fichiers de styles de chaque génération restent immuables : un onglet peut terminer le chargement de ses assets sans que leur contenu change en cours de route. Une modification d’exports CSS Modules, de Sass ou d’un traitement personnalisé peut toucher davantage de dépendances et repasse alors par le compilateur complet.

#Moins de travail répété dans le moteur Rust

Le routage dynamique indexé et le proxy pstart réduisent le travail autour du worker applicatif. Les connexions HTTP acceptées désactivent le délai des petits paquets. Les connexions persistantes continuent de prendre en charge le streaming et la fin des requêtes en cours.

Les assets réutilisent leurs fichiers gzip et Brotli validés. L’index du cache de compression évite de parcourir tout le dossier après chaque publication de fichiers, et l’analyse du bundle peut reprendre les tailles compressées déjà connues.

Le prérendu des routes de production indépendantes utilise un nombre limité de workers. Cela permet de préparer plusieurs routes sans créer un processus par page, tout en conservant l’isolation des requêtes, un résultat déterministe et l’ordre nécessaire aux pages d’erreur.

#Préparez la suite pendant la compilation

Le prochain worker de développement peut commencer à se préparer pendant que la compilation avance. Il prend la main une fois prêt, après les contrôles de disponibilité et une transmission authentifiée. Le worker précédent dispose d’un délai pour terminer les tâches en cours.

Le recyclage du compilateur suit la pression mémoire, une croissance durable et une limite de session. Il remplace le redémarrage systématique toutes les 24 compilations. Lorsque la préparation anticipée est indisponible, le démarrage normal reste utilisé.

#Compatibilité et diagnostic

Pour les modules TypeScript qui portent une directive React serveur ou client, utilisez les extensions .ts ou .tsx. Les frontières .mts et .cts non prises en charge sont refusées avant l’activation du build, dans le code source comme après transformation par un loader. Les helpers TypeScript ordinaires restent acceptés.

Pour examiner un problème d’actualisation, le mode prnext dev --safe repart de compilations complètes avec des compilateurs neufs. Il désactive les transformations persistantes et la préparation anticipée des workers, tout en conservant le Fast Refresh compatible. Les diagnostics indiquent ce qui a déclenché le travail : ouverture d’une route, modification du code, changement de configuration ou mise à jour CSS.

La compatibilité avec Next.js reste partielle. Vérifiez les pages, les formulaires, les Server Actions et les intégrations propres à votre application dans le build de production.

#Mettez à jour et essayez les nouveaux outils

La 0.1.17-alpha est disponible sur npm. Dans le dossier de votre projet PRNext, mettez le paquet à jour puis relancez le serveur de développement.

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

Ouvrez l’adresse affichée dans le terminal, puis le menu du logo PRNext flottant. Choisissez Client console pour examiner les messages, Inspect pour les informations de la page ou un aperçu Phone ou Tablet pour tester votre mise en page.

Pour travailler avec votre assistant, choisissez Select element for AI, sélectionnez un composant et ouvrez la configuration du client souhaité. Copiez les réglages MCP proposés dans votre client, gardez le serveur de développement actif et attendez la confirmation de connexion dans les outils. Décrivez la modification dans le panneau et cliquez sur Send context to AI, puis demandez à votre assistant d’utiliser ce contexte PRNext.